@skyux/text-editor 5.6.2 → 6.0.0-beta.0

package/fesm2020/skyux-text-editor.mjs

@@ -0,0 +1,1743 @@
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation, ViewChild } from '@angular/core';
+import * as i1 from '@angular/platform-browser';
+import createDOMPurify from 'dompurify';
+import * as i5$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i6$1 from '@skyux/colorpicker';
+import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
+import * as i3 from '@skyux/core';
+import { SkyCoreAdapterModule, SkyIdModule } from '@skyux/core';
+import * as i4$1 from '@skyux/forms';
+import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
+import * as i2 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i7 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i3$1 from '@skyux/layout';
+import { SkyToolbarModule } from '@skyux/layout';
+import * as i1$1 from '@skyux/modals';
+import { SkyModalModule } from '@skyux/modals';
+import * as i4 from '@skyux/popovers';
+import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
+import * as i3$2 from '@skyux/tabs';
+import { SkyTabsModule } from '@skyux/tabs';
+import * as i6 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { Subject, forkJoin } 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 {
+    constructor() {
+        this.allowedAttributes = ['target'];
+    }
+    /**
+     * Returns a sanitized string, allowing target attribute for new tab links.
+     */
+    sanitize(htmlString) {
+        return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
+    }
+}
+SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyRichTextDisplayComponent {
+    constructor(sanitizer, sanitizationService) {
+        this.sanitizer = sanitizer;
+        this.sanitizationService = sanitizationService;
+        this.sanitizedText = '';
+        this._richText = '';
+    }
+    /**
+     * Specifies the rich text to display.
+     */
+    set richText(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);
+        }
+    }
+}
+SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
+SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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: "13.2.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 {
+}
+SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
+SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRichTextDisplayModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 {
+}
+SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
+SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyTextEditorResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 if (selection && selection.type !== 'Control') {
+            selectedEl = selection.createRange().parentElement();
+        }
+        else {
+            return undefined;
+        }
+        return selectedEl;
+    }
+    getCurrentSelectionRange(documentEl, windowEl) {
+        /* istanbul ignore else */
+        if (windowEl.getSelection) {
+            const sel = windowEl.getSelection();
+            /* istanbul ignore else */
+            if (sel.getRangeAt && sel.rangeCount) {
+                return sel.getRangeAt(0);
+            }
+        }
+        else if (documentEl.getSelection() &&
+            documentEl.getSelection().getRangeAt) {
+            return documentEl.getSelection().getRangeAt(0);
+        }
+    }
+    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);
+            }
+        }
+    }
+}
+SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorSelectionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextEditorService {
+    constructor() {
+        /**
+         * A dictionary representing all active text editors and their settings.
+         */
+        this.editors = {};
+    }
+    /**
+     * Returns the blur observable from the editor with the corresponding id.
+     */
+    blurListener(id) {
+        return this.editors[id].blurObservable;
+    }
+    /**
+     * Returns the click observable from the editor with the corresponding id.
+     */
+    clickListener(id) {
+        return this.editors[id].clickObservable;
+    }
+    /**
+     * Returns the command change observable from the editor with the corresponding id.
+     */
+    commandChangeListener(id) {
+        return this.editors[id].commandChangeObservable;
+    }
+    /**
+     * Returns the input change observable from the editor with the corresponding id.
+     */
+    inputListener(id) {
+        return this.editors[id].inputObservable;
+    }
+    /**
+     * Removes editor from the `editors` index by id.
+     */
+    removeEditor(id) {
+        /* istanbul ignore else */
+        if (id in this.editors) {
+            delete this.editors[id];
+        }
+    }
+    /**
+     * Returns the selection change observable from the editor with the corresponding id.
+     */
+    selectionChangeListener(id) {
+        return this.editors[id].selectionChangeObservable;
+    }
+}
+SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextEditorAdapterService {
+    constructor(selectionService, textEditorService, windowService) {
+        this.selectionService = selectionService;
+        this.textEditorService = textEditorService;
+        this.windowService = windowService;
+    }
+    get editors() {
+        return this.textEditorService.editors;
+    }
+    /**
+     * Creates a text editor inside the supplied iframe element.
+     */
+    addEditor(id, iframeElement, styleState, placeholder) {
+        /* istanbul ignore else */
+        if (!(id in this.editors)) {
+            this.editors[id] = this.createObservers(id, iframeElement);
+            const documentEl = this.getIframeDocumentEl(id);
+            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(id, focusableChildren, textEditorNativeElement) {
+        this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, true);
+    }
+    enableEditor(id, focusableChildren, textEditorNativeElement) {
+        this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, false);
+    }
+    /**
+     * Executes a command on the text editor with the corresponding id.
+     */
+    execCommand(id, editorCommand) {
+        /* istanbul ignore else */
+        if (id in this.editors) {
+            const documentEl = this.getIframeDocumentEl(id);
+            /* istanbul ignore else */
+            if (this.editorSelected(id)) {
+                const commandIsSupportedAndEnabled = documentEl.execCommand(editorCommand.command, false, editorCommand.value);
+                // IE11 doesn't support insertHTML
+                /* istanbul ignore next */
+                if (editorCommand.command.toLowerCase() === 'inserthtml' &&
+                    !commandIsSupportedAndEnabled) {
+                    this.insertHtmlInIE11(id, editorCommand.value);
+                }
+                this.focusEditor(id);
+                this.editors[id].commandChangeObservable.next();
+            }
+        }
+    }
+    getCurrentSelection(id) {
+        return this.selectionService.getCurrentSelection(this.getIframeDocumentEl(id));
+    }
+    /**
+     * 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.windowService.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(id) {
+        const documentEl = this.getIframeDocumentEl(id);
+        /* istanbul ignore else */
+        if (this.editorSelected(id)) {
+            return {
+                backColor: this.getColor(documentEl, 'BackColor'),
+                fontColor: this.getColor(documentEl, 'ForeColor'),
+                fontSize: parseInt(this.getFontSize(id), undefined),
+                font: documentEl.queryCommandValue('fontname'),
+                boldState: documentEl.queryCommandState('Bold'),
+                italicState: documentEl.queryCommandState('Italic'),
+                underlineState: documentEl.queryCommandState('Underline'),
+                linkState: this.hasLink(id),
+            };
+        }
+        /* istanbul ignore next */
+        return {};
+    }
+    getEditorInnerHtml(id) {
+        const documentEl = this.getIframeDocumentEl(id);
+        if (documentEl) {
+            return this.replaceHtmlCodes(documentEl.body.innerHTML);
+        }
+        return '';
+    }
+    setEditorInnerHtml(id, value) {
+        const documentEl = this.getIframeDocumentEl(id);
+        const editorContent = documentEl.body;
+        /* istanbul ignore else */
+        if (editorContent.innerHTML !== value) {
+            editorContent.innerHTML = value;
+        }
+    }
+    focusEditor(id) {
+        /* istanbul ignore else */
+        if (id in this.editors) {
+            const windowEl = this.getContentWindowEl(id);
+            const iframeDocumentEl = this.getIframeDocumentEl(id);
+            const currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
+            const cursorIsNotActiveAndHasReset = currentSelection &&
+                currentSelection.startOffset === 0 &&
+                currentSelection.endOffset === 0;
+            if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
+                // focus the end of the editor
+                const documentEl = this.windowService.nativeWindow.document;
+                const editor = iframeDocumentEl.body;
+                const range = documentEl.createRange();
+                this.editors[id].iframeElementRef.focus();
+                editor.focus();
+                /* istanbul ignore else */
+                if (windowEl.getSelection && documentEl.createRange) {
+                    range.selectNodeContents(editor);
+                    range.collapse(false);
+                    const sel = windowEl.getSelection();
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+                else {
+                    // IE only
+                    const textRange = editor.createTextRange();
+                    textRange.moveToElementText(editor);
+                    textRange.collapse(false);
+                    textRange.select();
+                }
+            }
+            else {
+                // Cursor may not be active, restore it
+                this.editors[id].iframeElementRef.focus();
+                iframeDocumentEl.body.focus();
+            }
+        }
+    }
+    getLink(editorId) {
+        let link = undefined;
+        const anchorEl = this.getSelectedAnchorTag(editorId);
+        if (anchorEl && anchorEl.href) {
+            link = {
+                target: anchorEl.getAttribute('target') === '_blank'
+                    ? UrlTarget.NewWindow
+                    : UrlTarget.None,
+                url: anchorEl.href,
+            };
+        }
+        return link;
+    }
+    getSelectedAnchorTag(editorId) {
+        const selectedEl = this.getCurrentSelectionParentElement(editorId);
+        return this.getParent(selectedEl, 'a');
+    }
+    saveSelection(id) {
+        return this.selectionService.getCurrentSelectionRange(this.getIframeDocumentEl(id), this.getContentWindowEl(id));
+    }
+    selectElement(id, element) {
+        this.selectionService.selectElement(this.getIframeDocumentEl(id), this.getContentWindowEl(id), element);
+    }
+    setPlaceholder(id, placeholder) {
+        const documentEl = this.getIframeDocumentEl(id);
+        documentEl.body.setAttribute('data-placeholder', placeholder || '');
+    }
+    setFontSize(id, fontSize) {
+        const doc = this.getIframeDocumentEl(id);
+        this.execCommand(id, { 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(id);
+        this.editors[id].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();
+        documentEl.removeEventListener('selectionchange', setting.selectionListener);
+        documentEl.removeEventListener('input', setting.selectionListener);
+        documentEl.removeEventListener('mousedown', setting.clickListener);
+        documentEl.body.removeEventListener('paste', setting.pasteListener);
+    }
+    getContentWindowEl(id) {
+        return this.editors[id].iframeElementRef.contentWindow;
+    }
+    getChildSelectedAnchorTags(editorId) {
+        const selectedRange = this.getCurrentSelection(editorId).getRangeAt(0);
+        if (selectedRange.toString().length <= 0) {
+            return [];
+        }
+        const parentElement = this.getCurrentSelectionParentElement(editorId);
+        let childElements = [];
+        /* istanbul ignore else */
+        if (parentElement) {
+            childElements = Array.from(parentElement.querySelectorAll('a'));
+        }
+        /* istanbul ignore next */
+        return childElements.filter((element) => {
+            // IE specific
+            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(id) {
+        /* istanbul ignore next */
+        if (!(id in this.editors)) {
+            return undefined;
+        }
+        const contentWindowEl = this.getContentWindowEl(id);
+        /* istanbul ignore else */
+        if (contentWindowEl) {
+            return contentWindowEl.document;
+        }
+        /* istanbul ignore next */
+        return this.editors[id].iframeElementRef.contentDocument;
+    }
+    getFontSize(id) {
+        let fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
+        const selection = this.getCurrentSelection(id);
+        /* 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(id, 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(id);
+        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: blurObservable,
+            clickObservable: clickObservable,
+            commandChangeObservable: new Subject(),
+            iframeElementRef: element,
+            inputObservable: inputObservable,
+            selectionChangeObservable: selectionObservable,
+            blurListener: blurListener,
+            clickListener: clickListener,
+            inputListener: inputListener,
+            pasteListener: pasteListener,
+            selectionListener: selectionListener,
+        };
+    }
+    /* istanbul ignore next */
+    getPasteOverride(id) {
+        return (e) => {
+            e.preventDefault();
+            const text = e.clipboardData.getData('text/plain');
+            this.execCommand(id, { command: 'insertHTML', value: text });
+        };
+    }
+    getCurrentSelectionParentElement(id) {
+        return this.selectionService.getCurrentSelectionParentElement(this.getIframeDocumentEl(id));
+    }
+    getColor(documentEl, selector) {
+        const commandValue = documentEl.queryCommandValue(selector);
+        // Edge is weird and returns numbers
+        /* istanbul ignore if */
+        if (typeof commandValue === 'number') {
+            /* istanbul ignore next */
+            // tslint:disable-next-line: no-bitwise
+            return ('rgb(' +
+                (commandValue & 0xff) +
+                ', ' +
+                // tslint:disable-next-line: no-bitwise
+                ((commandValue & 0xff00) >> 8) +
+                ', ' +
+                // tslint:disable-next-line: no-bitwise
+                ((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(editorId) {
+        const anchorEl = this.getSelectedAnchorTag(editorId);
+        const childAnchorEls = this.getChildSelectedAnchorTags(editorId);
+        /* 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(id) {
+        const documentEl = this.getIframeDocumentEl(id);
+        return this.selectionService.isElementSelected(documentEl, documentEl.body);
+    }
+    /* istanbul ignore next */
+    insertHtmlInIE11(id, html) {
+        const documentEl = this.getIframeDocumentEl(id);
+        const windowEl = this.getContentWindowEl(id);
+        const sel = windowEl.getSelection();
+        if (sel.getRangeAt && sel.rangeCount) {
+            let range = sel.getRangeAt(0);
+            range.deleteContents();
+            const el = documentEl.createElement('div');
+            el.innerHTML = html;
+            const frag = documentEl.createDocumentFragment();
+            let node, lastNode;
+            while (el.firstChild) {
+                node = el.firstChild;
+                lastNode = frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            // Preserve the selection
+            if (lastNode) {
+                range = range.cloneRange();
+                range.setStartAfter(lastNode);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+    }
+    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(id, 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(id).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
+    }
+}
+SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }]; } });
+
+/**
+ * @internal
+ */
+class SkyTextEditorMenubarComponent {
+    constructor(adapterService, changeDetector, resources) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.resources = 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();
+    }
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this._disabled = coercedValue;
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    ngOnInit() {
+        this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.closeDropdowns();
+        });
+        forkJoin([
+            // Format menu strings.
+            this.resources.getString('skyux_text_editor_format_menu_action_bold_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_bold_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_italic_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_italic_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_underline_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_underline_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_strikethrough_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_clear_formatting_label'),
+            // Edit menu string - start at index 8.
+            this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_undo_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_redo_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_cut_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_copy_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut'),
+        ])
+            .pipe(take(1))
+            .subscribe((resources) => {
+            this.formatItems = [
+                {
+                    function: () => this.execCommand('bold'),
+                    label: resources[0],
+                    keyShortcut: resources[1],
+                },
+                {
+                    function: () => this.execCommand('italic'),
+                    label: resources[2],
+                    keyShortcut: resources[3],
+                },
+                {
+                    function: () => this.execCommand('underline'),
+                    label: resources[4],
+                    keyShortcut: resources[5],
+                },
+                {
+                    function: () => this.execCommand('strikethrough'),
+                    label: resources[6],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.clearFormat(),
+                    label: resources[7],
+                },
+            ];
+            this.editItems = [
+                {
+                    function: () => this.execCommand('undo'),
+                    label: resources[8],
+                    keyShortcut: resources[9],
+                },
+                {
+                    function: () => this.execCommand('redo'),
+                    label: resources[10],
+                    keyShortcut: resources[11],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('cut'),
+                    label: resources[12],
+                    keyShortcut: resources[13],
+                },
+                {
+                    function: () => this.execCommand('copy'),
+                    label: resources[14],
+                    keyShortcut: resources[15],
+                },
+                {
+                    function: () => this.execCommand('paste'),
+                    label: resources[16],
+                    keyShortcut: resources[17],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('selectAll'),
+                    label: resources[18],
+                    keyShortcut: resources[19],
+                },
+            ];
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    execCommand(command, value = '') {
+        this.adapterService.execCommand(this.editorId, {
+            command: command,
+            value: value,
+        });
+    }
+    insertMergeField(field) {
+        this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
+            field.id +
+            '" data-fielddisplay="' +
+            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(this.editorId);
+        /* istanbul ignore else */
+        if (currentSelection.rangeCount > 0 &&
+            currentSelection.getRangeAt(0).toString().length <= 0) {
+            this.execCommand('selectAll');
+        }
+        this.execCommand('removeFormat');
+    }
+}
+SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", 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"], components: [{ type: i3$1.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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
+            }], editorId: [{
+                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 {
+    constructor(modalInstance, modalContext) {
+        this.modalInstance = modalInstance;
+        this.emailAddressValid = false;
+        this.subject = '';
+        this.target = 0;
+        this.valid = false;
+        this._activeTab = 0;
+        this._emailAddress = '';
+        this._url = 'https://';
+        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;
+            }
+        }
+    }
+    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;
+    }
+    activeTabChanged(value) {
+        this.activeTab = 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);
+    }
+}
+SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i3$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5$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]" }, { type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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$1.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
+
+/**
+ * @internal
+ */
+class SkyTextEditorToolbarComponent {
+    constructor(adapterService, changeDetector, modalService) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.modalService = modalService;
+        this.editorFocusStream = new Subject();
+        this.backColorpickerStream = new Subject();
+        this.colorpickerStream = new Subject();
+        this.fontPickerStream = new Subject();
+        this.fontSizeStream = new Subject();
+        this._disabled = false;
+        this._styleState = STYLE_STATE_DEFAULTS;
+    }
+    get styleState() {
+        return this._styleState;
+    }
+    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);
+            }
+        }
+    }
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this._disabled = coercedValue;
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    ngOnInit() {
+        this.editorFocusStream.subscribe(() => {
+            this.styleState = {
+                ...this._styleState,
+                ...this.adapterService.getStyleState(this.editorId),
+            };
+            this.closeDropdowns();
+            this.changeDetector.detectChanges();
+        });
+    }
+    execCommand(command, value = '') {
+        this.adapterService.execCommand(this.editorId, {
+            command: command,
+            value: value,
+        });
+        this.styleState = {
+            ...this.styleState,
+            ...this.adapterService.getStyleState(this.editorId),
+        };
+    }
+    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(this.editorId);
+        const currentLink = this.adapterService.getLink(this.editorId);
+        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(this.editorId);
+                    this.adapterService.selectElement(this.editorId, 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.editorId);
+                    this.execCommand('insertHTML', '<a href="' +
+                        result.data.url +
+                        '" rel="noopener noreferrer" target="_blank">' +
+                        sText +
+                        '</a>');
+                }
+            }
+        });
+    }
+    unlink() {
+        const currentSelectionRange = this.adapterService
+            .getCurrentSelection(this.editorId)
+            .getRangeAt(0);
+        if (currentSelectionRange.toString().length <= 0) {
+            const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
+            this.adapterService.selectElement(this.editorId, anchorTag);
+        }
+        this.execCommand('unlink');
+    }
+    changeFontSize(size) {
+        this.adapterService.setFontSize(this.editorId, size);
+        this.styleState = {
+            ...this.styleState,
+            ...this.adapterService.getStyleState(this.editorId),
+        };
+    }
+    onColorpickerColorChanged(color, isBackground = false) {
+        this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
+    }
+    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;
+            }
+        }
+    }
+}
+SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", 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            #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          >\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"], components: [{ type: i3$1.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$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]" }, { type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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            #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          >\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$1.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
+                type: Input
+            }], editorId: [{
+                type: Input
+            }], fontList: [{
+                type: Input
+            }], fontSizeList: [{
+                type: Input
+            }], toolbarActions: [{
+                type: Input
+            }], styleState: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Auto-incrementing integer used to generate unique ids for radio components.
+ */
+let nextUniqueId = 0;
+/**
+ * The text editor component lets users format and manipulate text.
+ */
+class SkyTextEditorComponent {
+    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone) {
+        this.changeDetector = changeDetector;
+        this.coreAdapterService = coreAdapterService;
+        this.adapterService = adapterService;
+        this.editorService = editorService;
+        this.sanitizationService = sanitizationService;
+        this.ngControl = ngControl;
+        this.zone = zone;
+        /**
+         * Indicates whether to put focus on the editor after it renders.
+         */
+        this.autofocus = false;
+        this.editorFocusStream = new Subject();
+        /**
+         * Specifies 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'}]
+         */
+        this.fontList = FONT_LIST_DEFAULTS;
+        /**
+         * Specifies 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]
+         */
+        this.fontSizeList = FONT_SIZE_LIST_DEFAULTS;
+        /**
+         * Specifies a unique ID attribute for the text editor.
+         * By default, the component generates a random ID.
+         */
+        this.id = `sky-text-editor-${++nextUniqueId}`;
+        /**
+         * Specifies the menus to include in the menu bar.
+         * @default [ 'edit', 'format' ]
+         */
+        this.menus = MENU_DEFAULTS;
+        /**
+         * Specifies the merge fields to include in the merge field menu.
+         */
+        this.mergeFields = [];
+        /**
+         * Specifies the actions to include in the toolbar and determines their order.
+         * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
+         */
+        this.toolbarActions = TOOLBAR_ACTION_DEFAULTS;
+        this.focusInitialized = false;
+        this.initialized = false;
+        this.ngUnsubscribe = new Subject();
+        this._disabled = false;
+        this._initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
+        this._placeholder = '';
+        this._value = '<p></p>';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onChange = () => { };
+        this.ngControl.valueAccessor = this;
+    }
+    /**
+     * Indicates whether to disable the text editor.
+     * @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(this.id, focusableChildren, this.iframeRef.nativeElement);
+            }
+            else {
+                this.adapterService.enableEditor(this.id, focusableChildren, this.iframeRef.nativeElement);
+            }
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * Specifies 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;
+    }
+    /**
+     * Specifies 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(this.id, value);
+            }
+        }
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    /**
+     * The internal value of the control.
+     */
+    set value(value) {
+        // Normalize value and set any empty state to an empty string.
+        let normalizedValue = value;
+        if (!value ||
+            value.trim() === '<p></p>' ||
+            value.trim() === '<br>' ||
+            value.trim() === '<p><br></p>') {
+            normalizedValue = '';
+        }
+        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 && this.ngControl.control) {
+                /* istanbul ignore else */
+                if (normalizedValue !== this.ngControl.control.value) {
+                    this.ngControl.control.setValue(normalizedValue, {
+                        emitModelToViewChange: false,
+                    });
+                }
+            }
+            // Autofocus isn't testable in Firefox and IE.
+            /* istanbul ignore next */
+            if (this.autofocus && !this.focusInitialized) {
+                this.adapterService.focusEditor(this.id);
+                this.focusInitialized = true;
+            }
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    ngAfterViewInit() {
+        this.initIframe();
+    }
+    ngOnDestroy() {
+        this.adapterService.removeObservers(this.editorService.editors[this.id]);
+        this.editorService.removeEditor(this.id);
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onIframeLoad() {
+        // Remove editor if it already exists to cover situations where the text editor might have been moved in the DOM.
+        /* istanbul ignore else */
+        if (this.editorService.editors[this.id]) {
+            this.editorService.removeEditor(this.id);
+            this.initIframe();
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    writeValue(value) {
+        this.value = value;
+        // Update HTML if necessary.
+        const editorValue = this.adapterService.getEditorInnerHtml(this.id);
+        if (this.initialized && editorValue !== this._value) {
+            this.adapterService.setEditorInnerHtml(this.id, this._value);
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    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(this.id),
+        };
+    }
+    initIframe() {
+        this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
+        this.editorService
+            .inputListener(this.id)
+            .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 propigation to consuming components.
+            this.zone.run(() => {
+                this.ViewToModelUpdate();
+            });
+        });
+        this.editorService
+            .selectionChangeListener(this.id)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.updateStyle();
+            this.editorFocusStream.next();
+        });
+        this.editorService
+            .clickListener(this.id)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.editorFocusStream.next();
+        });
+        this.editorService
+            .blurListener(this.id)
+            .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 propigation to consuming components.
+            this.zone.run(() => {
+                this._onTouched();
+            });
+        });
+        this.editorService
+            .commandChangeListener(this.id)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.updateStyle();
+            this.ViewToModelUpdate();
+        });
+        this.adapterService.setEditorInnerHtml(this.id, this._value);
+        /* istanbul ignore next */
+        if (this.autofocus) {
+            this.adapterService.focusEditor(this.id);
+        }
+        this.initialized = true;
+    }
+    ViewToModelUpdate(emitChange = true) {
+        this.value = this.adapterService.getEditorInnerHtml(this.id);
+        /* istanbul ignore else */
+        if (emitChange) {
+            this._onChange(this._value);
+        }
+    }
+}
+SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i5$1.NgControl }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar class=\"sky-text-editor-toolbar\">\n    <sky-toolbar-section\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\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"], components: [{ type: i3$1.λ37, selector: "sky-toolbar" }, { type: i3$1.λ38, selector: "sky-toolbar-section" }, { type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "editorId", "menus", "mergeFields", "disabled"] }, { type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "editorId", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar class=\"sky-text-editor-toolbar\">\n    <sky-toolbar-section\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\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: i3.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i5$1.NgControl }, { type: i0.NgZone }]; }, 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']
+            }] } });
+
+class SkyTextEditorModule {
+}
+SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.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] });
+SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.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: "13.2.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