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

package/dist/es/editor.component.js

@@ -344,7 +344,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
@@ -352,7 +352,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
@@ -360,7 +360,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
@@ -368,7 +368,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
@@ -413,12 +413,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
@@ -577,6 +583,9 @@ var EditorComponent = /** @class */ (function () {
         if (this.subs) {
             this.subs.unsubscribe();
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     };
     /**
      * @hidden
@@ -757,6 +766,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;
     tslib_1.__decorate([
         Input(),

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es2015/common/resizable-options.interface.d.ts

@@ -7,19 +7,19 @@
  */
 export interface EditorResizableOptions {
     /**
-     * The value of the [CSS `min-width` property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) that will be applied to the Editor wrapper element.
+     * Specifies the minimum width of the resizable Editor in pixels.
      */
-    minWidth?: string;
+    minWidth?: number;
     /**
-     * The value of the [CSS `min-height` property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) that will be applied to the Editor wrapper element.
+     * Specifies the minimum height of the resizable Editor in pixels.
      */
-    minHeight?: string;
+    minHeight?: number;
     /**
-     * The value of the [CSS `max-width` property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) that will be applied to the Editor wrapper element.
+     * Specifies the maximum width of the resizable Editor in pixels.
      */
-    maxWidth?: string;
+    maxWidth?: number;
     /**
-     * The value of the [CSS `max-height` property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) that will be applied to the Editor wrapper element.
+     * Specifies the maximum height of the resizable Editor in pixels.
      */
-    maxHeight?: string;
+    maxHeight?: number;
 }

package/dist/es2015/editor.component.d.ts

@@ -158,6 +158,7 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
     private _schema;
     private _plugins;
     private _placeholder;
+    private _styleObserver;
     private afterViewInit;
     private contentAreaLoaded;
     constructor(dialogService: DialogService, localization: LocalizationService, cdr: ChangeDetectorRef, ngZone: NgZone, element: ElementRef);
@@ -271,6 +272,8 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
      */
     isEmpty(): boolean;
     private initialize;
+    private normalizeSize;
+    private normalizeProperties;
     private onChangeCallback;
     private onTouchedCallback;
 }

package/dist/es2015/editor.component.js

@@ -291,19 +291,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;
@@ -331,11 +331,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
@@ -494,6 +500,9 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         if (this.subs) {
             this.subs.unsubscribe();
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     }
     /**
      * @hidden
@@ -673,6 +682,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';
+                }
+            }
+        });
+    }
 };
 tslib_1.__decorate([
     Input(),