@progress/kendo-angular-editor 3.1.2 → 4.0.0-dev.202204140850

package/esm2015/config/commands.js

@@ -0,0 +1,62 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { alignBlocks, alignLeftRules, alignCenterRules, alignRightRules, alignJustifyRules, alignRemoveRules, indent, outdent, setHtml, getHtml, insertImage, insertText, applyLink, removeLink, expandToWordWrap, blockquote, 
+//marks
+bold, italic, underline, strikethrough, subscript, superscript, link, toggleInlineFormat, applyInlineStyle, formatBlockElements, toggleOrderedList, toggleUnorderedList, isAligned, undo, redo, cleanFormatting, selectAll, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, deleteTable, mergeCells, splitCell } from '@progress/kendo-editor-common';
+import { insertTable } from './table-commands';
+const alignRemove = (state, dispatch) => alignBlocks(alignRemoveRules)(state, dispatch);
+const inlineCommand = {
+    bold: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, bold), { applyToWord })),
+    cleanFormatting: (options) => cleanFormatting(options),
+    createLink: attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }),
+    fontFamily: attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }),
+    fontSize: attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }),
+    insertFile: attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }),
+    insertText: text => insertText(text),
+    italic: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, italic), { applyToWord })),
+    strikethrough: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, strikethrough), { applyToWord })),
+    subscript: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, subscript), { applyToWord })),
+    superscript: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, superscript), { applyToWord })),
+    underline: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, underline), { applyToWord })),
+    unlink: () => removeLink(link),
+    foreColor: attrs => expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }),
+    backColor: attrs => expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }),
+    selectAll: () => (state, dispatch) => selectAll(state, dispatch)
+};
+const blockCommand = {
+    alignCenter: () => (state, dispatch) => isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch),
+    alignJustify: () => (state, dispatch) => isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch),
+    alignLeft: () => (state, dispatch) => isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch),
+    alignRight: () => (state, dispatch) => isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch),
+    format: formatAttr => formatBlockElements(formatAttr.tag),
+    getHTML: () => getHtml,
+    indent: () => indent,
+    insertImage: attrs => insertImage(attrs),
+    // think about changing the command name.
+    insertOrderedList: () => toggleOrderedList,
+    // think about changing the command name.
+    insertUnorderedList: () => toggleUnorderedList,
+    outdent: () => outdent,
+    redo: () => redo,
+    setHTML: ({ content, parseOptions }) => setHtml(content, 'setHTML', parseOptions),
+    undo: () => undo,
+    blockquote: () => blockquote
+};
+const tableCommand = {
+    insertTable: attr => insertTable(attr),
+    addColumnBefore: () => addColumnBefore,
+    addColumnAfter: () => addColumnAfter,
+    addRowBefore: () => addRowBefore,
+    addRowAfter: () => addRowAfter,
+    deleteRow: () => deleteRow,
+    deleteColumn: () => deleteColumn,
+    mergeCells: () => mergeCells,
+    splitCell: () => splitCell,
+    deleteTable: () => deleteTable
+};
+/**
+ * @hidden
+ */
+export const editorCommands = Object.assign({}, inlineCommand, blockCommand, tableCommand);

package/{dist/es2015 → esm2015}/config/semantic-nodes.js

@@ -15,14 +15,11 @@ const createSemanticNode = (tagName) => ({
         }],
     toDOM: node => hasAttrs(node.attrs) ? [tagName, getAttrs(node.attrs), hole] : [tagName, hole]
 });
-const ɵ0 = createSemanticNode;
 /**
  * @hidden
  */
 export const semanticTagNames = ['article', 'main', 'nav', 'header', 'footer', 'aside', 'section'];
-const ɵ1 = (acc, curr) => Object.assign(acc, { [curr]: createSemanticNode(curr) });
 /**
  * @hidden
  */
-export const semanticNodes = semanticTagNames.reduce(ɵ1, {});
-export { ɵ0, ɵ1 };
+export const semanticNodes = semanticTagNames.reduce((acc, curr) => Object.assign(acc, { [curr]: createSemanticNode(curr) }), {});

package/{dist/es2015 → esm2015}/config/utils.js

@@ -52,7 +52,7 @@ export const commonAttributes = () => {
  * @hidden
  */
 export const createDefaultAttributes = (attrs = []) => {
-    return Object.assign({}, attrs.reduce((acc, curr) => (Object.assign({}, acc, { [curr]: { default: null } })), {}));
+    return Object.assign({}, attrs.reduce((acc, curr) => (Object.assign(Object.assign({}, acc), { [curr]: { default: null } })), {}));
 };
 /**
  * @hidden

package/esm2015/dialogs/colorpicker-dialog.component.js

@@ -0,0 +1,117 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild } from '@angular/core';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class ColorPickerDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.colorPicker.focus();
+        });
+    }
+    handleActiveColorClick(event) {
+        event.preventOpen();
+        this.value = event.color;
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec(this.editorCommand, this.value);
+        }
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.value = args.value;
+        this.editorCommand = args.editorCommand;
+        this.paletteSettings = args.paletteSettings;
+        this.icon = args.icon;
+        this.views = args.view ? [args.view] : args.views;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+ColorPickerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor(editorCommand) }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-colorpicker
+                        #colorpicker
+                        [views]="views"
+                        [format]="'hex'"
+                        [attr.title]="title"
+                        [icon]="icon"
+                        [(value)]="value"
+                        [paletteSettings]="paletteSettings"
+                        (activeColorClick)="handleActiveColorClick($event)"
+                    >
+                    </kendo-colorpicker>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.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"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor(editorCommand) }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-colorpicker
+                        #colorpicker
+                        [views]="views"
+                        [format]="'hex'"
+                        [attr.title]="title"
+                        [icon]="icon"
+                        [(value)]="value"
+                        [paletteSettings]="paletteSettings"
+                        (activeColorClick)="handleActiveColorClick($event)"
+                    >
+                    </kendo-colorpicker>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], colorPicker: [{
+                type: ViewChild,
+                args: ['colorpicker', { read: ColorPickerComponent, static: true }]
+            }] } });

package/esm2015/dialogs/file-link-dialog.component.js

@@ -0,0 +1,209 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import { getMark, getSelectionText, expandSelection } from '@progress/kendo-editor-common';
+import { isPresent } from '../util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FileLinkDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+        this.linkForm = new FormGroup({
+            'href': new FormControl('', Validators.required),
+            'text': new FormControl({ value: '', disabled: true }, Validators.required),
+            'title': new FormControl('')
+        });
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.hrefInput.nativeElement.focus();
+        });
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        const linkData = this.getData();
+        this.editor.exec(this.command, linkData);
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    get titleText() {
+        return this.localization.get(this.command);
+    }
+    setData(state, options) {
+        if (this.command === 'createLink') {
+            this.linkForm.addControl('target', new FormControl());
+        }
+        const linkMark = getMark(state, state.schema.marks.link);
+        if (linkMark) {
+            // const linkMarkRange = getMarkRange(state.selection.$cursor, schema.marks.link);
+            // const mark = parentNode.child(cursorNodeIndex).marks.find(m => m.type === markType);
+            this.linkForm.reset({
+                href: linkMark.attrs.href,
+                title: linkMark.attrs.title,
+                target: isPresent(linkMark.attrs.target),
+                text: this.setLinkText(state)
+            });
+            return;
+        }
+        if (state.selection.empty) {
+            const currentState = options.applyToWord ? expandSelection(state, () => { }, options).state : state;
+            if (!currentState.selection.empty) {
+                this.linkForm.patchValue({
+                    'text': getSelectionText(currentState)
+                });
+            }
+        }
+        else {
+            this.linkForm.patchValue({
+                'text': getSelectionText(state)
+            });
+        }
+    }
+    textForWithPrefix(key) {
+        const prefix = this.command === 'createLink' ? 'link' : 'file';
+        return this.textFor(prefix + key);
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    setLinkText(state) {
+        const selection = state.selection;
+        if (selection.empty && selection.$cursor) {
+            const cursor = selection.$cursor;
+            const cursorNodeIndex = cursor.index();
+            const parentNode = cursor.parent;
+            return parentNode.child(cursorNodeIndex).text;
+        }
+        else {
+            return getSelectionText(state);
+        }
+    }
+    getData() {
+        let linkData = this.linkForm.value;
+        if (isPresent(this.linkForm.controls.target)) {
+            linkData.target = linkData.target ? '_blank' : null;
+        }
+        return linkData;
+    }
+}
+FileLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileLinkDialogComponent, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ titleText }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content">
+                    <form novalidate [formGroup]="linkForm">
+                        <div class="k-edit-label">
+                            <label (click)="hrefInput.focus()">{{ textForWithPrefix('WebAddress') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #hrefInput formControlName="href" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+
+                        <div class="k-edit-label">
+                            <label (click)="textInput.focus()">{{ textForWithPrefix('Text') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #textInput formControlName="text" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+
+                        <div class="k-edit-label">
+                            <label (click)="titleInput.focus()">{{ textForWithPrefix('Title') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #titleInput formControlName="title" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+                        <ng-container *ngIf="command === 'createLink'">
+                            <div class="k-edit-label"></div>
+                            <div class="k-edit-field">
+                                <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
+                                <label class="k-checkbox-label" for="k-target-blank">{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                            </div>
+                        </ng-container>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
+                {{ textFor('dialogInsert') }}
+            </button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ titleText }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content">
+                    <form novalidate [formGroup]="linkForm">
+                        <div class="k-edit-label">
+                            <label (click)="hrefInput.focus()">{{ textForWithPrefix('WebAddress') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #hrefInput formControlName="href" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+
+                        <div class="k-edit-label">
+                            <label (click)="textInput.focus()">{{ textForWithPrefix('Text') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #textInput formControlName="text" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+
+                        <div class="k-edit-label">
+                            <label (click)="titleInput.focus()">{{ textForWithPrefix('Title') }}</label>
+                        </div>
+                        <div class="k-edit-field">
+                            <input #titleInput formControlName="title" type="text" class="k-textbox k-input k-rounded-md" />
+                        </div>
+                        <ng-container *ngIf="command === 'createLink'">
+                            <div class="k-edit-label"></div>
+                            <div class="k-edit-field">
+                                <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
+                                <label class="k-checkbox-label" for="k-target-blank">{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                            </div>
+                        </ng-container>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
+                {{ textFor('dialogInsert') }}
+            </button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], command: [{
+                type: Input
+            }], hrefInput: [{
+                type: ViewChild,
+                args: ['hrefInput', { read: ElementRef, static: true }]
+            }] } });

package/esm2015/dialogs/font-family-dialog.component.js

@@ -0,0 +1,106 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild } from '@angular/core';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import { FontFamilyDropDownListComponent } from '../tools/fontfamily/editor-fontfamily-dropdownlist.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "../tools/fontfamily/editor-fontfamily-dropdownlist.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FontFamilyDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+        this.data = [];
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.fontFamilyDropDownList.dropDownList.focus();
+        });
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec('fontFamily', this.value);
+        }
+        this.dialog.close();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.data = args.data;
+        this.defaultItem = args.defaultItem;
+        this.value = args.value;
+        this.itemDisabled = args.itemDisabled;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+FontFamilyDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FontFamilyDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FontFamilyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FontFamilyDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontFamilyDropDownList", first: true, predicate: ["fontFamilyDropDownList"], descendants: true, read: FontFamilyDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontFamily') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-fontfamily-dropdownlist
+                        #fontFamilyDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-fontfamily-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FontFamilyDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontFamily') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-fontfamily-dropdownlist
+                        #fontFamilyDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-fontfamily-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], fontFamilyDropDownList: [{
+                type: ViewChild,
+                args: ['fontFamilyDropDownList', { read: FontFamilyDropDownListComponent, static: true }]
+            }] } });

package/esm2015/dialogs/font-size-dialog.component.js

@@ -0,0 +1,106 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild } from '@angular/core';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import { FontSizeDropDownListComponent } from '../tools/fontsize/editor-fontsize-dropdownlist.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "../tools/fontsize/editor-fontsize-dropdownlist.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FontSizeDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+        this.data = [];
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.fontSizeDropDownList.dropDownList.focus();
+        });
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec('fontSize', this.value);
+        }
+        this.dialog.close();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.data = args.data;
+        this.defaultItem = args.defaultItem;
+        this.value = args.value;
+        this.itemDisabled = args.itemDisabled;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+FontSizeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FontSizeDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FontSizeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FontSizeDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontSizeDropDownList", first: true, predicate: ["fontSizeDropDownList"], descendants: true, read: FontSizeDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontSize') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-fontsize-dropdownlist
+                        #fontSizeDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-fontsize-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FontSizeDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontSize') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-fontsize-dropdownlist
+                        #fontSizeDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-fontsize-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], fontSizeDropDownList: [{
+                type: ViewChild,
+                args: ['fontSizeDropDownList', { read: FontSizeDropDownListComponent, static: true }]
+            }] } });