diff --git a/dist/libs/common-components/bundles/groupdocs.examples.angular-common-components.umd.js b/dist/libs/common-components/bundles/groupdocs.examples.angular-common-components.umd.js
index 6f8a22a3e..8bea33674 100644
--- a/dist/libs/common-components/bundles/groupdocs.examples.angular-common-components.umd.js
+++ b/dist/libs/common-components/bundles/groupdocs.examples.angular-common-components.umd.js
@@ -201,8246 +201,8650 @@
return (mod && mod.__esModule) ? mod : { default: mod };
}
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- var TopToolbarComponent = /** @class */ (function () {
- function TopToolbarComponent() {
- }
- TopToolbarComponent.decorators = [
- { type: core.Component, args: [{
- selector: 'gd-top-toolbar',
- template: "
Please wait...
\nPlease wait...
\r\n\n
\n
![\"\"\n]()
\n
\n \n Loading... Please wait.\n
\n
\n",
- styles: [".gd-page-spinner{margin-top:150px;text-align:center}.gd-wrapper{width:inherit;height:inherit}.gd-wrapper div{width:100%}::ng-deep .gd-highlight{background-color:#ff0}::ng-deep .gd-highlight-select{background-color:#ff9b00}"]
- }] }
- ];
- /** @nocollapse */
- PageComponent.ctorParameters = function () { return []; };
- PageComponent.propDecorators = {
- angle: [{ type: core.Input }],
- width: [{ type: core.Input }],
- height: [{ type: core.Input }],
- number: [{ type: core.Input }],
- data: [{ type: core.Input }],
- isHtml: [{ type: core.Input }],
- editable: [{ type: core.Input }]
- };
- return PageComponent;
+ /**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+ var ExcelPageService = /** @class */ (function () {
+ function ExcelPageService() {
+ }
+ /**
+ * @param {?} data
+ * @return {?}
+ */
+ ExcelPageService.prototype.getUpdatedPage = /**
+ * @param {?} data
+ * @return {?}
+ */
+ function (data) {
+ /** @type {?} */
+ var doc = new DOMParser().parseFromString(data, "text/html");
+ /** @type {?} */
+ var table = doc.querySelector('table');
+ /** @type {?} */
+ var numCellsInFirstRow = 0;
+ /** @type {?} */
+ var cellsFromFirstRow = doc.querySelectorAll('table > tbody > tr:first-child td');
+ cellsFromFirstRow.forEach((/**
+ * @param {?} elm
+ * @return {?}
+ */
+ function (elm) {
+ numCellsInFirstRow += elm.attributes['colspan'] ? parseInt(elm.attributes['colspan'].value, 10) : 1;
+ }));
+ /** @type {?} */
+ var newTable = this.createHeader(numCellsInFirstRow, table);
+ doc.querySelector('table').replaceWith(newTable);
+ /** @type {?} */
+ var resultData = new XMLSerializer().serializeToString(doc)
+ // work-around for FF which is adds a0 namespace during serialization
+ ;
+ // work-around for FF which is adds a0 namespace during serialization
+ return resultData.replace(/a0:/g, "").replace(/:a0/g, "");
+ };
+ /**
+ * @param {?} data
+ * @return {?}
+ */
+ ExcelPageService.prototype.getPageWithoutHeader = /**
+ * @param {?} data
+ * @return {?}
+ */
+ function (data) {
+ /** @type {?} */
+ var doc = new DOMParser().parseFromString(data, "text/html");
+ doc.querySelector('colgroup').remove();
+ /** @type {?} */
+ var newTable = doc.querySelector('table');
+ newTable.deleteRow(0);
+ newTable.querySelectorAll('tr').forEach((/**
+ * @param {?} row
+ * @return {?}
+ */
+ function (row) {
+ row.deleteCell(0);
+ }));
+ doc.querySelector('table').replaceWith(newTable);
+ /** @type {?} */
+ var resultData = new XMLSerializer().serializeToString(doc);
+ return resultData;
+ };
+ /**
+ * @param {?} numCols
+ * @param {?} table
+ * @return {?}
+ */
+ ExcelPageService.prototype.createHeader = /**
+ * @param {?} numCols
+ * @param {?} table
+ * @return {?}
+ */
+ function (numCols, table) {
+ /** @type {?} */
+ var header = document.createElement('thead');
+ header.append(document.createElement('tr'));
+ for (var i = 0; i < numCols; ++i) {
+ /** @type {?} */
+ var th = document.createElement('th');
+ th.innerText = this.colName(i);
+ th.setAttribute("contenteditable", "false");
+ header.querySelector("tr").append(th);
+ }
+ /** @type {?} */
+ var colgroup = table.querySelector('colgroup');
+ /** @type {?} */
+ var col = document.createElement('col');
+ col.width = '80px';
+ colgroup.prepend(col);
+ table.prepend(header);
+ /** @type {?} */
+ var cnt = 0;
+ table.querySelectorAll('tr').forEach((/**
+ * @param {?} row
+ * @return {?}
+ */
+ function (row) {
+ /** @type {?} */
+ var div = document.createElement('div');
+ if (cnt !== 0) {
+ /** @type {?} */
+ var td = document.createElement('td');
+ td.className = "excel";
+ td.append(div);
+ div.innerText = cnt.toString();
+ div.setAttribute("contenteditable", "false");
+ row.prepend(td);
+ }
+ else {
+ /** @type {?} */
+ var th = document.createElement('th');
+ th.append(div);
+ div.setAttribute("contenteditable", "false");
+ row.prepend(th);
+ }
+ cnt++;
+ }));
+ return table;
+ };
+ /**
+ * @param {?} n
+ * @return {?}
+ */
+ ExcelPageService.prototype.colName = /**
+ * @param {?} n
+ * @return {?}
+ */
+ function (n) {
+ /** @type {?} */
+ var ordA = 'a'.charCodeAt(0);
+ /** @type {?} */
+ var ordZ = 'z'.charCodeAt(0);
+ /** @type {?} */
+ var len = ordZ - ordA + 1;
+ /** @type {?} */
+ var s = "";
+ while (n >= 0) {
+ s = String.fromCharCode(n % len + ordA) + s;
+ n = Math.floor(n / len) - 1;
+ }
+ return s;
+ };
+ ExcelPageService.decorators = [
+ { type: core.Injectable, args: [{
+ providedIn: 'root'
+ },] }
+ ];
+ /** @nocollapse */
+ ExcelPageService.ctorParameters = function () { return []; };
+ /** @nocollapse */ ExcelPageService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function ExcelPageService_Factory() { return new ExcelPageService(); }, token: ExcelPageService, providedIn: "root" });
+ return ExcelPageService;
}());
- if (false) {
- /** @type {?} */
- PageComponent.prototype.angle;
- /** @type {?} */
- PageComponent.prototype.width;
- /** @type {?} */
- PageComponent.prototype.height;
- /** @type {?} */
- PageComponent.prototype.number;
- /** @type {?} */
- PageComponent.prototype.data;
- /** @type {?} */
- PageComponent.prototype.isHtml;
- /** @type {?} */
- PageComponent.prototype.editable;
- /** @type {?} */
- PageComponent.prototype.imgData;
- }
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- var SanitizeHtmlPipe = /** @class */ (function () {
- function SanitizeHtmlPipe(sanitizer) {
- this.sanitizer = sanitizer;
- }
- /**
- * @param {?} html
- * @return {?}
- */
- SanitizeHtmlPipe.prototype.transform = /**
- * @param {?} html
- * @return {?}
- */
- function (html) {
- return this.sanitizer.bypassSecurityTrustHtml(html);
- };
- SanitizeHtmlPipe.decorators = [
- { type: core.Pipe, args: [{ name: 'safeHtml' },] }
- ];
- /** @nocollapse */
- SanitizeHtmlPipe.ctorParameters = function () { return [
- { type: platformBrowser.DomSanitizer }
- ]; };
- return SanitizeHtmlPipe;
- }());
- if (false) {
- /**
- * @type {?}
- * @private
- */
- SanitizeHtmlPipe.prototype.sanitizer;
+ /**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+ var ExcelPageComponent = /** @class */ (function () {
+ function ExcelPageComponent(_excelPageService) {
+ this._excelPageService = _excelPageService;
+ }
+ /**
+ * @return {?}
+ */
+ ExcelPageComponent.prototype.ngOnInit = /**
+ * @return {?}
+ */
+ function () {
+ /** @type {?} */
+ var isIE = /*@cc_on!@*/ false || !!/(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
+ if (isIE && this.number === 0) {
+ this.editable = false;
+ }
+ };
+ /**
+ * @param {?} changes
+ * @return {?}
+ */
+ ExcelPageComponent.prototype.ngOnChanges = /**
+ * @param {?} changes
+ * @return {?}
+ */
+ function (changes) {
+ if (this.isHtml) {
+ // TODO: this is temporary needed to remove unneeded spaces and BOM symbol
+ // which leads to undesired spaces on the top of the docs pages
+ this.data = this.data
+ ? this.data.replace(/>\s+<')
+ .replace(/\uFEFF/g, "")
+ .replace(/href="\/viewer/g, 'href="http://localhost:8080/viewer')
+ .replace(/src="\/viewer/g, 'src="http://localhost:8080/viewer')
+ .replace(/data="\/viewer/g, 'data="http://localhost:8080/viewer')
+ : null;
+ }
+ else {
+ this.imgData = 'data:image/png;base64,' + this.data;
+ }
+ this.data = this.data !== null && changes.data ? this._excelPageService.getUpdatedPage(this.data) : this.data;
+ };
+ ExcelPageComponent.decorators = [
+ { type: core.Component, args: [{
+ selector: 'gd-excel-page',
+ template: "\r\n
\r\n
![\"\"\r\n]()
\r\n
\r\n \r\n Loading... Please wait.\r\n
\r\n
\r\n",
+ styles: [".gd-page-spinner{margin-top:150px;text-align:center}.gd-wrapper{width:inherit;height:inherit}.gd-wrapper div{width:100%}::ng-deep .gd-highlight{background-color:#ff0}::ng-deep .gd-highlight-select{background-color:#ff9b00}::ng-deep th{color:#959da5;background-color:#f4f4f4;font-weight:unset;border:1px solid #e7e7e7!important;text-transform:uppercase;font-size:14px;overflow:hidden}::ng-deep td{vertical-align:middle!important}::ng-deep .page-grid-lines td{border:1px solid #e7e7e7!important}::ng-deep .page td:nth-child(1){border:1px solid #e7e7e7!important}::ng-deep tr td.excel:first-child{color:#959da5;background-color:#f4f4f4;font-weight:unset;width:1%;text-align:center}::ng-deep tr td.excel:first-child div{width:80px}::ng-deep tr th.excel:first-child{background-color:#f4f4f4;width:1%}::ng-deep tr th.excel:first-child div{width:80px}.gd-page-image{height:100%!important;width:100%!important}"]
+ }] }
+ ];
+ /** @nocollapse */
+ ExcelPageComponent.ctorParameters = function () { return [
+ { type: ExcelPageService }
+ ]; };
+ ExcelPageComponent.propDecorators = {
+ angle: [{ type: core.Input }],
+ width: [{ type: core.Input }],
+ height: [{ type: core.Input }],
+ number: [{ type: core.Input }],
+ data: [{ type: core.Input }],
+ isHtml: [{ type: core.Input }],
+ editable: [{ type: core.Input }]
+ };
+ return ExcelPageComponent;
+ }());
+ if (false) {
+ /** @type {?} */
+ ExcelPageComponent.prototype.angle;
+ /** @type {?} */
+ ExcelPageComponent.prototype.width;
+ /** @type {?} */
+ ExcelPageComponent.prototype.height;
+ /** @type {?} */
+ ExcelPageComponent.prototype.number;
+ /** @type {?} */
+ ExcelPageComponent.prototype.data;
+ /** @type {?} */
+ ExcelPageComponent.prototype.isHtml;
+ /** @type {?} */
+ ExcelPageComponent.prototype.editable;
+ /** @type {?} */
+ ExcelPageComponent.prototype.imgData;
+ /**
+ * @type {?}
+ * @private
+ */
+ ExcelPageComponent.prototype._excelPageService;
}
- var SanitizeResourceHtmlPipe = /** @class */ (function () {
- function SanitizeResourceHtmlPipe(sanitizer) {
- this.sanitizer = sanitizer;
- }
- /**
- * @param {?} html
- * @return {?}
- */
- SanitizeResourceHtmlPipe.prototype.transform = /**
- * @param {?} html
- * @return {?}
- */
- function (html) {
- return this.sanitizer.bypassSecurityTrustResourceUrl(html);
- };
- SanitizeResourceHtmlPipe.decorators = [
- { type: core.Pipe, args: [{ name: 'safeResourceHtml' },] }
- ];
- /** @nocollapse */
- SanitizeResourceHtmlPipe.ctorParameters = function () { return [
- { type: platformBrowser.DomSanitizer }
- ]; };
- return SanitizeResourceHtmlPipe;
- }());
- if (false) {
- /**
- * @type {?}
- * @private
- */
- SanitizeResourceHtmlPipe.prototype.sanitizer;
+
+ /**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+ var ExcelDocumentComponent = /** @class */ (function (_super) {
+ __extends(ExcelDocumentComponent, _super);
+ function ExcelDocumentComponent(_elementRef, zoomService, windowService, navigateService, renderer) {
+ var _this = _super.call(this, _elementRef, zoomService, windowService, navigateService) || this;
+ _this.renderer = renderer;
+ _this.panzoom = null;
+ _this.selectedSheet = new core.EventEmitter();
+ _this.navigateService = navigateService;
+ return _this;
+ }
+ /**
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.ngOnInit = /**
+ * @return {?}
+ */
+ function () {
+ this.currentPageNo = 1;
+ };
+ /**
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.ngAfterViewInit = /**
+ * @return {?}
+ */
+ function () {
+ var _this = this;
+ this.refreshExcelDocHeight();
+ this.pages.changes.subscribe((/**
+ * @return {?}
+ */
+ function () {
+ _this.refreshExcelDocHeight();
+ }));
+ this.navigateService.navigate.subscribe((/**
+ * @param {?} value
+ * @return {?}
+ */
+ function (value) {
+ if (value) {
+ _this.selectSheet(value);
+ }
+ }));
+ /** @type {?} */
+ var scrollbarWidth = this.getScrollBarWidth();
+ this.renderer.setStyle(this._elementRef.nativeElement.querySelector('.sheets'), 'right', this.getScrollBarWidth() + 'px');
+ this.renderer.setStyle(this._elementRef.nativeElement.querySelector('.sheets'), 'bottom', this.getScrollBarWidth() + 'px');
+ if (scrollbarWidth === 0) {
+ this.renderer.setStyle(this._elementRef.nativeElement.querySelector('.sheets'), 'padding-right', '17px');
+ }
+ };
+ /**
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.getScrollBarWidth = /**
+ * @return {?}
+ */
+ function () {
+ /** @type {?} */
+ var documentBox = (/** @type {?} */ (document.querySelector('.gd-document')));
+ /** @type {?} */
+ var scrollbarWidth = documentBox.offsetWidth - documentBox.clientWidth;
+ return scrollbarWidth;
+ };
+ /**
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.refreshExcelDocHeight = /**
+ * @return {?}
+ */
+ function () {
+ // For current iteration we'll change actual height of .document
+ this.doc = this._elementRef.nativeElement.children.item(0);
+ this.panzoom = this._elementRef.nativeElement.children.item(0).children.item(0);
+ // magic number 37 is the height of the bottom-bar with navigation between pages
+ this.doc.style.height = this.panzoom.scrollHeight + 37 + "px";
+ };
+ /**
+ * @param {?} number
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.selectSheet = /**
+ * @param {?} number
+ * @return {?}
+ */
+ function (number) {
+ this.currentPageNo = number;
+ this.selectedSheet.emit(number);
+ };
+ /**
+ * @param {?} page
+ * @return {?}
+ */
+ ExcelDocumentComponent.prototype.getSheetName = /**
+ * @param {?} page
+ * @return {?}
+ */
+ function (page) {
+ return page.sheetName ? page.sheetName : "Sheet " + page.number;
+ };
+ ExcelDocumentComponent.decorators = [
+ { type: core.Component, args: [{
+ selector: 'gd-excel-document',
+ template: "Please wait...
\r\n\r\n
\r\n
![\"\"\r\n]()
\r\n
\r\n \r\n Loading... Please wait.\r\n
\r\n
\r\n",
+ styles: [".gd-page-spinner{margin-top:150px;text-align:center}.gd-wrapper{width:inherit;height:inherit}.gd-wrapper div{width:100%}::ng-deep .gd-highlight{background-color:#ff0}::ng-deep .gd-highlight-select{background-color:#ff9b00}"]
+ }] }
+ ];
+ /** @nocollapse */
+ PageComponent.ctorParameters = function () { return []; };
+ PageComponent.propDecorators = {
+ angle: [{ type: core.Input }],
+ width: [{ type: core.Input }],
+ height: [{ type: core.Input }],
+ number: [{ type: core.Input }],
+ data: [{ type: core.Input }],
+ isHtml: [{ type: core.Input }],
+ editable: [{ type: core.Input }]
+ };
+ return PageComponent;
+ }());
+ if (false) {
+ /** @type {?} */
+ PageComponent.prototype.angle;
+ /** @type {?} */
+ PageComponent.prototype.width;
+ /** @type {?} */
+ PageComponent.prototype.height;
+ /** @type {?} */
+ PageComponent.prototype.number;
+ /** @type {?} */
+ PageComponent.prototype.data;
+ /** @type {?} */
+ PageComponent.prototype.isHtml;
+ /** @type {?} */
+ PageComponent.prototype.editable;
+ /** @type {?} */
+ PageComponent.prototype.imgData;
}
- var HighlightSearchPipe = /** @class */ (function () {
- function HighlightSearchPipe() {
- }
- /**
- * @param {?} value
- * @param {?} args
- * @return {?}
- */
- HighlightSearchPipe.prototype.transform = /**
- * @param {?} value
- * @param {?} args
- * @return {?}
- */
- function (value, args) {
- if (!args) {
- return value;
- }
- /** @type {?} */
- var re = new RegExp(args, 'gi');
- return value.replace(re, "