@skyux/text-editor 7.0.0-beta.9 → 7.1.0

package/fesm2020/skyux-text-editor.mjs

@@ -1,14 +1,15 @@
-import * as i3$1 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation, ViewChild } from '@angular/core';
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i1 from '@angular/platform-browser';
 import createDOMPurify from 'dompurify';
-import * as i3$2 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i6$1 from '@skyux/colorpicker';
 import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
-import * as i3 from '@skyux/core';
+import * as i1$1 from '@skyux/core';
 import { SkyCoreAdapterModule, SkyIdModule } from '@skyux/core';
 import * as i5$1 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
@@ -18,7 +19,7 @@ import * as i5$2 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i7 from '@skyux/layout';
 import { SkyToolbarModule } from '@skyux/layout';
-import * as i1$1 from '@skyux/modals';
+import * as i1$2 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 import * as i4 from '@skyux/popovers';
 import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
@@ -26,10 +27,12 @@ import * as i6 from '@skyux/tabs';
 import { SkyTabsModule } from '@skyux/tabs';
 import * as i5 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import { Subject, forkJoin } from 'rxjs';
+import he from 'he';
+import { Subject } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import { SkyValidation } from '@skyux/validation';
 
+var _SkyTextSanitizationService_allowedAttributes;
 const domPurify = createDOMPurify(window);
 domPurify.addHook('afterSanitizeAttributes', (node) => {
     // Set all elements owning target to target=_blank
@@ -47,60 +50,72 @@ domPurify.addHook('afterSanitizeAttributes', (node) => {
  */
 class SkyTextSanitizationService {
     constructor() {
-        this.allowedAttributes = ['target'];
+        _SkyTextSanitizationService_allowedAttributes.set(this, ['target']);
     }
     /**
      * Returns a sanitized string, allowing target attribute for new tab links.
      */
     sanitize(htmlString) {
-        return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
+        return domPurify.sanitize(htmlString, {
+            ADD_ATTR: __classPrivateFieldGet(this, _SkyTextSanitizationService_allowedAttributes, "f"),
+        });
     }
 }
-SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
+_SkyTextSanitizationService_allowedAttributes = new WeakMap();
+SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+var _SkyRichTextDisplayComponent__richText, _SkyRichTextDisplayComponent_sanitizer, _SkyRichTextDisplayComponent_sanitizationService;
 class SkyRichTextDisplayComponent {
     constructor(sanitizer, sanitizationService) {
-        this.sanitizer = sanitizer;
-        this.sanitizationService = sanitizationService;
         this.sanitizedText = '';
-        this._richText = '';
+        _SkyRichTextDisplayComponent__richText.set(this, '');
+        _SkyRichTextDisplayComponent_sanitizer.set(this, void 0);
+        _SkyRichTextDisplayComponent_sanitizationService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizer, sanitizer, "f");
+        __classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizationService, sanitizationService, "f");
     }
     /**
      * Specifies the rich text to display.
      */
     set richText(value) {
-        const cleaned = this.sanitizationService.sanitize(value);
-        /* istanbul ignore else */
-        if (cleaned !== this._richText) {
-            this._richText = cleaned;
-            // Text has already been sanitized with DOMPurifier.
-            // Tell Angular to bypass its own internal sanitization.
-            this.sanitizedText = this.sanitizer.bypassSecurityTrustHtml(cleaned);
+        if (value) {
+            const cleaned = __classPrivateFieldGet(this, _SkyRichTextDisplayComponent_sanitizationService, "f").sanitize(value);
+            /* istanbul ignore else */
+            if (cleaned !== __classPrivateFieldGet(this, _SkyRichTextDisplayComponent__richText, "f")) {
+                __classPrivateFieldSet(this, _SkyRichTextDisplayComponent__richText, cleaned, "f");
+                // Text has already been sanitized with DOMPurifier.
+                // Tell Angular to bypass its own internal sanitization.
+                this.sanitizedText = __classPrivateFieldGet(this, _SkyRichTextDisplayComponent_sanitizer, "f").bypassSecurityTrustHtml(cleaned);
+            }
+        }
+        else {
+            this.sanitizedText = '';
         }
     }
 }
-SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
-SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"> </span>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
+_SkyRichTextDisplayComponent__richText = new WeakMap(), _SkyRichTextDisplayComponent_sanitizer = new WeakMap(), _SkyRichTextDisplayComponent_sanitizationService = new WeakMap();
+SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
+SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"> </span>\n" }]
+            args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
         }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
                 type: Input
             }] } });
 
 class SkyRichTextDisplayModule {
 }
-SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
-SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
+SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
+SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -189,16 +204,16 @@ class SkyTextEditorResourcesProvider {
  */
 class SkyTextEditorResourcesModule {
 }
-SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
-SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
+SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
+SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyTextEditorResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -292,10 +307,9 @@ var UrlTarget;
  */
 class SkyTextEditorSelectionService {
     isElementSelected(documentEl, element) {
-        const selectedNode = this.getCurrentSelection(documentEl)
-            .anchorNode;
+        const selectedNode = this.getCurrentSelection(documentEl)?.anchorNode;
         /* istanbul ignore next */
-        return (selectedNode &&
+        return !!(selectedNode &&
             (element.contains(selectedNode) ||
                 (selectedNode.parentNode && element.contains(selectedNode.parentNode))));
     }
@@ -313,9 +327,6 @@ class SkyTextEditorSelectionService {
             selectedEl =
                 selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
         }
-        else if (selection && selection.type !== 'Control') {
-            selectedEl = selection.createRange().parentElement();
-        }
         else {
             return undefined;
         }
@@ -326,14 +337,15 @@ class SkyTextEditorSelectionService {
         if (windowEl.getSelection) {
             const sel = windowEl.getSelection();
             /* istanbul ignore else */
-            if (sel.getRangeAt && sel.rangeCount) {
+            if (sel && sel.getRangeAt && sel.rangeCount) {
                 return sel.getRangeAt(0);
             }
         }
-        else if (documentEl.getSelection() &&
-            documentEl.getSelection().getRangeAt) {
-            return documentEl.getSelection().getRangeAt(0);
+        else if (documentEl.getSelection()?.getRangeAt) {
+            return documentEl.getSelection()?.getRangeAt(0);
         }
+        /* istanbul ignore next */
+        return undefined;
     }
     selectElement(documentEl, windowEl, element) {
         /* istanbul ignore else */
@@ -341,172 +353,161 @@ class SkyTextEditorSelectionService {
             /* istanbul ignore else */
             if (windowEl.getSelection) {
                 const sel = windowEl.getSelection();
-                sel.removeAllRanges();
+                sel?.removeAllRanges();
                 const range = documentEl.createRange();
                 range.selectNodeContents(element);
-                sel.addRange(range);
+                sel?.addRange(range);
             }
             else if (documentEl.getSelection) {
                 const sel = documentEl.getSelection();
-                sel.removeAllRanges();
+                sel?.removeAllRanges();
                 const range = documentEl.createRange();
                 range.selectNodeContents(element);
-                sel.addRange(range);
+                sel?.addRange(range);
             }
         }
     }
 }
-SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorSelectionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorSelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
+            type: Injectable
         }] });
 
+var _SkyTextEditorService__editor;
 /**
  * @internal
  */
 class SkyTextEditorService {
     constructor() {
-        /**
-         * A dictionary representing all active text editors and their settings.
-         */
-        this.editors = {};
+        _SkyTextEditorService__editor.set(this, void 0);
+    }
+    /**
+     * A dictionary representing all active text editors and their settings.
+     */
+    set editor(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorService__editor, value, "f");
+    }
+    get editor() {
+        if (!__classPrivateFieldGet(this, _SkyTextEditorService__editor, "f")) {
+            throw new Error('Editor has not been initialized.');
+        }
+        return __classPrivateFieldGet(this, _SkyTextEditorService__editor, "f");
     }
     /**
      * Returns the blur observable from the editor with the corresponding id.
      */
