@progress/kendo-angular-editor 3.0.1 → 3.0.2-dev.202201261529

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: 1642684689,
+    publishDate: 1643210686,
     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/tools/colorpicker/editor-colorpicker.component.js

@@ -46,6 +46,9 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
     set view(view) {
         this.views = [view];
     }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
     /**
      * @hidden
      */
@@ -67,6 +70,7 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
      */
     handleValueChange(color) {
         this.editor.exec(this.editorCommand, color);
+        this.editor.view.focus();
     }
     /**
      * @hidden
@@ -89,6 +93,7 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
         if (!picker.value) {
             picker.value = this.valueCache;
         }
+        this.editor.shouldEmitFocus = true;
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.editor.view.focus());
     }
     /**
@@ -202,10 +207,10 @@ EditorColorPickerComponent = EditorColorPickerComponent_1 = tslib_1.__decorate([
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
-                [views]="['palette']"
-                [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
+                [views]="views"
+                [format]="'hex'"
                 [value]="value"
                 [paletteSettings]="paletteSettings"
                 [disabled]="disabled"

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: 1642684689,
+    publishDate: 1643210686,
     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'
 };
@@ -1861,22 +1861,30 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                 containerElement = this.container.element.nativeElement;
             }
             this.subs.add(fromEvent(containerElement, 'focusin')
-                .subscribe(() => {
+                .subscribe((e) => {
                 if (this.readonly) {
                     contentAreaClasslist.add('k-focus');
                 }
                 if (!this.focusChangedProgrammatically || this.shouldEmitFocus) {
-                    this.ngZone.run(() => this.onFocus.emit());
+                    const relatedTarget = e.relatedTarget;
+                    const isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton || this.shouldEmitFocus) {
+                        this.ngZone.run(() => this.onFocus.emit());
+                    }
                     this.shouldEmitFocus = false;
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
-                .subscribe(() => {
+                .subscribe((e) => {
                 if (this.readonly) {
                     contentAreaClasslist.remove('k-focus');
                 }
                 if (!this.focusChangedProgrammatically) {
-                    this.ngZone.run(() => this.onBlur.emit());
+                    const relatedTarget = e.relatedTarget;
+                    const isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton) {
+                        this.ngZone.run(() => this.onBlur.emit());
+                    }
                 }
             }));
         }
@@ -2500,6 +2508,7 @@ let ColorPickerDialogComponent = class ColorPickerDialogComponent extends Dialog
             this.editor.exec(this.editorCommand, this.value);
         }
         this.dialog.close();
+        this.editor.view.focus();
     }
     setData(args) {
         this.editor = args.editor;
@@ -2507,7 +2516,7 @@ let ColorPickerDialogComponent = class ColorPickerDialogComponent extends Dialog
         this.editorCommand = args.editorCommand;
         this.paletteSettings = args.paletteSettings;
         this.icon = args.icon;
-        this.view = args.view;
+        this.views = args.view ? [args.view] : args.views;
     }
     textFor(key) {
         return this.localization.get(key);
@@ -2532,7 +2541,7 @@ ColorPickerDialogComponent = __decorate([
                 <div class="k-edit-form-container k-window-content" style="text-align: center;">
                     <kendo-colorpicker
                         #colorpicker
-                        [views]="['palette']"
+                        [views]="views"
                         [format]="'hex'"
                         [attr.title]="title"
                         [icon]="icon"
@@ -3573,6 +3582,9 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
     set view(view) {
         this.views = [view];
     }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
     /**
      * @hidden
      */
@@ -3594,6 +3606,7 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
      */
     handleValueChange(color) {
         this.editor.exec(this.editorCommand, color);
+        this.editor.view.focus();
     }
     /**
      * @hidden
@@ -3616,6 +3629,7 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
         if (!picker.value) {
             picker.value = this.valueCache;
         }
+        this.editor.shouldEmitFocus = true;
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.editor.view.focus());
     }
     /**
@@ -3729,10 +3743,10 @@ EditorColorPickerComponent = EditorColorPickerComponent_1 = __decorate([
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
-                [views]="['palette']"
-                [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
+                [views]="views"
+                [format]="'hex'"
                 [value]="value"
                 [paletteSettings]="paletteSettings"
                 [disabled]="disabled"

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: 1642684689,
+    publishDate: 1643210686,
     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'
 };
@@ -1660,22 +1660,30 @@ var EditorComponent = /** @class */ (function () {
                 containerElement = this.container.element.nativeElement;
             }
             this.subs.add(fromEvent(containerElement, 'focusin')
-                .subscribe(function () {
+                .subscribe(function (e) {
                 if (_this.readonly) {
                     contentAreaClasslist_1.add('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically || _this.shouldEmitFocus) {
-                    _this.ngZone.run(function () { return _this.onFocus.emit(); });
+                    var relatedTarget = e.relatedTarget;
+                    var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton || _this.shouldEmitFocus) {
+                        _this.ngZone.run(function () { return _this.onFocus.emit(); });
+                    }
                     _this.shouldEmitFocus = false;
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
-                .subscribe(function () {
+                .subscribe(function (e) {
                 if (_this.readonly) {
                     contentAreaClasslist_1.remove('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.ngZone.run(function () { return _this.onBlur.emit(); });
+                    var relatedTarget = e.relatedTarget;
+                    var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton) {
+                        _this.ngZone.run(function () { return _this.onBlur.emit(); });
+                    }
                 }
             }));
         }
@@ -2074,6 +2082,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
             this.editor.exec(this.editorCommand, this.value);
         }
         this.dialog.close();
+        this.editor.view.focus();
     };
     ColorPickerDialogComponent.prototype.setData = function (args) {
         this.editor = args.editor;
@@ -2081,7 +2090,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
         this.editorCommand = args.editorCommand;
         this.paletteSettings = args.paletteSettings;
         this.icon = args.icon;
-        this.view = args.view;
+        this.views = args.view ? [args.view] : args.views;
     };
     ColorPickerDialogComponent.prototype.textFor = function (key) {
         return this.localization.get(key);
@@ -2096,7 +2105,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
     ], ColorPickerDialogComponent.prototype, "colorPicker", void 0);
     ColorPickerDialogComponent = __decorate([
         Component({
-            template: "\n        <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n            {{ textFor(editorCommand) }}\n        </kendo-dialog-titlebar>\n        <div class=\"k-editor-dialog\">\n            <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n                <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n                    <kendo-colorpicker\n                        #colorpicker\n                        [views]=\"['palette']\"\n                        [format]=\"'hex'\"\n                        [attr.title]=\"title\"\n                        [icon]=\"icon\"\n                        [(value)]=\"value\"\n                        [paletteSettings]=\"paletteSettings\"\n                        (activeColorClick)=\"handleActiveColorClick($event)\"\n                    >\n                    </kendo-colorpicker>\n                </div>\n            </div>\n        </div>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"onCancelAction()\">{{ textFor('dialogCancel') }}</button>\n            <button kendoButton\n                    (click)=\"onConfirmAction()\" [primary]=\"true\">{{ textFor('dialogApply') }}</button>\n        </kendo-dialog-actions>\n    "
+            template: "\n        <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n            {{ textFor(editorCommand) }}\n        </kendo-dialog-titlebar>\n        <div class=\"k-editor-dialog\">\n            <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n                <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n                    <kendo-colorpicker\n                        #colorpicker\n                        [views]=\"views\"\n                        [format]=\"'hex'\"\n                        [attr.title]=\"title\"\n                        [icon]=\"icon\"\n                        [(value)]=\"value\"\n                        [paletteSettings]=\"paletteSettings\"\n                        (activeColorClick)=\"handleActiveColorClick($event)\"\n                    >\n                    </kendo-colorpicker>\n                </div>\n            </div>\n        </div>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"onCancelAction()\">{{ textFor('dialogCancel') }}</button>\n            <button kendoButton\n                    (click)=\"onConfirmAction()\" [primary]=\"true\">{{ textFor('dialogApply') }}</button>\n        </kendo-dialog-actions>\n    "
         }),
         __metadata("design:paramtypes", [DialogRef,
             EditorLocalizationService])
@@ -2986,6 +2995,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
     }
     EditorColorPickerComponent_1 = EditorColorPickerComponent;
     Object.defineProperty(EditorColorPickerComponent.prototype, "view", {
+        get: function () {
+            return (this.views && this.views.length > 0) ? this.views[0] : null;
+        },
         /**
          * @hidden
          *
@@ -3024,6 +3036,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
      */
     EditorColorPickerComponent.prototype.handleValueChange = function (color) {
         this.editor.exec(this.editorCommand, color);
+        this.editor.view.focus();
     };
     /**
      * @hidden
@@ -3047,6 +3060,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         if (!picker.value) {
             picker.value = this.valueCache;
         }
+        this.editor.shouldEmitFocus = true;
         this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.editor.view.focus(); });
     };
     Object.defineProperty(EditorColorPickerComponent.prototype, "outerWidth", {
@@ -3160,7 +3174,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         Component({
             providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return EditorColorPickerComponent_1; }) }],
             selector: 'kendo-toolbar-colorpicker',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [views]=\"['palette']\"\n                [format]=\"'hex'\"\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [views]=\"views\"\n                [format]=\"'hex'\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
         }),
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,

package/dist/npm/dialogs/colorpicker-dialog.component.js

@@ -39,6 +39,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
             this.editor.exec(this.editorCommand, this.value);
         }
         this.dialog.close();
+        this.editor.view.focus();
     };
     ColorPickerDialogComponent.prototype.setData = function (args) {
         this.editor = args.editor;
@@ -46,7 +47,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
         this.editorCommand = args.editorCommand;
         this.paletteSettings = args.paletteSettings;
         this.icon = args.icon;
-        this.view = args.view;
+        this.views = args.view ? [args.view] : args.views;
     };
     ColorPickerDialogComponent.prototype.textFor = function (key) {
         return this.localization.get(key);
@@ -61,7 +62,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
     ], ColorPickerDialogComponent.prototype, "colorPicker", void 0);
     ColorPickerDialogComponent = tslib_1.__decorate([
         core_1.Component({
-            template: "\n        <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n            {{ textFor(editorCommand) }}\n        </kendo-dialog-titlebar>\n        <div class=\"k-editor-dialog\">\n            <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n                <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n                    <kendo-colorpicker\n                        #colorpicker\n                        [views]=\"['palette']\"\n                        [format]=\"'hex'\"\n                        [attr.title]=\"title\"\n                        [icon]=\"icon\"\n                        [(value)]=\"value\"\n                        [paletteSettings]=\"paletteSettings\"\n                        (activeColorClick)=\"handleActiveColorClick($event)\"\n                    >\n                    </kendo-colorpicker>\n                </div>\n            </div>\n        </div>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"onCancelAction()\">{{ textFor('dialogCancel') }}</button>\n            <button kendoButton\n                    (click)=\"onConfirmAction()\" [primary]=\"true\">{{ textFor('dialogApply') }}</button>\n        </kendo-dialog-actions>\n    "
+            template: "\n        <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n            {{ textFor(editorCommand) }}\n        </kendo-dialog-titlebar>\n        <div class=\"k-editor-dialog\">\n            <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n                <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n                    <kendo-colorpicker\n                        #colorpicker\n                        [views]=\"views\"\n                        [format]=\"'hex'\"\n                        [attr.title]=\"title\"\n                        [icon]=\"icon\"\n                        [(value)]=\"value\"\n                        [paletteSettings]=\"paletteSettings\"\n                        (activeColorClick)=\"handleActiveColorClick($event)\"\n                    >\n                    </kendo-colorpicker>\n                </div>\n            </div>\n        </div>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"onCancelAction()\">{{ textFor('dialogCancel') }}</button>\n            <button kendoButton\n                    (click)=\"onConfirmAction()\" [primary]=\"true\">{{ textFor('dialogApply') }}</button>\n        </kendo-dialog-actions>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_dialog_1.DialogRef,
             editor_localization_service_1.EditorLocalizationService])

package/dist/npm/editor.component.js

@@ -762,22 +762,30 @@ var EditorComponent = /** @class */ (function () {
                 containerElement = this.container.element.nativeElement;
             }
             this.subs.add(rxjs_1.fromEvent(containerElement, 'focusin')
-                .subscribe(function () {
+                .subscribe(function (e) {
                 if (_this.readonly) {
                     contentAreaClasslist_1.add('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically || _this.shouldEmitFocus) {
-                    _this.ngZone.run(function () { return _this.onFocus.emit(); });
+                    var relatedTarget = e.relatedTarget;
+                    var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton || _this.shouldEmitFocus) {
+                        _this.ngZone.run(function () { return _this.onFocus.emit(); });
+                    }
                     _this.shouldEmitFocus = false;
                 }
             }));
             this.subs.add(rxjs_1.fromEvent(containerElement, 'focusout')
-                .subscribe(function () {
+                .subscribe(function (e) {
                 if (_this.readonly) {
                     contentAreaClasslist_1.remove('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.ngZone.run(function () { return _this.onBlur.emit(); });
+                    var relatedTarget = e.relatedTarget;
+                    var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
+                    if (!isActiveColorButton) {
+                        _this.ngZone.run(function () { return _this.onBlur.emit(); });
+                    }
                 }
             }));
         }

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: 1642684689,
+    publishDate: 1643210686,
     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/npm/tools/colorpicker/editor-colorpicker.component.js

@@ -43,6 +43,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
     }
     EditorColorPickerComponent_1 = EditorColorPickerComponent;
     Object.defineProperty(EditorColorPickerComponent.prototype, "view", {
+        get: function () {
+            return (this.views && this.views.length > 0) ? this.views[0] : null;
+        },
         /**
          * @hidden
          *
@@ -81,6 +84,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
      */
     EditorColorPickerComponent.prototype.handleValueChange = function (color) {
         this.editor.exec(this.editorCommand, color);
+        this.editor.view.focus();
     };
     /**
      * @hidden
@@ -104,6 +108,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         if (!picker.value) {
             picker.value = this.valueCache;
         }
+        this.editor.shouldEmitFocus = true;
         this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () { return _this.editor.view.focus(); });
     };
     Object.defineProperty(EditorColorPickerComponent.prototype, "outerWidth", {
@@ -217,7 +222,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         core_1.Component({
             providers: [{ provide: kendo_angular_toolbar_1.ToolBarToolComponent, useExisting: core_1.forwardRef(function () { return EditorColorPickerComponent_1; }) }],
             selector: 'kendo-toolbar-colorpicker',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [views]=\"['palette']\"\n                [format]=\"'hex'\"\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [views]=\"views\"\n                [format]=\"'hex'\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
         }),
         tslib_1.__param(0, core_1.Host()),
         tslib_1.__metadata("design:paramtypes", [editor_component_1.EditorComponent,