@skyux/text-editor 8.0.0-alpha.2 → 8.0.0-alpha.21

package/fesm2020/skyux-text-editor.mjs

@@ -1,7 +1,7 @@
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation } 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';
@@ -62,9 +62,9 @@ class SkyTextSanitizationService {
     }
 }
 _SkyTextSanitizationService_allowedAttributes = new WeakMap();
-SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
+SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -73,14 +73,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 var _SkyRichTextDisplayComponent__richText, _SkyRichTextDisplayComponent_sanitizer, _SkyRichTextDisplayComponent_sanitizationService;
 class SkyRichTextDisplayComponent {
-    constructor(sanitizer, sanitizationService) {
-        this.sanitizedText = '';
-        _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");
-    }
     /**
      * The rich text to display.
      */
@@ -99,11 +91,19 @@ class SkyRichTextDisplayComponent {
             this.sanitizedText = '';
         }
     }
+    constructor(sanitizer, sanitizationService) {
+        this.sanitizedText = '';
+        _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");
+    }
 }
 _SkyRichTextDisplayComponent__richText = new WeakMap(), _SkyRichTextDisplayComponent_sanitizer = new WeakMap(), _SkyRichTextDisplayComponent_sanitizationService = new WeakMap();
-SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
-SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
+SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
+SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
         }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
@@ -112,10 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyRichTextDisplayModule {
 }
-SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
-SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
+SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
+SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -204,16 +204,16 @@ class SkyTextEditorResourcesProvider {
  */
 class SkyTextEditorResourcesModule {
 }
-SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
-SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
+SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
+SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyTextEditorResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -368,31 +368,34 @@ class SkyTextEditorSelectionService {
         }
     }
 }
-SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
+SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
             type: Injectable
         }] });
 
-var _SkyTextEditorService__editor;
+var _SkyTextEditorService_editor;
 /**
  * @internal
  */
 class SkyTextEditorService {
     constructor() {
-        _SkyTextEditorService__editor.set(this, void 0);
+        _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");
+        __classPrivateFieldSet(this, _SkyTextEditorService_editor, value, "f");
     }
     get editor() {
-        if (!__classPrivateFieldGet(this, _SkyTextEditorService__editor, "f")) {
+        if (!__classPrivateFieldGet(this, _SkyTextEditorService_editor, "f")) {
             throw new Error('Editor has not been initialized.');
         }
-        return __classPrivateFieldGet(this, _SkyTextEditorService__editor, "f");
+        return __classPrivateFieldGet(this, _SkyTextEditorService_editor, "f");
+    }
+    get isInitialized() {
+        return __classPrivateFieldGet(this, _SkyTextEditorService_editor, "f") !== undefined;
     }
     /**
      * Returns the blur observable from the editor with the corresponding id.
@@ -425,10 +428,10 @@ class SkyTextEditorService {
         return this.editor.selectionChangeObservable;
     }
 }
-_SkyTextEditorService__editor = new WeakMap();
-SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorService, decorators: [{
+_SkyTextEditorService_editor = new WeakMap();
+SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, decorators: [{
             type: Injectable
         }] });
 
@@ -838,9 +841,9 @@ _SkyTextEditorAdapterService_selectionService = new WeakMap(), _SkyTextEditorAda
     }
     __classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
 };
-SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyTextEditorAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
+SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyTextEditorAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i1$1.SkyAppWindowRef }]; } });
 
@@ -851,6 +854,16 @@ const EDIT_MENU_ACTION = 'skyux_text_editor_edit_menu_action_';
  * @internal
  */
 class SkyTextEditorMenubarComponent {
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent__disabled, coercedValue, "f");
+            __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_changeDetector, "f").markForCheck();
+        }
+    }
+    get disabled() {
+        return __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent__disabled, "f");
+    }
     constructor(adapterService, changeDetector, resources) {
         _SkyTextEditorMenubarComponent_instances.add(this);
         this.editorFocusStream = new Subject();
@@ -868,16 +881,6 @@ class SkyTextEditorMenubarComponent {
         __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_resources, resources, "f");
     }
