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

package/bundles/skyux-text-editor.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/platform-browser'), require('dompurify'), require('@angular/forms'), require('@skyux/colorpicker'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/modals'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('@skyux/tabs'), require('@skyux/theme'), require('rxjs'), require('rxjs/operators'), require('@skyux/validation')) :
     typeof define === 'function' && define.amd ? define('@skyux/text-editor', ['exports', '@angular/common', '@angular/core', '@angular/platform-browser', 'dompurify', '@angular/forms', '@skyux/colorpicker', '@skyux/core', '@skyux/forms', '@skyux/modals', '@skyux/i18n', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', '@skyux/tabs', '@skyux/theme', 'rxjs', 'rxjs/operators', '@skyux/validation'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["text-editor"] = {}), global.ng.common, global.ng.core, global.ng.platformBrowser, global.createDOMPurify, global.ng.forms, global.i6$1, global.i3, global.i4$1, global.i1$1, global.i2, global.i7, global.i3$1, global.i4, global.i3$2, global.i6, global.rxjs, global.rxjs.operators, global.validation));
-})(this, (function (exports, i8, i0, i1, createDOMPurify, i5, i6$1, i3, i4$1, i1$1, i2, i7, i3$1, i4, i3$2, i6, rxjs, operators, validation) { 'use strict';
+})(this, (function (exports, i5, i0, i1, createDOMPurify, i5$1, i6$1, i3, i4$1, i1$1, i2, i7, i3$1, i4, i3$2, i6, rxjs, operators, validation) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,11 +24,11 @@
         return Object.freeze(n);
     }
 
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var createDOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(createDOMPurify);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
@@ -67,12 +67,12 @@
         };
         return SkyTextSanitizationService;
     }());
-    SkyTextSanitizationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextSanitizationService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTextSanitizationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextSanitizationService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextSanitizationService, decorators: [{
+    SkyTextSanitizationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextSanitizationService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyTextSanitizationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextSanitizationService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextSanitizationService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }] });
 
@@ -102,13 +102,13 @@
         });
         return SkyRichTextDisplayComponent;
     }());
-    SkyRichTextDisplayComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayComponent, deps: [{ token: i1__namespace.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRichTextDisplayComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0__namespace, template: "<span\n  class=\"sky-rich-text-display-text\"\n  [innerHTML]=\"sanitizedText\"\n>\n</span>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayComponent, decorators: [{
+    SkyRichTextDisplayComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayComponent, deps: [{ token: i1__namespace.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyRichTextDisplayComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0__namespace, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"> </span>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-rich-text-display',
-                        templateUrl: './rich-text-display.component.html'
+                        template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"> </span>\n",
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
                     type: i0.Input
@@ -119,23 +119,15 @@
         }
         return SkyRichTextDisplayModule;
     }());
-    SkyRichTextDisplayModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyRichTextDisplayModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [i8.CommonModule], exports: [SkyRichTextDisplayComponent] });
-    SkyRichTextDisplayModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayModule, imports: [[
-                i8.CommonModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyRichTextDisplayModule, decorators: [{
+    SkyRichTextDisplayModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyRichTextDisplayModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [i5.CommonModule], exports: [SkyRichTextDisplayComponent] });
+    SkyRichTextDisplayModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayModule, imports: [[i5.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRichTextDisplayModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [
-                            i8.CommonModule
-                        ],
-                        exports: [
-                            SkyRichTextDisplayComponent
-                        ],
-                        declarations: [
-                            SkyRichTextDisplayComponent
-                        ]
+                        imports: [i5.CommonModule],
+                        exports: [SkyRichTextDisplayComponent],
+                        declarations: [SkyRichTextDisplayComponent],
                     }]
             }] });
 
@@ -146,7 +138,68 @@
      * To update this file, simply rerun the command.
      */
     var 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' },
+        },
     };
     var SkyTextEditorResourcesProvider = /** @class */ (function () {
         function SkyTextEditorResourcesProvider() {
@@ -164,22 +217,26 @@
         }
         return SkyTextEditorResourcesModule;
     }());