-    blurListener(id) {
-        return this.editors[id].blurObservable;
+    blurListener() {
+        return this.editor.blurObservable;
     }
     /**
      * Returns the click observable from the editor with the corresponding id.
      */
-    clickListener(id) {
-        return this.editors[id].clickObservable;
+    clickListener() {
+        return this.editor.clickObservable;
     }
     /**
      * Returns the command change observable from the editor with the corresponding id.
      */
-    commandChangeListener(id) {
-        return this.editors[id].commandChangeObservable;
+    commandChangeListener() {
+        return this.editor.commandChangeObservable;
     }
     /**
      * Returns the input change observable from the editor with the corresponding id.
      */
-    inputListener(id) {
-        return this.editors[id].inputObservable;
-    }
-    /**
-     * Removes editor from the `editors` index by id.
-     */
-    removeEditor(id) {
-        /* istanbul ignore else */
-        if (id in this.editors) {
-            delete this.editors[id];
-        }
+    inputListener() {
+        return this.editor.inputObservable;
     }
     /**
      * Returns the selection change observable from the editor with the corresponding id.
      */
-    selectionChangeListener(id) {
-        return this.editors[id].selectionChangeObservable;
+    selectionChangeListener() {
+        return this.editor.selectionChangeObservable;
     }
 }
-SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+_SkyTextEditorService__editor = new WeakMap();
+SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorService, decorators: [{
+            type: Injectable
         }] });
 
+var _SkyTextEditorAdapterService_instances, _SkyTextEditorAdapterService_selectionService, _SkyTextEditorAdapterService_textEditorService, _SkyTextEditorAdapterService_windowRef, _SkyTextEditorAdapterService_getContentWindowEl, _SkyTextEditorAdapterService_getChildSelectedAnchorTags, _SkyTextEditorAdapterService_getIframeDocumentEl, _SkyTextEditorAdapterService_getFontSize, _SkyTextEditorAdapterService_createObservers, _SkyTextEditorAdapterService_getPasteOverride, _SkyTextEditorAdapterService_getCurrentSelectionParentElement, _SkyTextEditorAdapterService_getColor, _SkyTextEditorAdapterService_hasLink, _SkyTextEditorAdapterService_getParent, _SkyTextEditorAdapterService_cleanUpBlankStyleTags, _SkyTextEditorAdapterService_replaceHtmlCodes, _SkyTextEditorAdapterService_setEditorDisabled;
 /**
  * @internal
  */
 class SkyTextEditorAdapterService {
     constructor(selectionService, textEditorService, windowService) {
-        this.selectionService = selectionService;
-        this.textEditorService = textEditorService;
-        this.windowService = windowService;
-    }
-    get editors() {
-        return this.textEditorService.editors;
+        _SkyTextEditorAdapterService_instances.add(this);
+        _SkyTextEditorAdapterService_selectionService.set(this, void 0);
+        _SkyTextEditorAdapterService_textEditorService.set(this, void 0);
+        _SkyTextEditorAdapterService_windowRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextEditorAdapterService_selectionService, selectionService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorAdapterService_textEditorService, textEditorService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorAdapterService_windowRef, windowService, "f");
     }
     /**
      * Creates a text editor inside the supplied iframe element.
      */
-    addEditor(id, iframeElement, styleState, placeholder) {
-        /* istanbul ignore else */
-        if (!(id in this.editors)) {
-            this.editors[id] = this.createObservers(id, iframeElement);
-            const documentEl = this.getIframeDocumentEl(id);
-            const styleEl = documentEl.createElement('style');
-            styleEl.innerHTML = `.editor:empty:before {
-        content: attr(data-placeholder);
-        font-family: "Blackbaud Sans", Arial, sans-serif;
-        color: #686c73;
-        font-weight: 400;
-        font-size: 15px;
-        font-style: italic;
-      }`;
-            documentEl.head.appendChild(styleEl);
-            const style = {
-                ...STYLE_STATE_DEFAULTS,
-                ...styleState,
-            };
-            const bodyStyle = `background-color: ${style.backColor};
-        color: ${style.fontColor};
-        font-family: ${style.font};
-        font-size: ${style.fontSize}px`;
-            documentEl.querySelector('html').setAttribute('lang', 'en');
-            documentEl.body.setAttribute('contenteditable', 'true');
-            documentEl.body.setAttribute('id', id);
-            documentEl.body.setAttribute('role', 'main');
-            documentEl.body.setAttribute('class', 'editor');
-            documentEl.body.setAttribute('style', bodyStyle);
-            documentEl.body.setAttribute('data-placeholder', placeholder || '');
-        }
+    initEditor(id, iframeElement, styleState, placeholder) {
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_createObservers).call(this, iframeElement);
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
+        const styleEl = documentEl.createElement('style');
+        styleEl.innerHTML = `.editor:empty:before {
+      content: attr(data-placeholder);
+      font-family: "Blackbaud Sans", Arial, sans-serif;
+      color: #686c73;
+      font-weight: 400;
+      font-size: 15px;
+      font-style: italic;
+    }`;
+        documentEl.head.appendChild(styleEl);
+        const style = {
+            ...STYLE_STATE_DEFAULTS,
+            ...styleState,
+        };
+        const bodyStyle = `background-color: ${style.backColor};
+      color: ${style.fontColor};
+      font-family: ${style.font};
+      font-size: ${style.fontSize}px`;
+        documentEl.querySelector('html')?.setAttribute('lang', 'en');
+        documentEl.body.setAttribute('contenteditable', 'true');
+        documentEl.body.setAttribute('id', id);
+        documentEl.body.setAttribute('role', 'main');
+        documentEl.body.setAttribute('class', 'editor');
+        documentEl.body.setAttribute('style', bodyStyle);
+        documentEl.body.setAttribute('data-placeholder', placeholder || '');
     }
-    disableEditor(id, focusableChildren, textEditorNativeElement) {
-        this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, true);
+    disableEditor(focusableChildren, textEditorNativeElement) {
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_setEditorDisabled).call(this, focusableChildren, textEditorNativeElement, true);
     }
-    enableEditor(id, focusableChildren, textEditorNativeElement) {
-        this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, false);
+    enableEditor(focusableChildren, textEditorNativeElement) {
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_setEditorDisabled).call(this, focusableChildren, textEditorNativeElement, false);
     }
     /**
      * Executes a command on the text editor with the corresponding id.
      */
