@progress/kendo-angular-editor 3.1.2 → 4.0.0-next.202203161118

package/esm2015/tools/alignment/editor-align-center-button.directive.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from '../shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/editor-localization.service";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor AlignCenter tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ * In addition, the directive updates the `selected` state of the button according to the cursor position in the editing area.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignCenterButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorAlignCenterButtonDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('alignCenter', button, localization, providerService, toolsService);
+    }
+}
+EditorAlignCenterButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignCenterButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorAlignCenterButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignCenterButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorAlignCenterButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });

package/esm2015/tools/alignment/editor-align-justify-button.directive.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from '../shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/editor-localization.service";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor AlignJustify tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ * In addition, the directive updates the `selected` state of the button according to the cursor position in the editing area.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignJustifyButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorAlignJustifyButtonDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('alignJustify', button, localization, providerService, toolsService);
+    }
+}
+EditorAlignJustifyButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignJustifyButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorAlignJustifyButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignJustifyButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorAlignJustifyButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });

package/esm2015/tools/alignment/editor-align-left-button.directive.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from '../shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/editor-localization.service";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor AlignLeft tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ * In addition, the directive updates the `selected` state of the button according to the cursor position in the editing area.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignLeftButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorAlignLeftButtonDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('alignLeft', button, localization, providerService, toolsService);
+    }
+}
+EditorAlignLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignLeftButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorAlignLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignLeftButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorAlignLeftButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });

package/esm2015/tools/alignment/editor-align-right-button.directive.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from '../shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/editor-localization.service";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor AlignRight tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ * In addition, the directive updates the `selected` state of the button according to the cursor position in the editing area.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorAlignRightButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorAlignRightButtonDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('alignRight', button, localization, providerService, toolsService);
+    }
+}
+EditorAlignRightButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignRightButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorAlignRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorAlignRightButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorAlignRightButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });

package/esm2015/tools/blockquote/editor-blockquote-button.directive.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from '../shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/editor-localization.service";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor Blockquote tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorBlockquoteButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorBlockquoteButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorBlockquoteDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('blockquote', button, localization, providerService, toolsService);
+    }
+}
+EditorBlockquoteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorBlockquoteDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorBlockquoteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorBlockquoteDirective, selector: "kendo-toolbar-button[kendoEditorBlockquoteButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorBlockquoteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorBlockquoteButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });

package/esm2015/tools/colorpicker/editor-back-color.directive.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { commandIcons } from '../../config/command-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "./editor-colorpicker.component";
+/**
+ * A directive which configures an `EditorColorPickerComponent`
+ * for manipulating the background color of the text
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ */
+export class EditorBackColorDirective {
+    constructor(colorPicker) {
+        this.colorPicker = colorPicker;
+        this.colorPicker.icon = commandIcons.backColor;
+        this.colorPicker.editorCommand = 'backColor';
+    }
+}
+EditorBackColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorBackColorDirective, deps: [{ token: i1.EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
+EditorBackColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorBackColorDirective, selector: "[kendoEditorBackColor]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorBackColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoEditorBackColor]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditorColorPickerComponent }]; } });

package/esm2015/tools/colorpicker/editor-colorpicker.component.js

@@ -0,0 +1,262 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+// eslint-disable no-forward-ref
+import { Component, Input, forwardRef, ViewChild, ElementRef } from '@angular/core';
+import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
+import { outerWidth } from '../../util';
+import { ColorPickerDialogComponent } from '../../dialogs/colorpicker-dialog.component';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../../localization/editor-localization.service";
+import * as i2 from "@progress/kendo-angular-dialog";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-buttons";
+/**
+ * A component which configures an existing ColorPickerComponent as a ToolBar tool.
+ * To associate a `kendo-toolbar-colorpicker` with an Editor command that changes the
+ * foreground or the background color of the text, use the `kendoEditorForeColor` or `kendoEditorBackColor` directive.
+ */
+export class EditorColorPickerComponent extends ToolBarToolComponent {
+    constructor(localization, dialogService, ngZone, providerService) {
+        super();
+        this.localization = localization;
+        this.dialogService = dialogService;
+        this.ngZone = ngZone;
+        this.tabindex = -1;
+        /**
+         * Specifies if the component should be disabled.
+         */
+        this.disabled = false;
+        /**
+         * Specifies whether the ColorPicker will render a gradient, palette, or both in its popup.
+         *
+         * @default ['palette']
+         */
+        this.views = ['palette'];
+        this.editor = providerService.editor;
+    }
+    /**
+     * @hidden
+     *
+     * For backward compatibility with configurations using the deprecated "view" input.
+     */
+    set view(view) {
+        this.views = [view];
+    }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
+    /**
+     * @hidden
+     */
+    get title() {
+        return this.localization.get(this.editorCommand);
+    }
+    ngOnInit() {
+        this.subs = this.editor.stateChange.subscribe(({ style }) => {
+            this.disabled = style.disabled;
+        });
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(color) {
+        this.editor.exec(this.editorCommand, color);
+        this.editor.view.focus();
+    }
+    /**
+     * @hidden
+     */
+    handleActiveColorClick(event) {
+        event.preventOpen();
+        this.handleValueChange(event.color);
+    }
+    /**
+     * @hidden
+     */
+    onOpen(picker) {
+        this.valueCache = picker.value;
+        picker.reset();
+    }
+    /**
+     * @hidden
+     */
+    onClose(picker) {
+        if (!picker.value) {
+            picker.value = this.valueCache;
+        }
+        this.editor.shouldEmitFocus = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.editor.view.focus());
+    }
+    /**
+     * @hidden
+     */
+    get outerWidth() {
+        if (this.element) {
+            return outerWidth(this.element.nativeElement);
+        }
+    }
+    /**
+     * @hidden
+     */
+    openDialog() {
+        const dialogSettings = {
+            appendTo: this.editor.dialogContainer,
+            content: ColorPickerDialogComponent
+        };
+        this.editor.toolbar.toggle(false);
+        const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        dialogContent.setData({
+            editor: this.editor,
+            value: this.value,
+            title: this.title,
+            editorCommand: this.editorCommand,
+            paletteSettings: this.paletteSettings,
+            icon: this.icon,
+            views: this.views
+        });
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.tabindex = 0;
+        if (this.overflows) {
+            this.colorPickerButton.nativeElement.focus();
+        }
+        else {
+            this.colorPicker.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+}
+EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.DialogService }, { token: i0.NgZone }, { token: i3.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #colorpicker
+                [attr.title]="title"
+                [icon]="icon"
+                [views]="views"
+                [format]="'hex'"
+                [value]="value"
+                [paletteSettings]="paletteSettings"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (valueChange)="handleValueChange($event)"
+                (activeColorClick)="handleActiveColorClick($event)"
+                (open)="onOpen(colorpicker)"
+                (close)="onClose(colorpicker)"
+            >
+            </kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                tabindex="-1"
+                type="button"
+                kendoButton
+                #colorPickerButton
+                class="k-overflow-button"
+                [icon]="icon"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (click)="openDialog()"
+            >
+                {{ title }}
+            </button>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }],
+                    selector: 'kendo-toolbar-colorpicker',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #colorpicker
+                [attr.title]="title"
+                [icon]="icon"
+                [views]="views"
+                [format]="'hex'"
+                [value]="value"
+                [paletteSettings]="paletteSettings"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (valueChange)="handleValueChange($event)"
+                (activeColorClick)="handleActiveColorClick($event)"
+                (open)="onOpen(colorpicker)"
+                (close)="onClose(colorpicker)"
+            >
+            </kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                tabindex="-1"
+                type="button"
+                kendoButton
+                #colorPickerButton
+                class="k-overflow-button"
+                [icon]="icon"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (click)="openDialog()"
+            >
+                {{ title }}
+            </button>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.DialogService }, { type: i0.NgZone }, { type: i3.ProviderService }]; }, propDecorators: { value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], paletteSettings: [{
+                type: Input
+            }], editorCommand: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], element: [{
+                type: ViewChild,
+                args: ['colorpicker', { read: ElementRef, static: false }]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: ['colorpicker', { read: ColorPickerComponent, static: false }]
+            }], colorPickerButton: [{
+                type: ViewChild,
+                args: ['colorPickerButton', { read: ElementRef, static: false }]
+            }] } });

package/esm2015/tools/colorpicker/editor-fore-color.directive.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { commandIcons } from '../../config/command-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "./editor-colorpicker.component";
+/**
+ * A directive which configures an `EditorColorPickerComponent`
+ * for manipulating the foreground color of the text
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ */
+export class EditorForeColorDirective {
+    constructor(colorPicker) {
+        this.colorPicker = colorPicker;
+        this.colorPicker.icon = commandIcons.foreColor;
+        this.colorPicker.editorCommand = 'foreColor';
+    }
+}
+EditorForeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorForeColorDirective, deps: [{ token: i1.EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
+EditorForeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorForeColorDirective, selector: "[kendoEditorForeColor]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorForeColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoEditorForeColor]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditorColorPickerComponent }]; } });

package/esm2015/tools/editor-clean-formatting-button.directive.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { EditorCommandButton } from './shared/editor-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "../common/provider.service";
+import * as i4 from "./tools.service";
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor Clean Formatting tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorCleanFormattingButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorCleanFormattingButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+export class EditorCleanFormattingButtonDirective extends EditorCommandButton {
+    constructor(button, localization, providerService, toolsService) {
+        super('cleanFormatting', button, localization, providerService, toolsService);
+    }
+}
+EditorCleanFormattingButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorCleanFormattingButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorCleanFormattingButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditorCleanFormattingButtonDirective, selector: "kendo-toolbar-button[kendoEditorCleanFormattingButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorCleanFormattingButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoEditorCleanFormattingButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; } });