-    SkyTextEditorResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTextEditorResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyTextEditorResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, providers: [{
+    SkyTextEditorResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTextEditorResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, exports: [i2.SkyI18nModule] });
+    SkyTextEditorResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, providers: [
+            {
                 provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyTextEditorResourcesProvider,
-                multi: true
-            }], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, decorators: [{
+                multi: true,
+            },
+        ], imports: [i2.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i2.SkyI18nModule],
-                        providers: [{
+                        providers: [
+                            {
                                 provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyTextEditorResourcesProvider,
-                                multi: true
-                            }]
+                                multi: true,
+                            },
+                        ],
                     }]
             }] });
 
@@ -520,40 +577,40 @@
     var 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',
+        },
     ];
 
     /**
@@ -567,7 +624,7 @@
         boldState: false,
         italicState: false,
         underlineState: false,
-        linkState: false
+        linkState: false,
     };
 
     /**
@@ -586,10 +643,12 @@
         function SkyTextEditorSelectionService() {
         }
         SkyTextEditorSelectionService.prototype.isElementSelected = function (documentEl, element) {
-            var selectedNode = this.getCurrentSelection(documentEl).anchorNode;
+            var 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))));
         };
         SkyTextEditorSelectionService.prototype.getCurrentSelection = function (documentEl) {
             return documentEl.getSelection();
@@ -602,7 +661,8 @@
                 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();
@@ -621,7 +681,8 @@
                     return sel.getRangeAt(0);
                 }
             }
-            else if (documentEl.getSelection() && documentEl.getSelection().getRangeAt) {
+            else if (documentEl.getSelection() &&
+                documentEl.getSelection().getRangeAt) {
                 return documentEl.getSelection().getRangeAt(0);
             }
         };
@@ -647,12 +708,12 @@
         };
         return SkyTextEditorSelectionService;
     }());
-    SkyTextEditorSelectionService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorSelectionService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTextEditorSelectionService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorSelectionService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorSelectionService, decorators: [{
+    SkyTextEditorSelectionService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorSelectionService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyTextEditorSelectionService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorSelectionService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorSelectionService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }] });
 
@@ -666,6 +727,12 @@
              */
             this.editors = {};
         }
+        /**
+         * Returns the blur observable from the editor with the corresponding id.
+         */
+        SkyTextEditorService.prototype.blurListener = function (id) {
+            return this.editors[id].blurObservable;
+        };
         /**
          * Returns the click observable from the editor with the corresponding id.
          */
@@ -678,6 +745,12 @@
         SkyTextEditorService.prototype.commandChangeListener = function (id) {
             return this.editors[id].commandChangeObservable;
         };
+        /**
+         * Returns the input change observable from the editor with the corresponding id.
+         */
+        SkyTextEditorService.prototype.inputListener = function (id) {
+            return this.editors[id].inputObservable;
+        };
         /**
          * Removes editor from the `editors` index by id.
          */
@@ -695,12 +768,12 @@
         };
         return SkyTextEditorService;
     }());
-    SkyTextEditorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTextEditorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorService, decorators: [{
+    SkyTextEditorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyTextEditorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }] });
 
@@ -814,7 +887,7 @@
                     boldState: documentEl.queryCommandState('Bold'),
                     italicState: documentEl.queryCommandState('Italic'),
                     underlineState: documentEl.queryCommandState('Underline'),
-                    linkState: this.hasLink(id)
+                    linkState: this.hasLink(id),
                 };
             }
             /* istanbul ignore next */
@@ -841,7 +914,9 @@
                 var windowEl = this.getContentWindowEl(id);
                 var iframeDocumentEl = this.getIframeDocumentEl(id);
                 var currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
-                var cursorIsNotActiveAndHasReset = currentSelection && (currentSelection.startOffset === 0 && currentSelection.endOffset === 0);
+                var cursorIsNotActiveAndHasReset = currentSelection &&
+                    currentSelection.startOffset === 0 &&
+                    currentSelection.endOffset === 0;
                 if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
                     // focus the end of the editor
                     var documentEl = this.windowService.nativeWindow.document;
@@ -877,8 +952,10 @@
             var 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;
