@progress/kendo-angular-editor 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/editor.component.mjs

@@ -74,160 +74,14 @@ const getPasteCleanupAttributes = (config) => {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 export class EditorComponent {
-    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.element = element;
-        this.providerService = providerService;
-        this.toolsService = toolsService;
-        this.renderer = renderer;
-        /**
-         * If set to `false`, the Editor will run in style non-encapsulated mode. This means
-         * that the styles of the page will be persisted in the Editor and its content will be affected by them.
-         * @default true
-         */
-        this.iframe = true;
-        /**
-         * If set to `true` or `ApplyToWordOptions` object, commands that apply emphasis or inline styles will be applied to the whole word the cursor is in.
-         * @default false
-         */
-        this.applyToWord = false;
-        /**
-         * By default, whitespace is collapsed as per HTML's rules.
-         * Set to `true` to preserve whitespace, but normalize newlines to spaces.
-         * Set to `'full'` to preserve whitespace entirely. In this case the default ProseMirror behavior is to parse white space into nodes.
-         *
-         * @default false
-         */
-        this.preserveWhitespace = false;
-        /**
-         * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)).
-         * @default false
-         */
-        this.resizable = false;
-        /**
-         * Fires each time the value of the Editor is changed upon user interaction—
-         * for example, when the value is updated through typing in the content area or using some of the Editor tools ([see example](slug:events_editor)).
-         * When the value of the Editor is programmatically changed through its API (`ngModel`) or form binding (`formControl`),
-         * the `valueChange` event is not triggered because it might cause a mix-up with the
-         * built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires when the content area of the Editor is focused ([see example](slug:events_editor)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires when the user performs paste in the content area of the Editor ([see example](slug:events_editor)).
-         * The event is preventable. If you cancel it, the Editor content will not change.
-         */
-        this.paste = new EventEmitter();
-        /**
-         * Fires when the content area of the Editor is blurred ([see example](slug:events_editor)).
-         */
-        this.onBlur = new EventEmitter();
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.stateChange = new BehaviorSubject(initialToolBarState);
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        /**
-         * @hidden
-         */
-        this.valueModified = new Subject();
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-editor-${guid()}`;
-        this._readonly = false;
-        this._placeholder = '';
-        this.inForm = false;
-        this._iframeCss = { keepBuiltInCss: true };
-        this.afterViewInit = new Subject();
-        this.contentAreaLoaded = new Subject();
-        this.dispatchTransaction = (tr) => {
-            const docChanged = tr.docChanged;
-            if (this.disabled || (this.readonly && docChanged)) {
-                return;
-            }
-            if (docChanged) {
-                const doc = tr.doc;
-                const html = getHtml({ doc });
-                this.trOnChange = tr;
-                this.htmlOnChange = html;
-                this.ngZone.run(() => {
-                    this.valueModified.next(html === EMPTY_PARAGRAPH ? '' : html);
-                });
-            }
-            if (!docChanged || this.inForm) {
-                this.view.updateState(this.view.state.apply(tr));
-                this.trOnChange = null;
-            }
-        };
-        this.transformPastedContent = (dirtyHtml, plainText) => {
-            if (plainText) {
-                return this.dispatchPasteEvent(dirtyHtml, dirtyHtml);
-            }
-            const pasteCleanupSettings = { ...defaultPasteCleanupSettings, ...this.pasteCleanupSettings };
-            const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
-            const clean = pasteCleanup(html, {
-                convertMsLists: pasteCleanupSettings.convertMsLists,
-                stripTags: pasteCleanupSettings.stripTags.join('|'),
-                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
-            });
-            return this.dispatchPasteEvent(dirtyHtml, clean);
-        };
-        this.transformPastedHTML = (html) => this.transformPastedContent(html);
-        this.transformPastedText = (html) => this.transformPastedContent(html, true);
-        this.changeValue = (value) => {
-            const prev = this._value;
-            this._value = value;
-            if (!this._view) {
-                return;
-            }
-            if (this.htmlOnChange === value && this.trOnChange) {
-                this.view.updateState(this.view.state.apply(this.trOnChange));
-            }
-            else {
-                const newValue = (prev || '') !== (value || '');
-                const formReset = (this.inForm && !value);
-                if (newValue || formReset) {
-                    const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-                    if (iframeContentWindowNotPresent) {
-                        return;
-                    }
-                    const state = this.view.state;
-                    const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
-                    const tr = state.tr
-                        .setSelection(new AllSelection(state.doc))
-                        .replaceSelectionWith(nextDoc);
-                    this.view.updateState(state.apply(tr));
-                }
-            }
-            this.trOnChange = null;
-            this.htmlOnChange = null;
-        };
-        this.onChangeCallback = (value) => {
-            this.changeValue(value);
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onPaste = (_view, nativeEvent) => {
-            this._pasteEvent = nativeEvent;
-            return false;
-        };
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.providerService.editor = this;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
-        this.subs = zip(this.afterViewInit.asObservable(), this.contentAreaLoaded.asObservable()).subscribe(() => this.initialize());
-    }
+    dialogService;
+    localization;
+    cdr;
+    ngZone;
+    element;
+    providerService;
+    toolsService;
+    renderer;
     /**
      * Sets the value of the Editor ([see example](slug:overview_editor)).
      */
@@ -308,6 +162,12 @@ export class EditorComponent {
     get readonly() {
         return this._readonly;
     }
+    /**
+     * If set to `false`, the Editor will run in style non-encapsulated mode. This means
+     * that the styles of the page will be persisted in the Editor and its content will be affected by them.
+     * @default true
+     */
+    iframe = true;
     /**
      * Allows applying custom CSS styles to the Editor in iframe mode.
      */
@@ -317,6 +177,11 @@ export class EditorComponent {
     get iframeCss() {
         return this._iframeCss;
     }
+    /**
+     * If set to `true` or `ApplyToWordOptions` object, commands that apply emphasis or inline styles will be applied to the whole word the cursor is in.
+     * @default false
+     */
+    applyToWord = false;
     /**
      * Allows providing a custom schema. ([see example]({% slug schema_editor %}))
      */
@@ -365,6 +230,45 @@ export class EditorComponent {
     get placeholder() {
         return this._placeholder;
     }
+    /**
+     * By default, whitespace is collapsed as per HTML's rules.
+     * Set to `true` to preserve whitespace, but normalize newlines to spaces.
+     * Set to `'full'` to preserve whitespace entirely. In this case the default ProseMirror behavior is to parse white space into nodes.
+     *
+     * @default false
+     */
+    preserveWhitespace = false;
+    /**
+     * Configures how pasted content is modified before it is added to the Editor ([see example]({% slug paste_cleanup %})).
+     */
+    pasteCleanupSettings;
+    /**
+     * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)).
+     * @default false
+     */
+    resizable = false;
+    /**
+     * Fires each time the value of the Editor is changed upon user interaction—
+     * for example, when the value is updated through typing in the content area or using some of the Editor tools ([see example](slug:events_editor)).
+     * When the value of the Editor is programmatically changed through its API (`ngModel`) or form binding (`formControl`),
+     * the `valueChange` event is not triggered because it might cause a mix-up with the
+     * built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires when the content area of the Editor is focused ([see example](slug:events_editor)).
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires when the user performs paste in the content area of the Editor ([see example](slug:events_editor)).
+     * The event is preventable. If you cancel it, the Editor content will not change.
+     */
+    paste = new EventEmitter();
+    /**
+     * Fires when the content area of the Editor is blurred ([see example](slug:events_editor)).
+     */
+    onBlur = new EventEmitter();
+    hostClass = true;
     get resizableClass() {
         return !!this.resizable;
     }
@@ -399,6 +303,14 @@ export class EditorComponent {
         const resizableOptions = this.resizable;
         return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
     }
+    /**
+     * @hidden
+     */
+    stateChange = new BehaviorSubject(initialToolBarState);
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
     }
@@ -418,6 +330,63 @@ export class EditorComponent {
     get selectionText() {
         return this._view && this._view.state ? getSelectionText(this._view.state) : '';
     }
+    /**
+     * @hidden
+     */
+    valueModified = new Subject();
+    userToolBarComponent;
+    userToolBarElement;
+    dialogContainer;
+    // Use `ViewContainerRef` instead of `ElementRef` because the dialog expects `ViewContainerRef`.
+    container;
+    direction;
+    viewMountElement;
+    /**
+     * @hidden
+     */
+    focusChangedProgrammatically;
+    /**
+     * @hidden
+     */
+    shouldEmitFocus;
+    /**
+     * @hidden
+     */
+    focusableId = `k-editor-${guid()}`;
+    defaultToolbar;
+    defaultToolbarComponent;
+    subs;
+    _view;
+    _value;
+    _disabled;
+    _readonly = false;
+    _schema;
+    _plugins;
+    _placeholder = '';
+    _styleObserver;
+    trOnChange;
+    htmlOnChange;
+    inForm = false;
+    _pasteEvent;
+    _iframeCss = { keepBuiltInCss: true };
+    afterViewInit = new Subject();
+    contentAreaLoaded = new Subject();
+    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.element = element;
+        this.providerService = providerService;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.providerService.editor = this;
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
+        this.subs = zip(this.afterViewInit.asObservable(), this.contentAreaLoaded.asObservable()).subscribe(() => this.initialize());
+    }
     ngOnInit() {
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -749,6 +718,71 @@ export class EditorComponent {
             .pipe(filter((event) => !this.viewMountElement.contains(event.relatedTarget)))
             .subscribe(() => this.onTouchedCallback()));
     }
+    dispatchTransaction = (tr) => {
+        const docChanged = tr.docChanged;
+        if (this.disabled || (this.readonly && docChanged)) {
+            return;
+        }
+        if (docChanged) {
+            const doc = tr.doc;
+            const html = getHtml({ doc });
+            this.trOnChange = tr;
+            this.htmlOnChange = html;
+            this.ngZone.run(() => {
+                this.valueModified.next(html === EMPTY_PARAGRAPH ? '' : html);
+            });
+        }
+        if (!docChanged || this.inForm) {
+            this.view.updateState(this.view.state.apply(tr));
+            this.trOnChange = null;
+        }
+    };
+    transformPastedContent = (dirtyHtml, plainText) => {
+        if (plainText) {
+            return this.dispatchPasteEvent(dirtyHtml, dirtyHtml);
+        }
+        const pasteCleanupSettings = { ...defaultPasteCleanupSettings, ...this.pasteCleanupSettings };
+        const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+        const clean = pasteCleanup(html, {
+            convertMsLists: pasteCleanupSettings.convertMsLists,
+            stripTags: pasteCleanupSettings.stripTags.join('|'),
+            attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+        });
+        return this.dispatchPasteEvent(dirtyHtml, clean);
+    };
+    transformPastedHTML = (html) => this.transformPastedContent(html);
+    transformPastedText = (html) => this.transformPastedContent(html, true);
+    changeValue = (value) => {
+        const prev = this._value;
+        this._value = value;
+        if (!this._view) {
+            return;
+        }
+        if (this.htmlOnChange === value && this.trOnChange) {
+            this.view.updateState(this.view.state.apply(this.trOnChange));
+        }
+        else {
+            const newValue = (prev || '') !== (value || '');
+            const formReset = (this.inForm && !value);
+            if (newValue || formReset) {
+                const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
+                if (iframeContentWindowNotPresent) {
+                    return;
+                }
+                const state = this.view.state;
+                const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
+                const tr = state.tr
+                    .setSelection(new AllSelection(state.doc))
+                    .replaceSelectionWith(nextDoc);
+                this.view.updateState(state.apply(tr));
+            }
+        }
+        this.trOnChange = null;
+        this.htmlOnChange = null;
+    };
+    onChangeCallback = (value) => {
+        this.changeValue(value);
+    };
     normalizeSize() {
         if (typeof this.resizable === 'object' && !this._styleObserver) {
             const element = this.element.nativeElement;
@@ -790,38 +824,45 @@ export class EditorComponent {
             }
         });
     }
+    onTouchedCallback = (_) => { };
+    onPaste = (_view, nativeEvent) => {
+        this._pasteEvent = nativeEvent;
+        return false;
+    };
     dispatchPasteEvent(originalContent, cleanContent) {
         if (hasObservers(this.paste)) {
+            if (!this.iframe) {
+                this._pasteEvent.stopImmediatePropagation();
+            }
             const event = new EditorPasteEvent(cleanContent, originalContent, this._pasteEvent);
             this.ngZone.run(() => this.paste.emit(event));
             return event.isDefaultPrevented() ? '' : event.cleanedHtml;
         }
         return cleanContent;
     }
-}
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponent, isStandalone: true, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "class.k-ie": "this.isIE", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
-        EditorLocalizationService,
-        ProviderService,
-        EditorToolsService,
-        {
-            provide: LocalizationService,
-            useExisting: EditorLocalizationService
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.editor'
-        },
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => EditorComponent),
-            multi: true
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => EditorComponent)
-        }
-    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorComponent, isStandalone: true, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "class.k-ie": "this.isIE", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
+            EditorLocalizationService,
+            ProviderService,
+            EditorToolsService,
+            {
+                provide: LocalizationService,
+                useExisting: EditorLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.editor'
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorComponent),
+                multi: true
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => EditorComponent)
+            }
+        ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoEditorLocalizedMessages
             i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
@@ -980,8 +1021,9 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         <ng-container #dialogsContainer></ng-container>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor',

package/esm2022/editor.module.mjs

@@ -0,0 +1,88 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { DialogContainerService, DialogService, WindowContainerService, WindowService } from '@progress/kendo-angular-dialog';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { KENDO_EDITOR } from './directives';
+import * as i0 from "@angular/core";
+import * as i1 from "./editor.component";
+import * as i2 from "./tools/alignment/editor-align-left-button.directive";
+import * as i3 from "./tools/alignment/editor-align-center-button.directive";
+import * as i4 from "./tools/alignment/editor-align-right-button.directive";
+import * as i5 from "./tools/alignment/editor-align-justify-button.directive";
+import * as i6 from "./tools/link/editor-insert-file-button.directive";
+import * as i7 from "./tools/history/editor-redo-button.directive";
+import * as i8 from "./tools/history/editor-undo-button.directive";
+import * as i9 from "./tools/image/editor-insert-image-button.directive";
+import * as i10 from "./tools/indentation/editor-indent-button.directive";
+import * as i11 from "./tools/indentation/editor-outdent-button.directive";
+import * as i12 from "./tools/link/editor-create-link-button.directive";
+import * as i13 from "./tools/link/editor-unlink-button.directive";
+import * as i14 from "./tools/list/editor-insert-ordered-list-button.directive";
+import * as i15 from "./tools/list/editor-insert-unordered-list-button.directive";
+import * as i16 from "./tools/source/editor-view-source-button.directive";
+import * as i17 from "./tools/typographical-emphasis/editor-bold-button.directive";
+import * as i18 from "./tools/typographical-emphasis/editor-italic-button.directive";
+import * as i19 from "./tools/typographical-emphasis/editor-underline-button.directive";
+import * as i20 from "./tools/typographical-emphasis/editor-strikethrough-button.directive";
+import * as i21 from "./tools/typographical-emphasis/editor-subscript-button.directive";
+import * as i22 from "./tools/typographical-emphasis/editor-superscript-button.directive";
+import * as i23 from "./tools/colorpicker/editor-fore-color.directive";
+import * as i24 from "./tools/colorpicker/editor-back-color.directive";
+import * as i25 from "./tools/editor-clean-formatting-button.directive";
+import * as i26 from "./tools/tables/editor-add-column-before-button.directive";
+import * as i27 from "./tools/tables/editor-add-column-after-button.directive";
+import * as i28 from "./tools/tables/editor-add-row-before-button.directive";
+import * as i29 from "./tools/tables/editor-add-row-after-button.directive";
+import * as i30 from "./tools/tables/editor-delete-column-button.directive";
+import * as i31 from "./tools/tables/editor-delete-row-button.directive";
+import * as i32 from "./tools/tables/editor-delete-table-button.directive";
+import * as i33 from "./localization/custom-messages.component";
+import * as i34 from "./tools/print/editor-print-button.directive";
+import * as i35 from "./tools/select-all/select-all-button.directive";
+import * as i36 from "./tools/blockquote/editor-blockquote-button.directive";
+import * as i37 from "./tools/fontsize/editor-fontsize.component";
+import * as i38 from "./tools/fontfamily/editor-fontfamily.component";
+import * as i39 from "./tools/format/editor-format.component";
+import * as i40 from "./tools/colorpicker/editor-colorpicker.component";
+import * as i41 from "./tools/tables/editor-insert-table-button.component";
+import * as i42 from "./tools/tables/editor-merge-cells-button.directive";
+import * as i43 from "./tools/tables/editor-split-cell-button.directive";
+import * as i44 from "@progress/kendo-angular-toolbar";
+// IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Editor component.
+ *
+ * ```ts-no-run
+ * import { NgModule } from '@angular/core';
+ * import { EditorModule } from '@progress/kendo-angular-editor';
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { AppComponent } from './app.component';
+ *
+ * _@NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, EditorModule],
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * ```
+ */
+export class EditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, imports: [i1.EditorComponent, i2.EditorAlignLeftButtonDirective, i3.EditorAlignCenterButtonDirective, i4.EditorAlignRightButtonDirective, i5.EditorAlignJustifyButtonDirective, i6.EditorInsertFileButtonDirective, i7.EditorRedoButtonDirective, i8.EditorUndoButtonDirective, i9.EditorInsertImageButtonDirective, i10.EditorIndentButtonDirective, i11.EditorOutdentButtonDirective, i12.EditorCreateLinkButtonDirective, i13.EditorUnlinkButtonDirective, i14.EditorInsertOrderedListButtonDirective, i15.EditorInsertUnorderedListButtonDirective, i16.EditorViewSourceButtonDirective, i17.EditorBoldButtonDirective, i18.EditorItalicButtonDirective, i19.EditorUnderlineButtonDirective, i20.EditorStrikethroughButtonDirective, i21.EditorSubscriptButtonDirective, i22.EditorSuperscriptButtonDirective, i23.EditorForeColorDirective, i24.EditorBackColorDirective, i25.EditorCleanFormattingButtonDirective, i26.EditorAddColumnBeforeButtonDirective, i27.EditorAddColumnAfterButtonDirective, i28.EditorAddRowBeforeButtonDirective, i29.EditorAddRowAfterButtonDirective, i30.EditorDeleteColumnButtonDirective, i31.EditorDeleteRowButtonDirective, i32.EditorDeleteTableButtonDirective, i33.CustomMessagesComponent, i34.EditorPrintDirective, i35.EditorSelectAllButtonDirective, i36.EditorBlockquoteDirective, i37.EditorFontSizeComponent, i38.EditorFontFamilyComponent, i39.EditorFormatComponent, i40.EditorColorPickerComponent, i41.EditorInsertTableButtonComponent, i42.EditorMergeCellsButtonDirective, i43.EditorSplitCellButtonDirective, i44.ToolBarComponent, i44.ToolbarCustomMessagesComponent, i44.ToolBarButtonComponent, i44.ToolBarButtonGroupComponent, i44.ToolBarDropDownButtonComponent, i44.ToolBarSeparatorComponent, i44.ToolBarSpacerComponent, i44.ToolBarSplitButtonComponent, i44.ToolBarToolComponent], exports: [i1.EditorComponent, i2.EditorAlignLeftButtonDirective, i3.EditorAlignCenterButtonDirective, i4.EditorAlignRightButtonDirective, i5.EditorAlignJustifyButtonDirective, i6.EditorInsertFileButtonDirective, i7.EditorRedoButtonDirective, i8.EditorUndoButtonDirective, i9.EditorInsertImageButtonDirective, i10.EditorIndentButtonDirective, i11.EditorOutdentButtonDirective, i12.EditorCreateLinkButtonDirective, i13.EditorUnlinkButtonDirective, i14.EditorInsertOrderedListButtonDirective, i15.EditorInsertUnorderedListButtonDirective, i16.EditorViewSourceButtonDirective, i17.EditorBoldButtonDirective, i18.EditorItalicButtonDirective, i19.EditorUnderlineButtonDirective, i20.EditorStrikethroughButtonDirective, i21.EditorSubscriptButtonDirective, i22.EditorSuperscriptButtonDirective, i23.EditorForeColorDirective, i24.EditorBackColorDirective, i25.EditorCleanFormattingButtonDirective, i26.EditorAddColumnBeforeButtonDirective, i27.EditorAddColumnAfterButtonDirective, i28.EditorAddRowBeforeButtonDirective, i29.EditorAddRowAfterButtonDirective, i30.EditorDeleteColumnButtonDirective, i31.EditorDeleteRowButtonDirective, i32.EditorDeleteTableButtonDirective, i33.CustomMessagesComponent, i34.EditorPrintDirective, i35.EditorSelectAllButtonDirective, i36.EditorBlockquoteDirective, i37.EditorFontSizeComponent, i38.EditorFontFamilyComponent, i39.EditorFormatComponent, i40.EditorColorPickerComponent, i41.EditorInsertTableButtonComponent, i42.EditorMergeCellsButtonDirective, i43.EditorSplitCellButtonDirective, i44.ToolBarComponent, i44.ToolbarCustomMessagesComponent, i44.ToolBarButtonComponent, i44.ToolBarButtonGroupComponent, i44.ToolBarDropDownButtonComponent, i44.ToolBarSeparatorComponent, i44.ToolBarSpacerComponent, i44.ToolBarSplitButtonComponent, i44.ToolBarToolComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.EditorComponent, i37.EditorFontSizeComponent, i38.EditorFontFamilyComponent, i39.EditorFormatComponent, i40.EditorColorPickerComponent, i41.EditorInsertTableButtonComponent, i44.ToolBarComponent, i44.ToolbarCustomMessagesComponent, i44.ToolBarButtonComponent, i44.ToolBarButtonGroupComponent, i44.ToolBarDropDownButtonComponent, i44.ToolBarSeparatorComponent, i44.ToolBarSpacerComponent, i44.ToolBarSplitButtonComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [...KENDO_EDITOR, ...KENDO_TOOLBAR],
+                    imports: [...KENDO_EDITOR, ...KENDO_TOOLBAR],
+                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
+                }]
+        }] });

package/{esm2020 → esm2022}/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example]({% slug globalization_editor %}#toc-custom-messages)).
  */
 export class CustomMessagesComponent extends MessagesDirective {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class CustomMessagesComponent extends MessagesDirective {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-editor-messages", providers: [
+            {
+                provide: MessagesDirective,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-editor-messages", providers: [
-        {
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/editor-localization.service.mjs

@@ -13,10 +13,10 @@ export class EditorLocalizationService extends LocalizationService {
     constructor(prefix, messageService, _rtl) {
         super(prefix, messageService, _rtl);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService });
 }
-EditorLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-EditorLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,