-    execCommand(id, editorCommand) {
+    execCommand(editorCommand) {
         /* istanbul ignore else */
-        if (id in this.editors) {
-            const documentEl = this.getIframeDocumentEl(id);
+        if (__classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor) {
+            const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
             /* istanbul ignore else */
-            if (this.editorSelected(id)) {
-                const commandIsSupportedAndEnabled = documentEl.execCommand(editorCommand.command, false, editorCommand.value);
-                // IE11 doesn't support insertHTML
-                /* istanbul ignore next */
-                if (editorCommand.command.toLowerCase() === 'inserthtml' &&
-                    !commandIsSupportedAndEnabled) {
-                    this.insertHtmlInIE11(id, editorCommand.value);
-                }
-                this.focusEditor(id);
-                this.editors[id].commandChangeObservable.next();
+            if (this.editorSelected()) {
+                documentEl.execCommand(editorCommand.command, false, editorCommand.value);
+                this.focusEditor();
+                __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.commandChangeObservable.next();
             }
         }
     }
-    getCurrentSelection(id) {
-        return this.selectionService.getCurrentSelection(this.getIframeDocumentEl(id));
+    getCurrentSelection() {
+        return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").getCurrentSelection(__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this));
     }
     /**
      * Returns a data URI using the provided text string.
      * Used to display a merge field inside a string of text.
      */
     getMergeFieldDataURI(text) {
-        const documentEl = this.windowService.nativeWindow.document;
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_windowRef, "f").nativeWindow.document;
         let textToUse = text;
         if (text.length > 18) {
             textToUse = text.substr(0, 15) + '...';
@@ -531,81 +532,73 @@ class SkyTextEditorAdapterService {
         const result = canvasElement.toDataURL('image/png', 1.0);
         return result;
     }
-    getStyleState(id) {
-        const documentEl = this.getIframeDocumentEl(id);
+    getStyleState() {
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
         /* istanbul ignore else */
-        if (this.editorSelected(id)) {
+        if (this.editorSelected()) {
             return {
-                backColor: this.getColor(documentEl, 'BackColor'),
-                fontColor: this.getColor(documentEl, 'ForeColor'),
-                fontSize: parseInt(this.getFontSize(id), undefined),
+                backColor: __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getColor).call(this, documentEl, 'BackColor'),
+                fontColor: __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getColor).call(this, documentEl, 'ForeColor'),
+                fontSize: parseInt(__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getFontSize).call(this), undefined),
                 font: documentEl.queryCommandValue('fontname'),
                 boldState: documentEl.queryCommandState('Bold'),
                 italicState: documentEl.queryCommandState('Italic'),
                 underlineState: documentEl.queryCommandState('Underline'),
-                linkState: this.hasLink(id),
+                linkState: __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_hasLink).call(this),
             };
         }
         /* istanbul ignore next */
         return {};
     }
-    getEditorInnerHtml(id) {
-        const documentEl = this.getIframeDocumentEl(id);
+    getEditorInnerHtml() {
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
         if (documentEl) {
-            return this.replaceHtmlCodes(documentEl.body.innerHTML);
+            return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_replaceHtmlCodes).call(this, documentEl.body.innerHTML);
         }
         return '';
     }
-    setEditorInnerHtml(id, value) {
-        const documentEl = this.getIframeDocumentEl(id);
+    setEditorInnerHtml(value) {
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
         const editorContent = documentEl.body;
         /* istanbul ignore else */
         if (editorContent.innerHTML !== value) {
             editorContent.innerHTML = value;
         }
     }
-    focusEditor(id) {
+    focusEditor() {
         /* istanbul ignore else */
-        if (id in this.editors) {
-            const windowEl = this.getContentWindowEl(id);
-            const iframeDocumentEl = this.getIframeDocumentEl(id);
-            const currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
+        if (__classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor) {
+            const windowEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getContentWindowEl).call(this);
+            const iframeDocumentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
+            const currentSelection = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").getCurrentSelectionRange(iframeDocumentEl, windowEl);
             const cursorIsNotActiveAndHasReset = currentSelection &&
                 currentSelection.startOffset === 0 &&
                 currentSelection.endOffset === 0;
-            if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
+            if (!this.editorSelected() || cursorIsNotActiveAndHasReset) {
                 // focus the end of the editor
-                const documentEl = this.windowService.nativeWindow.document;
+                const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_windowRef, "f").nativeWindow.document;
                 const editor = iframeDocumentEl.body;
                 const range = documentEl.createRange();
-                this.editors[id].iframeElementRef.focus();
+                __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.iframeElementRef.focus();
                 editor.focus();
-                /* istanbul ignore else */
                 if (windowEl.getSelection && documentEl.createRange) {
                     range.selectNodeContents(editor);
                     range.collapse(false);
                     const sel = windowEl.getSelection();
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                }
-                else {
-                    // IE only
-                    const textRange = editor.createTextRange();
-                    textRange.moveToElementText(editor);
-                    textRange.collapse(false);
-                    textRange.select();
+                    sel?.removeAllRanges();
+                    sel?.addRange(range);
                 }
             }
             else {
                 // Cursor may not be active, restore it
-                this.editors[id].iframeElementRef.focus();
+                __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.iframeElementRef.focus();
                 iframeDocumentEl.body.focus();
             }
         }
     }
-    getLink(editorId) {
-        let link = undefined;
-        const anchorEl = this.getSelectedAnchorTag(editorId);
+    getLink() {
+        let link;
+        const anchorEl = this.getSelectedAnchorTag();
         if (anchorEl && anchorEl.href) {
             link = {
                 target: anchorEl.getAttribute('target') === '_blank'
@@ -616,31 +609,35 @@ class SkyTextEditorAdapterService {
         }
         return link;
     }
-    getSelectedAnchorTag(editorId) {
-        const selectedEl = this.getCurrentSelectionParentElement(editorId);
-        return this.getParent(selectedEl, 'a');
+    getSelectedAnchorTag() {
+        const selectedEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getCurrentSelectionParentElement).call(this);
+        if (selectedEl) {
+            return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getParent).call(this, selectedEl, 'a');
+        }
+        /* istanbul ignore next */
+        return undefined;
     }
-    saveSelection(id) {
-        return this.selectionService.getCurrentSelectionRange(this.getIframeDocumentEl(id), this.getContentWindowEl(id));
+    saveSelection() {
+        return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").getCurrentSelectionRange(__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this), __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getContentWindowEl).call(this));
     }
-    selectElement(id, element) {
-        this.selectionService.selectElement(this.getIframeDocumentEl(id), this.getContentWindowEl(id), element);
+    selectElement(element) {
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").selectElement(__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this), __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getContentWindowEl).call(this), element);
     }
-    setPlaceholder(id, placeholder) {
-        const documentEl = this.getIframeDocumentEl(id);
+    setPlaceholder(placeholder) {
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
         documentEl.body.setAttribute('data-placeholder', placeholder || '');
     }
-    setFontSize(id, fontSize) {
-        const doc = this.getIframeDocumentEl(id);
-        this.execCommand(id, { command: 'fontSize', value: 1 });
+    setFontSize(fontSize) {
+        const doc = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
+        this.execCommand({ command: 'fontSize', value: '1' });
         const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
         for (const element of fontElements) {
             element.removeAttribute('size');
             element.style.fontSize = fontSize + 'px';
         }
-        this.cleanUpBlankStyleTags(doc);
-        this.focusEditor(id);
-        this.editors[id].commandChangeObservable.next();
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_cleanUpBlankStyleTags).call(this, doc);
+        this.focusEditor();
+        __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.commandChangeObservable.next();
     }
     removeObservers(setting) {
         /* istanbul ignore next */
@@ -650,28 +647,36 @@ class SkyTextEditorAdapterService {
         setting.selectionChangeObservable.complete();
         setting.clickObservable.complete();
         setting.commandChangeObservable.complete();
-        documentEl.removeEventListener('selectionchange', setting.selectionListener);
-        documentEl.removeEventListener('input', setting.selectionListener);
-        documentEl.removeEventListener('mousedown', setting.clickListener);
-        documentEl.body.removeEventListener('paste', setting.pasteListener);
-    }
-    getContentWindowEl(id) {
-        return this.editors[id].iframeElementRef.contentWindow;
-    }
-    getChildSelectedAnchorTags(editorId) {
-        const selectedRange = this.getCurrentSelection(editorId).getRangeAt(0);
-        if (selectedRange.toString().length <= 0) {
-            return [];
-        }
-        const parentElement = this.getCurrentSelectionParentElement(editorId);
-        let childElements = [];
-        /* istanbul ignore else */
-        if (parentElement) {
-            childElements = Array.from(parentElement.querySelectorAll('a'));
+        if (documentEl) {
+            documentEl.removeEventListener('selectionchange', setting.selectionListener);
+            documentEl.removeEventListener('input', setting.selectionListener);
+            documentEl.removeEventListener('mousedown', setting.clickListener);
+            documentEl.body.removeEventListener('paste', setting.pasteListener);
         }
-        /* istanbul ignore next */
-        return childElements.filter((element) => {
-            // IE specific
+    }
+    editorSelected() {
+        const documentEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this);
+        return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").isElementSelected(documentEl, documentEl.body);
+    }
+}
+_SkyTextEditorAdapterService_selectionService = new WeakMap(), _SkyTextEditorAdapterService_textEditorService = new WeakMap(), _SkyTextEditorAdapterService_windowRef = new WeakMap(), _SkyTextEditorAdapterService_instances = new WeakSet(), _SkyTextEditorAdapterService_getContentWindowEl = function _SkyTextEditorAdapterService_getContentWindowEl() {
+    return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.iframeElementRef
+        .contentWindow;
+}, _SkyTextEditorAdapterService_getChildSelectedAnchorTags = function _SkyTextEditorAdapterService_getChildSelectedAnchorTags() {
+    const selectedRange = this.getCurrentSelection()?.getRangeAt(0);
+    if (selectedRange && selectedRange.toString().length <= 0) {
+        return [];
+    }
+    const parentElement = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getCurrentSelectionParentElement).call(this);
+    let childElements = [];
+    /* istanbul ignore else */
+    if (parentElement) {
+        childElements = Array.from(parentElement.querySelectorAll('a'));
+    }
+    /* istanbul ignore next */
+    return childElements.filter((element) => {
+        // IE specific
+        if (selectedRange) {
             if (!selectedRange.intersectsNode) {
                 if (!element || !element.href) {
                     return false;
@@ -681,381 +686,339 @@ class SkyTextEditorAdapterService {
                 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));
+                        selectedRange.compareBoundaryPoints(Range.END_TO_END, tempRange) !== 1));
             }
-            // Normal non-IE
-            return (!!element && !!element.href && selectedRange.intersectsNode(element));
-        });
+        }
+        // Normal non-IE
+        return (!!element && !!element.href && selectedRange?.intersectsNode(element));
+    });
+}, _SkyTextEditorAdapterService_getIframeDocumentEl = function _SkyTextEditorAdapterService_getIframeDocumentEl() {
+    const contentWindowEl = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getContentWindowEl).call(this);
+    /* istanbul ignore else */
+    if (contentWindowEl) {
+        return contentWindowEl.document;
     }
-    getIframeDocumentEl(id) {
-        /* istanbul ignore next */
-        if (!(id in this.editors)) {
-            return undefined;
+    /* istanbul ignore next */
+    return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_textEditorService, "f").editor.iframeElementRef
+        .contentDocument;
+}, _SkyTextEditorAdapterService_getFontSize = function _SkyTextEditorAdapterService_getFontSize() {
+    let fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
+    const selection = this.getCurrentSelection();
+    /* istanbul ignore else */
+    if (selection &&
+        selection.anchorNode &&
+        selection.anchorNode.parentElement) {
+        let element = selection.anchorNode;
+        if (element?.nodeType !== 1) {
+            element = element?.parentElement;
         }
-        const contentWindowEl = this.getContentWindowEl(id);
+        const computedStyle = window.getComputedStyle(element);
         /* istanbul ignore else */
-        if (contentWindowEl) {
-            return contentWindowEl.document;
+        if (computedStyle) {
+            fontSize = computedStyle.getPropertyValue('font-size');
         }
-        /* istanbul ignore next */
-        return this.editors[id].iframeElementRef.contentDocument;
     }
-    getFontSize(id) {
-        let fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
-        const selection = this.getCurrentSelection(id);
-        /* istanbul ignore else */
-        if (selection &&
-            selection.anchorNode &&
-            selection.anchorNode.parentElement) {
-            let element = selection.anchorNode;
-            if (element.nodeType !== 1) {
-                element = element.parentElement;
-            }
-            const computedStyle = window.getComputedStyle(element);
-            /* istanbul ignore else */
-            if (computedStyle) {
-                fontSize = computedStyle.getPropertyValue('font-size');
-            }
+    return fontSize;
+}, _SkyTextEditorAdapterService_createObservers = function _SkyTextEditorAdapterService_createObservers(element) {
+    /* istanbul ignore next */
+    const documentEl = element.contentWindow
+        ? element.contentWindow.document
+        : element.contentDocument;
+    // Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
+    documentEl.open();
+    documentEl.close();
+    const selectionObservable = new Subject();
+    const selectionListener = () => selectionObservable.next();
+    const clickObservable = new Subject();
+    const clickListener = () => clickObservable.next();
+    const pasteListener = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getPasteOverride).call(this);
+    const blurObservable = new Subject();
+    const blurListener = () => blurObservable.next();
+    const inputObservable = new Subject();
+    const inputListener = () => inputObservable.next();
+    documentEl.addEventListener('selectionchange', selectionListener);
+    documentEl.addEventListener('input', inputListener);
+    documentEl.addEventListener('mousedown', clickListener);
+    documentEl.body.addEventListener('paste', pasteListener);
+    documentEl.body.addEventListener('blur', blurListener);
+    return {
+        blurObservable,
+        clickObservable,
+        commandChangeObservable: new Subject(),
+        iframeElementRef: element,
+        inputObservable,
+        selectionChangeObservable: selectionObservable,
+        blurListener,
+        clickListener,
+        inputListener,
+        pasteListener,
+        selectionListener,
+    };
+}, _SkyTextEditorAdapterService_getPasteOverride = function _SkyTextEditorAdapterService_getPasteOverride() {
+    /* istanbul ignore next */
+    return (e) => {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text/plain');
+        if (text !== undefined) {
+            this.execCommand({ command: 'insertHTML', value: text.toString() });
         }
-        return fontSize;
-    }
-    createObservers(id, element) {
+    };
+}, _SkyTextEditorAdapterService_getCurrentSelectionParentElement = function _SkyTextEditorAdapterService_getCurrentSelectionParentElement() {
+    return __classPrivateFieldGet(this, _SkyTextEditorAdapterService_selectionService, "f").getCurrentSelectionParentElement(__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this));
+}, _SkyTextEditorAdapterService_getColor = function _SkyTextEditorAdapterService_getColor(documentEl, selector) {
+    const commandValue = documentEl.queryCommandValue(selector);
+    // Edge is weird and returns numbers
+    /* istanbul ignore if */
+    if (typeof commandValue === 'number') {
         /* istanbul ignore next */
-        const documentEl = element.contentWindow
-            ? element.contentWindow.document
-            : element.contentDocument;
-        // Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
-        documentEl.open();
-        documentEl.close();
-        const selectionObservable = new Subject();
-        const selectionListener = () => selectionObservable.next();
-        const clickObservable = new Subject();
-        const clickListener = () => clickObservable.next();
-        const pasteListener = this.getPasteOverride(id);
-        const blurObservable = new Subject();
-        const blurListener = () => blurObservable.next();
-        const inputObservable = new Subject();
-        const inputListener = () => inputObservable.next();
-        documentEl.addEventListener('selectionchange', selectionListener);
-        documentEl.addEventListener('input', inputListener);
-        documentEl.addEventListener('mousedown', clickListener);
-        documentEl.body.addEventListener('paste', pasteListener);
-        documentEl.body.addEventListener('blur', blurListener);
-        return {
-            blurObservable: blurObservable,
-            clickObservable: clickObservable,
-            commandChangeObservable: new Subject(),
-            iframeElementRef: element,
-            inputObservable: inputObservable,
-            selectionChangeObservable: selectionObservable,
-            blurListener: blurListener,
-            clickListener: clickListener,
-            inputListener: inputListener,
-            pasteListener: pasteListener,
-            selectionListener: selectionListener,
-        };
-    }
+        return ('rgb(' +
+            (commandValue & 0xff) +
+            ', ' +
+            ((commandValue & 0xff00) >> 8) +
+            ', ' +
+            ((commandValue & 0xff0000) >> 16) +
+            ')');
+    }
+    // Firefox uses 'Transparent' instead of a color value
     /* istanbul ignore next */
-    getPasteOverride(id) {
-        return (e) => {
-            e.preventDefault();
-            const text = e.clipboardData.getData('text/plain');
-            this.execCommand(id, { command: 'insertHTML', value: text });
-        };
-    }
-    getCurrentSelectionParentElement(id) {
-        return this.selectionService.getCurrentSelectionParentElement(this.getIframeDocumentEl(id));
+    if (commandValue.toString().toLowerCase() === 'transparent') {
+        return STYLE_STATE_DEFAULTS.backColor;
     }
-    getColor(documentEl, selector) {
-        const commandValue = documentEl.queryCommandValue(selector);
-        // Edge is weird and returns numbers
-        /* istanbul ignore if */
-        if (typeof commandValue === 'number') {
-            /* istanbul ignore next */
-            return ('rgb(' +
-                (commandValue & 0xff) +
-                ', ' +
-                ((commandValue & 0xff00) >> 8) +
-                ', ' +
-                ((commandValue & 0xff0000) >> 16) +
-                ')');
-        }
-        // Firefox uses 'Transparent' instead of a color value
-        /* istanbul ignore next */
-        if (commandValue.toString().toLowerCase() === 'transparent') {
-            return STYLE_STATE_DEFAULTS.backColor;
+    return commandValue;
+}, _SkyTextEditorAdapterService_hasLink = function _SkyTextEditorAdapterService_hasLink() {
+    const anchorEl = this.getSelectedAnchorTag();
+    const childAnchorEls = __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getChildSelectedAnchorTags).call(this);
+    /* istanbul ignore next */
+    return childAnchorEls.length > 0 || (!!anchorEl && !!anchorEl.href);
+}, _SkyTextEditorAdapterService_getParent = function _SkyTextEditorAdapterService_getParent(element, tag) {
+    let currentNode = element;
+    while (currentNode && currentNode.tagName.toUpperCase() !== 'BODY') {
+        if (currentNode.tagName.toUpperCase() === tag.toUpperCase()) {
+            return currentNode;
         }
-        return commandValue;
-    }
-    hasLink(editorId) {
-        const anchorEl = this.getSelectedAnchorTag(editorId);
-        const childAnchorEls = this.getChildSelectedAnchorTags(editorId);
-        /* istanbul ignore next */
-        return childAnchorEls.length > 0 || (!!anchorEl && !!anchorEl.href);
-    }
-    getParent(element, tag) {
-        let currentNode = element;
-        while (currentNode && currentNode.tagName.toUpperCase() !== 'BODY') {
-            if (currentNode.tagName.toUpperCase() === tag.toUpperCase()) {
-                return currentNode;
-            }
-            currentNode = currentNode.parentElement;
+        currentNode = currentNode.parentElement;
+    }
+    return undefined;
+}, _SkyTextEditorAdapterService_cleanUpBlankStyleTags = function _SkyTextEditorAdapterService_cleanUpBlankStyleTags(doc) {
+    const orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
+    for (const element of orphanElements) {
+        if (!element.getAttribute('style')) {
+            element.removeAttribute('style');
         }
-        return undefined;
-    }
-    editorSelected(id) {
-        const documentEl = this.getIframeDocumentEl(id);
-        return this.selectionService.isElementSelected(documentEl, documentEl.body);
     }
-    /* istanbul ignore next */
-    insertHtmlInIE11(id, html) {
-        const documentEl = this.getIframeDocumentEl(id);
-        const windowEl = this.getContentWindowEl(id);
-        const sel = windowEl.getSelection();
-        if (sel.getRangeAt && sel.rangeCount) {
-            let range = sel.getRangeAt(0);
-            range.deleteContents();
-            const el = documentEl.createElement('div');
-            el.innerHTML = html;
-            const frag = documentEl.createDocumentFragment();
-            let node, lastNode;
-            while (el.firstChild) {
-                node = el.firstChild;
-                lastNode = frag.appendChild(node);
-            }
-            range.insertNode(frag);
-            // Preserve the selection
-            if (lastNode) {
-                range = range.cloneRange();
-                range.setStartAfter(lastNode);
-                range.collapse(true);
-                sel.removeAllRanges();
-                sel.addRange(range);
+    const removableElements = orphanElements.filter((element) => {
+        const tagName = element.tagName.toUpperCase();
+        return ((tagName === 'FONT' || tagName === 'SPAN') &&
+            (element.attributes.length === 0 || !element.hasChildNodes));
+    });
+    for (const element of removableElements) {
+        const parent = element.parentNode;
+        /* istanbul ignore else */
+        if (parent) {
+            while (element.firstChild) {
+                parent.insertBefore(element.firstChild, element);
             }
+            parent.removeChild(element);
         }
     }
-    cleanUpBlankStyleTags(doc) {
-        const orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
-        for (const element of orphanElements) {
-            if (!element.getAttribute('style')) {
-                element.removeAttribute('style');
-            }
-        }
-        const removableElements = orphanElements.filter((element) => {
-            const tagName = element.tagName.toUpperCase();
-            return ((tagName === 'FONT' || tagName === 'SPAN') &&
-                (element.attributes.length === 0 || !element.hasChildNodes));
+}, _SkyTextEditorAdapterService_replaceHtmlCodes = function _SkyTextEditorAdapterService_replaceHtmlCodes(str) {
+    return str
+        .replace(/&nbsp;/, String.fromCharCode(160))
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+}, _SkyTextEditorAdapterService_setEditorDisabled = function _SkyTextEditorAdapterService_setEditorDisabled(focusableChildren, textEditorNativeElement, disabled) {
+    textEditorNativeElement.style.pointerEvents = disabled ? 'none' : 'auto';
+    textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    /* istanbul ignore else */
+    if (focusableChildren.length > 0) {
+        focusableChildren.forEach((aFocusableChild) => {
+            aFocusableChild.tabIndex = disabled ? -1 : 0;
         });
-        for (const element of removableElements) {
-            const parent = element.parentNode;
-            /* istanbul ignore else */
-            if (parent) {
-                while (element.firstChild) {
-                    parent.insertBefore(element.firstChild, element);
-                }
-                parent.removeChild(element);
-            }
-        }
     }
-    // Certain values are encoded in html and need to be decoded
-    replaceHtmlCodes(str) {
-        return str
-            .replace(/&nbsp;/, String.fromCharCode(160))
-            .replace(/&lt;/g, '<')
-            .replace(/&gt;/g, '>')
-            .replace(/&amp;/g, '&');
-    }
-    setEditorDisabled(id, focusableChildren, textEditorNativeElement, disabled) {
-        textEditorNativeElement.style.pointerEvents = disabled ? 'none' : 'auto';
-        textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-        /* istanbul ignore else */
-        if (focusableChildren.length > 0) {
-            focusableChildren.forEach((aFocusableChild) => {
-                aFocusableChild.tabIndex = disabled ? -1 : 0;
-            });
-        }
-        this.getIframeDocumentEl(id).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
-    }
-}
-SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }]; } });
+    __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
+};
+SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i1$1.SkyAppWindowRef }]; } });
 
+var _SkyTextEditorMenubarComponent_instances, _SkyTextEditorMenubarComponent__disabled, _SkyTextEditorMenubarComponent_ngUnsubscribe, _SkyTextEditorMenubarComponent_adapterService, _SkyTextEditorMenubarComponent_changeDetector, _SkyTextEditorMenubarComponent_resources, _SkyTextEditorMenubarComponent_closeDropdowns, _SkyTextEditorMenubarComponent_clearFormat;
+const FORMAT_MENU_ACTION = 'skyux_text_editor_format_menu_action_';
+const EDIT_MENU_ACTION = 'skyux_text_editor_edit_menu_action_';
 /**
  * @internal
  */
 class SkyTextEditorMenubarComponent {
     constructor(adapterService, changeDetector, resources) {
-        this.adapterService = adapterService;
-        this.changeDetector = changeDetector;
-        this.resources = resources;
+        _SkyTextEditorMenubarComponent_instances.add(this);
         this.editorFocusStream = new Subject();
         this.menus = [];
         this.mergeFields = [];
-        this._disabled = false;
+        _SkyTextEditorMenubarComponent__disabled.set(this, false);
         this.editDropdownStream = new Subject();
         this.formatDropdownStream = new Subject();
         this.mergeFieldDropdownStream = new Subject();
-        this.ngUnsubscribe = new Subject();
+        _SkyTextEditorMenubarComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTextEditorMenubarComponent_adapterService.set(this, void 0);
+        _SkyTextEditorMenubarComponent_changeDetector.set(this, void 0);
+        _SkyTextEditorMenubarComponent_resources.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_resources, resources, "f");
     }
     set disabled(value) {
         const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
         if (coercedValue !== this.disabled) {
-            this._disabled = coercedValue;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent__disabled, coercedValue, "f");
+            __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_changeDetector, "f").markForCheck();
         }
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent__disabled, "f");
     }
     ngOnInit() {
-        this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
-            this.closeDropdowns();
+        this.editorFocusStream
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_instances, "m", _SkyTextEditorMenubarComponent_closeDropdowns).call(this);
         });