@@ -906,7 +983,7 @@
                 for (var fontElements_1 = __values(fontElements), fontElements_1_1 = fontElements_1.next(); !fontElements_1_1.done; fontElements_1_1 = fontElements_1.next()) {
                     var element = fontElements_1_1.value;
                     element.removeAttribute('size');
-                    element.style.fontSize = (fontSize + 'px');
+                    element.style.fontSize = fontSize + 'px';
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -922,9 +999,9 @@
         };
         SkyTextEditorAdapterService.prototype.removeObservers = function (setting) {
             /* istanbul ignore next */
-            var documentEl = setting.iframeElementRef.contentWindow ?
-                setting.iframeElementRef.contentWindow.document :
-                setting.iframeElementRef.contentDocument;
+            var documentEl = setting.iframeElementRef.contentWindow
+                ? setting.iframeElementRef.contentWindow.document
+                : setting.iframeElementRef.contentDocument;
             setting.selectionChangeObservable.complete();
             setting.clickObservable.complete();
             setting.commandChangeObservable.complete();
@@ -956,13 +1033,14 @@
                     }
                     var 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));
             });
         };
         SkyTextEditorAdapterService.prototype.getIframeDocumentEl = function (id) {
@@ -999,9 +1077,9 @@
         };
         SkyTextEditorAdapterService.prototype.createObservers = function (id, element) {
             /* istanbul ignore next */
-            var documentEl = element.contentWindow ?
-                element.contentWindow.document :
-                element.contentDocument;
+            var 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();
@@ -1010,18 +1088,27 @@
             var clickObservable = new rxjs.Subject();
             var clickListener = function () { return clickObservable.next(); };
             var pasteListener = this.getPasteOverride(id);
+            var blurObservable = new rxjs.Subject();
+            var blurListener = function () { return blurObservable.next(); };
+            var inputObservable = new rxjs.Subject();
+            var inputListener = function () { return 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 rxjs.Subject(),
                 iframeElementRef: element,
-                selectionListener: selectionListener,
+                inputObservable: inputObservable,
+                selectionChangeObservable: selectionObservable,
+                blurListener: blurListener,
                 clickListener: clickListener,
+                inputListener: inputListener,
                 pasteListener: pasteListener,
-                selectionChangeObservable: selectionObservable,
-                clickObservable: clickObservable,
-                commandChangeObservable: new rxjs.Subject()
+                selectionListener: selectionListener,
             };
         };
         /* istanbul ignore next */
@@ -1043,11 +1130,15 @@
             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 */
@@ -1122,8 +1213,8 @@
             }
             var removableElements = orphanElements.filter(function (element) {
                 var 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));
             });
             try {
                 for (var removableElements_1 = __values(removableElements), removableElements_1_1 = removableElements_1.next(); !removableElements_1_1.done; removableElements_1_1 = removableElements_1.next()) {
@@ -1148,7 +1239,8 @@
         };
         // Certain values are encoded in html and need to be decoded
         SkyTextEditorAdapterService.prototype.replaceHtmlCodes = function (str) {
-            return str.replace(/&nbsp;/, String.fromCharCode(160))
+            return str
+                .replace(/&nbsp;/, String.fromCharCode(160))
                 .replace(/&lt;/g, '<')
                 .replace(/&gt;/g, '>')
                 .replace(/&amp;/g, '&');
@@ -1166,12 +1258,12 @@
         };
         return SkyTextEditorAdapterService;
     }());
-    SkyTextEditorAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTextEditorAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorAdapterService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorAdapterService, decorators: [{
+    SkyTextEditorAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyTextEditorAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorAdapterService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorAdapterService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3__namespace.SkyAppWindowRef }]; } });
 
@@ -1208,8 +1300,7 @@
         });
         SkyTextEditorMenubarComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.editorFocusStream
