@progress/kendo-angular-editor 2.4.1-dev.202110221203 → 2.4.1-dev.202110261541

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634903968,
+    publishDate: 1635262687,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/fesm2015/index.js

@@ -27,7 +27,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634903968,
+    publishDate: 1635262687,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2721,19 +2721,19 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
     }
     get minWidth() {
         const resizableOptions = this.resizable;
-        return resizableOptions.minWidth;
+        return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
     }
     get maxWidth() {
         const resizableOptions = this.resizable;
-        return resizableOptions.maxWidth;
+        return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
     }
     get minHeight() {
         const resizableOptions = this.resizable;
-        return resizableOptions.minHeight;
+        return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
     }
     get maxHeight() {
         const resizableOptions = this.resizable;
-        return resizableOptions.maxHeight;
+        return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
     }
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
@@ -2761,11 +2761,17 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         if (!this.iframe) {
             this.contentAreaLoaded.next();
         }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
     }
     ngOnChanges(changes) {
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialize());
         }
+        if (changes.resizable && !changes.resizable.isFirstChange()) {
+            this.normalizeSize();
+        }
     }
     /**
      * @hidden
@@ -2924,6 +2930,9 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         if (this.subs) {
             this.subs.unsubscribe();
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     }
     /**
      * @hidden
@@ -3103,6 +3112,47 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             .pipe(filter((event) => !this.viewMountElement.contains(event.relatedTarget)))
             .subscribe(() => this.onTouchedCallback()));
     }
+    normalizeSize() {
+        if (typeof this.resizable === 'object' && !this._styleObserver) {
+            const element = this.element.nativeElement;
+            this._styleObserver = new MutationObserver(() => {
+                this.ngZone.runOutsideAngular(() => this.normalizeProperties(element));
+            });
+            this._styleObserver.observe(element, { attributeFilter: ['style'] });
+        }
+    }
+    normalizeProperties(element) {
+        const props = Object.keys(this.resizable);
+        const pixelWidth = parseInt(element.style.width, 10);
+        const pixelHeight = parseInt(element.style.height, 10);
+        const resizable = this.resizable;
+        props.forEach(prop => {
+            const isMinProp = prop.startsWith('min');
+            const isMaxProp = !isMinProp;
+            const isWidthProp = prop.endsWith('Width');
+            const isHeightProp = !isWidthProp;
+            if (isMinProp && isWidthProp) {
+                if (pixelWidth < resizable.minWidth) {
+                    element.style.width = resizable.minWidth + 'px';
+                }
+            }
+            else if (isMinProp && isHeightProp) {
+                if (pixelHeight < resizable.minHeight) {
+                    element.style.height = resizable.minHeight + 'px';
+                }
+            }
+            else if (isMaxProp && isWidthProp) {
+                if (pixelWidth > resizable.maxWidth) {
+                    element.style.width = resizable.maxWidth + 'px';
+                }
+            }
+            else {
+                if (pixelHeight > resizable.maxHeight) {
+                    element.style.height = resizable.maxHeight + 'px';
+                }
+            }
+        });
+    }
 };
 __decorate([
     Input(),

package/dist/fesm5/index.js

@@ -27,7 +27,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634903968,
+    publishDate: 1635262687,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2586,7 +2586,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minWidth;
+            return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -2594,7 +2594,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxWidth;
+            return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -2602,7 +2602,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minHeight;
+            return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -2610,7 +2610,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxHeight;
+            return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -2655,12 +2655,18 @@ var EditorComponent = /** @class */ (function () {
         if (!this.iframe) {
             this.contentAreaLoaded.next();
         }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
     };
     EditorComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.initialize(); });
         }
