@skyux/text-editor 8.0.0-alpha.9 → 8.0.0-beta.0

package/fesm2015/skyux-text-editor.mjs

@@ -1,10 +1,10 @@
 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 * as createDOMPurify from 'dompurify';
+import createDOMPurify from 'dompurify';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i6$1 from '@skyux/colorpicker';
@@ -27,7 +27,7 @@ import * as i6 from '@skyux/tabs';
 import { SkyTabsModule } from '@skyux/tabs';
 import * as i5 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import * as he from 'he';
+import he from 'he';
 import { Subject } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import { SkyValidation } from '@skyux/validation';
@@ -376,25 +376,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             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.
@@ -427,7 +430,7 @@ class SkyTextEditorService {
         return this.editor.selectionChangeObservable;
     }
 }
-_SkyTextEditorService__editor = new WeakMap();
+_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: [{
@@ -1349,7 +1352,6 @@ class SkyTextEditorComponent {
      * @default false
      */
     set disabled(value) {
-        var _a;
         const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
         if (coercedValue !== this.disabled) {
             __classPrivateFieldSet(this, _SkyTextEditorComponent__disabled, coercedValue, "f");
@@ -1357,15 +1359,15 @@ class SkyTextEditorComponent {
             let focusableChildren;
             /* istanbul ignore else */
             if (this.iframeRef) {
-                focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren((_a = this.iframeRef.contentDocument) === null || _a === void 0 ? void 0 : _a.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();
             }
@@ -1551,14 +1553,19 @@ class SkyTextEditorComponent {
         __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.
@@ -1596,55 +1603,53 @@ class SkyTextEditorComponent {
 _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id = new WeakMap(), _SkyTextEditorComponent_focusInitialized = new WeakMap(), _SkyTextEditorComponent_initialized = new WeakMap(), _SkyTextEditorComponent_ngUnsubscribe = new WeakMap(), _SkyTextEditorComponent_changeDetector = new WeakMap(), _SkyTextEditorComponent_coreAdapterService = new WeakMap(), _SkyTextEditorComponent_adapterService = new WeakMap(), _SkyTextEditorComponent_editorService = new WeakMap(), _SkyTextEditorComponent_sanitizationService = new WeakMap(), _SkyTextEditorComponent_ngControl = new WeakMap(), _SkyTextEditorComponent_zone = new WeakMap(), _SkyTextEditorComponent__fontList = new WeakMap(), _SkyTextEditorComponent__fontSizeList = new WeakMap(), _SkyTextEditorComponent__mergeFields = new WeakMap(), _SkyTextEditorComponent__menus = new WeakMap(), _SkyTextEditorComponent__toolbarActions = new WeakMap(), _SkyTextEditorComponent__disabled = new WeakMap(), _SkyTextEditorComponent__initialStyleState = new WeakMap(), _SkyTextEditorComponent__placeholder = new WeakMap(), _SkyTextEditorComponent__value = new WeakMap(), _SkyTextEditorComponent__onTouched = new WeakMap(), _SkyTextEditorComponent__onChange = new WeakMap(), _SkyTextEditorComponent_instances = new WeakSet(), _SkyTextEditorComponent_updateStyle = function _SkyTextEditorComponent_updateStyle() {
     __classPrivateFieldSet(this, _SkyTextEditorComponent__initialStyleState, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _SkyTextEditorComponent__initialStyleState, "f")), __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 */
@@ -1657,14 +1662,14 @@ SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         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 });
+    ], 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: [{
@@ -1685,6 +1690,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 type: Input
             }], toolbarActions: [{
                 type: Input
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['iframe']
             }] } });
 
 class SkyTextEditorModule {