-                .pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+            this.editorFocusStream.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
                 _this.closeDropdowns();
             });
             rxjs.forkJoin([
@@ -1234,7 +1325,7 @@
                 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(operators.take(1))
                 .subscribe(function (resources) {
@@ -1242,67 +1333,67 @@
                     {
                         function: function () { return _this.execCommand('bold'); },
                         label: resources[0],
-                        keyShortcut: resources[1]
+                        keyShortcut: resources[1],
                     },
                     {
                         function: function () { return _this.execCommand('italic'); },
                         label: resources[2],
-                        keyShortcut: resources[3]
+                        keyShortcut: resources[3],
                     },
                     {
                         function: function () { return _this.execCommand('underline'); },
                         label: resources[4],
-                        keyShortcut: resources[5]
+                        keyShortcut: resources[5],
                     },
                     {
                         function: function () { return _this.execCommand('strikethrough'); },
-                        label: resources[6]
+                        label: resources[6],
                     },
                     {
-                        isDivider: true
+                        isDivider: true,
                     },
                     {
                         function: function () { return _this.clearFormat(); },
-                        label: resources[7]
-                    }
+                        label: resources[7],
+                    },
                 ];
                 _this.editItems = [
                     {
                         function: function () { return _this.execCommand('undo'); },
                         label: resources[8],
-                        keyShortcut: resources[9]
+                        keyShortcut: resources[9],
                     },
                     {
                         function: function () { return _this.execCommand('redo'); },
                         label: resources[10],
-                        keyShortcut: resources[11]
+                        keyShortcut: resources[11],
                     },
                     {
-                        isDivider: true
+                        isDivider: true,
                     },
                     {
                         function: function () { return _this.execCommand('cut'); },
                         label: resources[12],
-                        keyShortcut: resources[13]
+                        keyShortcut: resources[13],
                     },
                     {
                         function: function () { return _this.execCommand('copy'); },
                         label: resources[14],
-                        keyShortcut: resources[15]
+                        keyShortcut: resources[15],
                     },
                     {
                         function: function () { return _this.execCommand('paste'); },
                         label: resources[16],
-                        keyShortcut: resources[17]
+                        keyShortcut: resources[17],
                     },
                     {
-                        isDivider: true
+                        isDivider: true,
                     },
                     {
                         function: function () { return _this.execCommand('selectAll'); },
                         label: resources[18],
-                        keyShortcut: resources[19]
-                    }
+                        keyShortcut: resources[19],
+                    },
                 ];
             });
         };
@@ -1314,13 +1405,18 @@
             if (value === void 0) { value = ''; }
             this.adapterService.execCommand(this.editorId, {
                 command: command,
-                value: value
+                value: value,
             });
         };
         SkyTextEditorMenubarComponent.prototype.insertMergeField = function (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)) +
+                '">');
         };
         SkyTextEditorMenubarComponent.prototype.closeDropdowns = function () {
             this.editDropdownStream.next({ type: i4.SkyDropdownMessageType.Close });
@@ -1330,22 +1426,23 @@
         SkyTextEditorMenubarComponent.prototype.clearFormat = function () {
             var 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');
         };
         return SkyTextEditorMenubarComponent;
     }());
-    SkyTextEditorMenubarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTextEditorMenubarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ39, selector: "sky-toolbar-item" }, { type: i4__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorMenubarComponent, decorators: [{
+    SkyTextEditorMenubarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTextEditorMenubarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ39, selector: "sky-toolbar-item" }, { type: i4__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorMenubarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-text-editor-menubar',
-                        templateUrl: './text-editor-menubar.component.html',
-                        styleUrls: ['./text-editor-menubar.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n",
+                        styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
                     type: i0.Input
@@ -1387,7 +1484,10 @@
                 if (modalContext.urlResult.url.startsWith(emailKey)) {
                     this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
                     var 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);
@@ -1397,8 +1497,8 @@
                     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;
                 }
@@ -1446,13 +1546,15 @@
                 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,
                     });
                 }
             }
@@ -1461,7 +1563,9 @@
             this.modalInstance.cancel();
         };
         SkyTextEditorUrlModalComponent.prototype.getEmailUrl = function () {
-            return emailKey + this.emailAddress + (this.subject ? '?Subject=' + encodeURI(this.subject) : '');
+            return (emailKey +
+                this.emailAddress +
+                (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
         };
         SkyTextEditorUrlModalComponent.prototype.isValid = function () {
             if (this.activeTab === 0) {
@@ -1471,14 +1575,14 @@
         };
         return SkyTextEditorUrlModalComponent;
     }());
-    SkyTextEditorUrlModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1__namespace$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTextEditorUrlModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0__namespace, 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__namespace$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1__namespace$1.λ4, selector: "sky-modal-header" }, { type: i1__namespace$1.λ2, selector: "sky-modal-content" }, { type: i3__namespace$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3__namespace$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1__namespace$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5__namespace.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__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorUrlModalComponent, decorators: [{
+    SkyTextEditorUrlModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1__namespace$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTextEditorUrlModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0__namespace, 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__namespace$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1__namespace$1.λ4, selector: "sky-modal-header" }, { type: i1__namespace$1.λ2, selector: "sky-modal-content" }, { type: i3__namespace$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3__namespace$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1__namespace$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5__namespace$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__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorUrlModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-text-editor-url-modal',
-                        templateUrl: './text-editor-url-modal.component.html',
-                        styleUrls: ['./text-editor-url-modal.component.scss']
+                        template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n",
+                        styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"],
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
 
@@ -1505,7 +1609,7 @@
             set: function (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 {
@@ -1542,7 +1646,7 @@
             if (value === void 0) { 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));
         };
@@ -1557,10 +1661,12 @@
             var _this = this;
             var priorSelection = this.adapterService.saveSelection(this.editorId);
             var currentLink = this.adapterService.getLink(this.editorId);
-            var inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [{
+            var inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
+                {
                     provide: SkyUrlModalContext,
-                    useValue: { urlResult: currentLink }
-                }]);
+                    useValue: { urlResult: currentLink },
+                },
+            ]);
             inputModal.closed.subscribe(function (result) {
                 if (result.reason === 'save' && priorSelection) {
                     if (currentLink) {
@@ -1575,13 +1681,19 @@
                     else {
                         // New Window
                         var 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>');
                     }
                 }
             });
         };
         SkyTextEditorToolbarComponent.prototype.unlink = function () {
-            var currentSelectionRange = this.adapterService.getCurrentSelection(this.editorId).getRangeAt(0);
+            var currentSelectionRange = this.adapterService
+                .getCurrentSelection(this.editorId)
+                .getRangeAt(0);
             if (currentSelectionRange.toString().length <= 0) {
                 var anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
                 this.adapterService.selectElement(this.editorId, anchorTag);
@@ -1597,7 +1709,9 @@
             this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
         };
         SkyTextEditorToolbarComponent.prototype.closeDropdowns = function () {
-            var message = { type: i6$1.SkyColorpickerMessageType.Close };
+            var message = {
+                type: i6$1.SkyColorpickerMessageType.Close,
+            };
             this.colorpickerStream.next(message);
             this.backColorpickerStream.next(message);
             this.fontPickerStream.next({ type: i4.SkyDropdownMessageType.Close });
@@ -1612,15 +1726,15 @@
         };
         return SkyTextEditorToolbarComponent;
     }());