-    set disabled(value) {
-        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-        if (coercedValue !== this.disabled) {
-            __classPrivateFieldSet(this, _SkyTextEditorMenubarComponent__disabled, coercedValue, "f");
-            __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_changeDetector, "f").markForCheck();
-        }
-    }
-    get disabled() {
-        return __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent__disabled, "f");
-    }
     ngOnInit() {
         this.editorFocusStream
             .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f")))
@@ -1012,9 +1015,9 @@ _SkyTextEditorMenubarComponent__disabled = new WeakMap(), _SkyTextEditorMenubarC
     }
     this.execCommand('removeFormat');
 };
-SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
+SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem?.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem?.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
@@ -1064,6 +1067,27 @@ const queryStringParamKey = '?Subject=';
  * @internal
  */
 class SkyTextEditorUrlModalComponent {
+    set activeTab(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__activeTab, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
+    }
+    get activeTab() {
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__activeTab, "f");
+    }
+    set emailAddress(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__emailAddress, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
+    }
+    get emailAddress() {
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__emailAddress, "f");
+    }
+    set url(value) {
+        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__url, value, "f");
+        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
+    }
+    get url() {
+        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__url, "f");
+    }
     constructor(modalInstance, modalContext) {
         _SkyTextEditorUrlModalComponent_instances.add(this);
         this.emailAddressValid = false;
@@ -1099,27 +1123,6 @@ class SkyTextEditorUrlModalComponent {
             }
         }
     }
-    set activeTab(value) {
-        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__activeTab, value, "f");
-        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
-    }
-    get activeTab() {
-        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__activeTab, "f");
-    }
-    set emailAddress(value) {
-        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__emailAddress, value, "f");
-        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
-    }
-    get emailAddress() {
-        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__emailAddress, "f");
-    }
-    set url(value) {
-        __classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__url, value, "f");
-        this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
-    }
-    get url() {
-        return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__url, "f");
-    }
     activeTabChanged(value) {
         this.activeTab = Number(value);
     }
@@ -1156,9 +1159,9 @@ _SkyTextEditorUrlModalComponent_modalInstance = new WeakMap(), _SkyTextEditorUrl
     }
     return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
 };
-SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$2.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6.λ1, 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: "15.1.4", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
+SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$2.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6.λ1, 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: "15.2.1", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-editor-url-modal', template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
@@ -1168,27 +1171,6 @@ var _SkyTextEditorToolbarComponent_instances, _SkyTextEditorToolbarComponent_edi
  * @internal
  */
 class SkyTextEditorToolbarComponent {
-    constructor(adapterService, changeDetector, modalService) {
-        _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();
-        _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);
@@ -1220,6 +1202,27 @@ class SkyTextEditorToolbarComponent {
     get disabled() {
         return __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent__disabled, "f");
     }
+    constructor(adapterService, changeDetector, modalService) {
+        _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();
+        _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");
+    }
     ngOnInit() {
         __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_subscribeEditorFocus).call(this);
     }
@@ -1326,9 +1329,9 @@ _SkyTextEditorToolbarComponent_editorFocusStreamSub = new WeakMap(), _SkyTextEdi
     /* istanbul ignore next */
     return undefined;
 };
-SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", 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", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
+SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", 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$2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
@@ -1350,52 +1353,6 @@ var _SkyTextEditorComponent_instances, _SkyTextEditorComponent_defaultId, _SkyTe
  * The text editor component lets users format and manipulate text.
  */
 class SkyTextEditorComponent {
-    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
-        _SkyTextEditorComponent_instances.add(this);
-        /**
-         * Whether to put focus on the editor after it renders.
-         */
-        this.autofocus = false;
-        this.editorFocusStream = new Subject();
-        _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 */
-        _SkyTextEditorComponent__onTouched.set(this, () => {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-        });
-        /* istanbul ignore next */
-        _SkyTextEditorComponent__onChange.set(this, () => {
-            // 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;
-    }
     /**
      * Whether to disable the text editor.
      * @default false
@@ -1408,15 +1365,15 @@ class SkyTextEditorComponent {
             let focusableChildren;
             /* istanbul ignore else */
             if (this.iframeRef) {
-                focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.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);
+                    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef.nativeElement);
                 }
                 else {
-                    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef);
+                    __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef.nativeElement);
                 }
                 __classPrivateFieldGet(this, _SkyTextEditorComponent_changeDetector, "f").markForCheck();
             }
@@ -1558,14 +1515,65 @@ class SkyTextEditorComponent {
     get value() {
         return __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f");
     }
+    constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
+        _SkyTextEditorComponent_instances.add(this);
+        /**
+         * Whether to put focus on the editor after it renders.
+         */
+        this.autofocus = false;
+        this.editorFocusStream = new Subject();
+        _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 */
+        _SkyTextEditorComponent__onTouched.set(this, () => {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+        });
+        /* istanbul ignore next */
+        _SkyTextEditorComponent__onChange.set(this, () => {
+            // 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;
+    }
+    ngAfterViewInit() {
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
+    }
     ngOnDestroy() {
         __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(event) {
-        this.iframeRef = event.target;
-        __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
+    onIframeLoad() {
+        // Reinitialize the editor if it already exists to cover situations where the text editor might have been moved in the DOM.
+        if (__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").isInitialized) {
+            __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
+        }
     }
     /**
      * Implemented as part of ControlValueAccessor.
@@ -1606,55 +1614,53 @@ _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id =
         ...__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getStyleState(),
     }, "f");
 }, _SkyTextEditorComponent_initIframe = function _SkyTextEditorComponent_initIframe() {
-    if (this.iframeRef) {
-        __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").initEditor(this.id, this.iframeRef, 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 propagation to consuming components.
-            __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
-                __classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
-            });
-        });
-        __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 #_onTouched() inside the NgZone to force change propagation to consuming components.
-            __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
-                __classPrivateFieldGet(this, _SkyTextEditorComponent__onTouched, "f").call(this);
-            });
-        });
-        __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_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 propagation to consuming components.
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
             __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();
-        }
-        __classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
+    });
+    __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 propagation to consuming components.
+        __classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
+            __classPrivateFieldGet(this, _SkyTextEditorComponent__onTouched, "f").call(this);
+        });
+    });
+    __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();
     }
+    __classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
 }, _SkyTextEditorComponent_viewToModelUpdate = function _SkyTextEditorComponent_viewToModelUpdate(emitChange = true) {
     this.value = __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getEditorInnerHtml();
     /* istanbul ignore else */
@@ -1662,19 +1668,19 @@ _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id =
         __classPrivateFieldGet(this, _SkyTextEditorComponent__onChange, "f").call(this, __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
     }
 };
-SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", 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: [
+SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", 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,
-    ], 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($event)\"\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: "15.1.4", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
+    ], 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: "15.2.1", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         SkyTextEditorService,
                         SkyTextEditorSelectionService,
                         SkyTextEditorAdapterService,
-                    ], template: "<div class=\"sky-text-editor\">\n  <sky-toolbar\n    *ngIf=\"\n      (menus && menus.length) > 0 ||\n      (toolbarActions && toolbarActions.length > 0)\n    \"\n    class=\"sky-text-editor-toolbar\"\n  >\n    <sky-toolbar-section\n      *ngIf=\"menus && menus.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"menubar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-menubar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [menus]=\"menus\"\n        [mergeFields]=\"mergeFields\"\n      >\n      </sky-text-editor-menubar>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n      *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n      aria-label=\"Text formatting\"\n      class=\"toolbar\"\n      role=\"toolbar\"\n    >\n      <sky-text-editor-toolbar\n        [disabled]=\"disabled\"\n        [editorFocusStream]=\"editorFocusStream\"\n        [fontList]=\"fontList\"\n        [fontSizeList]=\"fontSizeList\"\n        [toolbarActions]=\"toolbarActions\"\n        [styleState]=\"initialStyleState\"\n      >\n      </sky-text-editor-toolbar>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    title=\"Text Editor\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad($event)\"\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"] }]
+                    ], 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: [{
@@ -1695,12 +1701,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], toolbarActions: [{
                 type: Input
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['iframe']
             }] } });
 
 class SkyTextEditorModule {
 }
-SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
+SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent], imports: [CommonModule,
@@ -1722,7 +1731,7 @@ SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         SkyTextEditorUrlModalComponent,
         SkyTextEditorToolbarComponent,
         SkyTextEditorMenubarComponent] });
-SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
+SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         SkyCoreAdapterModule,
@@ -1738,7 +1747,7 @@ SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         SkyTabsModule,
         SkyThemeModule,
         SkyToolbarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [