!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@groupdocs.examples.angular/common-components"),require("rxjs"),require("jquery"),require("@angular/platform-browser"),require("@angular/common/http"),require("@fortawesome/angular-fontawesome"),require("@fortawesome/fontawesome-svg-core"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/free-regular-svg-icons"),require("ng-click-outside"),require("@ngx-translate/core"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@groupdocs.examples.angular/comparison",["exports","@angular/core","@groupdocs.examples.angular/common-components","rxjs","jquery","@angular/platform-browser","@angular/common/http","@fortawesome/angular-fontawesome","@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@fortawesome/free-regular-svg-icons","ng-click-outside","@ngx-translate/core","@angular/forms"],t):t(((e=e||self).groupdocs=e.groupdocs||{},e.groupdocs.examples=e.groupdocs.examples||{},e.groupdocs.examples.angular=e.groupdocs.examples.angular||{},e.groupdocs.examples.angular.comparison={}),e.ng.core,e.commonComponents,e.rxjs,e.jquery,e.ng.platformBrowser,e.ng.common.http,e.angularFontawesome,e.fontawesomeSvgCore,e.freeSolidSvgIcons,e.freeRegularSvgIcons,e.ngClickOutside,e.core$1,e.ng.forms)}(this,(function(e,t,n,i,o,a,r,s,c,l,d,p,g,f){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var u=function(e,t){return(u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function h(e,t){function n(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var b=function(){function e(){}return e.Empty="empty",e.Opened="opened",e}();var m=function(){function e(e,n){this._modalService=e,this._excMessageService=n,this.active=new t.EventEmitter,this.urlForUpload=new t.EventEmitter,this.cleanPanel=new t.EventEmitter,this.state=b.Empty,this.uploadDisabled=!0}return e.prototype.ngOnInit=function(){},e.prototype.getFormatIcon=function(){return n.FileUtil.find(this.fileName,!1).icon},e.prototype.openModal=function(){this.active.emit(this.panel),this._modalService.open(n.CommonModals.BrowseFiles)},e.prototype.isEmpty=function(){return this.state===b.Empty},e.prototype.cleanFile=function(){this.active.emit(this.panel),this.cleanPanel.emit(!0)},e.prototype.uploadUrl=function(e){this.uploadDisabled||(e&&(e.startsWith("http")||e.startsWith("file")||e.startsWith("ftp"))?(this.active.emit(this.panel),this.urlForUpload.emit(e)):(this._modalService.open(n.CommonModals.ErrorMessage),this._excMessageService.changeMessage("Wrong url")))},e.prototype.checkDisabled=function(e){this.uploadDisabled=!e||0===e.length},e.prototype.ngOnChanges=function(e){this.fileName?this.state=b.Opened:this.state=b.Empty},e.decorators=[{type:t.Component,args:[{selector:"gd-add-file-panel",template:'<div class="wrapper">\n  <div class="upload-wrapper" *ngIf="isEmpty()">\n    <gd-button [icon]="\'arrow-right\'" [tooltip]="\'Upload file\'" (click)="uploadUrl(url.value)" [disabled]="uploadDisabled" ></gd-button>\n    <input class="url-input" #url (keyup)="checkDisabled(url.value)" (keyup.enter)="uploadUrl(url.value)" placeholder="https://">\n  </div>\n  <fa-icon *ngIf="!isEmpty()" [icon]="[\'fas\',getFormatIcon()]" [class]="\'ng-fa-icon fa-\' + getFormatIcon()"></fa-icon>\n  <span *ngIf="!isEmpty()" class="compare-file-name">{{fileName}}</span>\n  <gd-button [icon]="\'folder-open\'" [tooltip]="\'Open file\'" (click)="openModal()" *ngIf="isEmpty()"></gd-button>\n  <gd-button [icon]="\'times\'" [tooltip]="\'Close file\'" (click)="cleanFile()" *ngIf="!isEmpty()"></gd-button>\n</div>\n',styles:[":host{border-bottom:1px solid #ccc}:host ::ng-deep gd-button .button{font-size:14px!important}.wrapper{height:37px;background-color:#fff;display:-webkit-box;display:flex}.upload-wrapper{display:-webkit-box;display:flex;width:100%}.url-input{border:0;height:37px;width:100%;padding-left:5px;margin:0;padding-top:0;padding-bottom:0;outline:0;color:#959da5;opacity:.5;font-style:italic}.compare-file-name{color:#6e6e6e;margin:8px 8px 8px 0;width:100%;text-align:left;font-size:13px;opacity:.5}.ng-fa-icon{color:#959da5;margin:9px 15px 0 13px;font-size:14px}.compare-file{width:100%;border-right:2px solid #ddd}.wrapper .ng-fa-icon.fa-file-pdf{color:#e04e4e}.wrapper .ng-fa-icon.fa-file-word{color:#539cf0}.wrapper .ng-fa-icon.fa-file-powerpoint{color:#e29e1e}.wrapper .ng-fa-icon.fa-file-excel{color:#7cbc46}.wrapper .ng-fa-icon.fa-file-image{color:#c375ed}.wrapper .ng-fa-icon.fa-file,.wrapper .ng-fa-icon.fa-file-alt,.wrapper .ng-fa-icon.fa-file-text .fa-folder{color:#4b566c}.wrapper ::ng-deep gd-button .button fa-icon{color:#6e6e6e}::ng-deep gd-tab .gd-tab .title{font-size:13px;font-weight:700;color:#959da5;opacity:.4}::ng-deep gd-tab .gd-tab.active .title{color:#3e4e5a!important;opacity:1}"]}]}],e.ctorParameters=function(){return[{type:n.ModalService},{type:n.ExceptionMessageService}]},e.propDecorators={panel:[{type:t.Input}],active:[{type:t.Output}],urlForUpload:[{type:t.Output}],cleanPanel:[{type:t.Output}],fileName:[{type:t.Input}]},e}();var v=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return h(t,e),t}(n.PageModel);var w=function(){};var y=function(){};var x=function(){};var C=function(){};var S=function(){};var k=function(){function e(){this._activeChange=new i.BehaviorSubject(null),this.activeChange=this._activeChange.asObservable(),this._comparisonActionsMap=new Map(null),this.comparisonActionsMap=this._comparisonActionsMap,this.subject=new i.Subject}return e.prototype.setActiveChange=function(e){this._activeChange.next(e)},e.prototype.addToComparisonActions=function(e,t){this._comparisonActionsMap.set(e,t)},e.prototype.sendClickEvent=function(){this.subject.next()},e.prototype.getClickEvent=function(){return this.subject.asObservable()},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}();var F=function(){function e(e){this.actions=[{value:1,id:"Accept"},{value:2,id:"Reject"},{value:3,id:"None"}],this.changesService=e}return e.prototype.addAction=function(e,t){this.changesService.addToComparisonActions(e,t)},e.prototype.ngOnInit=function(){var e=this;this.changesService.activeChange.subscribe((function(t){return e.active=e.change.id===t}))},e.prototype.getRgbaColor=function(e){return"rgba("+e.red+","+e.green+","+e.blue+","+e.alpha+")"},e.decorators=[{type:t.Component,args:[{selector:"gd-comparison-difference",template:'<div  class="gd-difference" [ngClass]="{\'active\': active}">\n  <div [ngSwitch]="change.type" class="gd-difference-title-wrapper">\n    <ng-container *ngSwitchCase=\'1\'>\n      <fa-icon class="fas fa-pencil-alt" [icon]="[\'fas\',\'pencil-alt\']"></fa-icon>\n      <div class="gd-difference-body">\n        <div class="gd-difference-title">Text edited</div>\n        <div class="gd-differentce-comment">{{change.text}}</div>\n\n        <form>\n          <div *ngFor="let action of actions">\n            <div class="gd-difference-action">\n              \n                <input\n                  type="radio"\n                  name="action"\n                  id="action-{{ change.id }}"\n                  (input)="addAction(change.id, $event.target.value)"\n                  [value]="action.value"\n                />\n                <label for="action-{{ change.id }}"> {{ action.id }} </label>\n              \n            </div>\n          </div>\n        </form>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\'2\'>\n      <fa-icon class="fas fa-arrow-right" [icon]="[\'fas\',\'arrow-right\']"></fa-icon>\n      <div class="gd-difference-body">\n        <div class="gd-difference-title">Text added</div>\n        <div class="gd-differentce-comment">{{change.text}}</div>\n        \n        <form>\n          <div *ngFor="let action of actions">\n            <div class="gd-difference-action">\n              \n                <input\n                  type="radio"\n                  name="action"\n                  id="action-{{ change.id }}"\n                  (input)="addAction(change.id, $event.target.value)"\n                  [value]="action.value"\n                />\n                <label for="action-{{ change.id }}"> {{ action.id }} </label>\n              \n            </div>\n          </div>\n        </form>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\'3\'>\n      <fa-icon class="fas fa-times" [icon]="[\'fas\',\'trash\']"></fa-icon>\n      <div class="gd-difference-body">\n        <div class="gd-difference-title">Text deleted</div>\n        <div class="gd-differentce-comment">{{change.text}}</div>\n        \n        <form>\n          <div *ngFor="let action of actions">\n            <div class="gd-difference-action">\n              \n                <input\n                  type="radio"\n                  name="action"\n                  id="action-{{ change.id }}"\n                  (input)="addAction(change.id, $event.target.value)"\n                  [value]="action.value"\n                />\n                <label for="action-{{ change.id }}"> {{ action.id }} </label>\n              \n            </div>\n          </div>\n        </form>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\'4\'>\n      <fa-icon class="fas fa-arrow-right" [icon]="[\'fas\',\'arrow-right\']"></fa-icon>\n      <div class="gd-difference-body">\n        <div class="gd-difference-title">Text added</div>\n        <div class="gd-differentce-comment">{{change.text}}</div>\n        \n        <form>\n          <div *ngFor="let action of actions">\n            <div class="gd-difference-action">\n              \n                <input\n                  type="radio"\n                  name="action"\n                  id="action-{{ change.id }}"\n                  (input)="addAction(change.id, $event.target.value)"\n                  [value]="action.value"\n                />\n                <label for="action-{{ change.id }}"> {{ action.id }} </label>\n              \n            </div>\n          </div>\n        </form>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\'6\'>\n      <fa-icon class="fas fa-pencil-alt" [icon]="[\'fas\',\'pencil-alt\']"></fa-icon>\n      <div class="gd-difference-body">\n        <div class="gd-difference-title">Style changed</div>\n        <div class="gd-differentce-comment">\n          <ng-container *ngFor="let style of change.styleChanges" [ngSwitch]="style.changedProperty">\n            <div *ngSwitchCase="\'HighlightColor\'">\n              <span class="color" [style.backgroundColor]="getRgbaColor(style.oldValue)"></span>\n              &rarr;\n              <span class="color" [style.backgroundColor]="getRgbaColor(style.newValue)"></span>\n              <span class="property">Highlight Color</span>\n            </div>\n            <div *ngSwitchCase="\'Color\'">\n              <span class="color" [style.backgroundColor]="getRgbaColor(style.oldValue)"></span>\n              &rarr;\n              <span class="color" [style.backgroundColor]="getRgbaColor(style.newValue)"></span>\n              <span class="property">Color</span>\n            </div>\n            <div *ngSwitchCase="\'Size\'">\n              {{style.oldValue}} &rarr; {{style.newValue}}\n              <span class="property">Font size</span>\n            </div>\n            <div *ngSwitchCase="\'Bold\'">\n              <span [style.fontWeight]="style.oldValue ? \'bold\' : \'\'">{{change.text}}</span> &rarr; <span [style.fontWeight]="style.newValue ? \'bold\' : \'\'">{{change.text}}</span>\n              <span class="property">Bold</span>\n            </div>\n            <div *ngSwitchCase="\'Italic\'">\n              <span [style.fontStyle]="style.oldValue ? \'italic\' : \'\'">{{change.text}}</span> &rarr; <span [style.fontStyle]="style.newValue ? \'italic\' : \'\'">{{change.text}}</span>\n              <span class="property">Italic</span>\n            </div>\n            <div *ngSwitchCase="\'cS\'">\n              <span [style.textDecoration]="style.oldValue === \'SINGLE\' ? \'underline\' : \'\'">{{change.text}}</span> &rarr; <span [style.textDecoration]="style.newValue === \'SINGLE\' ? \'underline\' : \'\'">{{change.text}}</span>\n              <span class="property">Underline</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      \n      <form>\n          <div *ngFor="let action of actions">\n            <div class="gd-difference-action">\n              \n                <input\n                  type="radio"\n                  name="action"\n                  id="action-{{ change.id }}"\n                  (input)="addAction(change.id, $event.target.value)"\n                  [value]="action.value"\n                />\n                <label for="action-{{ change.id }}"> {{ action.id }} </label>\n              \n            </div>\n          </div>\n        </form>\n    </ng-container>\n    <div class="gd-difference-page">Page {{change.pageInfo.pageNumber + 1}}</div>\n  </div>\n</div>\n',styles:[".gd-difference{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;border-bottom:1px solid #eee;cursor:pointer}.gd-difference.active{background-color:#f2f2f2}.gd-difference:hover{background-color:#e5e5e5}.gd-difference .gd-difference-action{white-space:nowrap;color:#222e35;font-size:13px;font-weight:700;padding-top:5px}.gd-difference .gd-difference-title-wrapper{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;align-content:stretch;padding:14px 21px 17px 24px}.gd-difference .gd-difference-title-wrapper fa-icon{font-size:14px}.gd-difference .gd-difference-title-wrapper .fa-arrow-right{color:#16b901}.gd-difference .gd-difference-title-wrapper .fa-pencil-alt{color:#ced600}.gd-difference .gd-difference-title-wrapper .fa-times{color:#b96401}.gd-difference .gd-difference-title-wrapper .gd-difference-body{width:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding-left:24.6px}.gd-difference .gd-difference-title-wrapper .gd-difference-body .gd-difference-title{color:#222e35;font-size:13px;font-weight:700}.gd-difference .gd-difference-title-wrapper .gd-difference-body .gd-differentce-comment{color:#959da5;font-size:13px;padding-top:10px;overflow:hidden;text-overflow:ellipsis}.gd-difference .gd-difference-title-wrapper .gd-difference-body .gd-differentce-comment .color{vertical-align:text-bottom;width:14px;height:14px;display:inline-block;border:1px solid #ccc;border-radius:100%}.gd-difference .gd-difference-title-wrapper .gd-difference-body .gd-differentce-comment .property{padding-left:1em}.gd-difference .gd-difference-title-wrapper .gd-difference-page{color:rgba(149,157,165,.48);font-size:11px;white-space:nowrap}"]}]}],e.ctorParameters=function(){return[{type:k}]},e.propDecorators={change:[{type:t.Input}]},e}();var P=function(){function e(e){this.changesService=e}return e.prototype.ngOnInit=function(){var e=this;this.changesService.activeChange.subscribe((function(t){return e.active=e.change.id===t}))},e.prototype.close=function(e){this.changesService.setActiveChange(null)},e.prototype.highlight=function(e){this.changesService.setActiveChange(e)},e.decorators=[{type:t.Component,args:[{selector:"gd-difference-highlight",template:'<div\n  class="gd-difference-{{change.type}} highlight-difference"\n  (clickOutside)="close($event)"\n  [clickOutsideEnabled]="active"\n  (click)="highlight(change.id)"\n  [ngClass]="{\'active\': active}"\n  [ngStyle]="{\n    width: change.normalized.width + \'%\',\n    height: change.normalized.height + \'%\',\n    left: change.normalized.x + \'%\',\n    top: change.normalized.y + \'%\'\n  }"\n  data-id="{{change.id}}">\n\n</div>\n\n',styles:[".highlight-difference{position:absolute;cursor:pointer;z-index:1}.gd-difference.active,.highlight-difference.active{box-shadow:0 0 0 9999px rgba(0,0,0,.5);z-index:999}.gd-difference-1{background-color:rgba(0,122,255,.4)}.gd-difference-2,.gd-difference-4{background-color:rgba(46,237,0,.4)}.gd-difference-3{background-color:rgba(237,0,0,.4)}.gd-difference-6{background-color:rgba(215,224,0,.4)}"]}]}],e.ctorParameters=function(){return[{type:k}]},e.propDecorators={change:[{type:t.Input}],active:[{type:t.Input}]},e}();var I=function(){function e(e,t){this.changes=[],this.changesService=e,this.navigateService=t}return e.prototype.ngOnInit=function(){},e.prototype.newChanges=function(e){for(var t=[],n=[],i=0;i<e.length;i++)t.push(e[i].id);for(i=0;i<t.length;i++)void 0===this.changesService.comparisonActionsMap.get(t[i])?n.push(3):n.push(this.changesService.comparisonActionsMap.get(t[i]));this.changesService.comparisonActionsList=n,this.changesService.sendClickEvent()},e.prototype.highlightDifference=function(e,t,n){n.stopPropagation(),this.changesService.setActiveChange(e),this.navigateService.navigateTo(t+1)},e.decorators=[{type:t.Component,args:[{selector:"gd-differences",template:'<div *ngFor="let change of changes; let i = index" data-id="{{i}}" (click)="highlightDifference(change.id,change.pageInfo.pageNumber,$event)">\n  <gd-comparison-difference [change]="change"></gd-comparison-difference>\n</div>\n<gd-button [icon]="\'play\'" [tooltip]="\'Compare with new changes\'" (click)="newChanges(changes)">\n</gd-button>\n\n',styles:[""]}]}],e.ctorParameters=function(){return[{type:k},{type:n.NavigateService}]},e.propDecorators={changes:[{type:t.Input}]},e}();var _=function(e){function i(t,n,i,o,a){var r=e.call(this,t,n,o,a)||this;return r.changesService=i,r}return h(i,e),i.prototype.close=function(){this.changesService.setActiveChange(null)},i.prototype.ngOnInit=function(){},i.decorators=[{type:t.Component,args:[{selector:"gd-result-document",template:'<div class="wait" *ngIf="wait">Please wait...</div>\n<div id="document" class="document">\n  <div class="panzoom">\n    <div [ngClass]="\'page\'" *ngFor="let page of file?.pages"\n         [style.height]="getDimensionWithUnit(page.height, page.number)"\n         [style.width]="getDimensionWithUnit(page.width, page.number)"\n         gdRotation [angle]="page.angle" [isHtmlMode]="mode" [width]="page.width" [height]="page.height">\n      <gd-page [number]="page.number" [data]="page.data" [isHtml]="mode" [angle]="page.angle"\n               [width]="page.width" [height]="page.height" [editable]="page.editable"></gd-page>\n      <div class="highlights">\n        <gd-difference-highlight\n          *ngFor="let change of page?.changes"\n          [change]="change">\n        </gd-difference-highlight>\n      </div>\n    </div>\n  </div>\n</div>\n',providers:[n.ZoomService],viewProviders:[n.ZoomDirective],styles:[":host{overflow:scroll}.document{background-color:#e7e7e7;width:100%;height:100%;-webkit-transition:.4s;transition:.4s;padding:0;margin:0;position:relative}.page{position:relative;display:inline-block;background-color:#fff;margin:20px;box-shadow:0 3px 6px rgba(0,0,0,.16);-webkit-transition:.3s;transition:.3s}.wait{position:absolute;top:55px;left:Calc(30%)}.panzoom{-webkit-transform:none;transform:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;flex-wrap:wrap}.gd-zoomed{margin:10px 98px}.highlights{position:absolute;top:0;left:0;bottom:0;right:0}@media (max-width:1037px){.panzoom{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.page{min-width:unset!important;min-height:unset!important;margin:5px 0}}"]}]}],i.ctorParameters=function(){return[{type:t.ElementRef},{type:n.ZoomService},{type:k},{type:n.WindowService},{type:n.NavigateService}]},i}(n.DocumentComponent);var A=function(){function e(e,n){this._uploadService=e,this._modalService=n,this.active=new t.EventEmitter,this.showUploadFile=!1}return e.prototype.ngOnInit=function(){},e.prototype.openModal=function(){this.active.emit(this.panel),this._modalService.open(n.CommonModals.BrowseFiles)},e.prototype.dropped=function(e){e&&(this.active.emit(this.panel),this.showUploadFile=!1)},e.decorators=[{type:t.Component,args:[{selector:"gd-upload-file-panel",template:'<div class="wrapper gd-drag-n-drop-wrap" gdDnd (dropped)="dropped($event)" (opening)="showUploadFile=$event" (click)="openModal()">\n  <div class="init-state-wrapper">\n    <fa-icon class="icon" [icon]="[\'fas\', \'folder-open\']"></fa-icon>\n    <span class="start">\n        Click <fa-icon [icon]="[\'fas\',\'folder-open\']"></fa-icon> to open file<br>\n        Or drop file here\n    </span>\n  </div>\n  <div *ngIf="showUploadFile" class="init-state-dnd-wrapper">\n    <fa-icon  class="icon" [icon]="[\'fas\',\'cloud-download-alt\']" aria-hidden="true"></fa-icon>\n    <span class="text">Drop file here to upload</span>\n  </div>\n</div>\n',styles:[":host{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;align-content:center;height:100%;border-bottom:1px solid #ccc}.wrapper{color:#959da5;background-color:#e7e7e7;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.icon{font-size:65px;margin-bottom:43px;display:-webkit-box;display:flex;color:#959da5}.start{font-size:15px;text-align:center;color:#959da5}.gd-drag-n-drop-wrap.active{background-color:#fff;position:fixed;top:60px;width:50%;background:rgba(255,255,255,.8)}.gd-drag-n-drop-wrap.active .init-state-wrapper{position:absolute;opacity:.2;top:unset;margin-top:-11px}.gd-drag-n-drop-wrap.active .init-state-dnd-wrapper{top:0;z-index:999;margin-top:-11px}.gd-drag-n-drop-wrap.active .init-state-dnd-wrapper .icon{width:113px;height:90px;font-size:90px;color:#3e4e5a;margin-bottom:30px}.gd-drag-n-drop-wrap.active .text{color:#6e6e6e;font-size:14px}.init-state-dnd-wrapper,.init-state-wrapper{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:250px;height:250px;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.init-state-wrapper{top:-30px;position:relative}"]}]}],e.ctorParameters=function(){return[{type:n.UploadFilesService},{type:n.ModalService}]},e.propDecorators={panel:[{type:t.Input}],active:[{type:t.Output}]},e}();var T=function(){};var D=function(){function e(e,t){this._http=e,this._config=t,this._comparisonConfig=new i.BehaviorSubject(new T),this._updatedConfig=this._comparisonConfig.asObservable()}return Object.defineProperty(e.prototype,"updatedConfig",{get:function(){return this._updatedConfig},enumerable:!0,configurable:!0}),e.prototype.load=function(){var e=this;return new Promise((function(t,i){var o=e._config.getConfigEndpoint(n.Api.COMPARISON_APP);e._http.get(o,n.Api.httpOptionsJson).toPromise().then((function(n){var i=n;e._comparisonConfig.next(i),t()})).catch((function(e){i("Could not load comparison config: "+JSON.stringify(e))}))}))},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:r.HttpClient},{type:n.ConfigService}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(r.HttpClient),t.ɵɵinject(n.ConfigService))},token:e,providedIn:"root"}),e}();var E=function(){function e(e,t){this._http=e,this._config=t}return e.prototype.loadFiles=function(e){return this._http.post(this._config.getComparisonApiEndpoint()+n.Api.LOAD_FILE_TREE,{path:e},n.Api.httpOptionsJson)},e.prototype.getFormats=function(){return this._http.get(this._config.getComparisonApiEndpoint()+n.Api.LOAD_FORMATS,n.Api.httpOptionsJson)},e.prototype.loadFile=function(e){return this._http.post(this._config.getComparisonApiEndpoint()+n.Api.LOAD_DOCUMENT_DESCRIPTION,e,n.Api.httpOptionsJson)},e.prototype.upload=function(e,t,i){var o=new FormData;return o.append("file",e),o.append("rewrite",String(i)),t&&o.append("url",t),this._http.post(this._config.getComparisonApiEndpoint()+n.Api.UPLOAD_DOCUMENTS,o)},e.prototype.save=function(e){return this._http.post(this._config.getComparisonApiEndpoint()+n.Api.SAVE_FILE,e,n.Api.httpOptionsJson)},e.prototype.getDownloadUrl=function(e){return this._config.getComparisonApiEndpoint()+n.Api.DOWNLOAD_DOCUMENTS+"/?guid="+e.guid},e.prototype.loadPage=function(e,t){return this._http.post(this._config.getComparisonApiEndpoint()+n.Api.LOAD_DOCUMENT_PAGE,{guid:e.guid,password:e.password,page:t},n.Api.httpOptionsJson)},e.prototype.compare=function(e){return this._http.post(this._config.getComparisonApiEndpoint()+n.Api.COMPARE_FILES,{guids:e},n.Api.httpOptionsJson)},e.prototype.changes=function(e,t){return this._http.post(this._config.getComparisonApiEndpoint()+"/changes",{guids:e,changes:t},n.Api.httpOptionsJson)},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:r.HttpClient},{type:n.ConfigService}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(r.HttpClient),t.ɵɵinject(n.ConfigService))},token:e,providedIn:"root"}),e}();var O=function(){function e(){}return e.FIRST="first",e.SECOND="second",e}();var N=function(){this.active=!1};var M=function(){function e(e,t,i,o,a,r,s,c,l){var d=this;this._comparisonService=e,this.configService=t,this._differencesService=i,this._modalService=r,this._tabActivatorService=s,this._elementRef=c,this.files=[],this.browseFilesModal=n.CommonModals.BrowseFiles,this.credentials=new Map,this.file=new Map,this.firstFile=void 0,this.secondFile=void 0,this.first=O.FIRST,this.second=O.SECOND,this.firstFileName=void 0,this.secondFileName=void 0,this.loadingFirstPanel=!1,this.loadingSecondPanel=!1,this.countPages=0,this.filesTab="files",this.resultTab="result",this.activeTab=this.filesTab,this.resultTabDisabled=!0,t.updatedConfig.subscribe((function(e){d.comparisonConfig=e})),this.clickEventSubscription=this._differencesService.getClickEvent().subscribe((function(){d.changes()})),a.checkPreload.subscribe((function(e){0!==d.comparisonConfig.preloadResultPageCount&&(d.checkPreload(d.first,e),d.checkPreload(d.second,e))})),o.uploadsChange.subscribe((function(e){var t=d.activePanel;if(d.setLoading(t,!0),e){var n=void 0;for(n=0;n<e.length;n++)d._comparisonService.upload(e.item(n),"",d.rewriteConfig).subscribe((function(e){d.getFile(e.guid,"",t),d.selectDir("")}))}})),s.activeTabChange.subscribe((function(e){d.activeTab=e})),l.passChange.subscribe((function(e){var t="";d.credentials.get(d.first)?t=d.credentials.get(d.first).guid:d.credentials.get(d.second)&&(t=d.credentials.get(d.second).guid),d.selectFile(t,e,n.CommonModals.PasswordRequired,d.activePanel)}))}return e.prototype.ngOnInit=function(){if(this.firstFile&&this.secondFile)this.compareFiles();else if(window.location.search){var e=new URLSearchParams(window.location.search);this.firstFile=e.get(O.FIRST),this.secondFile=e.get(O.SECOND),this.firstFile&&this.secondFile&&this.compareFiles()}},e.prototype.compareFiles=function(){var e=this,t=this.selectFirstDefaultFile(this.firstFile,""),n=this.selectSecondDefaultFile(this.secondFile,"");i.forkJoin([t,n]).subscribe((function(){e.compare()}))},Object.defineProperty(e.prototype,"uploadConfig",{get:function(){return!this.comparisonConfig||this.comparisonConfig.upload},enumerable:!0,configurable:!0}),e.prototype.setLoading=function(e,t){e===this.first?this.loadingFirstPanel=t:this.loadingSecondPanel=t},Object.defineProperty(e.prototype,"rewriteConfig",{get:function(){return!this.comparisonConfig||this.comparisonConfig.rewrite},enumerable:!0,configurable:!0}),e.prototype.selectDir=function(e){var t=this;this._comparisonService.loadFiles(e).subscribe((function(e){var n;t.credentials.get(t.first)?n=t.credentials.get(t.first).guid.split(".").pop():t.credentials.get(t.second)&&(n=t.credentials.get(t.second).guid.split(".").pop()),n&&(e=e.filter((function(e){return e.directory||e.guid.split(".").pop()===n}))),t.files=e||[]}))},e.prototype.selectFirstDefaultFile=function(e,t){return this.setLoading(O.FIRST,!0),this.getFile(e,t,O.FIRST)},e.prototype.selectSecondDefaultFile=function(e,t){return this.setLoading(O.SECOND,!0),this.getFile(e,t,O.SECOND)},e.prototype.selectFile=function(e,t,n,i){this.setLoading(i,!0),this.getFile(e,t,i),this.selectDir(""),this._modalService.close(n),this.clearData(i)},e.prototype.getFile=function(e,t,n){var i=this,o={guid:e,password:t};this.credentials.set(n,o);var a=this._comparisonService.loadFile(o);return a.subscribe((function(e){if(i.file.set(n,e),e){var t=i.comparisonConfig.preloadResultPageCount;i.countPages=e.pages?e.pages.length:0,t>0&&i.preloadPages(n,1,t>i.countPages?i.countPages:t)}i.updateFileNames(),i.setLoading(n,!1)})),a},e.prototype.clearFile=function(e){this.clearData(e),this.credentials.delete(e),this.result=null,this.resultTabDisabled=!0,this._tabActivatorService.changeActiveTab(this.filesTab)},e.prototype.clearData=function(e){this.file&&this.file.size&&(this.file.delete(e),e===this.first?this.firstFileName=void 0:this.secondFileName=void 0)},e.prototype.preloadPages=function(e,t,n){for(var i=this,o=function(t){a._comparisonService.loadPage(a.credentials.get(e),t).subscribe((function(n){i.file.get(e).pages[t-1]=n}))},a=this,r=t;r<=n;r++)o(r)},e.prototype.upload=function(e){var t=this,n=this.activePanel;this._comparisonService.upload(null,e,this.rewriteConfig).subscribe((function(e){t.getFile(e.guid,"",n),t.selectDir("")}))},e.prototype.updateFileNames=function(){this.firstFileName=this.getFirstFileName(),this.secondFileName=this.getSecondFileName()},e.prototype.getSecondFileName=function(){var e=this.credentials?this.credentials.get(this.second):void 0;return e?e.guid.replace(/^.*[\\\/]/,""):""},e.prototype.getFirstFileName=function(){var e=this.credentials?this.credentials.get(this.first):void 0;return e?e.guid.replace(/^.*[\\\/]/,""):""},e.prototype.checkPreload=function(e,t){if(this.file.get(e))for(var n=t;n<t+2;n++)n>0&&n<=this.countPages&&!this.file.get(e).pages[n-1].data&&this.preloadPages(e,n,n)},e.prototype.changes=function(){var e=this;if(2===this.credentials.size){this.resultTabDisabled=!1;var t=[];t.push(this.credentials.get(this.first)),t.push(this.credentials.get(this.second));var n=[];this._differencesService.comparisonActionsList.length&&(n=this._differencesService.comparisonActionsList),this._comparisonService.changes(t,n).subscribe((function(t){e.result=t;var n=e.result.changes.find((function(e){return 0===e.pageInfo.pageNumber}));e.result.changes.forEach((function(t){t.id=e.generateRandomInteger();var i=n?t.pageInfo.pageNumber:t.pageInfo.pageNumber-1;t.pageInfo.pageNumber=n?t.pageInfo.pageNumber:t.pageInfo.pageNumber-1,e.result.pages[i].changes||(e.result.pages[i].changes=[]),e.result.pages[i].changes.push(t),t.normalized={x:100*e.pxToPt(t.box.x)/t.pageInfo.width,y:100*e.pxToPt(t.box.y)/t.pageInfo.height,width:100*e.pxToPt(t.box.width)/t.pageInfo.width,height:100*e.pxToPt(t.box.height)/t.pageInfo.height}}))}),(function(t){e.resultTabDisabled=!0,e._tabActivatorService.changeActiveTab(e.filesTab)})),this._tabActivatorService.changeActiveTab(this.resultTab)}},e.prototype.compare=function(){var e=this;if(2===this.credentials.size){this.resultTabDisabled=!1;var t=[];t.push(this.credentials.get(this.first)),t.push(this.credentials.get(this.second)),this._comparisonService.compare(t).subscribe((function(t){e.result=t;var n=e.result.changes.find((function(e){return 0===e.pageInfo.pageNumber}));e.result.changes.forEach((function(t){t.id=e.generateRandomInteger();var i=n?t.pageInfo.pageNumber:t.pageInfo.pageNumber-1;t.pageInfo.pageNumber=n?t.pageInfo.pageNumber:t.pageInfo.pageNumber-1,e.result.pages[i].changes||(e.result.pages[i].changes=[]),e.result.pages[i].changes.push(t),t.normalized={x:100*e.pxToPt(t.box.x)/t.pageInfo.width,y:100*e.pxToPt(t.box.y)/t.pageInfo.height,width:100*e.pxToPt(t.box.width)/t.pageInfo.width,height:100*e.pxToPt(t.box.height)/t.pageInfo.height}}))}),(function(t){e.resultTabDisabled=!0,e._tabActivatorService.changeActiveTab(e.filesTab)})),this._tabActivatorService.changeActiveTab(this.resultTab)}},e.prototype.pxToPt=function(e){return 72*e/96},e.prototype.generateRandomInteger=function(){function e(e){var t=(Math.random().toString(16)+"000000000").substr(2,8);return e?"-"+t.substr(0,4)+"-"+t.substr(4,4):t}return e(null)+e(!0)+e(!0)+e(null)},e.prototype.download=function(){if(this.result){var e={guid:this.result.guid,password:""};window.location.assign(this._comparisonService.getDownloadUrl(e))}},e.prototype.hideSidePanel=function(e){this.activeTab=e?this.filesTab:this.resultTab,this._tabActivatorService.changeActiveTab(this.filesTab)},e.decorators=[{type:t.Component,args:[{selector:"gd-comparison",template:'\x3c!--<gd-loading-mask></gd-loading-mask>--\x3e\n<div class="wrapper">\n  <div class="row">\n    <div class="column">\n      <div class="top-panel">\n        <gd-logo [logo]="\'comparison\'" icon="copy"></gd-logo>\n        <gd-top-toolbar class="toolbar-panel">\n          <gd-button [icon]="\'play\'" [tooltip]="\'Compare\'" [disabled]="!file.get(first) || !file.get(second)"\n                     (click)="compare()"></gd-button>\n          <gd-button [icon]="\'download\'" [tooltip]="\'Download\'" [disabled]="!result" (click)="download()"></gd-button>\n          <div class="tabs-wrapper">\n            <div class="tabs">\n              <gd-tabs>\n                <gd-tab [id]="filesTab" tabTitle="Documents" [icon]="\'copy\'" [active]="true" [content]="false">\n                </gd-tab>\n                <gd-tab [id]="resultTab" tabTitle="Result" [icon]="\'poll\'" [disabled]="resultTabDisabled" [content]="false">\n                </gd-tab>\n              </gd-tabs>\n            </div>\n          </div>\n        </gd-top-toolbar>\n      </div>\n      <div class="files-panel" *ngIf="activeTab === filesTab">\n        <div class="upload-compare-file">\n          <gd-add-file-panel class="compare-file"\n                             [fileName]="firstFileName"\n                             [panel]="first"\n                             (active)="activePanel = $event"\n                             (urlForUpload)="upload($event)"\n                             (cleanPanel)="clearFile(first)">\n          </gd-add-file-panel>\n          <gd-upload-file-panel\n                                [panel]="first"\n                                (active)="activePanel = $event"\n                                *ngIf="!firstFileName && !loadingFirstPanel">\n          </gd-upload-file-panel>\n          <div *ngIf="loadingFirstPanel" class="loader">\n            <fa-icon [icon]="[\'fas\',\'circle-notch\']" [spin]="true"></fa-icon> &nbsp;\n            <span>Loading... Please wait.</span>\n          </div>\n          <gd-document class="gd-document"\n                       *ngIf="file.get(first)"\n                       [file]="file.get(first)"\n                       [mode]="false"\n                       [preloadPageCount]="comparisonConfig?.preloadResultPageCount" gdRenderPrint\n                       [htmlMode]="false"\n                       gdScrollable>\n          </gd-document>\n        </div>\n        <div class="upload-compare-file">\n          <gd-add-file-panel class="compare-file"\n                             [fileName]="secondFileName"\n                             [panel]="second"\n                             (active)="activePanel = $event"\n                             (urlForUpload)="upload($event)"\n                             (cleanPanel)="clearFile(second)">\n          </gd-add-file-panel>\n          <gd-upload-file-panel [panel]="second"\n                                (active)="activePanel = $event"\n                                *ngIf="!secondFileName && !loadingSecondPanel">\n          </gd-upload-file-panel>\n          <div *ngIf="loadingSecondPanel" class="loader">\n            <fa-icon [icon]="[\'fas\',\'circle-notch\']" [spin]="true"></fa-icon> &nbsp;\n            <span>Loading... Please wait.</span>\n          </div>\n          <gd-document class="gd-document"\n                       *ngIf="file.get(second)"\n                       [file]="file.get(second)"\n                       [mode]="false"\n                       [preloadPageCount]="comparisonConfig?.preloadResultPageCount" gdRenderPrint\n                       [htmlMode]="false"\n                       gdScrollable>\n          </gd-document>\n        </div>\n      </div>\n      <div class="result-panel" *ngIf="activeTab === resultTab">\n        <div  class="loader" *ngIf="!result">\n          <fa-icon [icon]="[\'fas\',\'circle-notch\']" [spin]="true"></fa-icon> &nbsp;\n          <span>Loading... Please wait.</span>\n        </div>\n        <gd-result-document\n          class="gd-document"\n          *ngIf="result"\n          [file]="result"\n          [mode]="false"\n          [preloadPageCount]="comparisonConfig?.preloadResultPageCount"\n          gdRenderPrint\n          [htmlMode]="false"\n          gdScrollable>\n        </gd-result-document>\n      </div>\n    </div>\n    <gd-side-panel (hideSidePanel)="hideSidePanel($event)"\n                   *ngIf="result && activeTab === resultTab"\n                   [title]="\'Differences\'"\n                   [saveable]="false"\n                   [icon]="\'info-circle\'">\n      <gd-differences\n        [changes]="result.changes">\n      </gd-differences>\n    </gd-side-panel>\n  </div>\n  <gd-browse-files-modal (urlForUpload)="upload($event)"\n                         [files]="files"\n                         (selectedDirectory)="selectDir($event)"\n                         (selectedFileGuid)="selectFile($event, null, browseFilesModal, activePanel)"\n                         [uploadConfig]="uploadConfig">\n  </gd-browse-files-modal>\n  <gd-password-required></gd-password-required>\n  <gd-error-modal></gd-error-modal>\n</div>\n',styles:["@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap);:host *{font-family:'Open Sans',Arial,Helvetica,sans-serif}::ng-deep .tools .button{color:#fff!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column}::ng-deep .tools .button.inactive{color:#959da5!important}::ng-deep .tools .icon-button{margin:0 0 0 7px!important}::ng-deep .compare-file .icon-button{margin:0!important}::ng-deep .compare-file .icon-button .text{padding:0!important}.wrapper{-webkit-box-align:stretch;align-items:stretch;height:100%;width:100%;position:fixed;top:0;bottom:0;left:0;right:0}.loader{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;height:100%}.upload-compare-file{height:100%;width:50%;border-right:1px solid #ccc;display:-webkit-box;display:flex;align-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;text-align:center;-webkit-box-flex:0;flex-grow:0}.open-file-panel{display:-webkit-box;display:flex;width:100%}.files-panel{background-color:#e7e7e7;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;width:100%;height:100%}.result-panel{background-color:#e7e7e7;width:100%;height:100%;display:-webkit-box;display:flex;align-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}.doc-panel{display:-webkit-box;display:flex;height:inherit}.gd-document{width:100%;height:100%}.top-panel{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%}.toolbar-panel{background-color:#3e4e5a;width:100%}.row{display:-webkit-box;display:flex;height:inherit}.column{width:100%}.tabs-wrapper{display:-webkit-box;display:flex;justify-self:flex-end;align-self:flex-end;width:100%;-webkit-box-pack:end;justify-content:flex-end}.tabs{display:-webkit-box;display:flex;-webkit-box-align:end;align-items:flex-end;-webkit-box-pack:end;justify-content:flex-end}::ng-deep .button.brand fa-icon{color:#fff!important}@media (max-width:1037px){.files-panel{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;height:calc(100% - 60px)}.files-panel .upload-compare-file{width:100%;height:50%;border-bottom:1px solid #ccc}::ng-deep .gd-side-panel-wrapper{height:50%!important;top:inherit!important;bottom:0!important}::ng-deep .tools gd-button:nth-child(1)>.icon-button{margin:0 0 0 10px!important}::ng-deep .tools .icon-button{height:60px!important;width:60px}::ng-deep .tabs-wrapper .gd-tab .icon{font-size:22px!important}}"]}]}],e.ctorParameters=function(){return[{type:E},{type:D},{type:k},{type:n.UploadFilesService},{type:n.PagePreloadService},{type:n.ModalService},{type:n.TabActivatorService},{type:t.ElementRef},{type:n.PasswordService}]},e}();function R(e){return function(){return e.load()}}function j(e){return new n.LoadingMaskInterceptorService(e)}var z=function(){function e(){c.library.add(l.fas,d.far)}return e.forRoot=function(t){return n.Api.DEFAULT_API_ENDPOINT=t,{ngModule:e}},e.decorators=[{type:t.NgModule,args:[{declarations:[M,m,A,F,P,_,I],imports:[a.BrowserModule,n.CommonComponentsModule,r.HttpClientModule,s.FontAwesomeModule,p.ClickOutsideModule,g.TranslateModule.forRoot(),f.FormsModule],exports:[n.CommonComponentsModule,M,m,A,F,I,P,_],providers:[E,n.ConfigService,k,D,{provide:t.APP_INITIALIZER,useFactory:R,deps:[D],multi:!0},{provide:r.HTTP_INTERCEPTORS,useClass:n.ErrorInterceptorService,multi:!0},n.LoadingMaskService,{provide:r.HTTP_INTERCEPTORS,useFactory:j,multi:!0,deps:[n.LoadingMaskService]}]}]}],e.ctorParameters=function(){return[]},e}();e.AddFilePanelComponent=m,e.ChangeInfo=y,e.CompareResult=w,e.ComparedPageModel=v,e.ComparisonAppComponent=M,e.ComparisonConfig=T,e.ComparisonConfigService=D,e.ComparisonModule=z,e.ComparisonService=E,e.DifferenceComponent=F,e.DifferenceHighlightComponent=P,e.DifferencesComponent=I,e.DifferencesService=k,e.Files=O,e.Highlight=N,e.PageInfo=S,e.Rectangle=C,e.ResultDocumentComponent=_,e.States=b,e.StyleChange=x,e.UploadFilePanelComponent=A,e.initializeApp=R,e.setupLoadingInterceptor=j,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=groupdocs.examples.angular-comparison.umd.min.js.map