-        forkJoin([
-            // Format menu strings.
-            this.resources.getString('skyux_text_editor_format_menu_action_bold_label'),
-            this.resources.getString('skyux_text_editor_format_menu_action_bold_key_shortcut'),
-            this.resources.getString('skyux_text_editor_format_menu_action_italic_label'),
-            this.resources.getString('skyux_text_editor_format_menu_action_italic_key_shortcut'),
-            this.resources.getString('skyux_text_editor_format_menu_action_underline_label'),
-            this.resources.getString('skyux_text_editor_format_menu_action_underline_key_shortcut'),
-            this.resources.getString('skyux_text_editor_format_menu_action_strikethrough_label'),
-            this.resources.getString('skyux_text_editor_format_menu_action_clear_formatting_label'),
-            // Edit menu string - start at index 8.
-            this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_undo_key_shortcut'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_redo_key_shortcut'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_cut_key_shortcut'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_copy_key_shortcut'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
-            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut'),
-        ])
-            .pipe(take(1))
+        __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_resources, "f")
+            .getStrings({
+            bold: FORMAT_MENU_ACTION + 'bold_label',
+            boldShort: FORMAT_MENU_ACTION + 'bold_key_shortcut',
+            italic: FORMAT_MENU_ACTION + 'italic_label',
+            italicShort: FORMAT_MENU_ACTION + 'italic_key_shortcut',
+            underline: FORMAT_MENU_ACTION + 'underline_label',
+            underlineShort: FORMAT_MENU_ACTION + 'underline_key_shortcut',
+            strikethrough: FORMAT_MENU_ACTION + 'strikethrough_label',
+            clearFormatting: FORMAT_MENU_ACTION + 'clear_formatting_label',
+            undo: EDIT_MENU_ACTION + 'undo_label',
+            undoShort: EDIT_MENU_ACTION + 'undo_key_shortcut',
+            redo: EDIT_MENU_ACTION + 'redo_label',
+            redoShort: EDIT_MENU_ACTION + 'redo_key_shortcut',
+            cut: EDIT_MENU_ACTION + 'cut_label',
+            cutShort: EDIT_MENU_ACTION + 'cut_key_shortcut',
+            copy: EDIT_MENU_ACTION + 'copy_label',
+            copyShort: EDIT_MENU_ACTION + 'copy_key_shortcut',
+            paste: EDIT_MENU_ACTION + 'paste_label',
+            pasteShort: EDIT_MENU_ACTION + 'paste_key_shortcut',
+            selectAll: EDIT_MENU_ACTION + 'select_all_label',
+            selectAllShort: EDIT_MENU_ACTION + 'select_all_key_shortcut',
+        })
+            .pipe(take(1), takeUntil(__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f")))
             .subscribe((resources) => {
             this.formatItems = [
                 {
                     function: () => this.execCommand('bold'),
-                    label: resources[0],
-                    keyShortcut: resources[1],
+                    label: resources.bold,
+                    keyShortcut: resources.boldShort,
                 },
                 {
                     function: () => this.execCommand('italic'),
-                    label: resources[2],
-                    keyShortcut: resources[3],
+                    label: resources.italic,
+                    keyShortcut: resources.italicShort,
                 },
                 {
                     function: () => this.execCommand('underline'),
-                    label: resources[4],
-                    keyShortcut: resources[5],
+                    label: resources.underline,
+                    keyShortcut: resources.underlineShort,
                 },
                 {
                     function: () => this.execCommand('strikethrough'),
-                    label: resources[6],
+                    label: resources.strikethrough,
                 },
                 {
                     isDivider: true,
                 },
                 {
-                    function: () => this.clearFormat(),
-                    label: resources[7],
+                    function: () => __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_instances, "m", _SkyTextEditorMenubarComponent_clearFormat).call(this),
+                    label: resources.clearFormatting,
                 },
             ];
             this.editItems = [
                 {
                     function: () => this.execCommand('undo'),
-                    label: resources[8],
-                    keyShortcut: resources[9],
+                    label: resources.undo,
+                    keyShortcut: resources.undoShort,
                 },
                 {
                     function: () => this.execCommand('redo'),
-                    label: resources[10],
-                    keyShortcut: resources[11],
+                    label: resources.redo,
+                    keyShortcut: resources.redoShort,
                 },
                 {
                     isDivider: true,
                 },
                 {
                     function: () => this.execCommand('cut'),
-                    label: resources[12],
-                    keyShortcut: resources[13],
+                    label: resources.cut,
+                    keyShortcut: resources.cutShort,
                 },
                 {
                     function: () => this.execCommand('copy'),
-                    label: resources[14],
-                    keyShortcut: resources[15],
+                    label: resources.copy,
+                    keyShortcut: resources.copyShort,
                 },
                 {
                     function: () => this.execCommand('paste'),
-                    label: resources[16],
-                    keyShortcut: resources[17],
+                    label: resources.paste,
+                    keyShortcut: resources.pasteShort,
                 },
                 {
                     isDivider: true,
                 },
                 {
                     function: () => this.execCommand('selectAll'),
-                    label: resources[18],
-                    keyShortcut: resources[19],
+                    label: resources.selectAll,
+                    keyShortcut: resources.selectAllShort,
                 },
             ];
         });
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f").complete();
     }
     execCommand(command, value = '') {
-        this.adapterService.execCommand(this.editorId, {
+        __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_adapterService, "f").execCommand({
             command: command,
             value: value,
         });
     }
     insertMergeField(field) {
         this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
-            field.id +
+            he.escape(field.id) +
             '" data-fielddisplay="' +
-            field.name +
+            he.escape(field.name) +
             '" src="' +
             (field.previewImageUrl ||
-                this.adapterService.getMergeFieldDataURI(field.name)) +
+                __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_adapterService, "f").getMergeFieldDataURI(field.name)) +
             '">');
     }
-    closeDropdowns() {
-        this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
-        this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
-        this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
-    }
-    clearFormat() {
-        const currentSelection = this.adapterService.getCurrentSelection(this.editorId);
-        /* istanbul ignore else */
-        if (currentSelection.rangeCount > 0 &&
-            currentSelection.getRangeAt(0).toString().length <= 0) {
-            this.execCommand('selectAll');
-        }
-        this.execCommand('removeFormat');
-    }
 }
-SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
+_SkyTextEditorMenubarComponent__disabled = new WeakMap(), _SkyTextEditorMenubarComponent_ngUnsubscribe = new WeakMap(), _SkyTextEditorMenubarComponent_adapterService = new WeakMap(), _SkyTextEditorMenubarComponent_changeDetector = new WeakMap(), _SkyTextEditorMenubarComponent_resources = new WeakMap(), _SkyTextEditorMenubarComponent_instances = new WeakSet(), _SkyTextEditorMenubarComponent_closeDropdowns = function _SkyTextEditorMenubarComponent_closeDropdowns() {
+    this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
+    this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
+    this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
+}, _SkyTextEditorMenubarComponent_clearFormat = function _SkyTextEditorMenubarComponent_clearFormat() {
+    const currentSelection = __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_adapterService, "f").getCurrentSelection();
+    /* istanbul ignore else */
+    if (currentSelection &&
+        currentSelection.rangeCount > 0 &&
+        currentSelection.getRangeAt(0).toString().length <= 0) {
+        this.execCommand('selectAll');
+    }
+    this.execCommand('removeFormat');
+};
+SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem?.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem?.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"] }]
+            args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem?.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem?.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
                 type: Input
-            }], editorId: [{
-                type: Input
             }], menus: [{
                 type: Input
             }], mergeFields: [{
@@ -1094,6 +1057,7 @@ const TOOLBAR_ACTION_DEFAULTS = [
 class SkyUrlModalContext {
 }
 
+var _SkyTextEditorUrlModalComponent_instances, _SkyTextEditorUrlModalComponent_modalInstance, _SkyTextEditorUrlModalComponent__activeTab, _SkyTextEditorUrlModalComponent__emailAddress, _SkyTextEditorUrlModalComponent__url, _SkyTextEditorUrlModalComponent_getEmailUrl, _SkyTextEditorUrlModalComponent_isValid;
 const emailKey = 'mailto:';
 const queryStringParamKey = '?Subject=';
 /**
@@ -1101,14 +1065,16 @@ const queryStringParamKey = '?Subject=';
  */
 class SkyTextEditorUrlModalComponent {
     constructor(modalInstance, modalContext) {
-        this.modalInstance = modalInstance;
+        _SkyTextEditorUrlModalComponent_instances.add(this);
         this.emailAddressValid = false;
         this.subject = '';
         this.target = 0;
         this.valid = false;
-        this._activeTab = 0;
-        this._emailAddress = '';
-        this._url = 'https://';
+        _SkyTextEditorUrlModalComponent_modalInstance.set(this, void 0);
+        _SkyTextEditorUrlModalComponent__activeTab.set(this, 0);
+        _SkyTextEditorUrlModalComponent__emailAddress.set(this, '');
+        _SkyTextEditorUrlModalComponent__url.set(this, 'https://');
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent_modalInstance, modalInstance, "f");
         if (modalContext.urlResult) {
             if (modalContext.urlResult.url.startsWith(emailKey)) {
                 this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
@@ -1134,34 +1100,34 @@ class SkyTextEditorUrlModalComponent {
         }
     }
     set activeTab(value) {
-        this._activeTab = value;
-        this.valid = this.isValid();
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__activeTab, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
     }
     get activeTab() {
-        return this._activeTab;
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__activeTab, "f");
     }
     set emailAddress(value) {
-        this._emailAddress = value;
-        this.valid = this.isValid();
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__emailAddress, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
     }
     get emailAddress() {
-        return this._emailAddress;
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__emailAddress, "f");
     }
     set url(value) {
-        this._url = value;
-        this.valid = this.isValid();
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__url, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
     }
     get url() {
-        return this._url;
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__url, "f");
     }
     activeTabChanged(value) {
         this.activeTab = Number(value);
     }
     save() {
         /* istanbul ignore else */
-        if (this.isValid()) {
+        if (__classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this)) {
             if (this.activeTab === 0) {
-                this.modalInstance.save({
+                __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_modalInstance, "f").save({
                     url: this.url,
                     target: this.target
                         ? parseInt(this.target, undefined)
@@ -1169,93 +1135,102 @@ class SkyTextEditorUrlModalComponent {
                 });
             }
             else {
-                this.modalInstance.save({
-                    url: this.getEmailUrl(),
+                __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_modalInstance, "f").save({
+                    url: __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_getEmailUrl).call(this),
                     target: UrlTarget.None,
                 });
             }
         }
     }
     cancel() {
-        this.modalInstance.cancel();
-    }
-    getEmailUrl() {
-        return (emailKey +
-            this.emailAddress +
-            (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
-    }
-    isValid() {
-        if (this.activeTab === 0) {
-            return !!this.url && SkyValidation.isUrl(this.url);
-        }
-        return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
+        __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_modalInstance, "f").cancel();
     }
 }
-SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { kind: "component", type: i6.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
+_SkyTextEditorUrlModalComponent_modalInstance = new WeakMap(), _SkyTextEditorUrlModalComponent__activeTab = new WeakMap(), _SkyTextEditorUrlModalComponent__emailAddress = new WeakMap(), _SkyTextEditorUrlModalComponent__url = new WeakMap(), _SkyTextEditorUrlModalComponent_instances = new WeakSet(), _SkyTextEditorUrlModalComponent_getEmailUrl = function _SkyTextEditorUrlModalComponent_getEmailUrl() {
+    return (emailKey +
+        this.emailAddress +
+        (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
+}, _SkyTextEditorUrlModalComponent_isValid = function _SkyTextEditorUrlModalComponent_isValid() {
+    if (this.activeTab === 0) {
+        return !!this.url && SkyValidation.isUrl(this.url);
+    }
+    return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
+};
+SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$2.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "component", type: i1$2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaLabelledBy"] }, { kind: "component", type: i1$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { kind: "component", type: i6.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-editor-url-modal', template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
 
+var _SkyTextEditorToolbarComponent_instances, _SkyTextEditorToolbarComponent_editorFocusStreamSub, _SkyTextEditorToolbarComponent_adapterService, _SkyTextEditorToolbarComponent_changeDetector, _SkyTextEditorToolbarComponent_modalService, _SkyTextEditorToolbarComponent_ngUnsubscribe, _SkyTextEditorToolbarComponent__editorFocusStream, _SkyTextEditorToolbarComponent__disabled, _SkyTextEditorToolbarComponent__styleState, _SkyTextEditorToolbarComponent_subscribeEditorFocus, _SkyTextEditorToolbarComponent_closeDropdowns, _SkyTextEditorToolbarComponent_getFontName;
 /**
  * @internal
  */
 class SkyTextEditorToolbarComponent {
     constructor(adapterService, changeDetector, modalService) {
-        this.adapterService = adapterService;
-        this.changeDetector = changeDetector;
-        this.modalService = modalService;
-        this.editorFocusStream = new Subject();
+        _SkyTextEditorToolbarComponent_instances.add(this);
+        this.fontList = [];
+        this.fontSizeList = [];
+        this.toolbarActions = [];
         this.backColorpickerStream = new Subject();
         this.colorpickerStream = new Subject();
         this.fontPickerStream = new Subject();
         this.fontSizeStream = new Subject();
-        this._disabled = false;
-        this._styleState = STYLE_STATE_DEFAULTS;
-    }
-    get styleState() {
-        return this._styleState;
+        _SkyTextEditorToolbarComponent_editorFocusStreamSub.set(this, void 0);
+        _SkyTextEditorToolbarComponent_adapterService.set(this, void 0);
+        _SkyTextEditorToolbarComponent_changeDetector.set(this, void 0);
+        _SkyTextEditorToolbarComponent_modalService.set(this, void 0);
+        _SkyTextEditorToolbarComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTextEditorToolbarComponent__editorFocusStream.set(this, new Subject());
+        _SkyTextEditorToolbarComponent__disabled.set(this, false);
+        _SkyTextEditorToolbarComponent__styleState.set(this, STYLE_STATE_DEFAULTS);
+        __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_modalService, modalService, "f");
+    }
+    set editorFocusStream(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent__editorFocusStream, value, "f");
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_subscribeEditorFocus).call(this);
+    }
+    get editorFocusStream() {
+        return __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent__editorFocusStream, "f");
     }
     set styleState(value) {
-        this._styleState = value;
+        __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent__styleState, value, "f");
         if (value.font !== this.styleStateFontName) {
             if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
-                this.styleStateFontName = this.getFontName('Blackbaud Sans');
+                this.styleStateFontName = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_getFontName).call(this, 'Blackbaud Sans');
             }
             else {
-                this.styleStateFontName = this.getFontName(value.font);
+                this.styleStateFontName = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_getFontName).call(this, value.font);
             }
         }
     }
+    get styleState() {
+        return __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent__styleState, "f");
+    }
     set disabled(value) {
         const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
         if (coercedValue !== this.disabled) {
-            this._disabled = coercedValue;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent__disabled, coercedValue, "f");
+            __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_changeDetector, "f").markForCheck();
         }
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent__disabled, "f");
     }
     ngOnInit() {
-        this.editorFocusStream.subscribe(() => {
-            this.styleState = {
-                ...this._styleState,
-                ...this.adapterService.getStyleState(this.editorId),
-            };
-            this.closeDropdowns();
-            this.changeDetector.detectChanges();
-        });
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_subscribeEditorFocus).call(this);
     }
     execCommand(command, value = '') {
-        this.adapterService.execCommand(this.editorId, {
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").execCommand({
             command: command,
             value: value,
         });
         this.styleState = {
             ...this.styleState,
-            ...this.adapterService.getStyleState(this.editorId),
+            ...__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getStyleState(),
         };
     }
     toggleFontStyle(currentState, newState, command) {
@@ -1263,12 +1238,12 @@ class SkyTextEditorToolbarComponent {
             this.execCommand(command);
         }
         // Force sky-checkbox to show changes on user's initial click.
-        this.changeDetector.detectChanges();
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_changeDetector, "f").detectChanges();
     }
     link() {
-        const priorSelection = this.adapterService.saveSelection(this.editorId);
-        const currentLink = this.adapterService.getLink(this.editorId);
-        const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
+        const priorSelection = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").saveSelection();
+        const currentLink = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getLink();
+        const inputModal = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_modalService, "f").open(SkyTextEditorUrlModalComponent, [
             {
                 provide: SkyUrlModalContext,
                 useValue: { urlResult: currentLink },
@@ -1277,8 +1252,10 @@ class SkyTextEditorToolbarComponent {
         inputModal.closed.subscribe((result) => {
             if (result.reason === 'save' && priorSelection) {
                 if (currentLink) {
-                    const anchor = this.adapterService.getSelectedAnchorTag(this.editorId);
-                    this.adapterService.selectElement(this.editorId, anchor);
+                    const anchor = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getSelectedAnchorTag();
+                    if (anchor) {
+                        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").selectElement(anchor);
+                    }
                 }
                 this.execCommand('unlink');
                 if (result.data.target === UrlTarget.None) {
@@ -1287,7 +1264,7 @@ class SkyTextEditorToolbarComponent {
                 }
                 else {
                     // New Window
-                    const sText = this.adapterService.getCurrentSelection(this.editorId);
+                    const sText = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getCurrentSelection();
                     this.execCommand('insertHTML', '<a href="' +
                         result.data.url +
                         '" rel="noopener noreferrer" target="_blank">' +
@@ -1298,50 +1275,63 @@ class SkyTextEditorToolbarComponent {
         });
     }
     unlink() {
-        const currentSelectionRange = this.adapterService
-            .getCurrentSelection(this.editorId)
-            .getRangeAt(0);
-        if (currentSelectionRange.toString().length <= 0) {
-            const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
-            this.adapterService.selectElement(this.editorId, anchorTag);
+        const currentSelectionRange = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f")
+            .getCurrentSelection()
+            ?.getRangeAt(0);
+        if (currentSelectionRange && currentSelectionRange.toString().length <= 0) {
+            const anchorTag = __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getSelectedAnchorTag();
+            if (anchorTag) {
+                __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").selectElement(anchorTag);
+            }
         }
         this.execCommand('unlink');
     }
     changeFontSize(size) {
-        this.adapterService.setFontSize(this.editorId, size);
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").setFontSize(size);
         this.styleState = {
             ...this.styleState,
-            ...this.adapterService.getStyleState(this.editorId),
+            ...__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getStyleState(),
         };
     }
     onColorpickerColorChanged(color, isBackground = false) {
         this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
     }
-    closeDropdowns() {
-        const message = {
-            type: SkyColorpickerMessageType.Close,
+}
+_SkyTextEditorToolbarComponent_editorFocusStreamSub = new WeakMap(), _SkyTextEditorToolbarComponent_adapterService = new WeakMap(), _SkyTextEditorToolbarComponent_changeDetector = new WeakMap(), _SkyTextEditorToolbarComponent_modalService = new WeakMap(), _SkyTextEditorToolbarComponent_ngUnsubscribe = new WeakMap(), _SkyTextEditorToolbarComponent__editorFocusStream = new WeakMap(), _SkyTextEditorToolbarComponent__disabled = new WeakMap(), _SkyTextEditorToolbarComponent__styleState = new WeakMap(), _SkyTextEditorToolbarComponent_instances = new WeakSet(), _SkyTextEditorToolbarComponent_subscribeEditorFocus = function _SkyTextEditorToolbarComponent_subscribeEditorFocus() {
+    __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_editorFocusStreamSub, "f")?.unsubscribe();
+    __classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_editorFocusStreamSub, this.editorFocusStream
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        this.styleState = {
+            ...this.styleState,
+            ...__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_adapterService, "f").getStyleState(),
         };
-        this.colorpickerStream.next(message);
-        this.backColorpickerStream.next(message);
-        this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
-        this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
-    }
-    getFontName(fontName) {
-        for (let i = 0; i < this.fontList.length; i++) {
-            if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
-                return this.fontList[i].name;
-            }
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_closeDropdowns).call(this);
+        __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_changeDetector, "f").detectChanges();
+    }), "f");
+}, _SkyTextEditorToolbarComponent_closeDropdowns = function _SkyTextEditorToolbarComponent_closeDropdowns() {
+    const message = {
+        type: SkyColorpickerMessageType.Close,
+    };
+    this.colorpickerStream.next(message);
+    this.backColorpickerStream.next(message);
+    this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
+    this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
+}, _SkyTextEditorToolbarComponent_getFontName = function _SkyTextEditorToolbarComponent_getFontName(fontName) {
+    for (let i = 0; i < this.fontList.length; i++) {
+        if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
+            return this.fontList[i].name;
         }
     }
-}
-SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
+    /* istanbul ignore next */
+    return undefined;
+};
+SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
-                type: Input
-            }], editorId: [{
+        }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
                 type: Input
             }], fontList: [{
                 type: Input
@@ -1355,68 +1345,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }] } });
 
-/**
- * Auto-incrementing integer used to generate unique ids for radio components.
- */
-let nextUniqueId = 0;
+var _SkyTextEditorComponent_instances, _SkyTextEditorComponent_defaultId, _SkyTextEditorComponent_id, _SkyTextEditorComponent_focusInitialized, _SkyTextEditorComponent_initialized, _SkyTextEditorComponent_ngUnsubscribe, _SkyTextEditorComponent_changeDetector, _SkyTextEditorComponent_coreAdapterService, _SkyTextEditorComponent_adapterService, _SkyTextEditorComponent_editorService, _SkyTextEditorComponent_sanitizationService, _SkyTextEditorComponent_ngControl, _SkyTextEditorComponent_zone, _SkyTextEditorComponent__fontList, _SkyTextEditorComponent__fontSizeList, _SkyTextEditorComponent__mergeFields, _SkyTextEditorComponent__menus, _SkyTextEditorComponent__toolbarActions, _SkyTextEditorComponent__disabled, _SkyTextEditorComponent__initialStyleState, _SkyTextEditorComponent__placeholder, _SkyTextEditorComponent__value, _SkyTextEditorComponent_updateStyle, _SkyTextEditorComponent_initIframe, _SkyTextEditorComponent_viewToModelUpdate;
 /**
  * The text editor component lets users format and manipulate text.
  */
 class SkyTextEditorComponent {
-    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone) {
-        this.changeDetector = changeDetector;
-        this.coreAdapterService = coreAdapterService;
-        this.adapterService = adapterService;
-        this.editorService = editorService;
-        this.sanitizationService = sanitizationService;
-        this.ngControl = ngControl;
-        this.zone = zone;
+    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
+        _SkyTextEditorComponent_instances.add(this);
         /**
          * Indicates whether to put focus on the editor after it renders.
          */
         this.autofocus = false;
         this.editorFocusStream = new Subject();
-        /**
-         * Specifies the fonts to include in the font picker.
-         * @default [{name: 'Blackbaud Sans', value: '"Blackbaud Sans", Arial, sans-serif'}, {name: 'Arial', value: 'Arial'}, {name: 'Arial Black', value: '"Arial Black"'}, {name: 'Courier New', value: '"Courier New"'}, {name: 'Georgia', value: 'Georgia, serif'}, {name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif'}, {name: 'Times New Roman', value: '"Times New Roman"'}, {name: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif'}, {name: 'Verdana', value: 'Verdana, Geneva, sans-serif'}]
-         */
-        this.fontList = FONT_LIST_DEFAULTS;
-        /**
-         * Specifies the font sizes to include in the font size picker.
-         * @default [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48]
-         */
-        this.fontSizeList = FONT_SIZE_LIST_DEFAULTS;
-        /**
-         * Specifies a unique ID attribute for the text editor.
-         * By default, the component generates a random ID.
-         */
-        this.id = `sky-text-editor-${++nextUniqueId}`;
-        /**
-         * Specifies the menus to include in the menu bar.
-         * @default [ 'edit', 'format' ]
-         */
-        this.menus = MENU_DEFAULTS;
-        /**
-         * Specifies the merge fields to include in the merge field menu.
-         */
-        this.mergeFields = [];
-        /**
-         * Specifies the actions to include in the toolbar and determines their order.
-         * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
-         */
-        this.toolbarActions = TOOLBAR_ACTION_DEFAULTS;
-        this.focusInitialized = false;
-        this.initialized = false;
-        this.ngUnsubscribe = new Subject();
-        this._disabled = false;
-        this._initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
-        this._placeholder = '';
-        this._value = '<p></p>';
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._onTouched = () => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._onChange = () => { };
-        this.ngControl.valueAccessor = this;
+        _SkyTextEditorComponent_defaultId.set(this, void 0);
+        _SkyTextEditorComponent_id.set(this, void 0);
+        _SkyTextEditorComponent_focusInitialized.set(this, false);
+        _SkyTextEditorComponent_initialized.set(this, false);
+        _SkyTextEditorComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTextEditorComponent_changeDetector.set(this, void 0);
+        _SkyTextEditorComponent_coreAdapterService.set(this, void 0);
+        _SkyTextEditorComponent_adapterService.set(this, void 0);
+        _SkyTextEditorComponent_editorService.set(this, void 0);
+        _SkyTextEditorComponent_sanitizationService.set(this, void 0);
+        _SkyTextEditorComponent_ngControl.set(this, void 0);
+        _SkyTextEditorComponent_zone.set(this, void 0);
+        _SkyTextEditorComponent__fontList.set(this, FONT_LIST_DEFAULTS);
+        _SkyTextEditorComponent__fontSizeList.set(this, FONT_SIZE_LIST_DEFAULTS);
+        _SkyTextEditorComponent__mergeFields.set(this, []);
+        _SkyTextEditorComponent__menus.set(this, MENU_DEFAULTS);
+        _SkyTextEditorComponent__toolbarActions.set(this, TOOLBAR_ACTION_DEFAULTS);
+        _SkyTextEditorComponent__disabled.set(this, false);
+        _SkyTextEditorComponent__initialStyleState.set(this, Object.assign({}, STYLE_STATE_DEFAULTS));
+        _SkyTextEditorComponent__placeholder.set(this, '');
+        _SkyTextEditorComponent__value.set(this, '<p></p>');
+        /* istanbul ignore next */
+        this._onTouched = () => {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+        };
+        /* istanbul ignore next */
+        this._onChange = () => {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+        };
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_coreAdapterService, coreAdapterService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_editorService, editorService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_sanitizationService, sanitizationService, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_ngControl, ngControl, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_zone, zone, "f");
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_id, __classPrivateFieldSet(this, _SkyTextEditorComponent_defaultId, idSvc.generateId(), "f"), "f");
+        ngControl.valueAccessor = this;
     }
     /**
      * Indicates whether to disable the text editor.
@@ -1425,27 +1403,57 @@ class SkyTextEditorComponent {
     set disabled(value) {
         const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
         if (coercedValue !== this.disabled) {
-            this._disabled = coercedValue;
+            __classPrivateFieldSet(this, _SkyTextEditorComponent__disabled, coercedValue, "f");
             // Update focusableChildren inside the iframe.
             let focusableChildren;
             /* istanbul ignore else */
             if (this.iframeRef) {
-                focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
+                focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
                     ignoreVisibility: true,
                     ignoreTabIndex: true,
                 });
+                if (__classPrivateFieldGet(this, _SkyTextEditorComponent__disabled, "f")) {
+                    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef.nativeElement);
+                }
+                else {
+                    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef.nativeElement);
+                }
+                __classPrivateFieldGet(this, _SkyTextEditorComponent_changeDetector, "f").markForCheck();
             }
-            if (this._disabled) {
-                this.adapterService.disableEditor(this.id, focusableChildren, this.iframeRef.nativeElement);
-            }
-            else {
-                this.adapterService.enableEditor(this.id, focusableChildren, this.iframeRef.nativeElement);
-            }
-            this.changeDetector.markForCheck();
         }
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__disabled, "f");
+    }
+    /**
+     * 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'}]
+     */
+    set fontList(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent__fontList, value || FONT_LIST_DEFAULTS, "f");
+    }
+    get fontList() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__fontList, "f");
+    }
+    /**
+     * Specifies the font sizes to include in the font size picker.
+     * @default [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48]
+     */
+    set fontSizeList(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent__fontSizeList, value || FONT_SIZE_LIST_DEFAULTS, "f");
+    }
+    get fontSizeList() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__fontSizeList, "f");
+    }
+    /**
+     * Specifies a unique ID attribute for the text editor.
+     * By default, the component generates a random ID.
+     */
+    set id(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent_id, value || __classPrivateFieldGet(this, _SkyTextEditorComponent_defaultId, "f"), "f");
+    }
+    get id() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent_id, "f");
     }
     /**
      * Specifies the initial styles for all content, including background color, font size, and link state.
@@ -1453,83 +1461,110 @@ class SkyTextEditorComponent {
     set initialStyleState(state) {
         // Do not update the state after initialization has taken place
         /* istanbul ignore else */
-        if (!this.initialized) {
-            this._initialStyleState = {
+        if (!__classPrivateFieldGet(this, _SkyTextEditorComponent_initialized, "f")) {
+            __classPrivateFieldSet(this, _SkyTextEditorComponent__initialStyleState, {
                 ...STYLE_STATE_DEFAULTS,
                 ...state,
-            };
+            }, "f");
         }
     }
     get initialStyleState() {
-        return this._initialStyleState;
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__initialStyleState, "f");
+    }
+    /**
+     * Specifies the menus to include in the menu bar.
+     * @default [ 'edit', 'format' ]
+     */
+    set menus(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent__menus, value || MENU_DEFAULTS, "f");
+    }
+    get menus() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__menus, "f");
+    }
+    /**
+     * Specifies the merge fields to include in the merge field menu.
+     */
+    set mergeFields(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent__mergeFields, value || [], "f");
+    }
+    get mergeFields() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__mergeFields, "f");
     }
     /**
      * Specifies placeholder text to display when the text entry area is empty.
      */
     set placeholder(value) {
         /* istanbul ignore else */
-        if (value !== this._placeholder) {
-            this._placeholder = value;
-            if (this.initialized) {
-                this.adapterService.setPlaceholder(this.id, value);
+        if (value !== __classPrivateFieldGet(this, _SkyTextEditorComponent__placeholder, "f")) {
+            __classPrivateFieldSet(this, _SkyTextEditorComponent__placeholder, value || '', "f");
+            if (__classPrivateFieldGet(this, _SkyTextEditorComponent_initialized, "f")) {
+                __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").setPlaceholder(value);
             }
         }
     }
     get placeholder() {
-        return this._placeholder;
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__placeholder, "f");
+    }
+    /**
+     * Specifies the actions to include in the toolbar and determines their order.
+     * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
+     */
+    set toolbarActions(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorComponent__toolbarActions, value || TOOLBAR_ACTION_DEFAULTS, "f");
+    }
+    get toolbarActions() {
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__toolbarActions, "f");
     }
     /**
      * The internal value of the control.
      */
     set value(value) {
         // Normalize value and set any empty state to an empty string.
-        let normalizedValue = value;
+        let normalizedValue;
+        const valueTrimmed = value?.trim();
         if (!value ||
-            value.trim() === '<p></p>' ||
-            value.trim() === '<br>' ||
-            value.trim() === '<p><br></p>') {
+            valueTrimmed === '<p></p>' ||
+            valueTrimmed === '<br>' ||
+            valueTrimmed === '<p><br></p>') {
             normalizedValue = '';
         }
-        normalizedValue = this.sanitizationService.sanitize(normalizedValue).trim();
-        if (this._value !== normalizedValue) {
-            this._value = normalizedValue;
+        else {
+            normalizedValue = value;
+        }
+        normalizedValue = __classPrivateFieldGet(this, _SkyTextEditorComponent_sanitizationService, "f")
+            .sanitize(normalizedValue)
+            .trim();
+        if (__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f") !== normalizedValue) {
+            __classPrivateFieldSet(this, _SkyTextEditorComponent__value, normalizedValue, "f");
             // 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,
-                    });
-                }
+            if (__classPrivateFieldGet(this, _SkyTextEditorComponent_ngControl, "f")?.control &&
+                normalizedValue !== __classPrivateFieldGet(this, _SkyTextEditorComponent_ngControl, "f").control.value) {
+                __classPrivateFieldGet(this, _SkyTextEditorComponent_ngControl, "f").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;
+            if (this.autofocus && !__classPrivateFieldGet(this, _SkyTextEditorComponent_focusInitialized, "f")) {
+                __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").focusEditor();
+                __classPrivateFieldSet(this, _SkyTextEditorComponent_focusInitialized, true, "f");
             }
         }
     }
     get value() {
-        return this._value;
+        return __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f");
     }
     ngAfterViewInit() {
-        this.initIframe();
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
     }
     ngOnDestroy() {
-        this.adapterService.removeObservers(this.editorService.editors[this.id]);
-        this.editorService.removeEditor(this.id);
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").removeObservers(__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").editor);
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").complete();
     }
     onIframeLoad() {
-        // Remove editor if it already exists to cover situations where the text editor might have been moved in the DOM.
-        /* istanbul ignore else */
-        if (this.editorService.editors[this.id]) {
-            this.editorService.removeEditor(this.id);
-            this.initIframe();
-        }
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
     }
     /**
      * Implemented as part of ControlValueAccessor.
@@ -1537,14 +1572,17 @@ class SkyTextEditorComponent {
     writeValue(value) {
         this.value = value;
         // Update HTML if necessary.
-        const editorValue = this.adapterService.getEditorInnerHtml(this.id);
-        if (this.initialized && editorValue !== this._value) {
-            this.adapterService.setEditorInnerHtml(this.id, this._value);
+        if (__classPrivateFieldGet(this, _SkyTextEditorComponent_initialized, "f")) {
+            const editorValue = __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getEditorInnerHtml();
+            if (editorValue !== __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f")) {
+                __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").setEditorInnerHtml(__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
+            }
         }
     }
     /**
      * Implemented as part of ControlValueAccessor.
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnChange(fn) {
         this._onChange = fn;
     }
@@ -1560,75 +1598,81 @@ class SkyTextEditorComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    updateStyle() {
-        this._initialStyleState = {
-            ...this._initialStyleState,
-            ...this.adapterService.getStyleState(this.id),
-        };
-    }
-    initIframe() {
-        this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
-        this.editorService
-            .inputListener(this.id)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            // Angular doesn't run change detection for changes originating inside an iframe,
-            // so we have to call the onChange() event inside NgZone to force change propigation to consuming components.
-            this.zone.run(() => {
-                this.ViewToModelUpdate();
-            });
-        });
-        this.editorService
-            .selectionChangeListener(this.id)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.updateStyle();
-            this.editorFocusStream.next();
-        });
-        this.editorService
-            .clickListener(this.id)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.editorFocusStream.next();
-        });
-        this.editorService
-            .blurListener(this.id)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            // Angular doesn't run change detection for changes originating inside an iframe,
-            // so we have to run markForCheck() inside the NgZone to force change propigation to consuming components.
-            this.zone.run(() => {
-                this._onTouched();
-            });
+}
+_SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id = new WeakMap(), _SkyTextEditorComponent_focusInitialized = new WeakMap(), _SkyTextEditorComponent_initialized = new WeakMap(), _SkyTextEditorComponent_ngUnsubscribe = new WeakMap(), _SkyTextEditorComponent_changeDetector = new WeakMap(), _SkyTextEditorComponent_coreAdapterService = new WeakMap(), _SkyTextEditorComponent_adapterService = new WeakMap(), _SkyTextEditorComponent_editorService = new WeakMap(), _SkyTextEditorComponent_sanitizationService = new WeakMap(), _SkyTextEditorComponent_ngControl = new WeakMap(), _SkyTextEditorComponent_zone = new WeakMap(), _SkyTextEditorComponent__fontList = new WeakMap(), _SkyTextEditorComponent__fontSizeList = new WeakMap(), _SkyTextEditorComponent__mergeFields = new WeakMap(), _SkyTextEditorComponent__menus = new WeakMap(), _SkyTextEditorComponent__toolbarActions = new WeakMap(), _SkyTextEditorComponent__disabled = new WeakMap(), _SkyTextEditorComponent__initialStyleState = new WeakMap(), _SkyTextEditorComponent__placeholder = new WeakMap(), _SkyTextEditorComponent__value = new WeakMap(), _SkyTextEditorComponent_instances = new WeakSet(), _SkyTextEditorComponent_updateStyle = function _SkyTextEditorComponent_updateStyle() {
+    __classPrivateFieldSet(this, _SkyTextEditorComponent__initialStyleState, {
+        ...__classPrivateFieldGet(this, _SkyTextEditorComponent__initialStyleState, "f"),
+        ...__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getStyleState(),
+    }, "f");
+}, _SkyTextEditorComponent_initIframe = function _SkyTextEditorComponent_initIframe() {
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").initEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
+        .inputListener()
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        // Angular doesn't run change detection for changes originating inside an iframe,
+        // so we have to call the onChange() event inside NgZone to force change propigation to consuming components.
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
+            __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
         });
-        this.editorService
-            .commandChangeListener(this.id)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.updateStyle();
-            this.ViewToModelUpdate();
+    });
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
+        .selectionChangeListener()
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
+        this.editorFocusStream.next();
+    });
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
+        .clickListener()
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        this.editorFocusStream.next();
+    });
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
+        .blurListener()
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        // Angular doesn't run change detection for changes originating inside an iframe,
+        // so we have to run markForCheck() inside the NgZone to force change propigation to consuming components.
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
+            this._onTouched();
         });
-        this.adapterService.setEditorInnerHtml(this.id, this._value);
-        /* istanbul ignore next */
-        if (this.autofocus) {
-            this.adapterService.focusEditor(this.id);
-        }
-        this.initialized = true;
+    });
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
+        .commandChangeListener()
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
+    });
+    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").setEditorInnerHtml(__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
+    /* istanbul ignore next */
+    if (this.autofocus) {
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").focusEditor();
     }
-    ViewToModelUpdate(emitChange = true) {
-        this.value = this.adapterService.getEditorInnerHtml(this.id);
-        /* istanbul ignore else */
-        if (emitChange) {
-            this._onChange(this._value);
-        }
+    __classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
+}, _SkyTextEditorComponent_viewToModelUpdate = function _SkyTextEditorComponent_viewToModelUpdate(emitChange = true) {
+    this.value = __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getEditorInnerHtml();
+    /* istanbul ignore else */
+    if (emitChange) {
+        this._onChange(__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
     }
-}
-SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i3$2.NgControl }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextEditorComponent, selector: "sky-text-editor", inputs: { autofocus: "autofocus", disabled: "disabled", fontList: "fontList", fontSizeList: "fontSizeList", id: "id", initialStyleState: "initialStyleState", menus: "menus", mergeFields: "mergeFields", placeholder: "placeholder", toolbarActions: "toolbarActions" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"menus?.length > 0 || toolbarActions?.length > 0\"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus?.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions?.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [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"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "editorId", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "editorId", "menus", "mergeFields", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
+};
+SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i3$1.NgControl }, { token: i0.NgZone }, { token: i1$1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", 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: [
+        SkyTextEditorService,
+        SkyTextEditorSelectionService,
+        SkyTextEditorAdapterService,
+    ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"\n      (menus && menus.length) > 0 ||\n      (toolbarActions && toolbarActions.length > 0)\n    \"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus && menus.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n    #iframe\n  >\n  </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"menus?.length > 0 || toolbarActions?.length > 0\"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus?.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions?.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [editorId]=\"id\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n    #iframe\n  >\n  </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i3$2.NgControl }, { type: i0.NgZone }]; }, propDecorators: { autofocus: [{
+            args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        SkyTextEditorService,
+                        SkyTextEditorSelectionService,
+                        SkyTextEditorAdapterService,
+                    ], template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"\n      (menus && menus.length) > 0 ||\n      (toolbarActions && toolbarActions.length > 0)\n    \"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus && menus.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n    #iframe\n  >\n  </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i3$1.NgControl }, { type: i0.NgZone }, { type: i1$1.SkyIdService }]; }, propDecorators: { autofocus: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1655,8 +1699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
 
 class SkyTextEditorModule {
 }
-SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
+SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent], imports: [CommonModule,
@@ -1678,7 +1722,7 @@ SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent] });
-SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
+SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         SkyCoreAdapterModule,
@@ -1694,7 +1738,7 @@ SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         SkyTabsModule,
         SkyThemeModule,
         SkyToolbarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTextEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [