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

package/fesm2022/skyux-text-editor.mjs

@@ -1495,7 +1495,7 @@ class SkyTextEditorToolbarComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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            iconName=\"text-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            iconName=\"text-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            iconName=\"text-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=\"color-line\"\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              [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 iconName=\"text-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 iconName=\"text-number-list-ltr\" />\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 iconName=\"text-align-left\" />\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 iconName=\"text-align-center\" />\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 iconName=\"text-align-right\" />\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 iconName=\"text-indent-decrease\" />\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 iconName=\"text-indent-increase\" />\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 iconName=\"arrow-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 iconName=\"arrow-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 iconName=\"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 iconName=\"link-dismiss\" />\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", "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", "iconSize"] }, { 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.2.1", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -1508,7 +1508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         SkyIconModule,
                         SkyThemeModule,
                         SkyToolbarModule,
-                    ], 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"] }]
+                    ], 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            iconName=\"text-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            iconName=\"text-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            iconName=\"text-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=\"color-line\"\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              [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 iconName=\"text-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 iconName=\"text-number-list-ltr\" />\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 iconName=\"text-align-left\" />\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 iconName=\"text-align-center\" />\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 iconName=\"text-align-right\" />\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 iconName=\"text-indent-decrease\" />\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 iconName=\"text-indent-increase\" />\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 iconName=\"arrow-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 iconName=\"arrow-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 iconName=\"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 iconName=\"link-dismiss\" />\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"] }]
         }], propDecorators: { editorFocusStream: [{
                 type: Input
             }], fontList: [{
@@ -1935,7 +1935,7 @@ class SkyTextEditorComponent {
             SkyTextEditorSelectionService,
             SkyTextEditorAdapterService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], hostDirectives: [{ directive: i1$3.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0, template: "<div\n  class=\"sky-text-editor\"\n  [ngClass]=\"{\n    'sky-text-editor-disabled': disabled,\n    'sky-text-editor-wrapper-focused': editorFocused,\n    'sky-text-editor-invalid':\n      ngControl.errors && (ngControl.touched || ngControl.dirty)\n  }\"\n>\n  <div class=\"sky-text-editor-label-wrapper\">\n    @if (labelText) {\n      <label\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-control-label-required': requiredState.isRequired()\n        }\"\n        >{{ labelText }}</label\n      >\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverContent]=\"helpPopoverContent\"\n            [popoverTitle]=\"helpPopoverTitle\"\n          />\n        </span>\n      }\n    }\n  </div>\n  @if (\n    (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n  ) {\n    <sky-toolbar class=\"sky-text-editor-toolbar\">\n      @if (menus && menus.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"menubar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-menubar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [menus]=\"menus\"\n            [mergeFields]=\"mergeFields\"\n          />\n        </sky-toolbar-section>\n      }\n      @if (toolbarActions && toolbarActions.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"toolbar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-toolbar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [fontList]=\"fontList\"\n            [fontSizeList]=\"fontSizeList\"\n            [linkWindowOptions]=\"linkWindowOptions\"\n            [toolbarActions]=\"toolbarActions\"\n            [styleState]=\"initialStyleState\"\n          />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n  <iframe\n    #iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    allow=\"clipboard-read *; clipboard-write *\"\n    [attr.title]=\"\n      labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n    \"\n    [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n  >\n  </iframe>\n</div>\n<div\n  #hintTextEl=\"skyId\"\n  skyId\n  class=\"sky-text-editor-hint-text\"\n  [skyThemeClass]=\"{\n    'sky-font-deemphasized': 'default',\n    'sky-font-hint-text-s': 'modern'\n  }\"\n>\n  {{ hintText }}\n</div>\n<sky-form-errors\n  class=\"sky-text-editor-errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl.touched\"\n  [dirty]=\"ngControl.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "linkWindowOptions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i6.λ38, selector: "sky-toolbar-section" }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: i1$3.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], hostDirectives: [{ directive: i1$3.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0, template: "<div\n  class=\"sky-text-editor\"\n  [ngClass]=\"{\n    'sky-text-editor-disabled': disabled,\n    'sky-text-editor-wrapper-focused': editorFocused,\n    'sky-text-editor-invalid':\n      ngControl.errors && (ngControl.touched || ngControl.dirty)\n  }\"\n>\n  <div class=\"sky-text-editor-label-wrapper\">\n    @if (labelText) {\n      <label\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-control-label-required': requiredState.isRequired()\n        }\"\n        >{{ labelText }}</label\n      >\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverContent]=\"helpPopoverContent\"\n            [popoverTitle]=\"helpPopoverTitle\"\n          />\n        </span>\n      }\n    }\n  </div>\n  @if (\n    (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n  ) {\n    <sky-toolbar class=\"sky-text-editor-toolbar\">\n      @if (menus && menus.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"menubar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-menubar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [menus]=\"menus\"\n            [mergeFields]=\"mergeFields\"\n          />\n        </sky-toolbar-section>\n      }\n      @if (toolbarActions && toolbarActions.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"toolbar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-toolbar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [fontList]=\"fontList\"\n            [fontSizeList]=\"fontSizeList\"\n            [linkWindowOptions]=\"linkWindowOptions\"\n            [toolbarActions]=\"toolbarActions\"\n            [styleState]=\"initialStyleState\"\n          />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n  <iframe\n    #iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    allow=\"clipboard-read *; clipboard-write *\"\n    [attr.title]=\"\n      labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n    \"\n    [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n  >\n  </iframe>\n</div>\n<div\n  #hintTextEl=\"skyId\"\n  skyId\n  class=\"sky-text-editor-hint-text\"\n  [skyThemeClass]=\"{\n    'sky-font-deemphasized': 'default',\n    'sky-font-hint-text-s': 'modern'\n  }\"\n>\n  {{ hintText }}\n</div>\n<sky-form-errors\n  class=\"sky-text-editor-errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl.touched\"\n  [dirty]=\"ngControl.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-base) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "linkWindowOptions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i6.λ38, selector: "sky-toolbar-section" }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: i1$3.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
             type: Component,
@@ -1959,7 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         SkyToolbarModule,
                         SkyFormErrorsModule,
                         SkyTextEditorResourcesModule,
-                    ], template: "<div\n  class=\"sky-text-editor\"\n  [ngClass]=\"{\n    'sky-text-editor-disabled': disabled,\n    'sky-text-editor-wrapper-focused': editorFocused,\n    'sky-text-editor-invalid':\n      ngControl.errors && (ngControl.touched || ngControl.dirty)\n  }\"\n>\n  <div class=\"sky-text-editor-label-wrapper\">\n    @if (labelText) {\n      <label\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-control-label-required': requiredState.isRequired()\n        }\"\n        >{{ labelText }}</label\n      >\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverContent]=\"helpPopoverContent\"\n            [popoverTitle]=\"helpPopoverTitle\"\n          />\n        </span>\n      }\n    }\n  </div>\n  @if (\n    (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n  ) {\n    <sky-toolbar class=\"sky-text-editor-toolbar\">\n      @if (menus && menus.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"menubar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-menubar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [menus]=\"menus\"\n            [mergeFields]=\"mergeFields\"\n          />\n        </sky-toolbar-section>\n      }\n      @if (toolbarActions && toolbarActions.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"toolbar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-toolbar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [fontList]=\"fontList\"\n            [fontSizeList]=\"fontSizeList\"\n            [linkWindowOptions]=\"linkWindowOptions\"\n            [toolbarActions]=\"toolbarActions\"\n            [styleState]=\"initialStyleState\"\n          />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n  <iframe\n    #iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    allow=\"clipboard-read *; clipboard-write *\"\n    [attr.title]=\"\n      labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n    \"\n    [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n  >\n  </iframe>\n</div>\n<div\n  #hintTextEl=\"skyId\"\n  skyId\n  class=\"sky-text-editor-hint-text\"\n  [skyThemeClass]=\"{\n    'sky-font-deemphasized': 'default',\n    'sky-font-hint-text-s': 'modern'\n  }\"\n>\n  {{ hintText }}\n</div>\n<sky-form-errors\n  class=\"sky-text-editor-errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl.touched\"\n  [dirty]=\"ngControl.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"] }]
+                    ], template: "<div\n  class=\"sky-text-editor\"\n  [ngClass]=\"{\n    'sky-text-editor-disabled': disabled,\n    'sky-text-editor-wrapper-focused': editorFocused,\n    'sky-text-editor-invalid':\n      ngControl.errors && (ngControl.touched || ngControl.dirty)\n  }\"\n>\n  <div class=\"sky-text-editor-label-wrapper\">\n    @if (labelText) {\n      <label\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-control-label-required': requiredState.isRequired()\n        }\"\n        >{{ labelText }}</label\n      >\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverContent]=\"helpPopoverContent\"\n            [popoverTitle]=\"helpPopoverTitle\"\n          />\n        </span>\n      }\n    }\n  </div>\n  @if (\n    (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n  ) {\n    <sky-toolbar class=\"sky-text-editor-toolbar\">\n      @if (menus && menus.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"menubar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-menubar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [menus]=\"menus\"\n            [mergeFields]=\"mergeFields\"\n          />\n        </sky-toolbar-section>\n      }\n      @if (toolbarActions && toolbarActions.length > 0) {\n        <sky-toolbar-section\n          aria-label=\"Text formatting\"\n          class=\"toolbar\"\n          role=\"toolbar\"\n        >\n          <sky-text-editor-toolbar\n            [disabled]=\"disabled\"\n            [editorFocusStream]=\"editorFocusStream\"\n            [fontList]=\"fontList\"\n            [fontSizeList]=\"fontSizeList\"\n            [linkWindowOptions]=\"linkWindowOptions\"\n            [toolbarActions]=\"toolbarActions\"\n            [styleState]=\"initialStyleState\"\n          />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n  <iframe\n    #iframe\n    class=\"sky-text-editor-wrapper\"\n    src=\"about:blank\"\n    allow=\"clipboard-read *; clipboard-write *\"\n    [attr.title]=\"\n      labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n    \"\n    [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n    [ngClass]=\"{\n      'sky-text-editor-wrapper-disabled': disabled\n    }\"\n    (load)=\"onIframeLoad()\"\n  >\n  </iframe>\n</div>\n<div\n  #hintTextEl=\"skyId\"\n  skyId\n  class=\"sky-text-editor-hint-text\"\n  [skyThemeClass]=\"{\n    'sky-font-deemphasized': 'default',\n    'sky-font-hint-text-s': 'modern'\n  }\"\n>\n  {{ hintText }}\n</div>\n<sky-form-errors\n  class=\"sky-text-editor-errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl.touched\"\n  [dirty]=\"ngControl.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-base) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
             }], disabled: [{