-    SkyTextEditorToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.SkyModalService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTextEditorToolbarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ39, selector: "sky-toolbar-item" }, { type: i4__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6__namespace$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.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__namespace$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i6__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorToolbarComponent, decorators: [{
+    SkyTextEditorToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.SkyModalService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTextEditorToolbarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ39, selector: "sky-toolbar-item" }, { type: i4__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6__namespace$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$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__namespace$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i6__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-text-editor-toolbar',
-                        templateUrl: './text-editor-toolbar.component.html',
-                        styleUrls: ['./text-editor-toolbar.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n",
+                        styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
                     type: i0.Input
@@ -1641,10 +1755,7 @@
     /**
      * @internal
      */
-    var MENU_DEFAULTS = [
-        'edit',
-        'format'
-    ];
+    var MENU_DEFAULTS = ['edit', 'format'];
 
     /**
      * @internal
@@ -1655,13 +1766,15 @@
         'font-style',
         'color',
         'list',
-        'link'
+        'link',
     ];
 
     /**
      * @internal
      */
-    var FONT_SIZE_LIST_DEFAULTS = [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48];
+    var 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.
@@ -1671,23 +1784,23 @@
      * The text editor component lets users format and manipulate text.
      */
     var SkyTextEditorComponent = /** @class */ (function () {
-        function SkyTextEditorComponent(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService) {
+        function SkyTextEditorComponent(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 rxjs.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.
@@ -1708,12 +1821,10 @@
              * 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;
@@ -1723,9 +1834,10 @@
             this._placeholder = '';
             this._value = '<p></p>';
             /* istanbul ignore next */
-            this.onTouch = function () { };
+            this._onTouched = function () { };
             /* istanbul ignore next */
-            this._onChange = function (_) { };
+            this._onChange = function () { };
+            this.ngControl.valueAccessor = this;
         }
         Object.defineProperty(SkyTextEditorComponent.prototype, "disabled", {
             get: function () {
@@ -1745,7 +1857,7 @@
                     if (this.iframeRef) {
                         focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
                             ignoreVisibility: true,
-                            ignoreTabIndex: true
+                            ignoreTabIndex: true,
                         });
                     }
                     if (this._disabled) {
@@ -1800,22 +1912,37 @@
             get: function () {
                 return this._value;
             },
+            /**
+             * The internal value of the control.
+             */
             set: function (value) {
-                // Set clear state to be an empty string
-                var valueString = value;
-                if (!value || value.trim() === '<p></p>' || value.trim() === '<br>') {
-                    valueString = '';
+                // Normalize value and set any empty state to an empty string.
+                var 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();
                 }
             },
             enumerable: false,
@@ -1838,19 +1965,28 @@
                 this.initIframe();
             }
         };
-        SkyTextEditorComponent.prototype.writeValue = function (obj) {
-            this.value = obj;
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyTextEditorComponent.prototype.writeValue = function (value) {
+            this.value = value;
             // Update HTML if necessary.
             var editorValue = this.adapterService.getEditorInnerHtml(this.id);
             if (this.initialized && editorValue !== this._value) {
                 this.adapterService.setEditorInnerHtml(this.id, this._value);
             }
         };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
         SkyTextEditorComponent.prototype.registerOnChange = function (fn) {
             this._onChange = fn;
         };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
         SkyTextEditorComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouch = fn;
+            this._onTouched = fn;
         };
         /**
          * Implemented as part of ControlValueAccessor.
@@ -1858,31 +1994,51 @@
         SkyTextEditorComponent.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
-        SkyTextEditorComponent.prototype.onChange = function () {
-            this._onChange(this.value);
-        };
-        SkyTextEditorComponent.prototype.updateValueAndStyle = function () {
-            this.value = this.adapterService.getEditorInnerHtml(this.id);
+        SkyTextEditorComponent.prototype.updateStyle = function () {
             this._initialStyleState = Object.assign(Object.assign({}, this._initialStyleState), this.adapterService.getStyleState(this.id));
         };
         SkyTextEditorComponent.prototype.initIframe = function () {
             var _this = this;
             this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
-            this.editorService.selectionChangeListener(this.id)
+            this.editorService
+                .inputListener(this.id)
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
-                _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(function () {
+                    _this.ViewToModelUpdate();
+                });
+            });
+            this.editorService
+                .selectionChangeListener(this.id)
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                _this.updateStyle();
                 _this.editorFocusStream.next();
             });
-            this.editorService.clickListener(this.id)
+            this.editorService
+                .clickListener(this.id)
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
                 _this.editorFocusStream.next();
             });
-            this.editorService.commandChangeListener(this.id)
+            this.editorService
+                .blurListener(this.id)
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                // 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(function () {
+                    _this._onTouched();
+                });
+            });
+            this.editorService
+                .commandChangeListener(this.id)
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
-                _this.updateValueAndStyle();
+                _this.updateStyle();
+                _this.ViewToModelUpdate();
             });
             this.adapterService.setEditorInnerHtml(this.id, this._value);
             /* istanbul ignore next */
@@ -1891,35 +2047,28 @@
             }
             this.initialized = true;
         };
+        SkyTextEditorComponent.prototype.ViewToModelUpdate = function (emitChange) {
+            if (emitChange === void 0) { emitChange = true; }
+            this.value = this.adapterService.getEditorInnerHtml(this.id);
+            /* istanbul ignore else */
+            if (emitChange) {
+                this._onChange(this._value);
+            }
+        };
         return SkyTextEditorComponent;
     }());
-    SkyTextEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTextEditorComponent.ɵcmp = i0__namespace.ɵɵ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: i5.NG_VALUE_ACCESSOR,
-                // tslint:disable-next-line: no-forward-ref
-                useExisting: i0.forwardRef(function () { return SkyTextEditorComponent; }),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0__namespace, 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__namespace$1.λ37, selector: "sky-toolbar" }, { type: i3__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorComponent, decorators: [{
+    SkyTextEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i5__namespace$1.NgControl }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTextEditorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ37, selector: "sky-toolbar" }, { type: i3__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-text-editor',
-                        templateUrl: './text-editor.component.html',
-                        styleUrls: ['./text-editor.component.scss'],
-                        providers: [
-                            {
-                                provide: i5.NG_VALUE_ACCESSOR,
-                                // tslint:disable-next-line: no-forward-ref
-                                useExisting: i0.forwardRef(function () { return SkyTextEditorComponent; }),
-                                multi: true
-                            }
-                        ],
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None
+                        encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }]; }, propDecorators: { autofocus: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i5__namespace$1.NgControl }, { type: i0__namespace.NgZone }]; }, propDecorators: { autofocus: [{
                     type: i0.Input
                 }], disabled: [{
                     type: i0.Input
@@ -1949,13 +2098,13 @@
         }
         return SkyTextEditorModule;
     }());
