@skyux/text-editor 5.0.1 → 5.5.0-alpha.0

package/fesm2015/skyux-text-editor.js

@@ -1,11 +1,11 @@
-import * as i8 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, forwardRef, ViewEncapsulation, ViewChild } 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 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+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';
@@ -56,12 +56,12 @@ class SkyTextSanitizationService {
         return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
     }
 }
-SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
+SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -86,13 +86,13 @@ class SkyRichTextDisplayComponent {
         }
     }
 }
-SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
-SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span\n  class=\"sky-rich-text-display-text\"\n  [innerHTML]=\"sanitizedText\"\n>\n</span>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
+SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
+SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-rich-text-display',
-                    templateUrl: './rich-text-display.component.html'
+                    templateUrl: './rich-text-display.component.html',
                 }]
         }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
                 type: Input
@@ -100,23 +100,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImpo
 
 class SkyRichTextDisplayModule {
 }
-SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
-SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
+SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
+SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        SkyRichTextDisplayComponent
-                    ],
-                    declarations: [
-                        SkyRichTextDisplayComponent
-                    ]
+                    imports: [CommonModule],
+                    exports: [SkyRichTextDisplayComponent],
+                    declarations: [SkyRichTextDisplayComponent],
                 }]
         }] });
 
@@ -127,7 +119,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImpo
  * 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" } },
+    '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) {
@@ -139,75 +192,69 @@ class SkyTextEditorResourcesProvider {
  */
 class SkyTextEditorResourcesModule {
 }
-SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
-SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [{
+SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
+SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyTextEditorResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyTextEditorResourcesProvider,
-                            multi: true
-                        }]
+                            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'
+        value: '"Blackbaud Sans", Arial, sans-serif',
     },
     {
         name: 'Arial',
-        value: 'Arial'
+        value: 'Arial',
     },
     {
         name: 'Arial Black',
-        value: '"Arial Black"'
+        value: '"Arial Black"',
     },
     {
         name: 'Courier New',
-        value: '"Courier New"'
+        value: '"Courier New"',
     },
     {
         name: 'Georgia',
-        value: 'Georgia, serif'
+        value: 'Georgia, serif',
     },
     {
         name: 'Tahoma',
-        value: 'Tahoma, Geneva, sans-serif'
+        value: 'Tahoma, Geneva, sans-serif',
     },
     {
         name: 'Times New Roman',
-        value: '"Times New Roman"'
+        value: '"Times New Roman"',
     },
     {
         name: 'Trebuchet MS',
-        value: '"Trebuchet MS", sans-serif'
+        value: '"Trebuchet MS", sans-serif',
     },
     {
         name: 'Verdana',
-        value: 'Verdana, Geneva, sans-serif'
-    }
+        value: 'Verdana, Geneva, sans-serif',
+    },
 ];
 
 /**
@@ -221,7 +268,7 @@ const STYLE_STATE_DEFAULTS = {
     boldState: false,
     italicState: false,
     underlineState: false,
-    linkState: false
+    linkState: false,
 };
 
 /**
@@ -233,15 +280,76 @@ var UrlTarget;
     UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
 })(UrlTarget || (UrlTarget = {}));
 
+/**
+ * @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: "12.2.16", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * @internal
  */
 class SkyTextEditorSelectionService {
     isElementSelected(documentEl, element) {
-        const selectedNode = this.getCurrentSelection(documentEl).anchorNode;
+        const selectedNode = this.getCurrentSelection(documentEl)
+            .anchorNode;
         /* istanbul ignore next */
-        return selectedNode &&
-            (element.contains(selectedNode) || (selectedNode.parentNode && element.contains(selectedNode.parentNode)));
+        return (selectedNode &&
+            (element.contains(selectedNode) ||
+                (selectedNode.parentNode && element.contains(selectedNode.parentNode))));
     }
     getCurrentSelection(documentEl) {
         return documentEl.getSelection();
@@ -254,7 +362,8 @@ class SkyTextEditorSelectionService {
             selection.getRangeAt &&
             selection.getRangeAt(0).commonAncestorContainer) {
             selectedEl = selection.getRangeAt(0).commonAncestorContainer;
-            selectedEl = selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
+            selectedEl =
+                selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
         }
         else if (selection && selection.type !== 'Control') {
             selectedEl = selection.createRange().parentElement();
@@ -273,7 +382,8 @@ class SkyTextEditorSelectionService {
                 return sel.getRangeAt(0);
             }
         }
-        else if (documentEl.getSelection() && documentEl.getSelection().getRangeAt) {
+        else if (documentEl.getSelection() &&
+            documentEl.getSelection().getRangeAt) {
             return documentEl.getSelection().getRangeAt(0);
         }
     }
@@ -298,59 +408,12 @@ class SkyTextEditorSelectionService {
         }
     }
 }
-SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorSelectionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", 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 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;
-    }
-    /**
-     * 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: "12.2.12", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorService, decorators: [{
+SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -470,7 +533,7 @@ class SkyTextEditorAdapterService {
                 boldState: documentEl.queryCommandState('Bold'),
                 italicState: documentEl.queryCommandState('Italic'),
                 underlineState: documentEl.queryCommandState('Underline'),
-                linkState: this.hasLink(id)
+                linkState: this.hasLink(id),
             };
         }
         /* istanbul ignore next */
@@ -497,7 +560,9 @@ class SkyTextEditorAdapterService {
             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);
+            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;
@@ -533,8 +598,10 @@ class SkyTextEditorAdapterService {
         const anchorEl = this.getSelectedAnchorTag(editorId);
         if (anchorEl && anchorEl.href) {
             link = {
-                target: anchorEl.getAttribute('target') === '_blank' ? UrlTarget.NewWindow : UrlTarget.None,
-                url: anchorEl.href
+                target: anchorEl.getAttribute('target') === '_blank'
+                    ? UrlTarget.NewWindow
+                    : UrlTarget.None,
+                url: anchorEl.href,
             };
         }
         return link;
@@ -559,7 +626,7 @@ class SkyTextEditorAdapterService {
         const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
         for (let element of fontElements) {
             element.removeAttribute('size');
-            element.style.fontSize = (fontSize + 'px');
+            element.style.fontSize = fontSize + 'px';
         }
         this.cleanUpBlankStyleTags(doc);
         this.focusEditor(id);
@@ -567,9 +634,9 @@ class SkyTextEditorAdapterService {
     }
     removeObservers(setting) {
         /* istanbul ignore next */
-        const documentEl = setting.iframeElementRef.contentWindow ?
-            setting.iframeElementRef.contentWindow.document :
-            setting.iframeElementRef.contentDocument;
+        const documentEl = setting.iframeElementRef.contentWindow
+            ? setting.iframeElementRef.contentWindow.document
+            : setting.iframeElementRef.contentDocument;
         setting.selectionChangeObservable.complete();
         setting.clickObservable.complete();
         setting.commandChangeObservable.complete();
@@ -593,7 +660,7 @@ class SkyTextEditorAdapterService {
             childElements = Array.from(parentElement.querySelectorAll('a'));
         }
         /* istanbul ignore next */
-        return childElements.filter(element => {
+        return childElements.filter((element) => {
             // IE specific
             if (!selectedRange.intersectsNode) {
                 if (!element || !element.href) {
@@ -601,13 +668,14 @@ class SkyTextEditorAdapterService {
                 }
                 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);
+                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);
+            return (!!element && !!element.href && selectedRange.intersectsNode(element));
         });
     }
     getIframeDocumentEl(id) {
@@ -644,9 +712,9 @@ class SkyTextEditorAdapterService {
     }
     createObservers(id, element) {
         /* istanbul ignore next */
-        const documentEl = element.contentWindow ?
-            element.contentWindow.document :
-            element.contentDocument;
+        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();
@@ -655,18 +723,27 @@ class SkyTextEditorAdapterService {
         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', 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,
-            selectionListener: selectionListener,
+            inputObservable: inputObservable,
+            selectionChangeObservable: selectionObservable,
+            blurListener: blurListener,
             clickListener: clickListener,
+            inputListener: inputListener,
             pasteListener: pasteListener,
-            selectionChangeObservable: selectionObservable,
-            clickObservable: clickObservable,
-            commandChangeObservable: new Subject()
+            selectionListener: selectionListener,
         };
     }
     /* istanbul ignore next */
@@ -687,11 +764,15 @@ class SkyTextEditorAdapterService {
         if (typeof commandValue === 'number') {
             /* istanbul ignore next */
             // tslint:disable-next-line: no-bitwise
-            return 'rgb(' + (commandValue & 0xFF) + ', ' +
+            return ('rgb(' +
+                (commandValue & 0xff) +
+                ', ' +
                 // tslint:disable-next-line: no-bitwise
-                ((commandValue & 0xFF00) >> 8) + ', ' +
+                ((commandValue & 0xff00) >> 8) +
+                ', ' +
                 // tslint:disable-next-line: no-bitwise
-                ((commandValue & 0xFF0000) >> 16) + ')';
+                ((commandValue & 0xff0000) >> 16) +
+                ')');
         }
         // Firefox uses 'Transparent' instead of a color value
         /* istanbul ignore next */
@@ -753,10 +834,10 @@ class SkyTextEditorAdapterService {
                 element.removeAttribute('style');
             }
         }
-        const removableElements = orphanElements.filter(element => {
+        const removableElements = orphanElements.filter((element) => {
             const tagName = element.tagName.toUpperCase();
-            return (tagName === 'FONT' || tagName === 'SPAN') &&
-                (element.attributes.length === 0 || !element.hasChildNodes);
+            return ((tagName === 'FONT' || tagName === 'SPAN') &&
+                (element.attributes.length === 0 || !element.hasChildNodes));
         });
         for (let element of removableElements) {
             const parent = element.parentNode;
@@ -771,7 +852,8 @@ class SkyTextEditorAdapterService {
     }
     // Certain values are encoded in html and need to be decoded
     replaceHtmlCodes(str) {
-        return str.replace(/&nbsp;/, String.fromCharCode(160))
+        return str
+            .replace(/&nbsp;/, String.fromCharCode(160))
             .replace(/&lt;/g, '<')
             .replace(/&gt;/g, '>')
             .replace(/&amp;/g, '&');
@@ -781,22 +863,32 @@ class SkyTextEditorAdapterService {
         textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
         /* istanbul ignore else */
         if (focusableChildren.length > 0) {
-            focusableChildren.forEach(aFocusableChild => {
+            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: "12.2.12", 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: "12.2.12", ngImport: i0, type: SkyTextEditorAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
+SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyTextEditorAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }]; } });
 
+// 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
  */
@@ -825,8 +917,7 @@ class SkyTextEditorMenubarComponent {
         return this._disabled;
     }
     ngOnInit() {
-        this.editorFocusStream
-            .pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+        this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
             this.closeDropdowns();
         });
         forkJoin([
@@ -851,75 +942,75 @@ class SkyTextEditorMenubarComponent {
             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')
+            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut'),
         ])
             .pipe(take(1))
-            .subscribe(resources => {
+            .subscribe((resources) => {
             this.formatItems = [
                 {
                     function: () => this.execCommand('bold'),
                     label: resources[0],
-                    keyShortcut: resources[1]
+                    keyShortcut: resources[1],
                 },
                 {
                     function: () => this.execCommand('italic'),
                     label: resources[2],
-                    keyShortcut: resources[3]
+                    keyShortcut: resources[3],
                 },
                 {
                     function: () => this.execCommand('underline'),
                     label: resources[4],
-                    keyShortcut: resources[5]
+                    keyShortcut: resources[5],
                 },
                 {
                     function: () => this.execCommand('strikethrough'),
-                    label: resources[6]
+                    label: resources[6],
                 },
                 {
-                    isDivider: true
+                    isDivider: true,
                 },
                 {
                     function: () => this.clearFormat(),
-                    label: resources[7]
-                }
+                    label: resources[7],
+                },
             ];
             this.editItems = [
                 {
                     function: () => this.execCommand('undo'),
                     label: resources[8],
-                    keyShortcut: resources[9]
+                    keyShortcut: resources[9],
                 },
                 {
                     function: () => this.execCommand('redo'),
                     label: resources[10],
-                    keyShortcut: resources[11]
+                    keyShortcut: resources[11],
                 },
                 {
-                    isDivider: true
+                    isDivider: true,
                 },
                 {
                     function: () => this.execCommand('cut'),
                     label: resources[12],
-                    keyShortcut: resources[13]
+                    keyShortcut: resources[13],
                 },
                 {
                     function: () => this.execCommand('copy'),
                     label: resources[14],
-                    keyShortcut: resources[15]
+                    keyShortcut: resources[15],
                 },
                 {
                     function: () => this.execCommand('paste'),
                     label: resources[16],
-                    keyShortcut: resources[17]
+                    keyShortcut: resources[17],
                 },
                 {
-                    isDivider: true
+                    isDivider: true,
                 },
                 {
                     function: () => this.execCommand('selectAll'),
                     label: resources[18],
-                    keyShortcut: resources[19]
-                }
+                    keyShortcut: resources[19],
+                },
             ];
         });
     }
@@ -930,13 +1021,18 @@ class SkyTextEditorMenubarComponent {
     execCommand(command, value = '') {
         this.adapterService.execCommand(this.editorId, {
             command: command,
-            value: value
+            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)) + '">');
+        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 });
@@ -946,21 +1042,22 @@ class SkyTextEditorMenubarComponent {
     clearFormat() {
         let currentSelection = this.adapterService.getCurrentSelection(this.editorId);
         /* istanbul ignore else */
-        if (currentSelection.rangeCount > 0 && currentSelection.getRangeAt(0).toString().length <= 0) {
+        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: "12.2.12", 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: "12.2.12", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "\n  <sky-toolbar-item *ngFor=\"let menu of menus\"\n    class=\"sky-text-editor-menu\"\n    [ngClass]=\"'sky-text-editor-menu-' + menu\"\n  >\n    <ng-container\n      [ngSwitch]=\"menu\"\n    >\n      <ng-container *ngSwitchCase=\"'edit'\">\n        <sky-dropdown\n          label=\"Edit menu\"\n          [disabled]=\"disabled\"\n          [messageStream]=\"editDropdownStream\"\n        >\n          <sky-dropdown-button>\n            {{ 'skyux_text_editor_menubar_dropdown_button_edit_label' | skyLibResources }}\n          </sky-dropdown-button>\n          <sky-dropdown-menu>\n            <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n              <button *ngIf=\"!editItem.isDivider\"\n                type=\"button\"\n                (click)=\"editItem.function()\"\n              >\n                {{ editItem.label }}\n                <div *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 *ngIf=\"editItem.isDivider\"\n                class=\"sky-text-editor-dropdown-item-divider\"\n                role=\"divider\"\n              >\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            {{ 'skyux_text_editor_menubar_dropdown_button_format_label' | skyLibResources }}\n          </sky-dropdown-button>\n          <sky-dropdown-menu>\n            <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n              <button *ngIf=\"!formatItem.isDivider\"\n                type=\"button\"\n                (click)=\"formatItem.function()\"\n              >\n                {{ formatItem.label }}\n                <div *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 *ngIf=\"formatItem.isDivider\"\n                class=\"sky-text-editor-dropdown-item-divider\"\n                role=\"divider\"\n              >\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 *ngIf=\"mergeFields && mergeFields.length > 0\"\n          label=\"Insert merge field\"\n          [disabled]=\"disabled\"\n          [messageStream]=\"mergeFieldDropdownStream\"\n        >\n          <sky-dropdown-button>\n            {{ 'skyux_text_editor_menubar_dropdown_button_insert_label' | skyLibResources }}\n          </sky-dropdown-button>\n          <sky-dropdown-menu>\n            <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n              <button\n                type=\"button\"\n                (click)=\"insertMergeField(mergeField)\"\n              >\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: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.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: "12.2.12", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
+SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-text-editor-menubar',
                     templateUrl: './text-editor-menubar.component.html',
                     styleUrls: ['./text-editor-menubar.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
                 type: Input
@@ -999,7 +1096,10 @@ class SkyTextEditorUrlModalComponent {
             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());
+                queryStringIndex =
+                    queryStringIndex > -1
+                        ? queryStringIndex
+                        : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
                 /* istanbul ignore else */
                 if (queryStringIndex > -1) {
                     this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
@@ -1009,8 +1109,8 @@ class SkyTextEditorUrlModalComponent {
                 this.activeTab = 1;
             }
             else {
-                this.url = modalContext.urlResult.url,
-                    this.target = modalContext.urlResult.target;
+                (this.url = modalContext.urlResult.url),
+                    (this.target = modalContext.urlResult.target);
                 // set active tab to web page
                 this.activeTab = 0;
             }
@@ -1046,13 +1146,15 @@ class SkyTextEditorUrlModalComponent {
             if (this.activeTab === 0) {
                 this.modalInstance.save({
                     url: this.url,
-                    target: this.target ? parseInt(this.target, undefined) : UrlTarget.None
+                    target: this.target
+                        ? parseInt(this.target, undefined)
+                        : UrlTarget.None,
                 });
             }
             else {
                 this.modalInstance.save({
                     url: this.getEmailUrl(),
-                    target: UrlTarget.None
+                    target: UrlTarget.None,
                 });
             }
         }
@@ -1061,7 +1163,9 @@ class SkyTextEditorUrlModalComponent {
         this.modalInstance.cancel();
     }
     getEmailUrl() {
-        return emailKey + this.emailAddress + (this.subject ? '?Subject=' + encodeURI(this.subject) : '');
+        return (emailKey +
+            this.emailAddress +
+            (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
     }
     isValid() {
         if (this.activeTab === 0) {
@@ -1070,14 +1174,14 @@ class SkyTextEditorUrlModalComponent {
         return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
     }
 }
-SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", 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\n        tabHeading=\"Web page\"\n      >\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\n            class=\"sky-control-label\"\n            [for]=\"targetInput.id\"\n          >\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              {{ 'skyux_text_editor_url_modal_current_option_label' | skyLibResources }}\n            </option>\n            <option value=\"1\">\n              {{ 'skyux_text_editor_url_modal_new_option_label' | skyLibResources }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab\n        tabHeading=\"Email address\"\n      >\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\n            class=\"sky-control-label\"\n            [for]=\"subjectInput.id\"\n          >\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\n      type=\"button\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancel()\"\n    >\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
+SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-text-editor-url-modal',
                     templateUrl: './text-editor-url-modal.component.html',
-                    styleUrls: ['./text-editor-url-modal.component.scss']
+                    styleUrls: ['./text-editor-url-modal.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
 
@@ -1103,7 +1207,7 @@ class SkyTextEditorToolbarComponent {
     set styleState(value) {
         this._styleState = value;
         if (value.font !== this.styleStateFontName) {
-            if (value.font === '\"Blackbaud Sans\", Arial, sans-serif') {
+            if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
                 this.styleStateFontName = this.getFontName('Blackbaud Sans');
             }
             else {
@@ -1131,7 +1235,7 @@ class SkyTextEditorToolbarComponent {
     execCommand(command, value = '') {
         this.adapterService.execCommand(this.editorId, {
             command: command,
-            value: value
+            value: value,
         });
         this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
     }
@@ -1145,10 +1249,12 @@ class SkyTextEditorToolbarComponent {
     link() {
         const priorSelection = this.adapterService.saveSelection(this.editorId);
         const currentLink = this.adapterService.getLink(this.editorId);
-        const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [{
+        const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
+            {
                 provide: SkyUrlModalContext,
-                useValue: { urlResult: currentLink }
-            }]);
+                useValue: { urlResult: currentLink },
+            },
+        ]);
         inputModal.closed.subscribe((result) => {
             if (result.reason === 'save' && priorSelection) {
                 if (currentLink) {
@@ -1163,13 +1269,19 @@ class SkyTextEditorToolbarComponent {
                 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>');
+                    this.execCommand('insertHTML', '<a href="' +
+                        result.data.url +
+                        '" rel="noopener noreferrer" target="_blank">' +
+                        sText +
+                        '</a>');
                 }
             }
         });
     }
     unlink() {
-        let currentSelectionRange = this.adapterService.getCurrentSelection(this.editorId).getRangeAt(0);
+        let 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);
@@ -1184,7 +1296,9 @@ class SkyTextEditorToolbarComponent {
         this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
     }
     closeDropdowns() {
-        const message = { type: SkyColorpickerMessageType.Close };
+        const message = {
+            type: SkyColorpickerMessageType.Close,
+        };
         this.colorpickerStream.next(message);
         this.backColorpickerStream.next(message);
         this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
@@ -1198,15 +1312,15 @@ class SkyTextEditorToolbarComponent {
         }
     }
 }
-SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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: "12.2.12", 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: "\n  <sky-toolbar-item *ngFor=\"let action of toolbarActions\"\n    class=\"sky-text-editor-toolbar-action\"\n    [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n  >\n    <ng-container\n      [ngSwitch]=\"action\"\n    >\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\n                type=\"button\"\n                (click)=\"changeFontSize(size)\"\n              >\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\n          class=\"sky-switch-icon-group sky-text-editor-font-style-picker\"\n        >\n          <sky-checkbox\n            icon=\"bold\"\n            label=\"Bold\"\n            title=\"Bold\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"styleState.boldState\"\n            (ngModelChange)=\"toggleFontStyle(styleState.boldState, $event, 'bold')\"\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)=\"toggleFontStyle(styleState.italicState, $event, 'italic')\"\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)=\"toggleFontStyle(styleState.underlineState, $event, 'underline')\"\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\n          class=\"sky-switch-icon-group\"\n        >\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'\"\n              icon=\"list-ul\"\n            >\n            </sky-icon>\n            <sky-icon *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'\"\n              icon=\"list-ol\"\n            >\n            </sky-icon>\n            <sky-icon *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\n          class=\"sky-switch-icon-group\"\n        >\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'\"\n              icon=\"align-left\"\n            >\n            </sky-icon>\n            <sky-icon *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'\"\n              icon=\"align-center\"\n            >\n            </sky-icon>\n            <sky-icon *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'\"\n              icon=\"align-right\"\n            >\n            </sky-icon>\n            <sky-icon *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\n          class=\"sky-switch-icon-group\"\n        >\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'\"\n              icon=\"outdent\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"outdent-line\"\n              iconType=\"skyux\"\n            >\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'\"\n              icon=\"indent\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"indent-line\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </button>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'undo-redo'\">\n        <div\n          class=\"sky-switch-icon-group\"\n        >\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'\"\n              icon=\"undo\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"undo-line\"\n              iconType=\"skyux\"\n            >\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'\"\n              icon=\"repeat\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"redo-line\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </button>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'link'\">\n        <div\n          class=\"sky-switch-icon-group\"\n        >\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'\"\n              icon=\"link\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"link-line\"\n              iconType=\"skyux\"\n            >\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'\"\n              icon=\"unlink\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              icon=\"unlink-line\"\n              iconType=\"skyux\"\n            >\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: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.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: "12.2.12", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
+SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-text-editor-toolbar',
                     templateUrl: './text-editor-toolbar.component.html',
                     styleUrls: ['./text-editor-toolbar.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
                 type: Input
@@ -1227,10 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImpo
 /**
  * @internal
  */
-const MENU_DEFAULTS = [
-    'edit',
-    'format'
-];
+const MENU_DEFAULTS = ['edit', 'format'];
 
 /**
  * @internal
@@ -1241,13 +1352,15 @@ const TOOLBAR_ACTION_DEFAULTS = [
     'font-style',
     'color',
     'list',
-    'link'
+    'link',
 ];
 
 /**
  * @internal
  */
-const FONT_SIZE_LIST_DEFAULTS = [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48];
+const FONT_SIZE_LIST_DEFAULTS = [
+    6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48,
+];
 
 /**
  * Auto-incrementing integer used to generate unique ids for radio components.
@@ -1257,23 +1370,23 @@ let nextUniqueId = 0;
  * The text editor component lets users format and manipulate text.
  */
 class SkyTextEditorComponent {
-    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService) {
+    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();
-        // tslint:disable: max-line-length
         /**
          * 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'}]
          */
-        // tslint:enable: max-line-length
         this.fontList = FONT_LIST_DEFAULTS;
         /**
          * Specifies the font sizes to include in the font size picker.
@@ -1294,12 +1407,10 @@ class SkyTextEditorComponent {
          * Specifies the merge fields to include in the merge field menu.
          */
         this.mergeFields = [];
-        // tslint:disable: max-line-length
         /**
          * Specifies the actions to include in the toolbar and determines their order.
          * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
          */
-        // tslint:enable: max-line-length
         this.toolbarActions = TOOLBAR_ACTION_DEFAULTS;
         this.focusInitialized = false;
         this.initialized = false;
@@ -1309,9 +1420,10 @@ class SkyTextEditorComponent {
         this._placeholder = '';
         this._value = '<p></p>';
         /* istanbul ignore next */
-        this.onTouch = () => { };
+        this._onTouched = () => { };
         /* istanbul ignore next */
-        this._onChange = (_) => { };
+        this._onChange = () => { };
+        this.ngControl.valueAccessor = this;
     }
     /**
      * Indicates whether to disable the text editor.
@@ -1327,7 +1439,7 @@ class SkyTextEditorComponent {
             if (this.iframeRef) {
                 focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
                     ignoreVisibility: true,
-                    ignoreTabIndex: true
+                    ignoreTabIndex: true,
                 });
             }
             if (this._disabled) {
@@ -1370,22 +1482,37 @@ class SkyTextEditorComponent {
     get placeholder() {
         return this._placeholder;
     }
+    /**
+     * The internal value of the control.
+     */
     set value(value) {
-        // Set clear state to be an empty string
-        let valueString = value;
-        if (!value || value.trim() === '<p></p>' || value.trim() === '<br>') {
-            valueString = '';
+        // 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 = '';
         }
-        valueString = this.sanitizationService.sanitize(valueString).trim();
-        if (this._value !== valueString) {
-            this._value = valueString;
+        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;
             }
-            this.onChange();
         }
     }
     get value() {
@@ -1408,19 +1535,28 @@ class SkyTextEditorComponent {
             this.initIframe();
         }
     }
-    writeValue(obj) {
-        this.value = obj;
+    /**
+     * 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.onTouch = fn;
+        this._onTouched = fn;
     }
     /**
      * Implemented as part of ControlValueAccessor.
@@ -1428,30 +1564,50 @@ class SkyTextEditorComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    onChange() {
-        this._onChange(this.value);
-    }
-    updateValueAndStyle() {
-        this.value = this.adapterService.getEditorInnerHtml(this.id);
+    updateStyle() {
         this._initialStyleState = Object.assign(Object.assign({}, this._initialStyleState), this.adapterService.getStyleState(this.id));
     }
     initIframe() {
         this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
-        this.editorService.selectionChangeListener(this.id)
+        this.editorService
+            .inputListener(this.id)
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
-            this.updateValueAndStyle();
+            // 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)
+        this.editorService
+            .clickListener(this.id)
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
             this.editorFocusStream.next();
         });
-        this.editorService.commandChangeListener(this.id)
+        this.editorService
+            .blurListener(this.id)
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
-            this.updateValueAndStyle();
+            // 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 */
@@ -1460,34 +1616,26 @@ class SkyTextEditorComponent {
         }
         this.initialized = true;
     }
-}
-SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", 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" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            // tslint:disable-next-line: no-forward-ref
-            useExisting: forwardRef(() => SkyTextEditorComponent),
-            multi: true
+    ViewToModelUpdate(emitChange = true) {
+        this.value = this.adapterService.getEditorInnerHtml(this.id);
+        /* istanbul ignore else */
+        if (emitChange) {
+            this._onChange(this._value);
         }
-    ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-text-editor\"\n>\n  <sky-toolbar\n    class=\"sky-text-editor-toolbar\"\n  >\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: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
+    }
+}
+SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-text-editor',
                     templateUrl: './text-editor.component.html',
                     styleUrls: ['./text-editor.component.scss'],
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // tslint:disable-next-line: no-forward-ref
-                            useExisting: forwardRef(() => SkyTextEditorComponent),
-                            multi: true
-                        }
-                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }]; }, propDecorators: { autofocus: [{
+        }], 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
@@ -1514,8 +1662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImpo
 
 class SkyTextEditorModule {
 }
-SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
+SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent], imports: [CommonModule,
@@ -1537,7 +1685,7 @@ SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent] });
-SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorModule, imports: [[
+SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -1553,9 +1701,9 @@ SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             SkyModalModule,
             SkyTabsModule,
             SkyThemeModule,
-            SkyToolbarModule
+            SkyToolbarModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyTextEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1574,23 +1722,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImpo
                         SkyModalModule,
                         SkyTabsModule,
                         SkyThemeModule,
-                        SkyToolbarModule
+                        SkyToolbarModule,
                     ],
                     exports: [
                         SkyTextEditorComponent,
                         SkyTextEditorUrlModalComponent,
                         SkyTextEditorToolbarComponent,
-                        SkyTextEditorMenubarComponent
+                        SkyTextEditorMenubarComponent,
                     ],
                     declarations: [
                         SkyTextEditorComponent,
                         SkyTextEditorUrlModalComponent,
                         SkyTextEditorToolbarComponent,
-                        SkyTextEditorMenubarComponent
+                        SkyTextEditorMenubarComponent,
                     ],
-                    entryComponents: [
-                        SkyTextEditorUrlModalComponent
-                    ]
+                    entryComponents: [SkyTextEditorUrlModalComponent],
                 }]
         }] });