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 31476373b..6e495b84d 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
@@ -44,5431 +44,5536 @@
};
}
- /**
- * @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...
\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%}/deep/ .gd-highlight{background-color:#ff0}/deep/ .gd-highlight-select{background-color:#ff9b00}.gd-page-image{height:100%!important;width:100%!important}"]
- }] }
- ];
- /** @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
+ */
+ /** @type {?} */
+ var $$1 = jquery;
+ var DocumentComponent = /** @class */ (function () {
+ function DocumentComponent(_elementRef, _zoomService, _windowService, _rotationServcie) {
+ var _this = this;
+ this._elementRef = _elementRef;
+ this._zoomService = _zoomService;
+ this._windowService = _windowService;
+ this._rotationServcie = _rotationServcie;
+ this.wait = false;
+ this.docWidth = null;
+ this.docHeight = null;
+ this.viewportWidth = null;
+ this.viewportHeight = null;
+ this.scale = null;
+ this.lastScale = null;
+ this.container = null;
+ this.doc = null;
+ this.x = 0;
+ this.lastX = 0;
+ this.y = 0;
+ this.lastY = 0;
+ this.pinchCenter = null;
+ this.pinchCenterOffset = null;
+ this.curWidth = 0;
+ this.curHeight = 0;
+ _zoomService.zoomChange.subscribe((/**
+ * @param {?} val
+ * @return {?}
+ */
+ function (val) {
+ _this.zoom = val;
+ }));
+ this.isDesktop = _windowService.isDesktop();
+ }
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.ngOnInit = /**
+ * @return {?}
+ */
+ function () {
+ };
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.ngOnChanges = /**
+ * @return {?}
+ */
+ function () {
+ /** @type {?} */
+ var panzoom = this._elementRef.nativeElement.children.item(0).children.item(0);
+ ((/** @type {?} */ (panzoom))).style.transform = '';
+ // TODO: this intersects with zooming by zoom directive, but still needed
+ // for flush previous settings before opening another file
+ //this._zoomService.changeZoom(100);
+ //this.scale = 1;
+ };
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.ngAfterViewInit = /**
+ * @return {?}
+ */
+ function () {
+ // For current iteration we take .panzoom as a document
+ this.doc = this._elementRef.nativeElement.children.item(0).children.item(0);
+ // For current iteration we take .gd-document as a container
+ this.container = this._elementRef.nativeElement;
+ this.docWidth = this.doc.clientWidth;
+ this.docHeight = this.doc.clientHeight;
+ this.viewportWidth = this.doc.offsetWidth;
+ // For cases where we already have zoom defined we should include it
+ this.scale = (this.viewportWidth / this.docWidth) * this._zoomService.zoom / 100;
+ this.lastScale = this.scale;
+ this.viewportHeight = this.container.offsetHeight;
+ this.curWidth = this.docWidth * this.scale;
+ this.curHeight = this.docHeight * this.scale;
+ /** @type {?} */
+ var hammer = new Hammer(this.container);
+ };
+ // TODO: this temporary crutch for Excel files should be documented
+ // TODO: this temporary crutch for Excel files should be documented
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.ifExcel =
+ // TODO: this temporary crutch for Excel files should be documented
+ /**
+ * @return {?}
+ */
+ function () {
+ return FileUtil.find(this.file.guid, false).format === "Microsoft Excel";
+ };
+ /**
+ * @param {?} value
+ * @return {?}
+ */
+ DocumentComponent.prototype.getDimensionWithUnit = /**
+ * @param {?} value
+ * @return {?}
+ */
+ function (value) {
+ return value + FileUtil.find(this.file.guid, false).unit;
+ };
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.ngAfterViewChecked = /**
+ * @return {?}
+ */
+ function () {
+ /** @type {?} */
+ var elementNodeListOf = this._elementRef.nativeElement.querySelectorAll('.gd-wrapper');
+ /** @type {?} */
+ var element = elementNodeListOf.item(0);
+ if (element) {
+ $$1(element).trigger('focus');
+ }
+ };
+ /**
+ * @param {?} el
+ * @return {?}
+ */
+ DocumentComponent.prototype.absolutePosition = /**
+ * @param {?} el
+ * @return {?}
+ */
+ function (el) {
+ /** @type {?} */
+ var x = 0;
+ /** @type {?} */
+ var y = 0;
+ while (el !== null) {
+ x += el.offsetLeft;
+ y += el.offsetTop;
+ el = el.offsetParent;
+ }
+ return { x: x, y: y };
+ };
+ /**
+ * @param {?} pos
+ * @param {?} viewportDim
+ * @param {?} docDim
+ * @return {?}
+ */
+ DocumentComponent.prototype.restrictRawPos = /**
+ * @param {?} pos
+ * @param {?} viewportDim
+ * @param {?} docDim
+ * @return {?}
+ */
+ function (pos, viewportDim, docDim) {
+ if (pos < viewportDim / this.scale - docDim) { // too far left/up?
+ pos = viewportDim / this.scale - docDim;
+ }
+ else if (pos > 0) { // too far right/down?
+ pos = 0;
+ }
+ return pos;
+ };
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.updateLastPos = /**
+ * @return {?}
+ */
+ function () {
+ this.lastX = this.x;
+ this.lastY = this.y;
+ };
+ /**
+ * @param {?} deltaX
+ * @param {?} deltaY
+ * @return {?}
+ */
+ DocumentComponent.prototype.translate = /**
+ * @param {?} deltaX
+ * @param {?} deltaY
+ * @return {?}
+ */
+ function (deltaX, deltaY) {
+ // We restrict to the min of the viewport width/height or current width/height as the
+ // current width/height may be smaller than the viewport width/height
+ /** @type {?} */
+ var newX = this.restrictRawPos(this.lastX + deltaX / this.scale, Math.min(this.viewportWidth, this.curWidth), this.docWidth);
+ this.x = newX;
+ // TODO: value here and in the similar line below changes to positive to take any effect
+ this.container.scrollLeft = -Math.ceil(newX * this.scale);
+ /** @type {?} */
+ var newY = this.restrictRawPos(this.lastY + deltaY / this.scale, Math.min(this.viewportHeight, this.curHeight), this.docHeight);
+ this.y = newY;
+ this.container.scrollTop = -Math.ceil(newY * this.scale);
+ this.doc.style.transform = 'scale(' + this.scale + ')';
+ };
+ /**
+ * @param {?} scaleBy
+ * @return {?}
+ */
+ DocumentComponent.prototype.startZoom = /**
+ * @param {?} scaleBy
+ * @return {?}
+ */
+ function (scaleBy) {
+ this.scale = this.lastScale * scaleBy;
+ this.curWidth = this.docWidth * this.scale;
+ this.curHeight = this.docHeight * this.scale;
+ // Adjust margins to make sure that we aren't out of bounds
+ this.translate(0, 0);
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.rawCenter = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ /** @type {?} */
+ var pos = this.absolutePosition(this.container);
+ // We need to account for the scroll position
+ /** @type {?} */
+ var scrollLeft = window.pageXOffset ? window.pageXOffset : document.body.scrollLeft;
+ /** @type {?} */
+ var scrollTop = window.pageYOffset ? window.pageYOffset : document.body.scrollTop;
+ /** @type {?} */
+ var zoomX = -this.x + ($event.center.x - pos.x + scrollLeft) / this.scale;
+ /** @type {?} */
+ var zoomY = -this.y + ($event.center.y - pos.y + scrollTop) / this.scale;
+ return { x: zoomX, y: zoomY };
+ };
+ /**
+ * @return {?}
+ */
+ DocumentComponent.prototype.updateLastScale = /**
+ * @return {?}
+ */
+ function () {
+ this.lastScale = this.scale;
+ };
+ /**
+ * @param {?} scaleBy
+ * @param {?} rawZoomX
+ * @param {?} rawZoomY
+ * @param {?} doNotUpdateLast
+ * @return {?}
+ */
+ DocumentComponent.prototype.zoomAround = /**
+ * @param {?} scaleBy
+ * @param {?} rawZoomX
+ * @param {?} rawZoomY
+ * @param {?} doNotUpdateLast
+ * @return {?}
+ */
+ function (scaleBy, rawZoomX, rawZoomY, doNotUpdateLast) {
+ // Zoom
+ this.startZoom(scaleBy);
+ // New raw center of viewport
+ /** @type {?} */
+ var rawCenterX = -this.x + Math.min(this.viewportWidth, this.curWidth) / 2 / this.scale;
+ /** @type {?} */
+ var rawCenterY = -this.y + Math.min(this.viewportHeight, this.curHeight) / 2 / this.scale;
+ // Delta
+ /** @type {?} */
+ var deltaX = (rawCenterX - rawZoomX) * this.scale;
+ /** @type {?} */
+ var deltaY = (rawCenterY - rawZoomY) * this.scale;
+ // Translate back to zoom center
+ this.translate(deltaX, deltaY);
+ if (!doNotUpdateLast) {
+ this.updateLastScale();
+ this.updateLastPos();
+ }
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onPinch = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ console.log("pinch");
+ if (this.pinchCenter === null) {
+ this.pinchCenter = this.rawCenter($event);
+ /** @type {?} */
+ var offsetX = this.pinchCenter.x * this.scale - (-this.x * this.scale + Math.min(this.viewportWidth, this.curWidth) / 2);
+ /** @type {?} */
+ var offsetY = this.pinchCenter.y * this.scale - (-this.y * this.scale + Math.min(this.viewportHeight, this.curHeight) / 2);
+ this.pinchCenterOffset = { x: offsetX, y: offsetY };
+ }
+ /** @type {?} */
+ var newScale = this.scale * $event.scale;
+ /** @type {?} */
+ var zoomX = this.pinchCenter.x * newScale - this.pinchCenterOffset.x;
+ /** @type {?} */
+ var zoomY = this.pinchCenter.y * newScale - this.pinchCenterOffset.y;
+ /** @type {?} */
+ var zoomCenter = { x: zoomX / newScale, y: zoomY / newScale };
+ this.zoomAround($event.scale, zoomCenter.x, zoomCenter.y, true);
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onPinchEnd = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ console.log("pinchEnd");
+ this.updateLastScale();
+ this.updateLastPos();
+ this.pinchCenter = null;
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onPan = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ // TODO: looks like native pan works better
+ // if (!this.isDesktop) {
+ // this.translate($event.deltaX, $event.deltaY);
+ // }
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onPanEnd = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ // if (!this.isDesktop) {
+ // this.updateLastPos();
+ // }
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onDoubleTap = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ if (!this.isDesktop) {
+ if ($event.tapCount === 2) {
+ /** @type {?} */
+ var c = this.rawCenter($event);
+ this.zoomAround(2, c.x, c.y, false);
+ }
+ }
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onRotateStart = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ this.initialRotation = $event.rotation;
+ console.log("rotateStart: " + $event.rotation + ' ' + $event.angle);
+ };
+ /**
+ * @param {?} $event
+ * @return {?}
+ */
+ DocumentComponent.prototype.onRotateEnd = /**
+ * @param {?} $event
+ * @return {?}
+ */
+ function ($event) {
+ console.log("rotateEnd: " + $event.rotation + ' ' + $event.angle);
+ if ($event.rotation > 0 && this.initialRotation > 0) {
+ if ($event.rotation > this.initialRotation && ($event.rotation - this.initialRotation > 45)) {
+ this._rotationServcie.setRotationAngle(90);
+ }
+ else if ($event.rotation < this.initialRotation && (this.initialRotation - $event.rotation > 45)) {
+ this._rotationServcie.setRotationAngle(-90);
+ }
+ }
+ // case with negative values
+ else {
+ if (this.initialRotation > $event.rotation && ($event.rotation - this.initialRotation > 45)) {
+ this._rotationServcie.setRotationAngle(-90);
+ }
+ else if (this.initialRotation < $event.rotation && (this.initialRotation - $event.rotation > 45)) {
+ this._rotationServcie.setRotationAngle(90);
+ }
+ }
+ };
+ DocumentComponent.decorators = [
+ { type: core.Component, args: [{
+ selector: 'gd-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%}/deep/ .gd-highlight{background-color:#ff0}/deep/ .gd-highlight-select{background-color:#ff9b00}.gd-page-image{height:100%!important;width:100%!important}"]
+ }] }
+ ];
+ /** @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 UploadFileZoneComponent = /** @class */ (function () {
- function UploadFileZoneComponent(_uploadService) {
- this._uploadService = _uploadService;
- this.closeUpload = new core.EventEmitter();
- }
- /**
- * @return {?}
- */
- UploadFileZoneComponent.prototype.ngOnInit = /**
- * @return {?}
- */
- function () {
- };
- /**
- * @param {?} files
- * @return {?}
- */
- UploadFileZoneComponent.prototype.handleFileInput = /**
- * @param {?} files
- * @return {?}
- */
- function (files) {
- this._uploadService.changeFilesList(files);
- this.onCloseUpload();
- };
- /**
- * @return {?}
- */
- UploadFileZoneComponent.prototype.onCloseUpload = /**
- * @return {?}
- */
- function () {
- this.closeUpload.emit(true);
- };
- /**
- * @param {?} $event
- * @return {?}
- */
- UploadFileZoneComponent.prototype.close = /**
- * @param {?} $event
- * @return {?}
- */
- function ($event) {
- if ($event.target.id === 'gd-dropZone') {
- this.onCloseUpload();
- }
- };
- UploadFileZoneComponent.decorators = [
- { type: core.Component, args: [{
- selector: 'gd-upload-file-zone',
- template: "