-    SkyTextEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTextEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
+    SkyTextEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTextEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
             SkyTextEditorUrlModalComponent,
             SkyTextEditorToolbarComponent,
-            SkyTextEditorMenubarComponent], imports: [i8.CommonModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
+            SkyTextEditorMenubarComponent], imports: [i5.CommonModule,
+            i5$1.FormsModule,
+            i5$1.ReactiveFormsModule,
             i3.SkyCoreAdapterModule,
             SkyTextEditorResourcesModule,
             i2.SkyI18nModule,
@@ -1972,10 +2121,10 @@
             SkyTextEditorUrlModalComponent,
             SkyTextEditorToolbarComponent,
             SkyTextEditorMenubarComponent] });
-    SkyTextEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorModule, imports: [[
-                i8.CommonModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
+    SkyTextEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorModule, imports: [[
+                i5.CommonModule,
+                i5$1.FormsModule,
+                i5$1.ReactiveFormsModule,
                 i3.SkyCoreAdapterModule,
                 SkyTextEditorResourcesModule,
                 i2.SkyI18nModule,
@@ -1988,15 +2137,15 @@
                 i1$1.SkyModalModule,
                 i3$2.SkyTabsModule,
                 i6.SkyThemeModule,
-                i3$1.SkyToolbarModule
+                i3$1.SkyToolbarModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTextEditorModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTextEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i8.CommonModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
+                            i5.CommonModule,
+                            i5$1.FormsModule,
+                            i5$1.ReactiveFormsModule,
                             i3.SkyCoreAdapterModule,
                             SkyTextEditorResourcesModule,
                             i2.SkyI18nModule,
@@ -2009,23 +2158,21 @@
                             i1$1.SkyModalModule,
                             i3$2.SkyTabsModule,
                             i6.SkyThemeModule,
-                            i3$1.SkyToolbarModule
+                            i3$1.SkyToolbarModule,
                         ],
                         exports: [
                             SkyTextEditorComponent,
                             SkyTextEditorUrlModalComponent,
                             SkyTextEditorToolbarComponent,
-                            SkyTextEditorMenubarComponent
+                            SkyTextEditorMenubarComponent,
                         ],
                         declarations: [
                             SkyTextEditorComponent,
                             SkyTextEditorUrlModalComponent,
                             SkyTextEditorToolbarComponent,
-                            SkyTextEditorMenubarComponent
+                            SkyTextEditorMenubarComponent,
                         ],
-                        entryComponents: [
-                            SkyTextEditorUrlModalComponent
-                        ]
+                        entryComponents: [SkyTextEditorUrlModalComponent],
                     }]
             }] });