@skyux/text-editor 12.0.0-alpha.2 → 12.0.0-alpha.4

package/fesm2022/skyux-text-editor.mjs

@@ -459,6 +459,9 @@ class SkyTextEditorAdapterService {
     initEditor(id, iframeElement, styleState, placeholder) {
         this.#textEditorService.editor = this.#createObservers(iframeElement);
         const documentEl = this.#getIframeDocumentEl();
+        if (!documentEl) {
+            return;
+        }
         const styleEl = documentEl.createElement('style');
         styleEl.innerHTML = `.editor:empty:before {
       content: attr(data-placeholder);
@@ -510,7 +513,7 @@ class SkyTextEditorAdapterService {
                     await navigator.clipboard.readText().then((clipText) => {
                         /* istanbul ignore else */
                         if (this.editorSelected()) {
-                            documentEl.execCommand('insertHTML', false, clipText);
+                            documentEl?.execCommand('insertHTML', false, clipText);
                             this.focusEditor();
                             this.#textEditorService.editor.commandChangeObservable.next();
                         }
@@ -520,7 +523,7 @@ class SkyTextEditorAdapterService {
             else {
                 /* istanbul ignore else */
                 if (this.editorSelected()) {
-                    documentEl.execCommand(editorCommand.command, false, editorCommand.value);
+                    documentEl?.execCommand(editorCommand.command, false, editorCommand.value);
                     this.focusEditor();
                     this.#textEditorService.editor.commandChangeObservable.next();
                 }
@@ -528,7 +531,11 @@ class SkyTextEditorAdapterService {
         }
     }
     getCurrentSelection() {
-        return this.#selectionService.getCurrentSelection(this.#getIframeDocumentEl());
+        const documentEl = this.#getIframeDocumentEl();
+        if (documentEl) {
+            return this.#selectionService.getCurrentSelection(documentEl);
+        }
+        return null;
     }
     /**
      * Returns a data URI using the provided text string.
@@ -563,7 +570,7 @@ class SkyTextEditorAdapterService {
     getStyleState() {
         const documentEl = this.#getIframeDocumentEl();
         /* istanbul ignore else */
-        if (this.editorSelected()) {
+        if (documentEl && this.editorSelected()) {
             return {
                 backColor: this.#getColor(documentEl, 'BackColor'),
                 fontColor: this.#getColor(documentEl, 'ForeColor'),
@@ -587,9 +594,9 @@ class SkyTextEditorAdapterService {
     }
     setEditorInnerHtml(value) {
         const documentEl = this.#getIframeDocumentEl();
-        const editorContent = documentEl.body;
+        const editorContent = documentEl?.body;
         /* istanbul ignore else */
-        if (editorContent.innerHTML !== value) {
+        if (editorContent && editorContent.innerHTML !== value) {
             editorContent.innerHTML = value;
         }
     }
@@ -598,29 +605,31 @@ class SkyTextEditorAdapterService {
         if (this.#textEditorService.editor) {
             const windowEl = this.#getContentWindowEl();
             const iframeDocumentEl = this.#getIframeDocumentEl();
-            const currentSelection = this.#selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
-            const cursorIsNotActiveAndHasReset = currentSelection &&
-                currentSelection.startOffset === 0 &&
-                currentSelection.endOffset === 0;
-            if (!this.editorSelected() || cursorIsNotActiveAndHasReset) {
-                // focus the end of the editor
-                const documentEl = this.#windowRef.nativeWindow.document;
-                const editor = iframeDocumentEl.body;
-                const range = documentEl.createRange();
-                this.#textEditorService.editor.iframeElementRef.focus();
-                editor.focus();
-                if (windowEl.getSelection && documentEl.createRange) {
-                    range.selectNodeContents(editor);
-                    range.collapse(false);
-                    const sel = windowEl.getSelection();
-                    sel?.removeAllRanges();
-                    sel?.addRange(range);
+            if (windowEl && iframeDocumentEl) {
+                const currentSelection = this.#selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
+                const cursorIsNotActiveAndHasReset = currentSelection &&
+                    currentSelection.startOffset === 0 &&
+                    currentSelection.endOffset === 0;
+                if (!this.editorSelected() || cursorIsNotActiveAndHasReset) {
+                    // focus the end of the editor
+                    const documentEl = this.#windowRef.nativeWindow.document;
+                    const editor = iframeDocumentEl.body;
+                    const range = documentEl.createRange();
+                    this.#textEditorService.editor.iframeElementRef.focus();
+                    editor.focus();
+                    if (windowEl.getSelection && documentEl.createRange) {
+                        range.selectNodeContents(editor);
+                        range.collapse(false);
+                        const sel = windowEl.getSelection();
+                        sel?.removeAllRanges();
+                        sel?.addRange(range);
+                    }
+                }
+                else {
+                    // Cursor may not be active, restore it
+                    this.#textEditorService.editor.iframeElementRef.focus();
+                    iframeDocumentEl.body.focus();
                 }
-            }
-            else {
-                // Cursor may not be active, restore it
-                this.#textEditorService.editor.iframeElementRef.focus();
-                iframeDocumentEl.body.focus();
             }
         }
     }
@@ -642,48 +651,58 @@ class SkyTextEditorAdapterService {
         if (selectedEl) {
             return this.#getParent(selectedEl, 'a');
         }
-        /* istanbul ignore next */
         return undefined;
     }
     saveSelection() {
-        return this.#selectionService.getCurrentSelectionRange(this.#getIframeDocumentEl(), this.#getContentWindowEl());
+        const documentEl = this.#getIframeDocumentEl();
+        const windowEl = this.#getContentWindowEl();
+        if (documentEl && windowEl) {
+            return this.#selectionService.getCurrentSelectionRange(documentEl, windowEl);
+        }
+        return undefined;
     }
     selectElement(element) {
-        this.#selectionService.selectElement(this.#getIframeDocumentEl(), this.#getContentWindowEl(), element);
+        const documentEl = this.#getIframeDocumentEl();
+        const windowEl = this.#getContentWindowEl();
+        if (documentEl && windowEl) {
+            this.#selectionService.selectElement(documentEl, windowEl, element);
+        }
     }
     setErrorAttributes(errorId, errors) {
         const documentEl = this.#getIframeDocumentEl();
-        documentEl.body.setAttribute('aria-invalid', (!!errors).toString());
+        documentEl?.body.setAttribute('aria-invalid', (!!errors).toString());
         if (errors && errorId) {
-            documentEl.body.setAttribute('aria-errormessage', errorId);
+            documentEl?.body.setAttribute('aria-errormessage', errorId);
         }
         else {
-            documentEl.body.removeAttribute('aria-errormessage');
+            documentEl?.body.removeAttribute('aria-errormessage');
         }
     }
     setLabelAttribute(label) {
         if (label) {
             const documentEl = this.#getIframeDocumentEl();
-            documentEl.body.setAttribute('aria-label', label);
+            documentEl?.body.setAttribute('aria-label', label);
         }
     }
     setPlaceholder(placeholder) {
         const documentEl = this.#getIframeDocumentEl();
-        documentEl.body.setAttribute('data-placeholder', placeholder || '');
+        documentEl?.body.setAttribute('data-placeholder', placeholder || '');
     }
     setRequiredAttribute(required) {
         const documentEl = this.#getIframeDocumentEl();
-        documentEl.body.setAttribute('aria-required', required.toString());
+        documentEl?.body.setAttribute('aria-required', required.toString());
     }
     async setFontSize(fontSize) {
         const doc = this.#getIframeDocumentEl();
         await this.execCommand({ command: 'fontSize', value: '1' });
-        const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
-        for (const element of fontElements) {
-            element.removeAttribute('size');
-            element.style.fontSize = fontSize + 'px';
+        if (doc) {
+            const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
+            for (const element of fontElements) {
+                element.removeAttribute('size');
+                element.style.fontSize = fontSize + 'px';
+            }
+            this.#cleanUpBlankStyleTags(doc);
         }
-        this.#cleanUpBlankStyleTags(doc);
         this.focusEditor();
         this.#textEditorService.editor.commandChangeObservable.next();
     }
@@ -772,8 +791,8 @@ class SkyTextEditorAdapterService {
             ? element.contentWindow.document
             : element.contentDocument;
         // Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
-        documentEl.open();
-        documentEl.close();
+        documentEl?.open();
+        documentEl?.close();
         const selectionObservable = new Subject();
         const selectionListener = () => selectionObservable.next();
         const clickObservable = new Subject();
@@ -785,12 +804,12 @@ class SkyTextEditorAdapterService {
         const focusListener = () => focusObservable.next();
         const inputObservable = new Subject();
         const inputListener = () => inputObservable.next();
-        documentEl.addEventListener('selectionchange', selectionListener);
-        documentEl.addEventListener('input', inputListener);
-        documentEl.addEventListener('mousedown', clickListener);
-        documentEl.body.addEventListener('paste', pasteListener);
-        documentEl.body.addEventListener('blur', blurListener);
-        documentEl.body.addEventListener('focusin', focusListener);
+        documentEl?.addEventListener('selectionchange', selectionListener);
+        documentEl?.addEventListener('input', inputListener);
+        documentEl?.addEventListener('mousedown', clickListener);
+        documentEl?.body.addEventListener('paste', pasteListener);
+        documentEl?.body.addEventListener('blur', blurListener);
+        documentEl?.body.addEventListener('focusin', focusListener);
         return {
             blurObservable,
             clickObservable,
@@ -821,7 +840,11 @@ class SkyTextEditorAdapterService {
         };
     }
     #getCurrentSelectionParentElement() {
-        return this.#selectionService.getCurrentSelectionParentElement(this.#getIframeDocumentEl());
+        const documentEl = this.#getIframeDocumentEl();
+        if (documentEl) {
+            return this.#selectionService.getCurrentSelectionParentElement(documentEl);
+        }
+        return undefined;
     }
     #getColor(documentEl, selector) {
         const commandValue = documentEl.queryCommandValue(selector);
@@ -862,7 +885,10 @@ class SkyTextEditorAdapterService {
     }
     editorSelected() {
         const documentEl = this.#getIframeDocumentEl();
-        return this.#selectionService.isElementSelected(documentEl, documentEl.body);
+        if (documentEl) {
+            return this.#selectionService.isElementSelected(documentEl, documentEl.body);
+        }
+        return false;
     }
     #cleanUpBlankStyleTags(doc) {
         const orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
@@ -904,7 +930,7 @@ class SkyTextEditorAdapterService {
                 aFocusableChild.tabIndex = disabled ? -1 : 0;
             });
         }
-        this.#getIframeDocumentEl().body.setAttribute('contenteditable', disabled ? 'false' : 'true');
+        this.#getIframeDocumentEl()?.body.setAttribute('contenteditable', disabled ? 'false' : 'true');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTextEditorAdapterService }); }
@@ -1394,7 +1420,7 @@ class SkyTextEditorToolbarComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyTextEditorToolbarComponent, isStandalone: true, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", styleState: "styleState", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "@for (action of toolbarActions; track action) {\n  <sky-toolbar-item\n    class=\"sky-text-editor-toolbar-action\"\n    [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n  >\n    @switch (action) {\n      @case ('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            @for (fontModel of fontList; track fontModel) {\n              <sky-dropdown-item>\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            }\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      }\n      @case ('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            @for (size of fontSizeList; track size) {\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"changeFontSize(size)\">\n                  {{ size + 'px' }}\n                </button>\n              </sky-dropdown-item>\n            }\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      }\n      @case ('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            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            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        </div>\n      }\n      @case ('color') {\n        <div class=\"sky-text-editor-colorpicker-group\">\n          <div class=\"sky-text-editor-colorpicker-container\">\n            <sky-colorpicker\n              #colorPicker\n              class=\"sky-text-editor-font-color-picker\"\n              label=\"Font color\"\n              pickerButtonIcon=\"highlighter\"\n              pickerButtonIconType=\"skyux\"\n              [messageStream]=\"colorpickerStream\"\n              [showResetButton]=\"false\"\n              (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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              #backColorPicker\n              class=\"sky-text-editor-background-color-picker\"\n              label=\"Background color\"\n              pickerButtonIcon=\"text-color\"\n              pickerButtonIconType=\"skyux\"\n              [messageStream]=\"backColorpickerStream\"\n              [showResetButton]=\"false\"\n              (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('insertUnorderedList')\"\n          >\n            <sky-icon icon=\"bullet-list\" />\n          </button>\n          <button\n            aria-label=\"Numbered list\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Numbered list\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('insertOrderedList')\"\n          >\n            <sky-icon icon=\"number-list\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyLeft')\"\n          >\n            <sky-icon icon=\"align-left-text\" />\n          </button>\n          <button\n            aria-label=\"Align center\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Align center\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyCenter')\"\n          >\n            <sky-icon icon=\"center-text\" />\n          </button>\n          <button\n            aria-label=\"Align right\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Align right\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyRight')\"\n          >\n            <sky-icon icon=\"align-right-text\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('outdent')\"\n          >\n            <sky-icon icon=\"outdent\" />\n          </button>\n          <button\n            aria-label=\"Indent\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Indent\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('indent')\"\n          >\n            <sky-icon icon=\"indent\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('undo')\"\n          >\n            <sky-icon icon=\"undo\" />\n          </button>\n          <button\n            aria-label=\"Redo\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Redo\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('redo')\"\n          >\n            <sky-icon icon=\"redo\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{\n              'icon-btn-active': styleState.linkState\n            }\"\n            (click)=\"link()\"\n          >\n            <sky-icon icon=\"link\" />\n          </button>\n          <button\n            aria-label=\"Unlink\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Unlink\"\n            type=\"button\"\n            [disabled]=\"!styleState.linkState || disabled\"\n            (click)=\"unlink()\"\n          >\n            <sky-icon icon=\"unlink\" />\n          </button>\n        </div>\n      }\n    }\n  </sky-toolbar-item>\n}\n", styles: [".sky-text-editor-toolbar-action:not(.sky-theme-modern *){--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-button-border-outer-radius: 3px;--sky-override-text-editor-button-border: 1px solid #cdcfd2;--sky-override-text-editor-colorpicker-spacing: 10px;--sky-override-text-editor-colorpicker-top: 3px}.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:var(--sky-override-text-editor-colorpicker-top, -2px);margin-right:var(--sky-override-text-editor-colorpicker-spacing, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s))}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-right:var(--sky-override-text-editor-button-border, none)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyTextEditorToolbarComponent, isStandalone: true, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", styleState: "styleState", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "@for (action of toolbarActions; track action) {\n  <sky-toolbar-item\n    class=\"sky-text-editor-toolbar-action\"\n    [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n  >\n    @switch (action) {\n      @case ('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            @for (fontModel of fontList; track fontModel) {\n              <sky-dropdown-item>\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            }\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      }\n      @case ('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            @for (size of fontSizeList; track size) {\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"changeFontSize(size)\">\n                  {{ size + 'px' }}\n                </button>\n              </sky-dropdown-item>\n            }\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      }\n      @case ('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            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            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        </div>\n      }\n      @case ('color') {\n        <div class=\"sky-text-editor-colorpicker-group\">\n          <div class=\"sky-text-editor-colorpicker-container\">\n            <sky-colorpicker\n              #colorPicker\n              class=\"sky-text-editor-font-color-picker\"\n              label=\"Font color\"\n              pickerButtonIcon=\"highlighter\"\n              pickerButtonIconType=\"skyux\"\n              [messageStream]=\"colorpickerStream\"\n              [showResetButton]=\"false\"\n              (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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              #backColorPicker\n              class=\"sky-text-editor-background-color-picker\"\n              label=\"Background color\"\n              pickerButtonIcon=\"text-color\"\n              pickerButtonIconType=\"skyux\"\n              [messageStream]=\"backColorpickerStream\"\n              [showResetButton]=\"false\"\n              (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('insertUnorderedList')\"\n          >\n            <sky-icon icon=\"bullet-list\" />\n          </button>\n          <button\n            aria-label=\"Numbered list\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Numbered list\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('insertOrderedList')\"\n          >\n            <sky-icon icon=\"number-list\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyLeft')\"\n          >\n            <sky-icon icon=\"align-left-text\" />\n          </button>\n          <button\n            aria-label=\"Align center\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Align center\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyCenter')\"\n          >\n            <sky-icon icon=\"center-text\" />\n          </button>\n          <button\n            aria-label=\"Align right\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Align right\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('justifyRight')\"\n          >\n            <sky-icon icon=\"align-right-text\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('outdent')\"\n          >\n            <sky-icon icon=\"outdent\" />\n          </button>\n          <button\n            aria-label=\"Indent\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Indent\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('indent')\"\n          >\n            <sky-icon icon=\"indent\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('undo')\"\n          >\n            <sky-icon icon=\"undo\" />\n          </button>\n          <button\n            aria-label=\"Redo\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Redo\"\n            type=\"button\"\n            [disabled]=\"disabled\"\n            (click)=\"execCommand('redo')\"\n          >\n            <sky-icon icon=\"redo\" />\n          </button>\n        </div>\n      }\n      @case ('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            type=\"button\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{\n              'icon-btn-active': styleState.linkState\n            }\"\n            (click)=\"link()\"\n          >\n            <sky-icon icon=\"link\" />\n          </button>\n          <button\n            aria-label=\"Unlink\"\n            class=\"sky-btn sky-btn-default sky-btn-icon\"\n            title=\"Unlink\"\n            type=\"button\"\n            [disabled]=\"!styleState.linkState || disabled\"\n            (click)=\"unlink()\"\n          >\n            <sky-icon icon=\"unlink\" />\n          </button>\n        </div>\n      }\n    }\n  </sky-toolbar-item>\n}\n", styles: [".sky-text-editor-toolbar-action:not(.sky-theme-modern *){--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-button-border-outer-radius: 3px;--sky-override-text-editor-button-border: 1px solid #cdcfd2;--sky-override-text-editor-colorpicker-spacing: 10px;--sky-override-text-editor-colorpicker-top: 3px}.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:var(--sky-override-text-editor-colorpicker-top, -2px);margin-right:var(--sky-override-text-editor-colorpicker-spacing, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s))}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-right:var(--sky-override-text-editor-button-border, none)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -1437,22 +1463,7 @@ class SkyTextEditorComponent {
     set disabled(value) {
         if (value !== this.disabled) {
             this.#_disabled = value;
-            // Update focusableChildren inside the iframe.
-            let focusableChildren;
-            /* istanbul ignore else */
-            if (this.iframeRef) {
-                focusableChildren = this.#coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
-                    ignoreVisibility: true,
-                    ignoreTabIndex: true,
-                });
-                if (this.#_disabled) {
-                    this.#adapterService.disableEditor(focusableChildren, this.iframeRef.nativeElement);
-                }
-                else {
-                    this.#adapterService.enableEditor(focusableChildren, this.iframeRef.nativeElement);
-                }
-                this.#changeDetector.markForCheck();
-            }
+            this.#applyDisabledState();
         }
     }
     get disabled() {
@@ -1802,6 +1813,7 @@ class SkyTextEditorComponent {
         if (this.autofocus) {
             this.#adapterService.focusEditor();
         }
+        this.#applyDisabledState();
         this.#initialized = true;
         this.#focusInitialized = false;
         this.#checkAutofocusAndFocus();
@@ -1820,6 +1832,24 @@ class SkyTextEditorComponent {
             this.#_onChange(this.#_value);
         }
     }
+    #applyDisabledState() {
+        // Update focusableChildren inside the iframe.
+        let focusableChildren;
+        /* istanbul ignore else */
+        if (this.iframeRef?.nativeElement.contentDocument?.body) {
+            focusableChildren = this.#coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
+                ignoreVisibility: true,
+                ignoreTabIndex: true,
+            });
+            if (this.#_disabled) {
+                this.#adapterService.disableEditor(focusableChildren, this.iframeRef.nativeElement);
+            }
+            else {
+                this.#adapterService.enableEditor(focusableChildren, this.iframeRef.nativeElement);
+            }
+            this.#changeDetector.markForCheck();
+        }
+    }
     /* istanbul ignore next */
     #_onTouched;
     /* istanbul ignore next */