@skyux/text-editor 8.7.0 → 9.0.0-alpha.0

package/fesm2022/skyux-text-editor.mjs

@@ -0,0 +1,1828 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, inject, TemplateRef, ViewEncapsulation, ViewChild, HostBinding } from '@angular/core';
+import * as i1 from '@angular/platform-browser';
+import createDOMPurify from 'dompurify';
+import * as i3$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7$1 from '@skyux/colorpicker';
+import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
+import * as i1$1 from '@skyux/core';
+import { SkyCoreAdapterModule, SkyIdModule } from '@skyux/core';
+import * as i6 from '@skyux/forms';
+import { SkyInputBoxHostService, SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
+import * as i2 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i5$1 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i7 from '@skyux/layout';
+import { SkyToolbarModule } from '@skyux/layout';
+import * as i1$2 from '@skyux/modals';
+import { SkyModalModule } from '@skyux/modals';
+import * as i4 from '@skyux/popovers';
+import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
+import * as i6$1 from '@skyux/tabs';
+import { SkyTabsModule } from '@skyux/tabs';
+import * as i5 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import he from 'he';
+import { Subject } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+import { SkyValidation } from '@skyux/validation';
+
+const domPurify = createDOMPurify(window);
+domPurify.addHook('afterSanitizeAttributes', (node) => {
+    // Set all elements owning target to target=_blank
+    // so we only allow the target attribute with that value.
+    if (node.getAttribute('target')) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+    }
+});
+/**
+ * The `SkyTextSanitizationService` user the `DOMPurify` library to sanitize strings for use
+ * in the DOM. `DOMPurify` allows more customization than Angular's internal `DomSanitizer` so we
+ * can preserve `<style>` tags and allow `target` attributes for new tab links.
+ * @internal
+ */
+class SkyTextSanitizationService {
+    #allowedAttributes = ['target'];
+    /**
+     * Returns a sanitized string, allowing target attribute for new tab links.
+     */
+    sanitize(htmlString) {
+        return domPurify.sanitize(htmlString, {
+            ADD_ATTR: this.#allowedAttributes,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyRichTextDisplayComponent {
+    /**
+     * The rich text to display.
+     */
+    set richText(value) {
+        if (value) {
+            const cleaned = this.#sanitizationService.sanitize(value);
+            /* istanbul ignore else */
+            if (cleaned !== this.#_richText) {
+                this.#_richText = cleaned;
+                // Text has already been sanitized with DOMPurifier.
+                // Tell Angular to bypass its own internal sanitization.
+                this.sanitizedText = this.#sanitizer.bypassSecurityTrustHtml(cleaned);
+            }
+        }
+        else {
+            this.sanitizedText = '';
+        }
+    }
+    #_richText;
+    #sanitizer;
+    #sanitizationService;
+    constructor(sanitizer, sanitizationService) {
+        this.sanitizedText = '';
+        this.#_richText = '';
+        this.#sanitizer = sanitizer;
+        this.#sanitizationService = sanitizationService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
+                type: Input
+            }] } });
+
+class SkyRichTextDisplayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [SkyRichTextDisplayComponent],
+                    declarations: [SkyRichTextDisplayComponent],
+                }]
+        }] });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-text-editor' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_text_editor_format_menu_action_bold_label: { message: 'Bold' },
+        skyux_text_editor_format_menu_action_bold_key_shortcut: {
+            message: 'Ctrl+B',
+        },
+        skyux_text_editor_format_menu_action_italic_label: { message: 'Italic' },
+        skyux_text_editor_format_menu_action_italic_key_shortcut: {
+            message: 'Ctrl+I',
+        },
+        skyux_text_editor_format_menu_action_underline_label: {
+            message: 'Underline',
+        },
+        skyux_text_editor_format_menu_action_underline_key_shortcut: {
+            message: 'Ctrl+U',
+        },
+        skyux_text_editor_format_menu_action_strikethrough_label: {
+            message: 'Strikethrough',
+        },
+        skyux_text_editor_format_menu_action_clear_formatting_label: {
+            message: 'Clear formatting',
+        },
+        skyux_text_editor_edit_menu_action_undo_label: { message: 'Undo' },
+        skyux_text_editor_edit_menu_action_undo_key_shortcut: { message: 'Ctrl+Z' },
+        skyux_text_editor_edit_menu_action_redo_label: { message: 'Redo' },
+        skyux_text_editor_edit_menu_action_redo_key_shortcut: { message: 'Ctrl+Y' },
+        skyux_text_editor_edit_menu_action_cut_label: { message: 'Cut' },
+        skyux_text_editor_edit_menu_action_cut_key_shortcut: { message: 'Ctrl+X' },
+        skyux_text_editor_edit_menu_action_copy_label: { message: 'Copy' },
+        skyux_text_editor_edit_menu_action_copy_key_shortcut: { message: 'Ctrl+C' },
+        skyux_text_editor_edit_menu_action_paste_label: { message: 'Paste' },
+        skyux_text_editor_edit_menu_action_paste_key_shortcut: {
+            message: 'Ctrl+V',
+        },
+        skyux_text_editor_edit_menu_action_select_all_label: {
+            message: 'Select all',
+        },
+        skyux_text_editor_edit_menu_action_select_all_key_shortcut: {
+            message: 'Ctrl+A',
+        },
+        skyux_text_editor_menubar_dropdown_button_edit_label: { message: 'Edit' },
+        skyux_text_editor_menubar_dropdown_button_format_label: {
+            message: 'Format',
+        },
+        skyux_text_editor_menubar_dropdown_button_insert_label: {
+            message: 'Insert merge field',
+        },
+        skyux_text_editor_url_modal_header_label: { message: 'Create link' },
+        skyux_text_editor_url_modal_url_label: {
+            message: 'Enter a URL to link to:',
+        },
+        skyux_text_editor_url_modal_open_label: {
+            message: 'Where should it open?',
+        },
+        skyux_text_editor_url_modal_current_option_label: {
+            message: 'Current window',
+        },
+        skyux_text_editor_url_modal_new_option_label: { message: 'New window' },
+        skyux_text_editor_url_modal_email_label: { message: 'Email address' },
+        skyux_text_editor_url_modal_subject_label: { message: 'Subject line' },
+        skyux_text_editor_url_modal_save_button_label: { message: 'Save' },
+        skyux_text_editor_url_modal_cancel_button_label: { message: 'Cancel' },
+    },
+};
+class SkyTextEditorResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyTextEditorResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyTextEditorResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTextEditorResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+// Need to add the following to classes which contain static methods.
+// See: https://github.com/ng-packagr/ng-packagr/issues/641
+// @dynamic
+class SkyFormsUtility {
+    /** Coerces a data-bound value (typically a string) to a boolean. */
+    static coerceBooleanProperty(value) {
+        return value !== undefined && `${value}` !== 'false';
+    }
+}
+
+/**
+ * @internal
+ */
+const FONT_LIST_DEFAULTS = [
+    {
+        name: 'Blackbaud Sans',
+        value: '"Blackbaud Sans", Arial, sans-serif',
+    },
+    {
+        name: 'Arial',
+        value: 'Arial',
+    },
+    {
+        name: 'Arial Black',
+        value: '"Arial Black"',
+    },
+    {
+        name: 'Courier New',
+        value: '"Courier New"',
+    },
+    {
+        name: 'Georgia',
+        value: 'Georgia, serif',
+    },
+    {
+        name: 'Tahoma',
+        value: 'Tahoma, Geneva, sans-serif',
+    },
+    {
+        name: 'Times New Roman',
+        value: '"Times New Roman"',
+    },
+    {
+        name: 'Trebuchet MS',
+        value: '"Trebuchet MS", sans-serif',
+    },
+    {
+        name: 'Verdana',
+        value: 'Verdana, Geneva, sans-serif',
+    },
+];
+
+/**
+ * @internal
+ */
+const STYLE_STATE_DEFAULTS = {
+    backColor: 'rgba(0, 0, 0, 0)',
+    fontColor: '#000',
+    fontSize: 14,
+    font: FONT_LIST_DEFAULTS[0].value,
+    boldState: false,
+    italicState: false,
+    underlineState: false,
+    linkState: false,
+};
+
+/**
+ * @internal
+ */
+var UrlTarget;
+(function (UrlTarget) {
+    UrlTarget[UrlTarget["None"] = 0] = "None";
+    UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
+})(UrlTarget || (UrlTarget = {}));
+
+/**
+ * @internal
+ */
+class SkyTextEditorSelectionService {
+    isElementSelected(documentEl, element) {
+        const selectedNode = this.getCurrentSelection(documentEl)?.anchorNode;
+        /* istanbul ignore next */
+        return !!(selectedNode &&
+            (element.contains(selectedNode) ||
+                (selectedNode.parentNode && element.contains(selectedNode.parentNode))));
+    }
+    getCurrentSelection(documentEl) {
+        return documentEl.getSelection();
+    }
+    getCurrentSelectionParentElement(documentEl) {
+        const selection = this.getCurrentSelection(documentEl);
+        let selectedEl;
+        /* istanbul ignore else */
+        if (selection &&
+            selection.getRangeAt &&
+            selection.getRangeAt(0).commonAncestorContainer) {
+            selectedEl = selection.getRangeAt(0).commonAncestorContainer;
+            selectedEl =
+                selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
+        }
+        else {
+            return undefined;
+        }
+        return selectedEl;
+    }
+    getCurrentSelectionRange(documentEl, windowEl) {
+        /* istanbul ignore else */
+        if (windowEl.getSelection) {
+            const sel = windowEl.getSelection();
+            /* istanbul ignore else */
+            if (sel && sel.getRangeAt && sel.rangeCount) {
+                return sel.getRangeAt(0);
+            }
+        }
+        else if (documentEl.getSelection()?.getRangeAt) {
+            return documentEl.getSelection()?.getRangeAt(0);
+        }
+        /* istanbul ignore next */
+        return undefined;
+    }
+    selectElement(documentEl, windowEl, element) {
+        /* istanbul ignore else */
+        if (element) {
+            /* istanbul ignore else */
+            if (windowEl.getSelection) {
+                const sel = windowEl.getSelection();
+                sel?.removeAllRanges();
+                const range = documentEl.createRange();
+                range.selectNodeContents(element);
+                sel?.addRange(range);
+            }
+            else if (documentEl.getSelection) {
+                const sel = documentEl.getSelection();
+                sel?.removeAllRanges();
+                const range = documentEl.createRange();
+                range.selectNodeContents(element);
+                sel?.addRange(range);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextEditorService {
+    /**
+     * A dictionary representing all active text editors and their settings.
+     */
+    set editor(value) {
+        this.#editor = value;
+    }
+    get editor() {
+        if (!this.#editor) {
+            throw new Error('Editor has not been initialized.');
+        }
+        return this.#editor;
+    }
+    get isInitialized() {
+        return this.#editor !== undefined;
+    }
+    #editor;
+    /**
+     * Returns the blur observable from the editor with the corresponding id.
+     */
+    blurListener() {
+        return this.editor.blurObservable;
+    }
+    /**
+     * Returns the click observable from the editor with the corresponding id.
+     */
+    clickListener() {
+        return this.editor.clickObservable;
+    }
+    /**
+     * Returns the command change observable from the editor with the corresponding id.
+     */
+    commandChangeListener() {
+        return this.editor.commandChangeObservable;
+    }
+    /**
+     * Returns the input change observable from the editor with the corresponding id.
+     */
+    inputListener() {
+        return this.editor.inputObservable;
+    }
+    /**
+     * Returns the selection change observable from the editor with the corresponding id.
+     */
+    selectionChangeListener() {
+        return this.editor.selectionChangeObservable;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextEditorAdapterService {
+    #selectionService;
+    #textEditorService;
+    #windowRef;
+    constructor(selectionService, textEditorService, windowService) {
+        this.#selectionService = selectionService;
+        this.#textEditorService = textEditorService;
+        this.#windowRef = windowService;
+    }
+    /**
+     * Creates a text editor inside the supplied iframe element.
+     */
+    initEditor(id, iframeElement, styleState, placeholder) {
+        this.#textEditorService.editor = this.#createObservers(iframeElement);
+        const documentEl = this.#getIframeDocumentEl();
+        const styleEl = documentEl.createElement('style');
+        styleEl.innerHTML = `.editor:empty:before {
+      content: attr(data-placeholder);
+      font-family: "Blackbaud Sans", Arial, sans-serif;
+      color: #686c73;
+      font-weight: 400;
+      font-size: 15px;
+      font-style: italic;
+    }`;
+        documentEl.head.appendChild(styleEl);
+        const style = {
+            ...STYLE_STATE_DEFAULTS,
+            ...styleState,
+        };
+        const bodyStyle = `background-color: ${style.backColor};
+      color: ${style.fontColor};
+      font-family: ${style.font};
+      font-size: ${style.fontSize}px`;
+        documentEl.querySelector('html')?.setAttribute('lang', 'en');
+        documentEl.body.setAttribute('contenteditable', 'true');
+        documentEl.body.setAttribute('id', id);
+        documentEl.body.setAttribute('role', 'main');
+        documentEl.body.setAttribute('class', 'editor');
+        documentEl.body.setAttribute('style', bodyStyle);
+        documentEl.body.setAttribute('data-placeholder', placeholder || '');
+    }
+    disableEditor(focusableChildren, textEditorNativeElement) {
+        this.#setEditorDisabled(focusableChildren, textEditorNativeElement, true);
+    }
+    enableEditor(focusableChildren, textEditorNativeElement) {
+        this.#setEditorDisabled(focusableChildren, textEditorNativeElement, false);
+    }
+    /**
+     * Executes a command on the text editor with the corresponding id.
+     */
+    execCommand(editorCommand) {
+        /* istanbul ignore else */
+        if (this.#textEditorService.editor) {
+            const documentEl = this.#getIframeDocumentEl();
+            /* istanbul ignore else */
+            if (this.editorSelected()) {
+                documentEl.execCommand(editorCommand.command, false, editorCommand.value);
+                this.focusEditor();
+                this.#textEditorService.editor.commandChangeObservable.next();
+            }
+        }
+    }
+    getCurrentSelection() {
+        return this.#selectionService.getCurrentSelection(this.#getIframeDocumentEl());
+    }
+    /**
+     * Returns a data URI using the provided text string.
+     * Used to display a merge field inside a string of text.
+     */
+    getMergeFieldDataURI(text) {
+        const documentEl = this.#windowRef.nativeWindow.document;
+        let textToUse = text;
+        if (text.length > 18) {
+            textToUse = text.substr(0, 15) + '...';
+        }
+        const canvasElement = documentEl.createElement('canvas');
+        canvasElement.setAttribute('height', '20');
+        canvasElement.setAttribute('width', '100');
+        canvasElement.style.backgroundColor = 'tan';
+        canvasElement.style.border = '1px solid #000000';
+        canvasElement.style.borderRadius = '5px';
+        const context = canvasElement.getContext('2d');
+        context.font = '12px Arial';
+        context.textAlign = 'center';
+        context.fillText(textToUse, 50, 15);
+        context.globalCompositeOperation = 'destination-over';
+        context.fillStyle = '#00FFFF';
+        context.fillRect(0, 0, 100, 20);
+        context.globalCompositeOperation = 'source-over';
+        context.lineWidth = 2;
+        context.strokeStyle = '#FF0000';
+        context.strokeRect(0, 0, 100, 20);
+        const result = canvasElement.toDataURL('image/png', 1.0);
+        return result;
+    }
+    getStyleState() {
+        const documentEl = this.#getIframeDocumentEl();
+        /* istanbul ignore else */
+        if (this.editorSelected()) {
+            return {
+                backColor: this.#getColor(documentEl, 'BackColor'),
+                fontColor: this.#getColor(documentEl, 'ForeColor'),
+                fontSize: parseInt(this.#getFontSize(), undefined),
+                font: documentEl.queryCommandValue('fontname'),
+                boldState: documentEl.queryCommandState('Bold'),
+                italicState: documentEl.queryCommandState('Italic'),
+                underlineState: documentEl.queryCommandState('Underline'),
+                linkState: this.#hasLink(),
+            };
+        }
+        /* istanbul ignore next */
+        return {};
+    }
+    getEditorInnerHtml() {
+        const documentEl = this.#getIframeDocumentEl();
+        if (documentEl) {
+            return this.#replaceHtmlCodes(documentEl.body.innerHTML);
+        }
+        return '';
+    }
+    setEditorInnerHtml(value) {
+        const documentEl = this.#getIframeDocumentEl();
+        const editorContent = documentEl.body;
+        /* istanbul ignore else */
+        if (editorContent.innerHTML !== value) {
+            editorContent.innerHTML = value;
+        }
+    }
+    focusEditor() {
+        /* istanbul ignore else */
+        if (this.#textEditorService.editor) {
+            const windowEl = this.#getContentWindowEl();
+            const iframeDocumentEl = this.#getIframeDocumentEl();
+            const currentSelection = this.#selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
+            const cursorIsNotActiveAndHasReset = currentSelection &&
+                currentSelection.startOffset === 0 &&
+                currentSelection.endOffset === 0;
+            if (!this.editorSelected() || cursorIsNotActiveAndHasReset) {
+                // focus the end of the editor
+                const documentEl = this.#windowRef.nativeWindow.document;
+                const editor = iframeDocumentEl.body;
+                const range = documentEl.createRange();
+                this.#textEditorService.editor.iframeElementRef.focus();
+                editor.focus();
+                if (windowEl.getSelection && documentEl.createRange) {
+                    range.selectNodeContents(editor);
+                    range.collapse(false);
+                    const sel = windowEl.getSelection();
+                    sel?.removeAllRanges();
+                    sel?.addRange(range);
+                }
+            }
+            else {
+                // Cursor may not be active, restore it
+                this.#textEditorService.editor.iframeElementRef.focus();
+                iframeDocumentEl.body.focus();
+            }
+        }
+    }
+    getLink() {
+        let link;
+        const anchorEl = this.getSelectedAnchorTag();
+        if (anchorEl && anchorEl.href) {
+            link = {
+                target: anchorEl.getAttribute('target') === '_blank'
+                    ? UrlTarget.NewWindow
+                    : UrlTarget.None,
+                url: anchorEl.href,
+            };
+        }
+        return link;
+    }
+    getSelectedAnchorTag() {
+        const selectedEl = this.#getCurrentSelectionParentElement();
+        if (selectedEl) {
+            return this.#getParent(selectedEl, 'a');
+        }
+        /* istanbul ignore next */
+        return undefined;
+    }
+    saveSelection() {
+        return this.#selectionService.getCurrentSelectionRange(this.#getIframeDocumentEl(), this.#getContentWindowEl());
+    }
+    selectElement(element) {
+        this.#selectionService.selectElement(this.#getIframeDocumentEl(), this.#getContentWindowEl(), element);
+    }
+    setPlaceholder(placeholder) {
+        const documentEl = this.#getIframeDocumentEl();
+        documentEl.body.setAttribute('data-placeholder', placeholder || '');
+    }
+    setFontSize(fontSize) {
+        const doc = this.#getIframeDocumentEl();
+        this.execCommand({ command: 'fontSize', value: '1' });
+        const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
+        for (const element of fontElements) {
+            element.removeAttribute('size');
+            element.style.fontSize = fontSize + 'px';
+        }
+        this.#cleanUpBlankStyleTags(doc);
+        this.focusEditor();
+        this.#textEditorService.editor.commandChangeObservable.next();
+    }
+    removeObservers(setting) {
+        /* istanbul ignore next */
+        const documentEl = setting.iframeElementRef.contentWindow
+            ? setting.iframeElementRef.contentWindow.document
+            : setting.iframeElementRef.contentDocument;
+        setting.selectionChangeObservable.complete();
+        setting.clickObservable.complete();
+        setting.commandChangeObservable.complete();
+        if (documentEl) {
+            documentEl.removeEventListener('selectionchange', setting.selectionListener);
+            documentEl.removeEventListener('input', setting.selectionListener);
+            documentEl.removeEventListener('mousedown', setting.clickListener);
+            documentEl.body.removeEventListener('paste', setting.pasteListener);
+        }
+    }
+    #getContentWindowEl() {
+        return this.#textEditorService.editor.iframeElementRef
+            .contentWindow;
+    }
+    #getChildSelectedAnchorTags() {
+        const selectedRange = this.getCurrentSelection()?.getRangeAt(0);
+        if (selectedRange && selectedRange.toString().length <= 0) {
+            return [];
+        }
+        const parentElement = this.#getCurrentSelectionParentElement();
+        let childElements = [];
+        /* istanbul ignore else */
+        if (parentElement) {
+            childElements = Array.from(parentElement.querySelectorAll('a'));
+        }
+        /* istanbul ignore next */
+        return childElements.filter((element) => {
+            // IE specific
+            if (selectedRange) {
+                if (!selectedRange.intersectsNode) {
+                    if (!element || !element.href) {
+                        return false;
+                    }
+                    const tempRange = document.createRange();
+                    tempRange.selectNodeContents(element);
+                    return ((selectedRange.compareBoundaryPoints(Range.START_TO_START, tempRange) !== -1 &&
+                        selectedRange.compareBoundaryPoints(Range.START_TO_END, tempRange) !== 1) ||
+                        (selectedRange.compareBoundaryPoints(Range.END_TO_START, tempRange) !== -1 &&
+                            selectedRange.compareBoundaryPoints(Range.END_TO_END, tempRange) !== 1));
+                }
+            }
+            // Normal non-IE
+            return (!!element && !!element.href && selectedRange?.intersectsNode(element));
+        });
+    }
+    #getIframeDocumentEl() {
+        const contentWindowEl = this.#getContentWindowEl();
+        /* istanbul ignore else */
+        if (contentWindowEl) {
+            return contentWindowEl.document;
+        }
+        /* istanbul ignore next */
+        return this.#textEditorService.editor.iframeElementRef
+            .contentDocument;
+    }
+    #getFontSize() {
+        let fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
+        const selection = this.getCurrentSelection();
+        /* istanbul ignore else */
+        if (selection &&
+            selection.anchorNode &&
+            selection.anchorNode.parentElement) {
+            let element = selection.anchorNode;
+            if (element?.nodeType !== 1) {
+                element = element?.parentElement;
+            }
+            const computedStyle = window.getComputedStyle(element);
+            /* istanbul ignore else */
+            if (computedStyle) {
+                fontSize = computedStyle.getPropertyValue('font-size');
+            }
+        }
+        return fontSize;
+    }
+    #createObservers(element) {
+        /* istanbul ignore next */
+        const documentEl = element.contentWindow
+            ? element.contentWindow.document
+            : element.contentDocument;
+        // Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
+        documentEl.open();
+        documentEl.close();
+        const selectionObservable = new Subject();
+        const selectionListener = () => selectionObservable.next();
+        const clickObservable = new Subject();
+        const clickListener = () => clickObservable.next();
+        const pasteListener = this.#getPasteOverride();
+        const blurObservable = new Subject();
+        const blurListener = () => blurObservable.next();
+        const inputObservable = new Subject();
+        const inputListener = () => inputObservable.next();
+        documentEl.addEventListener('selectionchange', selectionListener);
+        documentEl.addEventListener('input', inputListener);
+        documentEl.addEventListener('mousedown', clickListener);
+        documentEl.body.addEventListener('paste', pasteListener);
+        documentEl.body.addEventListener('blur', blurListener);
+        return {
+            blurObservable,
+            clickObservable,
+            commandChangeObservable: new Subject(),
+            iframeElementRef: element,
+            inputObservable,
+            selectionChangeObservable: selectionObservable,
+            blurListener,
+            clickListener,
+            inputListener,
+            pasteListener,
+            selectionListener,
+        };
+    }
+    #getPasteOverride() {
+        /* istanbul ignore next */
+        return (e) => {
+            e.preventDefault();
+            const text = e.clipboardData?.getData('text/plain');
+            if (text !== undefined) {
+                this.execCommand({ command: 'insertHTML', value: text.toString() });
+            }
+        };
+    }
+    #getCurrentSelectionParentElement() {
+        return this.#selectionService.getCurrentSelectionParentElement(this.#getIframeDocumentEl());
+    }
+    #getColor(documentEl, selector) {
+        const commandValue = documentEl.queryCommandValue(selector);
+        // Edge is weird and returns numbers
+        /* istanbul ignore if */
+        if (typeof commandValue === 'number') {
+            /* istanbul ignore next */
+            return ('rgb(' +
+                (commandValue & 0xff) +
+                ', ' +
+                ((commandValue & 0xff00) >> 8) +
+                ', ' +
+                ((commandValue & 0xff0000) >> 16) +
+                ')');
+        }
+        // Firefox uses 'Transparent' instead of a color value
+        /* istanbul ignore next */
+        if (commandValue.toString().toLowerCase() === 'transparent') {
+            return STYLE_STATE_DEFAULTS.backColor;
+        }
+        return commandValue;
+    }
+    #hasLink() {
+        const anchorEl = this.getSelectedAnchorTag();
+        const childAnchorEls = this.#getChildSelectedAnchorTags();
+        /* istanbul ignore next */
+        return childAnchorEls.length > 0 || (!!anchorEl && !!anchorEl.href);
+    }
+    #getParent(element, tag) {
+        let currentNode = element;
+        while (currentNode && currentNode.tagName.toUpperCase() !== 'BODY') {
+            if (currentNode.tagName.toUpperCase() === tag.toUpperCase()) {
+                return currentNode;
+            }
+            currentNode = currentNode.parentElement;
+        }
+        return undefined;
+    }
+    editorSelected() {
+        const documentEl = this.#getIframeDocumentEl();
+        return this.#selectionService.isElementSelected(documentEl, documentEl.body);
+    }
+    #cleanUpBlankStyleTags(doc) {
+        const orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
+        for (const element of orphanElements) {
+            if (!element.getAttribute('style')) {
+                element.removeAttribute('style');
+            }
+        }
+        const removableElements = orphanElements.filter((element) => {
+            const tagName = element.tagName.toUpperCase();
+            return ((tagName === 'FONT' || tagName === 'SPAN') &&
+                (element.attributes.length === 0 || !element.hasChildNodes));
+        });
+        for (const element of removableElements) {
+            const parent = element.parentNode;
+            /* istanbul ignore else */
+            if (parent) {
+                while (element.firstChild) {
+                    parent.insertBefore(element.firstChild, element);
+                }
+                parent.removeChild(element);
+            }
+        }
+    }
+    // Certain values are encoded in html and need to be decoded
+    #replaceHtmlCodes(str) {
+        return str
+            .replace(/&nbsp;/, String.fromCharCode(160))
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&amp;/g, '&');
+    }
+    #setEditorDisabled(focusableChildren, textEditorNativeElement, disabled) {
+        textEditorNativeElement.style.pointerEvents = disabled ? 'none' : 'auto';
+        textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+        /* istanbul ignore else */
+        if (focusableChildren.length > 0) {
+            focusableChildren.forEach((aFocusableChild) => {
+                aFocusableChild.tabIndex = disabled ? -1 : 0;
+            });
+        }
+        this.#getIframeDocumentEl().body.setAttribute('contenteditable', disabled ? 'false' : 'true');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i1$1.SkyAppWindowRef }]; } });
+
+const FORMAT_MENU_ACTION = 'skyux_text_editor_format_menu_action_';
+const EDIT_MENU_ACTION = 'skyux_text_editor_edit_menu_action_';
+/**
+ * @internal
+ */
+class SkyTextEditorMenubarComponent {
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this.#_disabled = coercedValue;
+            this.#changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    #_disabled;
+    #ngUnsubscribe;
+    #adapterService;
+    #changeDetector;
+    #resources;
+    constructor(adapterService, changeDetector, resources) {
+        this.editorFocusStream = new Subject();
+        this.menus = [];
+        this.mergeFields = [];
+        this.#_disabled = false;
+        this.editDropdownStream = new Subject();
+        this.formatDropdownStream = new Subject();
+        this.mergeFieldDropdownStream = new Subject();
+        this.#ngUnsubscribe = new Subject();
+        this.#adapterService = adapterService;
+        this.#changeDetector = changeDetector;
+        this.#resources = resources;
+    }
+    ngOnInit() {
+        this.editorFocusStream
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#closeDropdowns();
+        });
+        this.#resources
+            .getStrings({
+            bold: FORMAT_MENU_ACTION + 'bold_label',
+            boldShort: FORMAT_MENU_ACTION + 'bold_key_shortcut',
+            italic: FORMAT_MENU_ACTION + 'italic_label',
+            italicShort: FORMAT_MENU_ACTION + 'italic_key_shortcut',
+            underline: FORMAT_MENU_ACTION + 'underline_label',
+            underlineShort: FORMAT_MENU_ACTION + 'underline_key_shortcut',
+            strikethrough: FORMAT_MENU_ACTION + 'strikethrough_label',
+            clearFormatting: FORMAT_MENU_ACTION + 'clear_formatting_label',
+            undo: EDIT_MENU_ACTION + 'undo_label',
+            undoShort: EDIT_MENU_ACTION + 'undo_key_shortcut',
+            redo: EDIT_MENU_ACTION + 'redo_label',
+            redoShort: EDIT_MENU_ACTION + 'redo_key_shortcut',
+            cut: EDIT_MENU_ACTION + 'cut_label',
+            cutShort: EDIT_MENU_ACTION + 'cut_key_shortcut',
+            copy: EDIT_MENU_ACTION + 'copy_label',
+            copyShort: EDIT_MENU_ACTION + 'copy_key_shortcut',
+            paste: EDIT_MENU_ACTION + 'paste_label',
+            pasteShort: EDIT_MENU_ACTION + 'paste_key_shortcut',
+            selectAll: EDIT_MENU_ACTION + 'select_all_label',
+            selectAllShort: EDIT_MENU_ACTION + 'select_all_key_shortcut',
+        })
+            .pipe(take(1), takeUntil(this.#ngUnsubscribe))
+            .subscribe((resources) => {
+            this.formatItems = [
+                {
+                    function: () => this.execCommand('bold'),
+                    label: resources.bold,
+                    keyShortcut: resources.boldShort,
+                },
+                {
+                    function: () => this.execCommand('italic'),
+                    label: resources.italic,
+                    keyShortcut: resources.italicShort,
+                },
+                {
+                    function: () => this.execCommand('underline'),
+                    label: resources.underline,
+                    keyShortcut: resources.underlineShort,
+                },
+                {
+                    function: () => this.execCommand('strikethrough'),
+                    label: resources.strikethrough,
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.#clearFormat(),
+                    label: resources.clearFormatting,
+                },
+            ];
+            this.editItems = [
+                {
+                    function: () => this.execCommand('undo'),
+                    label: resources.undo,
+                    keyShortcut: resources.undoShort,
+                },
+                {
+                    function: () => this.execCommand('redo'),
+                    label: resources.redo,
+                    keyShortcut: resources.redoShort,
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('cut'),
+                    label: resources.cut,
+                    keyShortcut: resources.cutShort,
+                },
+                {
+                    function: () => this.execCommand('copy'),
+                    label: resources.copy,
+                    keyShortcut: resources.copyShort,
+                },
+                {
+                    function: () => this.execCommand('paste'),
+                    label: resources.paste,
+                    keyShortcut: resources.pasteShort,
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('selectAll'),
+                    label: resources.selectAll,
+                    keyShortcut: resources.selectAllShort,
+                },
+            ];
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    execCommand(command, value = '') {
+        this.#adapterService.execCommand({
+            command: command,
+            value: value,
+        });
+    }
+    insertMergeField(field) {
+        this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
+            he.escape(field.id) +
+            '" data-fielddisplay="' +
+            he.escape(field.name) +
+            '" src="' +
+            (field.previewImageUrl ||
+                this.#adapterService.getMergeFieldDataURI(field.name)) +
+            '">');
+    }
+    #closeDropdowns() {
+        this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
+        this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
+        this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
+    }
+    #clearFormat() {
+        const currentSelection = this.#adapterService.getCurrentSelection();
+        /* istanbul ignore else */
+        if (currentSelection &&
+            currentSelection.rangeCount > 0 &&
+            currentSelection.getRangeAt(0).toString().length <= 0) {
+            this.execCommand('selectAll');
+        }
+        this.execCommand('removeFormat');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem?.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem?.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem?.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem?.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
+                type: Input
+            }], menus: [{
+                type: Input
+            }], mergeFields: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+const FONT_SIZE_LIST_DEFAULTS = [
+    6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48,
+];
+
+/**
+ * @internal
+ */
+const MENU_DEFAULTS = ['edit', 'format'];
+
+/**
+ * @internal
+ */
+const TOOLBAR_ACTION_DEFAULTS = [
+    'font-family',
+    'font-size',
+    'font-style',
+    'color',
+    'list',
+    'link',
+];
+
+/**
+ * @internal
+ */
+class SkyUrlModalContext {
+}
+
+const emailKey = 'mailto:';
+const queryStringParamKey = '?Subject=';
+/**
+ * @internal
+ */
+class SkyTextEditorUrlModalComponent {
+    set activeTab(value) {
+        this.#_activeTab = value;
+        this.valid = this.#isValid();
+    }
+    get activeTab() {
+        return this.#_activeTab;
+    }
+    set emailAddress(value) {
+        this.#_emailAddress = value;
+        this.valid = this.#isValid();
+    }
+    get emailAddress() {
+        return this.#_emailAddress;
+    }
+    set url(value) {
+        this.#_url = value;
+        this.valid = this.#isValid();
+    }
+    get url() {
+        return this.#_url;
+    }
+    #modalInstance;
+    #_activeTab;
+    #_emailAddress;
+    #_url;
+    constructor(modalInstance, modalContext) {
+        this.emailAddressValid = false;
+        this.subject = '';
+        this.target = 0;
+        this.valid = false;
+        this.#_activeTab = 0;
+        this.#_emailAddress = '';
+        this.#_url = 'https://';
+        this.#modalInstance = modalInstance;
+        if (modalContext.urlResult) {
+            if (modalContext.urlResult.url.startsWith(emailKey)) {
+                this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
+                let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
+                queryStringIndex =
+                    queryStringIndex > -1
+                        ? queryStringIndex
+                        : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
+                /* istanbul ignore else */
+                if (queryStringIndex > -1) {
+                    this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
+                    this.emailAddress = this.emailAddress.slice(0, queryStringIndex);
+                }
+                // Set active tab to email
+                this.activeTab = 1;
+            }
+            else {
+                (this.url = modalContext.urlResult.url),
+                    (this.target = modalContext.urlResult.target);
+                // set active tab to web page
+                this.activeTab = 0;
+            }
+        }
+    }
+    activeTabChanged(value) {
+        this.activeTab = Number(value);
+    }
+    save() {
+        /* istanbul ignore else */
+        if (this.#isValid()) {
+            if (this.activeTab === 0) {
+                this.#modalInstance.save({
+                    url: this.url,
+                    target: this.target
+                        ? parseInt(this.target, undefined)
+                        : UrlTarget.None,
+                });
+            }
+            else {
+                this.#modalInstance.save({
+                    url: this.#getEmailUrl(),
+                    target: UrlTarget.None,
+                });
+            }
+        }
+    }
+    cancel() {
+        this.#modalInstance.cancel();
+    }
+    #getEmailUrl() {
+        return (emailKey +
+            this.emailAddress +
+            (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
+    }
+    #isValid() {
+        if (this.activeTab === 0) {
+            return !!this.url && SkyValidation.isUrl(this.url);
+        }
+        return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$2.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "component", type: i1$2.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6$1.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex", "layout"], outputs: ["close"] }, { kind: "component", type: i6$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-editor-url-modal', template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
+
+/**
+ * @internal
+ */
+class SkyTextEditorToolbarComponent {
+    set editorFocusStream(value) {
+        this.#_editorFocusStream = value;
+        this.#subscribeEditorFocus();
+    }
+    get editorFocusStream() {
+        return this.#_editorFocusStream;
+    }
+    set styleState(value) {
+        this.#_styleState = value;
+        if (value.font !== this.styleStateFontName) {
+            if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
+                this.styleStateFontName = this.#getFontName('Blackbaud Sans');
+            }
+            else {
+                this.styleStateFontName = this.#getFontName(value.font);
+            }
+        }
+    }
+    get styleState() {
+        return this.#_styleState;
+    }
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this.#_disabled = coercedValue;
+            this.#changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    #editorFocusStreamSub;
+    #adapterService;
+    #changeDetector;
+    #modalService;
+    #ngUnsubscribe;
+    #_editorFocusStream;
+    #_disabled;
+    #_styleState;
+    constructor(adapterService, changeDetector, modalService) {
+        this.fontList = [];
+        this.fontSizeList = [];
+        this.toolbarActions = [];
+        this.backColorpickerStream = new Subject();
+        this.colorpickerStream = new Subject();
+        this.fontPickerStream = new Subject();
+        this.fontSizeStream = new Subject();
+        this.#ngUnsubscribe = new Subject();
+        this.#_editorFocusStream = new Subject();
+        this.#_disabled = false;
+        this.#_styleState = STYLE_STATE_DEFAULTS;
+        this.#adapterService = adapterService;
+        this.#changeDetector = changeDetector;
+        this.#modalService = modalService;
+    }
+    ngOnInit() {
+        this.#subscribeEditorFocus();
+    }
+    execCommand(command, value = '') {
+        this.#adapterService.execCommand({
+            command: command,
+            value: value,
+        });
+        this.styleState = {
+            ...this.styleState,
+            ...this.#adapterService.getStyleState(),
+        };
+    }
+    toggleFontStyle(currentState, newState, command) {
+        if (currentState !== newState) {
+            this.execCommand(command);
+        }
+        // Force sky-checkbox to show changes on user's initial click.
+        this.#changeDetector.detectChanges();
+    }
+    link() {
+        const priorSelection = this.#adapterService.saveSelection();
+        const currentLink = this.#adapterService.getLink();
+        const inputModal = this.#modalService.open(SkyTextEditorUrlModalComponent, [
+            {
+                provide: SkyUrlModalContext,
+                useValue: { urlResult: currentLink },
+            },
+        ]);
+        inputModal.closed.subscribe((result) => {
+            if (result.reason === 'save' && priorSelection) {
+                if (currentLink) {
+                    const anchor = this.#adapterService.getSelectedAnchorTag();
+                    if (anchor) {
+                        this.#adapterService.selectElement(anchor);
+                    }
+                }
+                this.execCommand('unlink');
+                if (result.data.target === UrlTarget.None) {
+                    // Current window
+                    this.execCommand('createLink', result.data.url);
+                }
+                else {
+                    // New Window
+                    const sText = this.#adapterService.getCurrentSelection();
+                    this.execCommand('insertHTML', '<a href="' +
+                        result.data.url +
+                        '" rel="noopener noreferrer" target="_blank">' +
+                        sText +
+                        '</a>');
+                }
+            }
+        });
+    }
+    unlink() {
+        const currentSelectionRange = this.#adapterService
+            .getCurrentSelection()
+            ?.getRangeAt(0);
+        if (currentSelectionRange && currentSelectionRange.toString().length <= 0) {
+            const anchorTag = this.#adapterService.getSelectedAnchorTag();
+            if (anchorTag) {
+                this.#adapterService.selectElement(anchorTag);
+            }
+        }
+        this.execCommand('unlink');
+    }
+    changeFontSize(size) {
+        this.#adapterService.setFontSize(size);
+        this.styleState = {
+            ...this.styleState,
+            ...this.#adapterService.getStyleState(),
+        };
+    }
+    onColorpickerColorChanged(color, isBackground = false) {
+        this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
+    }
+    #subscribeEditorFocus() {
+        this.#editorFocusStreamSub?.unsubscribe();
+        this.#editorFocusStreamSub = this.editorFocusStream
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.styleState = {
+                ...this.styleState,
+                ...this.#adapterService.getStyleState(),
+            };
+            this.#closeDropdowns();
+            this.#changeDetector.detectChanges();
+        });
+    }
+    #closeDropdowns() {
+        const message = {
+            type: SkyColorpickerMessageType.Close,
+        };
+        this.colorpickerStream.next(message);
+        this.backColorpickerStream.next(message);
+        this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
+        this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
+    }
+    #getFontName(fontName) {
+        for (let i = 0; i < this.fontList.length; i++) {
+            if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
+                return this.fontList[i].name;
+            }
+        }
+        /* istanbul ignore next */
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            pickerButtonIcon=\"highlighter\"\n            pickerButtonIconType=\"skyux\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n            pickerButtonIcon=\"text-color\"\n            pickerButtonIconType=\"skyux\"\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i6.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)" }, { kind: "component", type: i7$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            pickerButtonIcon=\"highlighter\"\n            pickerButtonIconType=\"skyux\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n            pickerButtonIcon=\"text-color\"\n            pickerButtonIconType=\"skyux\"\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
+                type: Input
+            }], fontList: [{
+                type: Input
+            }], fontSizeList: [{
+                type: Input
+            }], toolbarActions: [{
+                type: Input
+            }], styleState: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * The text editor component lets users format and manipulate text.
+ */
+class SkyTextEditorComponent {
+    /**
+     * Whether to disable the text editor on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
+     * To set the disabled state on reactive forms, use the `FormControl` instead.
+     * @default false
+     */
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this.#_disabled = coercedValue;
+            // Update focusableChildren inside the iframe.
+            let focusableChildren;
+            /* istanbul ignore else */
+            if (this.iframeRef) {
+                focusableChildren = this.#coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
+                    ignoreVisibility: true,
+                    ignoreTabIndex: true,
+                });
+                if (this.#_disabled) {
+                    this.#adapterService.disableEditor(focusableChildren, this.iframeRef.nativeElement);
+                }
+                else {
+                    this.#adapterService.enableEditor(focusableChildren, this.iframeRef.nativeElement);
+                }
+                this.#changeDetector.markForCheck();
+            }
+        }
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    /**
+     * The fonts to include in the font picker.
+     * @default [{name: 'Blackbaud Sans', value: '"Blackbaud Sans", Arial, sans-serif'}, {name: 'Arial', value: 'Arial'}, {name: 'Arial Black', value: '"Arial Black"'}, {name: 'Courier New', value: '"Courier New"'}, {name: 'Georgia', value: 'Georgia, serif'}, {name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif'}, {name: 'Times New Roman', value: '"Times New Roman"'}, {name: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif'}, {name: 'Verdana', value: 'Verdana, Geneva, sans-serif'}]
+     */
+    set fontList(value) {
+        this.#_fontList = value || FONT_LIST_DEFAULTS;
+    }
+    get fontList() {
+        return this.#_fontList;
+    }
+    /**
+     * The font sizes to include in the font size picker.
+     * @default [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48]
+     */
+    set fontSizeList(value) {
+        this.#_fontSizeList = value || FONT_SIZE_LIST_DEFAULTS;
+    }
+    get fontSizeList() {
+        return this.#_fontSizeList;
+    }
+    /**
+     * The unique ID attribute for the text editor.
+     * By default, the component generates a random ID.
+     */
+    set id(value) {
+        this.#id = value || this.#defaultId;
+    }
+    get id() {
+        return this.#id;
+    }
+    /**
+     * The initial styles for all content, including background color, font size, and link state.
+     */
+    set initialStyleState(state) {
+        // Do not update the state after initialization has taken place
+        /* istanbul ignore else */
+        if (!this.#initialized) {
+            this.#_initialStyleState = {
+                ...STYLE_STATE_DEFAULTS,
+                ...state,
+            };
+        }
+    }
+    get initialStyleState() {
+        return this.#_initialStyleState;
+    }
+    /**
+     * The menus to include in the menu bar.
+     * @default [ 'edit', 'format' ]
+     */
+    set menus(value) {
+        this.#_menus = value || MENU_DEFAULTS;
+    }
+    get menus() {
+        return this.#_menus;
+    }
+    /**
+     * The merge fields to include in the merge field menu.
+     */
+    set mergeFields(value) {
+        this.#_mergeFields = value || [];
+    }
+    get mergeFields() {
+        return this.#_mergeFields;
+    }
+    /**
+     * Placeholder text to display when the text entry area is empty.
+     */
+    set placeholder(value) {
+        /* istanbul ignore else */
+        if (value !== this.#_placeholder) {
+            this.#_placeholder = value || '';
+            if (this.#initialized) {
+                this.#adapterService.setPlaceholder(value);
+            }
+        }
+    }
+    get placeholder() {
+        return this.#_placeholder;
+    }
+    /**
+     * The actions to include in the toolbar and determines their order.
+     * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
+     */
+    set toolbarActions(value) {
+        this.#_toolbarActions = value || TOOLBAR_ACTION_DEFAULTS;
+    }
+    get toolbarActions() {
+        return this.#_toolbarActions;
+    }
+    /**
+     * The internal value of the control.
+     */
+    set value(value) {
+        // Normalize value and set any empty state to an empty string.
+        let normalizedValue;
+        const valueTrimmed = value?.trim();
+        if (!value ||
+            valueTrimmed === '<p></p>' ||
+            valueTrimmed === '<br>' ||
+            valueTrimmed === '<p><br></p>') {
+            normalizedValue = '';
+        }
+        else {
+            normalizedValue = value;
+        }
+        normalizedValue = this.#sanitizationService
+            .sanitize(normalizedValue)
+            .trim();
+        if (this.#_value !== normalizedValue) {
+            this.#_value = normalizedValue;
+            // Update angular form control if model has been normalized.
+            /* istanbul ignore else */
+            if (this.#ngControl?.control &&
+                normalizedValue !== this.#ngControl.control.value) {
+                this.#ngControl.control.setValue(normalizedValue, {
+                    emitModelToViewChange: false,
+                });
+            }
+            // Autofocus isn't testable in Firefox and IE.
+            // Don't set focus on the editor now if the iframe isn't initialized.
+            // #initIframe() will do another check later to see if the editor should
+            // receive focus.
+            /* istanbul ignore next */
+            if (this.autofocus && this.#initialized && !this.#focusInitialized) {
+                this.#adapterService.focusEditor();
+                this.#focusInitialized = true;
+            }
+        }
+    }
+    get value() {
+        return this.#_value;
+    }
+    #defaultId;
+    #id;
+    #focusInitialized;
+    #initialized;
+    #ngUnsubscribe;
+    #changeDetector;
+    #coreAdapterService;
+    #adapterService;
+    #editorService;
+    #sanitizationService;
+    #ngControl;
+    #zone;
+    #_fontList;
+    #_fontSizeList;
+    #_mergeFields;
+    #_menus;
+    #_toolbarActions;
+    #_disabled;
+    #_initialStyleState;
+    #_placeholder;
+    #_value;
+    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
+        /**
+         * Whether to put focus on the editor after it renders.
+         */
+        this.autofocus = false;
+        this.editorFocusStream = new Subject();
+        this.formControlClass = !!inject(SkyInputBoxHostService, {
+            optional: true,
+        });
+        this.#focusInitialized = false;
+        this.#initialized = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#_fontList = FONT_LIST_DEFAULTS;
+        this.#_fontSizeList = FONT_SIZE_LIST_DEFAULTS;
+        this.#_mergeFields = [];
+        this.#_menus = MENU_DEFAULTS;
+        this.#_toolbarActions = TOOLBAR_ACTION_DEFAULTS;
+        this.#_disabled = false;
+        this.#_initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
+        this.#_placeholder = '';
+        this.#_value = '<p></p>';
+        /* istanbul ignore next */
+        this.#_onTouched = () => {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+        };
+        /* istanbul ignore next */
+        this.#_onChange = () => {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+        };
+        this.#changeDetector = changeDetector;
+        this.#coreAdapterService = coreAdapterService;
+        this.#adapterService = adapterService;
+        this.#editorService = editorService;
+        this.#sanitizationService = sanitizationService;
+        this.#ngControl = ngControl;
+        this.#zone = zone;
+        this.#id = this.#defaultId = idSvc.generateId();
+        ngControl.valueAccessor = this;
+    }
+    ngAfterViewInit() {
+        this.#initIframe();
+    }
+    ngOnDestroy() {
+        this.#adapterService.removeObservers(this.#editorService.editor);
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    onIframeLoad() {
+        // Reinitialize the editor if it already exists to cover situations where the text editor might have been moved in the DOM.
+        if (this.#editorService.isInitialized) {
+            this.#initIframe();
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    writeValue(value) {
+        this.value = value;
+        // Update HTML if necessary.
+        if (this.#initialized) {
+            const editorValue = this.#adapterService.getEditorInnerHtml();
+            if (editorValue !== this.#_value) {
+                this.#adapterService.setEditorInnerHtml(this.#_value);
+            }
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this.#_onChange = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnTouched(fn) {
+        this.#_onTouched = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    #updateStyle() {
+        this.#_initialStyleState = {
+            ...this.#_initialStyleState,
+            ...this.#adapterService.getStyleState(),
+        };
+    }
+    #initIframe() {
+        this.#adapterService.initEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
+        this.#editorService
+            .inputListener()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            // Angular doesn't run change detection for changes originating inside an iframe,
+            // so we have to call the onChange() event inside NgZone to force change propagation to consuming components.
+            this.#zone.run(() => {
+                this.#viewToModelUpdate();
+            });
+        });
+        this.#editorService
+            .selectionChangeListener()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#updateStyle();
+            this.editorFocusStream.next();
+        });
+        this.#editorService
+            .clickListener()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.editorFocusStream.next();
+        });
+        this.#editorService
+            .blurListener()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            // Angular doesn't run change detection for changes originating inside an iframe,
+            // so we have to run markForCheck() inside the NgZone to force change propagation to consuming components.
+            this.#zone.run(() => {
+                this.#_onTouched();
+            });
+        });
+        this.#editorService
+            .commandChangeListener()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#updateStyle();
+            this.#viewToModelUpdate();
+        });
+        this.#adapterService.setEditorInnerHtml(this.#_value);
+        /* istanbul ignore next */
+        if (this.autofocus) {
+            this.#adapterService.focusEditor();
+        }
+        this.#initialized = true;
+    }
+    #viewToModelUpdate(emitChange = true) {
+        this.value = this.#adapterService.getEditorInnerHtml();
+        /* istanbul ignore else */
+        if (emitChange) {
+            this.#_onChange(this.#_value);
+        }
+    }
+    /* istanbul ignore next */
+    #_onTouched;
+    /* istanbul ignore next */
+    #_onChange;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i3$1.NgControl }, { token: i0.NgZone }, { token: i1$1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTextEditorComponent, selector: "sky-text-editor", inputs: { autofocus: "autofocus", disabled: "disabled", fontList: "fontList", fontSizeList: "fontSizeList", id: "id", initialStyleState: "initialStyleState", menus: "menus", mergeFields: "mergeFields", placeholder: "placeholder", toolbarActions: "toolbarActions" }, host: { properties: { "class.sky-form-control": "this.formControlClass" } }, providers: [
+            SkyTextEditorService,
+            SkyTextEditorSelectionService,
+            SkyTextEditorAdapterService,
+        ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"\n      (menus && menus.length) > 0 ||\n      (toolbarActions && toolbarActions.length > 0)\n    \"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus && menus.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n    #iframe\n  >\n  </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        SkyTextEditorService,
+                        SkyTextEditorSelectionService,
+                        SkyTextEditorAdapterService,
+                    ], template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"\n      (menus && menus.length) > 0 ||\n      (toolbarActions && toolbarActions.length > 0)\n    \"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus && menus.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n    #iframe\n  >\n  </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i3$1.NgControl }, { type: i0.NgZone }, { type: i1$1.SkyIdService }]; }, propDecorators: { autofocus: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fontList: [{
+                type: Input
+            }], fontSizeList: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], initialStyleState: [{
+                type: Input
+            }], menus: [{
+                type: Input
+            }], mergeFields: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], toolbarActions: [{
+                type: Input
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['iframe']
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], formControlClass: [{
+                type: HostBinding,
+                args: ['class.sky-form-control']
+            }] } });
+
+class SkyTextEditorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
+            SkyTextEditorUrlModalComponent,
+            SkyTextEditorToolbarComponent,
+            SkyTextEditorMenubarComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyCoreAdapterModule,
+            SkyTextEditorResourcesModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyInputBoxModule,
+            SkyColorpickerModule,
+            SkyCheckboxModule,
+            SkyDropdownModule,
+            SkyModalModule,
+            SkyTabsModule,
+            SkyThemeModule,
+            SkyToolbarModule], exports: [SkyTextEditorComponent,
+            SkyTextEditorUrlModalComponent,
+            SkyTextEditorToolbarComponent,
+            SkyTextEditorMenubarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyCoreAdapterModule,
+            SkyTextEditorResourcesModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyInputBoxModule,
+            SkyColorpickerModule,
+            SkyCheckboxModule,
+            SkyDropdownModule,
+            SkyModalModule,
+            SkyTabsModule,
+            SkyThemeModule,
+            SkyToolbarModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyCoreAdapterModule,
+                        SkyTextEditorResourcesModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyInputBoxModule,
+                        SkyColorpickerModule,
+                        SkyCheckboxModule,
+                        SkyDropdownModule,
+                        SkyModalModule,
+                        SkyTabsModule,
+                        SkyThemeModule,
+                        SkyToolbarModule,
+                    ],
+                    exports: [
+                        SkyTextEditorComponent,
+                        SkyTextEditorUrlModalComponent,
+                        SkyTextEditorToolbarComponent,
+                        SkyTextEditorMenubarComponent,
+                    ],
+                    declarations: [
+                        SkyTextEditorComponent,
+                        SkyTextEditorUrlModalComponent,
+                        SkyTextEditorToolbarComponent,
+                        SkyTextEditorMenubarComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyRichTextDisplayModule, SkyTextEditorModule, SkyRichTextDisplayComponent as λ1, SkyTextEditorMenubarComponent as λ2, SkyTextEditorUrlModalComponent as λ3, SkyTextEditorToolbarComponent as λ4, SkyTextEditorComponent as λ5 };
+//# sourceMappingURL=skyux-text-editor.mjs.map