@acorex/components 22.4.14 → 22.4.16

package/fesm2022/acorex-components-text-editor.mjs

@@ -431,6 +431,12 @@ const AX_TEXT_EDITOR_I18N = {
 };
 
 class AXTextEditorComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+    static parseLineCount(value) {
+        if (value === undefined || value === null || value === '')
+            return undefined;
+        const n = typeof value === 'number' ? value : Number(value);
+        return Number.isFinite(n) && n > 0 ? Math.floor(n) : undefined;
+    }
     constructor() {
         super();
         this.editorService = inject(AXTextEditorService);
@@ -443,14 +449,34 @@ class AXTextEditorComponent extends classes((MXInputBaseValueComponent), MXLookC
         ...(ngDevMode ? [{ debugName: "placeHolder" }] : /* istanbul ignore next */ []));
         this.outputFormat = input('json', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "outputFormat" }] : /* istanbul ignore next */ []));
+        /**
+         * Minimum visible height of the editable surface, in text lines.
+         * Takes precedence over {@link initialLine} when set.
+         */
+        this.line = input(undefined, { ...(ngDevMode ? { debugName: "line" } : /* istanbul ignore next */ {}), transform: (value) => AXTextEditorComponent.parseLineCount(value) });
         /**
          * Minimum height of the editable surface, measured in text lines.
          *
          * @defaultValue 6
          */
         this.initialLine = input(6, { ...(ngDevMode ? { debugName: "initialLine" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.initialLineCss = computed(() => String(Math.max(1, this.initialLine() || 6)), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "initialLineCss" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum visible height of the editable area, in text lines.
+         * When set, content scrolls inside the editor after this height.
+         */
+        this.maxLine = input(undefined, { ...(ngDevMode ? { debugName: "maxLine" } : /* istanbul ignore next */ {}), transform: (value) => AXTextEditorComponent.parseLineCount(value) });
+        this.resolvedLine = computed(() => Math.max(1, this.line() ?? this.initialLine() ?? 6), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLine" }] : /* istanbul ignore next */ []));
+        this.resolvedLineCss = computed(() => String(this.resolvedLine()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLineCss" }] : /* istanbul ignore next */ []));
+        this.maxLineHeightStyle = computed(() => {
+            const max = this.maxLine();
+            if (max == null)
+                return null;
+            const lines = Math.max(max, this.resolvedLine());
+            return `calc(${lines} * 1.5em + 1.5rem)`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxLineHeightStyle" }] : /* istanbul ignore next */ []));
         this.zoomFactor = computed(() => this.editorService.zoomFactor(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "zoomFactor" }] : /* istanbul ignore next */ []));
         this.projectedContent = computed(() => this.projected() != null, /* @ts-ignore */
@@ -519,7 +545,7 @@ class AXTextEditorComponent extends classes((MXInputBaseValueComponent), MXLookC
         this.editorService.setContent(value == null ? '' : value, false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXTextEditorComponent, isStandalone: true, selector: "ax-text-editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, initialLine: { classPropertyName: "initialLine", publicName: "initialLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.--ax-comp-text-editor-initial-line": "initialLineCss()", "style.--ax-comp-text-editor-zoom": "zoomFactor()", "class.ax-state-disabled": "disabled", "class.ax-state-readonly": "readonly && !disabled" }, classAttribute: "ax-text-editor" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXTextEditorComponent, isStandalone: true, selector: "ax-text-editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, line: { classPropertyName: "line", publicName: "line", isSignal: true, isRequired: false, transformFunction: null }, initialLine: { classPropertyName: "initialLine", publicName: "initialLine", isSignal: true, isRequired: false, transformFunction: null }, maxLine: { classPropertyName: "maxLine", publicName: "maxLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.--ax-comp-text-editor-initial-line": "resolvedLineCss()", "style.--ax-comp-text-editor-max-height": "maxLineHeightStyle()", "style.--ax-comp-text-editor-zoom": "zoomFactor()", "class.ax-state-disabled": "disabled", "class.ax-state-readonly": "readonly && !disabled" }, classAttribute: "ax-text-editor" }, providers: [
             AXTextEditor,
             AXTextEditorService,
             { provide: AXComponent, useExisting: AXTextEditorComponent },
@@ -530,7 +556,7 @@ class AXTextEditorComponent extends classes((MXInputBaseValueComponent), MXLookC
                 useExisting: forwardRef(() => AXTextEditorComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "projected", first: true, predicate: AXTextEditorContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content select=\"ax-text-editor-toolbar\"></ng-content>\n  <div class=\"ax-text-editor-content-stack\">\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (!projectedContent()) {\n      <ax-text-editor-content></ax-text-editor-content>\n    }\n    <ng-content select=\"ax-text-editor-content\"></ng-content>\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <ng-content select=\"ax-validation-rule\"></ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-text-editor{position:relative;display:block;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible;border-radius:var(--ax-sys-border-radius)}ax-text-editor:focus-within{box-shadow:0 0 0 2px var(--ax-sys-color-primary-light, rgb(147 197 253))}ax-text-editor>.ax-editor-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;height:auto!important;min-height:var(--ax-sys-size-default, 2.5rem);padding:0!important;overflow:visible!important}ax-text-editor ax-text-editor-toolbar{width:100%;flex-shrink:0}ax-text-editor .ax-text-editor-content-stack{display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header,ax-text-editor .ax-text-editor-content-stack>ax-footer{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);align-self:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)){align-items:center;align-self:stretch}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{display:inline-flex;align-items:center;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-text-editor .ax-text-editor-content-stack>ax-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-footer{justify-content:flex-end;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-text-editor-content{min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}ax-text-editor ax-text-editor-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row!important;align-items:stretch!important}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical) ax-text-editor-toolbar.ax-orientation-vertical{width:auto;max-width:none;flex-shrink:0;align-self:flex-start;overflow:hidden;max-height:var( --ax-comp-text-editor-min-height, calc(var(--ax-comp-text-editor-initial-line, 6) * 1.5em + 1.5rem) )}:dir(rtl) ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row-reverse!important}:is(ax-text-editor.ax-state-disabled,ax-text-editor.ax-state-readonly) ax-text-editor-toolbar{pointer-events:none;opacity:60%}ax-text-editor.ax-state-readonly:not(.ax-state-disabled) ax-text-editor-content{cursor:default}ax-text-editor.ax-state-disabled{cursor:not-allowed}ax-text-editor.ax-state-disabled ax-text-editor-content{pointer-events:none;cursor:not-allowed;opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXTextEditorContentComponent, selector: "ax-text-editor-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "projected", first: true, predicate: AXTextEditorContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content select=\"ax-text-editor-toolbar\"></ng-content>\n  <div class=\"ax-text-editor-content-stack\">\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (!projectedContent()) {\n      <ax-text-editor-content></ax-text-editor-content>\n    }\n    <ng-content select=\"ax-text-editor-content\"></ng-content>\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <ng-content select=\"ax-validation-rule\"></ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-text-editor{position:relative;display:block;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible;border-radius:var(--ax-sys-border-radius)}ax-text-editor:focus-within{box-shadow:0 0 0 2px var(--ax-sys-color-primary-light, rgb(147 197 253))}ax-text-editor>.ax-editor-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;height:auto!important;min-height:var(--ax-sys-size-default, 2.5rem);padding:0!important;overflow:visible!important}ax-text-editor ax-text-editor-toolbar{width:100%;flex-shrink:0}ax-text-editor .ax-text-editor-content-stack{display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header,ax-text-editor .ax-text-editor-content-stack>ax-footer{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);align-self:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)){align-items:center;align-self:stretch}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{display:inline-flex;align-items:center;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-text-editor .ax-text-editor-content-stack>ax-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-footer{justify-content:flex-end;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-text-editor-content{min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;max-height:var(--ax-comp-text-editor-max-height, none)}ax-text-editor ax-text-editor-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;max-height:var(--ax-comp-text-editor-max-height, none)}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row!important;align-items:stretch!important}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical) ax-text-editor-toolbar.ax-orientation-vertical{width:auto;max-width:none;flex-shrink:0;align-self:flex-start;overflow:hidden;max-height:var( --ax-comp-text-editor-max-height, var( --ax-comp-text-editor-min-height, calc(var(--ax-comp-text-editor-initial-line, 6) * 1.5em + 1.5rem) ) )}:dir(rtl) ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row-reverse!important}:is(ax-text-editor.ax-state-disabled,ax-text-editor.ax-state-readonly) ax-text-editor-toolbar{pointer-events:none;opacity:60%}ax-text-editor.ax-state-readonly:not(.ax-state-disabled) ax-text-editor-content{cursor:default}ax-text-editor.ax-state-disabled{cursor:not-allowed}ax-text-editor.ax-state-disabled ax-text-editor-content{pointer-events:none;cursor:not-allowed;opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXTextEditorContentComponent, selector: "ax-text-editor-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTextEditorComponent, decorators: [{
             type: Component,
@@ -543,7 +569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         'readonlyChange',
                         'disabledChange',
                     ], host: {
-                        '[style.--ax-comp-text-editor-initial-line]': 'initialLineCss()',
+                        '[style.--ax-comp-text-editor-initial-line]': 'resolvedLineCss()',
+                        '[style.--ax-comp-text-editor-max-height]': 'maxLineHeightStyle()',
                         '[style.--ax-comp-text-editor-zoom]': 'zoomFactor()',
                         '[class.ax-state-disabled]': 'disabled',
                         '[class.ax-state-readonly]': 'readonly && !disabled',
@@ -560,8 +587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => AXTextEditorComponent),
                             multi: true,
                         },
-                    ], imports: [AXTextEditorContentComponent], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content select=\"ax-text-editor-toolbar\"></ng-content>\n  <div class=\"ax-text-editor-content-stack\">\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (!projectedContent()) {\n      <ax-text-editor-content></ax-text-editor-content>\n    }\n    <ng-content select=\"ax-text-editor-content\"></ng-content>\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <ng-content select=\"ax-validation-rule\"></ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-text-editor{position:relative;display:block;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible;border-radius:var(--ax-sys-border-radius)}ax-text-editor:focus-within{box-shadow:0 0 0 2px var(--ax-sys-color-primary-light, rgb(147 197 253))}ax-text-editor>.ax-editor-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;height:auto!important;min-height:var(--ax-sys-size-default, 2.5rem);padding:0!important;overflow:visible!important}ax-text-editor ax-text-editor-toolbar{width:100%;flex-shrink:0}ax-text-editor .ax-text-editor-content-stack{display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header,ax-text-editor .ax-text-editor-content-stack>ax-footer{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);align-self:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)){align-items:center;align-self:stretch}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{display:inline-flex;align-items:center;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-text-editor .ax-text-editor-content-stack>ax-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-footer{justify-content:flex-end;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-text-editor-content{min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}ax-text-editor ax-text-editor-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row!important;align-items:stretch!important}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical) ax-text-editor-toolbar.ax-orientation-vertical{width:auto;max-width:none;flex-shrink:0;align-self:flex-start;overflow:hidden;max-height:var( --ax-comp-text-editor-min-height, calc(var(--ax-comp-text-editor-initial-line, 6) * 1.5em + 1.5rem) )}:dir(rtl) ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row-reverse!important}:is(ax-text-editor.ax-state-disabled,ax-text-editor.ax-state-readonly) ax-text-editor-toolbar{pointer-events:none;opacity:60%}ax-text-editor.ax-state-readonly:not(.ax-state-disabled) ax-text-editor-content{cursor:default}ax-text-editor.ax-state-disabled{cursor:not-allowed}ax-text-editor.ax-state-disabled ax-text-editor-content{pointer-events:none;cursor:not-allowed;opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXTextEditorContentComponent), { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], initialLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLine", required: false }] }] } });
+                    ], imports: [AXTextEditorContentComponent], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content select=\"ax-text-editor-toolbar\"></ng-content>\n  <div class=\"ax-text-editor-content-stack\">\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (!projectedContent()) {\n      <ax-text-editor-content></ax-text-editor-content>\n    }\n    <ng-content select=\"ax-text-editor-content\"></ng-content>\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <ng-content select=\"ax-validation-rule\"></ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-text-editor{position:relative;display:block;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible;border-radius:var(--ax-sys-border-radius)}ax-text-editor:focus-within{box-shadow:0 0 0 2px var(--ax-sys-color-primary-light, rgb(147 197 253))}ax-text-editor>.ax-editor-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;height:auto!important;min-height:var(--ax-sys-size-default, 2.5rem);padding:0!important;overflow:visible!important}ax-text-editor ax-text-editor-toolbar{width:100%;flex-shrink:0}ax-text-editor .ax-text-editor-content-stack{display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header,ax-text-editor .ax-text-editor-content-stack>ax-footer{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);align-self:stretch}ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)){align-items:center;align-self:stretch}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{display:inline-flex;align-items:center;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon,:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}:is(ax-text-editor .ax-text-editor-content-stack>ax-header:not(:has(>ax-button)),ax-text-editor .ax-text-editor-content-stack>ax-footer:not(:has(>ax-button)))>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-text-editor .ax-text-editor-content-stack>ax-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-footer{justify-content:flex-end;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5)}ax-text-editor .ax-text-editor-content-stack>ax-text-editor-content{min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;max-height:var(--ax-comp-text-editor-max-height, none)}ax-text-editor ax-text-editor-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;max-height:var(--ax-comp-text-editor-max-height, none)}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row!important;align-items:stretch!important}ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical) ax-text-editor-toolbar.ax-orientation-vertical{width:auto;max-width:none;flex-shrink:0;align-self:flex-start;overflow:hidden;max-height:var( --ax-comp-text-editor-max-height, var( --ax-comp-text-editor-min-height, calc(var(--ax-comp-text-editor-initial-line, 6) * 1.5em + 1.5rem) ) )}:dir(rtl) ax-text-editor:has(ax-text-editor-toolbar.ax-orientation-vertical)>.ax-editor-container{flex-direction:row-reverse!important}:is(ax-text-editor.ax-state-disabled,ax-text-editor.ax-state-readonly) ax-text-editor-toolbar{pointer-events:none;opacity:60%}ax-text-editor.ax-state-readonly:not(.ax-state-disabled) ax-text-editor-content{cursor:default}ax-text-editor.ax-state-disabled{cursor:not-allowed}ax-text-editor.ax-state-disabled ax-text-editor-content{pointer-events:none;cursor:not-allowed;opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXTextEditorContentComponent), { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], line: [{ type: i0.Input, args: [{ isSignal: true, alias: "line", required: false }] }], initialLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLine", required: false }] }], maxLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLine", required: false }] }] } });
 
 class AXTextEditorToolbarComponent extends AXTextEditorSlot {
     constructor() {