@progress/kendo-angular-editor 2.4.0 → 2.4.2-dev.202110291106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/cdn/js/kendo-angular-editor.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/editor.component.js +58 -5
  4. package/dist/es/package-metadata.js +1 -1
  5. package/dist/es/tools/colorpicker/editor-colorpicker.component.js +3 -1
  6. package/dist/es/tools/fontfamily/editor-fontfamily.component.js +3 -1
  7. package/dist/es/tools/fontsize/editor-fontsize.component.js +3 -1
  8. package/dist/es/tools/format/editor-format.component.js +3 -1
  9. package/dist/es/tools/shared/editor-command-base.js +3 -1
  10. package/dist/es/tools/tables/editor-insert-table-button.component.js +5 -3
  11. package/dist/es2015/common/resizable-options.interface.d.ts +8 -8
  12. package/dist/es2015/editor.component.d.ts +3 -0
  13. package/dist/es2015/editor.component.js +57 -5
  14. package/dist/es2015/index.metadata.json +1 -1
  15. package/dist/es2015/package-metadata.js +1 -1
  16. package/dist/es2015/tools/colorpicker/editor-colorpicker.component.js +3 -1
  17. package/dist/es2015/tools/fontfamily/editor-fontfamily.component.js +3 -1
  18. package/dist/es2015/tools/fontsize/editor-fontsize.component.js +3 -1
  19. package/dist/es2015/tools/format/editor-format.component.js +3 -1
  20. package/dist/es2015/tools/shared/editor-command-base.js +3 -1
  21. package/dist/es2015/tools/tables/editor-insert-table-button.component.js +5 -3
  22. package/dist/fesm2015/index.js +78 -14
  23. package/dist/fesm5/index.js +79 -14
  24. package/dist/npm/editor.component.js +58 -5
  25. package/dist/npm/package-metadata.js +1 -1
  26. package/dist/npm/tools/colorpicker/editor-colorpicker.component.js +3 -1
  27. package/dist/npm/tools/fontfamily/editor-fontfamily.component.js +3 -1
  28. package/dist/npm/tools/fontsize/editor-fontsize.component.js +3 -1
  29. package/dist/npm/tools/format/editor-format.component.js +3 -1
  30. package/dist/npm/tools/shared/editor-command-base.js +3 -1
  31. package/dist/npm/tools/tables/editor-insert-table-button.component.js +5 -3
  32. package/dist/systemjs/kendo-angular-editor.js +1 -1
  33. package/package.json +6 -6
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-editor',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1634902004,
12
+ publishDate: 1635505364,
13
13
  version: '',
14
14
  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'
15
15
  };
@@ -50,7 +50,9 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
50
50
  });
51
51
  }
52
52
  ngOnDestroy() {
53
- this.subs.unsubscribe();
53
+ if (this.subs) {
54
+ this.subs.unsubscribe();
55
+ }
54
56
  }
55
57
  /**
56
58
  * @hidden
@@ -87,7 +87,9 @@ let EditorFontFamilyComponent = EditorFontFamilyComponent_1 = class EditorFontFa
87
87
  }
88
88
  }
89
89
  ngOnDestroy() {
90
- this.subs.unsubscribe();
90
+ if (this.subs) {
91
+ this.subs.unsubscribe();
92
+ }
91
93
  }
92
94
  get outerWidth() {
93
95
  if (this.element) {
@@ -82,7 +82,9 @@ let EditorFontSizeComponent = EditorFontSizeComponent_1 = class EditorFontSizeCo
82
82
  }
83
83
  }
84
84
  ngOnDestroy() {
85
- this.subs.unsubscribe();
85
+ if (this.subs) {
86
+ this.subs.unsubscribe();
87
+ }
86
88
  }
87
89
  get outerWidth() {
88
90
  if (this.element) {
@@ -82,7 +82,9 @@ let EditorFormatComponent = EditorFormatComponent_1 = class EditorFormatComponen
82
82
  }
83
83
  }
84
84
  ngOnDestroy() {
85
- this.subs.unsubscribe();
85
+ if (this.subs) {
86
+ this.subs.unsubscribe();
87
+ }
86
88
  }
87
89
  get outerWidth() {
88
90
  const element = this.formatDropDownList.element;
@@ -31,7 +31,9 @@ export class EditorCommandBase {
31
31
  });
32
32
  }
33
33
  ngOnDestroy() {
34
- this.subs.unsubscribe();
34
+ if (this.subs) {
35
+ this.subs.unsubscribe();
36
+ }
35
37
  }
36
38
  // tslint:disable-next-line
37
39
  clickHandler() { }
@@ -38,16 +38,18 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
38
38
  this.subs = this.editor.stateChange.subscribe(({ insertTable }) => {
39
39
  this.disabled = insertTable.disabled;
40
40
  });
41
- this.subs = this.buttonBlurred.pipe(concatMap(() => interval(200).pipe(take(1), takeUntil(this.cellClicked)))).subscribe(() => {
41
+ this.subs.add(this.buttonBlurred.pipe(concatMap(() => interval(200).pipe(take(1), takeUntil(this.cellClicked)))).subscribe(() => {
42
42
  this.toggle(false);
43
- });
43
+ }));
44
44
  }
45
45
  ngAfterViewInit() {
46
46
  this.getButton().tabIndex = -1;
47
47
  }
48
48
  ngOnDestroy() {
49
49
  this.destroyPopup();
50
- this.subs.unsubscribe();
50
+ if (this.subs) {
51
+ this.subs.unsubscribe();
52
+ }
51
53
  }
52
54
  get outerWidth() {
53
55
  if (this.element) {
@@ -27,7 +27,7 @@ const packageMetadata = {
27
27
  name: '@progress/kendo-angular-editor',
28
28
  productName: 'Kendo UI for Angular',
29
29
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
30
- publishDate: 1634902004,
30
+ publishDate: 1635505364,
31
31
  version: '',
32
32
  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'
33
33
  };
@@ -2721,19 +2721,19 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
2721
2721
  }
2722
2722
  get minWidth() {
2723
2723
  const resizableOptions = this.resizable;
2724
- return resizableOptions.minWidth;
2724
+ return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
2725
2725
  }
2726
2726
  get maxWidth() {
2727
2727
  const resizableOptions = this.resizable;
2728
- return resizableOptions.maxWidth;
2728
+ return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
2729
2729
  }
2730
2730
  get minHeight() {
2731
2731
  const resizableOptions = this.resizable;
2732
- return resizableOptions.minHeight;
2732
+ return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
2733
2733
  }
2734
2734
  get maxHeight() {
2735
2735
  const resizableOptions = this.resizable;
2736
- return resizableOptions.maxHeight;
2736
+ return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
2737
2737
  }
2738
2738
  get toolbar() {
2739
2739
  return this.defaultToolbarComponent || this.userToolBarComponent;
@@ -2761,11 +2761,17 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
2761
2761
  if (!this.iframe) {
2762
2762
  this.contentAreaLoaded.next();
2763
2763
  }
2764
+ if (this.resizable) {
2765
+ this.normalizeSize();
2766
+ }
2764
2767
  }
2765
2768
  ngOnChanges(changes) {
2766
2769
  if (changes.iframe && !changes.iframe.isFirstChange()) {
2767
2770
  this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialize());
2768
2771
  }
2772
+ if (changes.resizable && !changes.resizable.isFirstChange()) {
2773
+ this.normalizeSize();
2774
+ }
2769
2775
  }
2770
2776
  /**
2771
2777
  * @hidden
@@ -2921,7 +2927,12 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
2921
2927
  return getHtml(this._view.state);
2922
2928
  }
2923
2929
  ngOnDestroy() {
2924
- this.subs.unsubscribe();
2930
+ if (this.subs) {
2931
+ this.subs.unsubscribe();
2932
+ }
2933
+ if (this._styleObserver) {
2934
+ this._styleObserver.disconnect();
2935
+ }
2925
2936
  }
2926
2937
  /**
2927
2938
  * @hidden
@@ -3101,6 +3112,47 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
3101
3112
  .pipe(filter((event) => !this.viewMountElement.contains(event.relatedTarget)))
3102
3113
  .subscribe(() => this.onTouchedCallback()));
3103
3114
  }
3115
+ normalizeSize() {
3116
+ if (typeof this.resizable === 'object' && !this._styleObserver) {
3117
+ const element = this.element.nativeElement;
3118
+ this._styleObserver = new MutationObserver(() => {
3119
+ this.ngZone.runOutsideAngular(() => this.normalizeProperties(element));
3120
+ });
3121
+ this._styleObserver.observe(element, { attributeFilter: ['style'] });
3122
+ }
3123
+ }
3124
+ normalizeProperties(element) {
3125
+ const props = Object.keys(this.resizable);
3126
+ const pixelWidth = parseInt(element.style.width, 10);
3127
+ const pixelHeight = parseInt(element.style.height, 10);
3128
+ const resizable = this.resizable;
3129
+ props.forEach(prop => {
3130
+ const isMinProp = prop.startsWith('min');
3131
+ const isMaxProp = !isMinProp;
3132
+ const isWidthProp = prop.endsWith('Width');
3133
+ const isHeightProp = !isWidthProp;
3134
+ if (isMinProp && isWidthProp) {
3135
+ if (pixelWidth < resizable.minWidth) {
3136
+ element.style.width = resizable.minWidth + 'px';
3137
+ }
3138
+ }
3139
+ else if (isMinProp && isHeightProp) {
3140
+ if (pixelHeight < resizable.minHeight) {
3141
+ element.style.height = resizable.minHeight + 'px';
3142
+ }
3143
+ }
3144
+ else if (isMaxProp && isWidthProp) {
3145
+ if (pixelWidth > resizable.maxWidth) {
3146
+ element.style.width = resizable.maxWidth + 'px';
3147
+ }
3148
+ }
3149
+ else {
3150
+ if (pixelHeight > resizable.maxHeight) {
3151
+ element.style.height = resizable.maxHeight + 'px';
3152
+ }
3153
+ }
3154
+ });
3155
+ }
3104
3156
  };
3105
3157
  __decorate([
3106
3158
  Input(),
@@ -3993,7 +4045,9 @@ let EditorFormatComponent = EditorFormatComponent_1 = class EditorFormatComponen
3993
4045
  }
3994
4046
  }
3995
4047
  ngOnDestroy() {
3996
- this.subs.unsubscribe();
4048
+ if (this.subs) {
4049
+ this.subs.unsubscribe();
4050
+ }
3997
4051
  }
3998
4052
  get outerWidth() {
3999
4053
  const element = this.formatDropDownList.element;
@@ -4344,7 +4398,9 @@ let EditorFontSizeComponent = EditorFontSizeComponent_1 = class EditorFontSizeCo
4344
4398
  }
4345
4399
  }
4346
4400
  ngOnDestroy() {
4347
- this.subs.unsubscribe();
4401
+ if (this.subs) {
4402
+ this.subs.unsubscribe();
4403
+ }
4348
4404
  }
4349
4405
  get outerWidth() {
4350
4406
  if (this.element) {
@@ -4547,7 +4603,9 @@ let EditorFontFamilyComponent = EditorFontFamilyComponent_1 = class EditorFontFa
4547
4603
  }
4548
4604
  }
4549
4605
  ngOnDestroy() {
4550
- this.subs.unsubscribe();
4606
+ if (this.subs) {
4607
+ this.subs.unsubscribe();
4608
+ }
4551
4609
  }
4552
4610
  get outerWidth() {
4553
4611
  if (this.element) {
@@ -4712,7 +4770,9 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
4712
4770
  });
4713
4771
  }
4714
4772
  ngOnDestroy() {
4715
- this.subs.unsubscribe();
4773
+ if (this.subs) {
4774
+ this.subs.unsubscribe();
4775
+ }
4716
4776
  }
4717
4777
  /**
4718
4778
  * @hidden
@@ -4913,16 +4973,18 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
4913
4973
  this.subs = this.editor.stateChange.subscribe(({ insertTable }) => {
4914
4974
  this.disabled = insertTable.disabled;
4915
4975
  });
4916
- this.subs = this.buttonBlurred.pipe(concatMap(() => interval(200).pipe(take(1), takeUntil(this.cellClicked)))).subscribe(() => {
4976
+ this.subs.add(this.buttonBlurred.pipe(concatMap(() => interval(200).pipe(take(1), takeUntil(this.cellClicked)))).subscribe(() => {
4917
4977
  this.toggle(false);
4918
- });
4978
+ }));
4919
4979
  }
4920
4980
  ngAfterViewInit() {
4921
4981
  this.getButton().tabIndex = -1;
4922
4982
  }
4923
4983
  ngOnDestroy() {
4924
4984
  this.destroyPopup();
4925
- this.subs.unsubscribe();
4985
+ if (this.subs) {
4986
+ this.subs.unsubscribe();
4987
+ }
4926
4988
  }
4927
4989
  get outerWidth() {
4928
4990
  if (this.element) {
@@ -5226,7 +5288,9 @@ class EditorCommandBase {
5226
5288
  });
5227
5289
  }
5228
5290
  ngOnDestroy() {
5229
- this.subs.unsubscribe();
5291
+ if (this.subs) {
5292
+ this.subs.unsubscribe();
5293
+ }
5230
5294
  }
5231
5295
  // tslint:disable-next-line
5232
5296
  clickHandler() { }
@@ -27,7 +27,7 @@ var packageMetadata = {
27
27
  name: '@progress/kendo-angular-editor',
28
28
  productName: 'Kendo UI for Angular',
29
29
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
30
- publishDate: 1634902004,
30
+ publishDate: 1635505364,
31
31
  version: '',
32
32
  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'
33
33
  };
@@ -2586,7 +2586,7 @@ var EditorComponent = /** @class */ (function () {
2586
2586
  Object.defineProperty(EditorComponent.prototype, "minWidth", {
2587
2587
  get: function () {
2588
2588
  var resizableOptions = this.resizable;
2589
- return resizableOptions.minWidth;
2589
+ return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
2590
2590
  },
2591
2591
  enumerable: true,
2592
2592
  configurable: true
@@ -2594,7 +2594,7 @@ var EditorComponent = /** @class */ (function () {
2594
2594
  Object.defineProperty(EditorComponent.prototype, "maxWidth", {
2595
2595
  get: function () {
2596
2596
  var resizableOptions = this.resizable;
2597
- return resizableOptions.maxWidth;
2597
+ return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
2598
2598
  },
2599
2599
  enumerable: true,
2600
2600
  configurable: true
@@ -2602,7 +2602,7 @@ var EditorComponent = /** @class */ (function () {
2602
2602
  Object.defineProperty(EditorComponent.prototype, "minHeight", {
2603
2603
  get: function () {
2604
2604
  var resizableOptions = this.resizable;
2605
- return resizableOptions.minHeight;
2605
+ return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
2606
2606
  },
2607
2607
  enumerable: true,
2608
2608
  configurable: true
@@ -2610,7 +2610,7 @@ var EditorComponent = /** @class */ (function () {
2610
2610
  Object.defineProperty(EditorComponent.prototype, "maxHeight", {
2611
2611
  get: function () {
2612
2612
  var resizableOptions = this.resizable;
2613
- return resizableOptions.maxHeight;
2613
+ return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
2614
2614
  },
2615
2615
  enumerable: true,
2616
2616
  configurable: true
@@ -2655,12 +2655,18 @@ var EditorComponent = /** @class */ (function () {
2655
2655
  if (!this.iframe) {
2656
2656
  this.contentAreaLoaded.next();
2657
2657
  }
2658
+ if (this.resizable) {
2659
+ this.normalizeSize();
2660
+ }
2658
2661
  };
2659
2662
  EditorComponent.prototype.ngOnChanges = function (changes) {
2660
2663
  var _this = this;
2661
2664
  if (changes.iframe && !changes.iframe.isFirstChange()) {
2662
2665
  this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.initialize(); });
2663
2666
  }
2667
+ if (changes.resizable && !changes.resizable.isFirstChange()) {
2668
+ this.normalizeSize();
2669
+ }
2664
2670
  };
2665
2671
  /**
2666
2672
  * @hidden
@@ -2816,7 +2822,12 @@ var EditorComponent = /** @class */ (function () {
2816
2822
  return getHtml(this._view.state);
2817
2823
  };
2818
2824
  EditorComponent.prototype.ngOnDestroy = function () {
2819
- this.subs.unsubscribe();
2825
+ if (this.subs) {
2826
+ this.subs.unsubscribe();
2827
+ }
2828
+ if (this._styleObserver) {
2829
+ this._styleObserver.disconnect();
2830
+ }
2820
2831
  };
2821
2832
  /**
2822
2833
  * @hidden
@@ -2997,6 +3008,48 @@ var EditorComponent = /** @class */ (function () {
2997
3008
  .pipe(filter(function (event) { return !_this.viewMountElement.contains(event.relatedTarget); }))
2998
3009
  .subscribe(function () { return _this.onTouchedCallback(); }));
2999
3010
  };
3011
+ EditorComponent.prototype.normalizeSize = function () {
3012
+ var _this = this;
3013
+ if (typeof this.resizable === 'object' && !this._styleObserver) {
3014
+ var element_1 = this.element.nativeElement;
3015
+ this._styleObserver = new MutationObserver(function () {
3016
+ _this.ngZone.runOutsideAngular(function () { return _this.normalizeProperties(element_1); });
3017
+ });
3018
+ this._styleObserver.observe(element_1, { attributeFilter: ['style'] });
3019
+ }
3020
+ };
3021
+ EditorComponent.prototype.normalizeProperties = function (element) {
3022
+ var props = Object.keys(this.resizable);
3023
+ var pixelWidth = parseInt(element.style.width, 10);
3024
+ var pixelHeight = parseInt(element.style.height, 10);
3025
+ var resizable = this.resizable;
3026
+ props.forEach(function (prop) {
3027
+ var isMinProp = prop.startsWith('min');
3028
+ var isMaxProp = !isMinProp;
3029
+ var isWidthProp = prop.endsWith('Width');
3030
+ var isHeightProp = !isWidthProp;
3031
+ if (isMinProp && isWidthProp) {
3032
+ if (pixelWidth < resizable.minWidth) {
3033
+ element.style.width = resizable.minWidth + 'px';
3034
+ }
3035
+ }
3036
+ else if (isMinProp && isHeightProp) {
3037
+ if (pixelHeight < resizable.minHeight) {
3038
+ element.style.height = resizable.minHeight + 'px';
3039
+ }
3040
+ }
3041
+ else if (isMaxProp && isWidthProp) {
3042
+ if (pixelWidth > resizable.maxWidth) {
3043
+ element.style.width = resizable.maxWidth + 'px';
3044
+ }
3045
+ }
3046
+ else {
3047
+ if (pixelHeight > resizable.maxHeight) {
3048
+ element.style.height = resizable.maxHeight + 'px';
3049
+ }
3050
+ }
3051
+ });
3052
+ };
3000
3053
  var EditorComponent_1;
3001
3054
  __decorate([
3002
3055
  Input(),
@@ -3594,7 +3647,9 @@ var EditorFormatComponent = /** @class */ (function (_super) {
3594
3647
  }
3595
3648
  };
3596
3649
  EditorFormatComponent.prototype.ngOnDestroy = function () {
3597
- this.subs.unsubscribe();
3650
+ if (this.subs) {
3651
+ this.subs.unsubscribe();
3652
+ }
3598
3653
  };
3599
3654
  Object.defineProperty(EditorFormatComponent.prototype, "outerWidth", {
3600
3655
  get: function () {
@@ -3894,7 +3949,9 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
3894
3949
  }
3895
3950
  };
3896
3951
  EditorFontSizeComponent.prototype.ngOnDestroy = function () {
3897
- this.subs.unsubscribe();
3952
+ if (this.subs) {
3953
+ this.subs.unsubscribe();
3954
+ }
3898
3955
  };
3899
3956
  Object.defineProperty(EditorFontSizeComponent.prototype, "outerWidth", {
3900
3957
  get: function () {
@@ -4084,7 +4141,9 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
4084
4141
  }
4085
4142
  };
4086
4143
  EditorFontFamilyComponent.prototype.ngOnDestroy = function () {
4087
- this.subs.unsubscribe();
4144
+ if (this.subs) {
4145
+ this.subs.unsubscribe();
4146
+ }
4088
4147
  };
4089
4148
  Object.defineProperty(EditorFontFamilyComponent.prototype, "outerWidth", {
4090
4149
  get: function () {
@@ -4236,7 +4295,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
4236
4295
  });
4237
4296
  };
4238
4297
  EditorColorPickerComponent.prototype.ngOnDestroy = function () {
4239
- this.subs.unsubscribe();
4298
+ if (this.subs) {
4299
+ this.subs.unsubscribe();
4300
+ }
4240
4301
  };
4241
4302
  /**
4242
4303
  * @hidden
@@ -4410,9 +4471,9 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
4410
4471
  var insertTable = _a.insertTable;
4411
4472
  _this.disabled = insertTable.disabled;
4412
4473
  });
4413
- _this.subs = _this.buttonBlurred.pipe(concatMap(function () { return interval(200).pipe(take(1), takeUntil(_this.cellClicked)); })).subscribe(function () {
4474
+ _this.subs.add(_this.buttonBlurred.pipe(concatMap(function () { return interval(200).pipe(take(1), takeUntil(_this.cellClicked)); })).subscribe(function () {
4414
4475
  _this.toggle(false);
4415
- });
4476
+ }));
4416
4477
  return _this;
4417
4478
  }
4418
4479
  EditorInsertTableButtonComponent_1 = EditorInsertTableButtonComponent;
@@ -4421,7 +4482,9 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
4421
4482
  };
4422
4483
  EditorInsertTableButtonComponent.prototype.ngOnDestroy = function () {
4423
4484
  this.destroyPopup();
4424
- this.subs.unsubscribe();
4485
+ if (this.subs) {
4486
+ this.subs.unsubscribe();
4487
+ }
4425
4488
  };
4426
4489
  Object.defineProperty(EditorInsertTableButtonComponent.prototype, "outerWidth", {
4427
4490
  get: function () {
@@ -4706,7 +4769,9 @@ var EditorCommandBase = /** @class */ (function () {
4706
4769
  });
4707
4770
  };
4708
4771
  EditorCommandBase.prototype.ngOnDestroy = function () {
4709
- this.subs.unsubscribe();
4772
+ if (this.subs) {
4773
+ this.subs.unsubscribe();
4774
+ }
4710
4775
  };
4711
4776
  // tslint:disable-next-line
4712
4777
  EditorCommandBase.prototype.clickHandler = function () { };
@@ -347,7 +347,7 @@ var EditorComponent = /** @class */ (function () {
347
347
  Object.defineProperty(EditorComponent.prototype, "minWidth", {
348
348
  get: function () {
349
349
  var resizableOptions = this.resizable;
350
- return resizableOptions.minWidth;
350
+ return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
351
351
  },
352
352
  enumerable: true,
353
353
  configurable: true
@@ -355,7 +355,7 @@ var EditorComponent = /** @class */ (function () {
355
355
  Object.defineProperty(EditorComponent.prototype, "maxWidth", {
356
356
  get: function () {
357
357
  var resizableOptions = this.resizable;
358
- return resizableOptions.maxWidth;
358
+ return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
359
359
  },
360
360
  enumerable: true,
361
361
  configurable: true
@@ -363,7 +363,7 @@ var EditorComponent = /** @class */ (function () {
363
363
  Object.defineProperty(EditorComponent.prototype, "minHeight", {
364
364
  get: function () {
365
365
  var resizableOptions = this.resizable;
366
- return resizableOptions.minHeight;
366
+ return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
367
367
  },
368
368
  enumerable: true,
369
369
  configurable: true
@@ -371,7 +371,7 @@ var EditorComponent = /** @class */ (function () {
371
371
  Object.defineProperty(EditorComponent.prototype, "maxHeight", {
372
372
  get: function () {
373
373
  var resizableOptions = this.resizable;
374
- return resizableOptions.maxHeight;
374
+ return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
375
375
  },
376
376
  enumerable: true,
377
377
  configurable: true
@@ -416,12 +416,18 @@ var EditorComponent = /** @class */ (function () {
416
416
  if (!this.iframe) {
417
417
  this.contentAreaLoaded.next();
418
418
  }
419
+ if (this.resizable) {
420
+ this.normalizeSize();
421
+ }
419
422
  };
420
423
  EditorComponent.prototype.ngOnChanges = function (changes) {
421
424
  var _this = this;
422
425
  if (changes.iframe && !changes.iframe.isFirstChange()) {
423
426
  this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () { return _this.initialize(); });
424
427
  }
428
+ if (changes.resizable && !changes.resizable.isFirstChange()) {
429
+ this.normalizeSize();
430
+ }
425
431
  };
426
432
  /**
427
433
  * @hidden
@@ -577,7 +583,12 @@ var EditorComponent = /** @class */ (function () {
577
583
  return kendo_editor_common_1.getHtml(this._view.state);
578
584
  };
579
585
  EditorComponent.prototype.ngOnDestroy = function () {
580
- this.subs.unsubscribe();
586
+ if (this.subs) {
587
+ this.subs.unsubscribe();
588
+ }
589
+ if (this._styleObserver) {
590
+ this._styleObserver.disconnect();
591
+ }
581
592
  };
582
593
  /**
583
594
  * @hidden
@@ -758,6 +769,48 @@ var EditorComponent = /** @class */ (function () {
758
769
  .pipe(operators_1.filter(function (event) { return !_this.viewMountElement.contains(event.relatedTarget); }))
759
770
  .subscribe(function () { return _this.onTouchedCallback(); }));
760
771
  };
772
+ EditorComponent.prototype.normalizeSize = function () {
773
+ var _this = this;
774
+ if (typeof this.resizable === 'object' && !this._styleObserver) {
775
+ var element_1 = this.element.nativeElement;
776
+ this._styleObserver = new MutationObserver(function () {
777
+ _this.ngZone.runOutsideAngular(function () { return _this.normalizeProperties(element_1); });
778
+ });
779
+ this._styleObserver.observe(element_1, { attributeFilter: ['style'] });
780
+ }
781
+ };
782
+ EditorComponent.prototype.normalizeProperties = function (element) {
783
+ var props = Object.keys(this.resizable);
784
+ var pixelWidth = parseInt(element.style.width, 10);
785
+ var pixelHeight = parseInt(element.style.height, 10);
786
+ var resizable = this.resizable;
787
+ props.forEach(function (prop) {
788
+ var isMinProp = prop.startsWith('min');
789
+ var isMaxProp = !isMinProp;
790
+ var isWidthProp = prop.endsWith('Width');
791
+ var isHeightProp = !isWidthProp;
792
+ if (isMinProp && isWidthProp) {
793
+ if (pixelWidth < resizable.minWidth) {
794
+ element.style.width = resizable.minWidth + 'px';
795
+ }
796
+ }
797
+ else if (isMinProp && isHeightProp) {
798
+ if (pixelHeight < resizable.minHeight) {
799
+ element.style.height = resizable.minHeight + 'px';
800
+ }
801
+ }
802
+ else if (isMaxProp && isWidthProp) {
803
+ if (pixelWidth > resizable.maxWidth) {
804
+ element.style.width = resizable.maxWidth + 'px';
805
+ }
806
+ }
807
+ else {
808
+ if (pixelHeight > resizable.maxHeight) {
809
+ element.style.height = resizable.maxHeight + 'px';
810
+ }
811
+ }
812
+ });
813
+ };
761
814
  var EditorComponent_1;
762
815
  tslib_1.__decorate([
763
816
  core_1.Input(),
@@ -11,7 +11,7 @@ exports.packageMetadata = {
11
11
  name: '@progress/kendo-angular-editor',
12
12
  productName: 'Kendo UI for Angular',
13
13
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
14
- publishDate: 1634902004,
14
+ publishDate: 1635505364,
15
15
  version: '',
16
16
  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'
17
17
  };
@@ -60,7 +60,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
60
60
  });
61
61
  };
62
62
  EditorColorPickerComponent.prototype.ngOnDestroy = function () {
63
- this.subs.unsubscribe();
63
+ if (this.subs) {
64
+ this.subs.unsubscribe();
65
+ }
64
66
  };
65
67
  /**
66
68
  * @hidden
@@ -97,7 +97,9 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
97
97
  }
98
98
  };
99
99
  EditorFontFamilyComponent.prototype.ngOnDestroy = function () {
100
- this.subs.unsubscribe();
100
+ if (this.subs) {
101
+ this.subs.unsubscribe();
102
+ }
101
103
  };
102
104
  Object.defineProperty(EditorFontFamilyComponent.prototype, "outerWidth", {
103
105
  get: function () {
@@ -92,7 +92,9 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
92
92
  }
93
93
  };
94
94
  EditorFontSizeComponent.prototype.ngOnDestroy = function () {
95
- this.subs.unsubscribe();
95
+ if (this.subs) {
96
+ this.subs.unsubscribe();
97
+ }
96
98
  };
97
99
  Object.defineProperty(EditorFontSizeComponent.prototype, "outerWidth", {
98
100
  get: function () {
@@ -92,7 +92,9 @@ var EditorFormatComponent = /** @class */ (function (_super) {
92
92
  }
93
93
  };
94
94
  EditorFormatComponent.prototype.ngOnDestroy = function () {
95
- this.subs.unsubscribe();
95
+ if (this.subs) {
96
+ this.subs.unsubscribe();
97
+ }
96
98
  };
97
99
  Object.defineProperty(EditorFormatComponent.prototype, "outerWidth", {
98
100
  get: function () {
@@ -34,7 +34,9 @@ var EditorCommandBase = /** @class */ (function () {
34
34
  });
35
35
  };
36
36
  EditorCommandBase.prototype.ngOnDestroy = function () {
37
- this.subs.unsubscribe();
37
+ if (this.subs) {
38
+ this.subs.unsubscribe();
39
+ }
38
40
  };
39
41
  // tslint:disable-next-line
40
42
  EditorCommandBase.prototype.clickHandler = function () { };