+        if (changes.resizable && !changes.resizable.isFirstChange()) {
+            this.normalizeSize();
+        }
     };
     /**
      * @hidden
@@ -2819,6 +2825,9 @@ var EditorComponent = /** @class */ (function () {
         if (this.subs) {
             this.subs.unsubscribe();
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     };
     /**
      * @hidden
@@ -2999,6 +3008,48 @@ var EditorComponent = /** @class */ (function () {
             .pipe(filter(function (event) { return !_this.viewMountElement.contains(event.relatedTarget); }))
             .subscribe(function () { return _this.onTouchedCallback(); }));
     };
+    EditorComponent.prototype.normalizeSize = function () {
+        var _this = this;
+        if (typeof this.resizable === 'object' && !this._styleObserver) {
+            var element_1 = this.element.nativeElement;
+            this._styleObserver = new MutationObserver(function () {
+                _this.ngZone.runOutsideAngular(function () { return _this.normalizeProperties(element_1); });
+            });
+            this._styleObserver.observe(element_1, { attributeFilter: ['style'] });
+        }
+    };
+    EditorComponent.prototype.normalizeProperties = function (element) {
+        var props = Object.keys(this.resizable);
+        var pixelWidth = parseInt(element.style.width, 10);
+        var pixelHeight = parseInt(element.style.height, 10);
+        var resizable = this.resizable;
+        props.forEach(function (prop) {
+            var isMinProp = prop.startsWith('min');
+            var isMaxProp = !isMinProp;
+            var isWidthProp = prop.endsWith('Width');
+            var isHeightProp = !isWidthProp;
+            if (isMinProp && isWidthProp) {
+                if (pixelWidth < resizable.minWidth) {
+                    element.style.width = resizable.minWidth + 'px';
+                }
+            }
+            else if (isMinProp && isHeightProp) {
+                if (pixelHeight < resizable.minHeight) {
+                    element.style.height = resizable.minHeight + 'px';
+                }
+            }
+            else if (isMaxProp && isWidthProp) {
+                if (pixelWidth > resizable.maxWidth) {
+                    element.style.width = resizable.maxWidth + 'px';
+                }
+            }
+            else {
+                if (pixelHeight > resizable.maxHeight) {
+                    element.style.height = resizable.maxHeight + 'px';
+                }
+            }
+        });
+    };
     var EditorComponent_1;
     __decorate([
         Input(),

package/dist/npm/editor.component.js

@@ -347,7 +347,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minWidth;
+            return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -355,7 +355,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxWidth;
+            return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -363,7 +363,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minHeight;
+            return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -371,7 +371,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxHeight;
+            return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -416,12 +416,18 @@ var EditorComponent = /** @class */ (function () {
         if (!this.iframe) {
             this.contentAreaLoaded.next();
         }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
     };
     EditorComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () { return _this.initialize(); });
         }
+        if (changes.resizable && !changes.resizable.isFirstChange()) {
+            this.normalizeSize();
+        }
     };
     /**
      * @hidden
@@ -580,6 +586,9 @@ var EditorComponent = /** @class */ (function () {
         if (this.subs) {
             this.subs.unsubscribe();
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     };
     /**
      * @hidden
@@ -760,6 +769,48 @@ var EditorComponent = /** @class */ (function () {
             .pipe(operators_1.filter(function (event) { return !_this.viewMountElement.contains(event.relatedTarget); }))
             .subscribe(function () { return _this.onTouchedCallback(); }));
     };
+    EditorComponent.prototype.normalizeSize = function () {
+        var _this = this;
+        if (typeof this.resizable === 'object' && !this._styleObserver) {
+            var element_1 = this.element.nativeElement;
+            this._styleObserver = new MutationObserver(function () {
+                _this.ngZone.runOutsideAngular(function () { return _this.normalizeProperties(element_1); });
+            });
+            this._styleObserver.observe(element_1, { attributeFilter: ['style'] });
+        }
+    };
+    EditorComponent.prototype.normalizeProperties = function (element) {
+        var props = Object.keys(this.resizable);
+        var pixelWidth = parseInt(element.style.width, 10);
+        var pixelHeight = parseInt(element.style.height, 10);
+        var resizable = this.resizable;
+        props.forEach(function (prop) {
+            var isMinProp = prop.startsWith('min');
+            var isMaxProp = !isMinProp;
+            var isWidthProp = prop.endsWith('Width');
+            var isHeightProp = !isWidthProp;
+            if (isMinProp && isWidthProp) {
+                if (pixelWidth < resizable.minWidth) {
+                    element.style.width = resizable.minWidth + 'px';
+                }
+            }
+            else if (isMinProp && isHeightProp) {
+                if (pixelHeight < resizable.minHeight) {
+                    element.style.height = resizable.minHeight + 'px';
+                }
+            }
+            else if (isMaxProp && isWidthProp) {
+                if (pixelWidth > resizable.maxWidth) {
+                    element.style.width = resizable.maxWidth + 'px';
+                }
+            }
+            else {
+                if (pixelHeight > resizable.maxHeight) {
+                    element.style.height = resizable.maxHeight + 'px';
+                }
+            }
+        });
+    };
     var EditorComponent_1;
     tslib_1.__decorate([
         core_1.Input(),

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634903968,
+    publishDate: 1635262687,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };