@acorex/components 21.0.0-next.50 → 21.0.0-next.51

package/fesm2022/acorex-components-form.mjs

@@ -379,11 +379,11 @@ class AXFormFieldComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXFormFieldComponent, isStandalone: true, selector: "ax-form-field", inputs: { labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], queries: [{ propertyName: "input", first: true, predicate: AXValuableComponent, descendants: true }, { propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer utilities{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*2)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important;padding-bottom:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-suffix{padding-top:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-input::placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-suffix{opacity:1}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXFormFieldComponent, isStandalone: true, selector: "ax-form-field", inputs: { labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], queries: [{ propertyName: "input", first: true, predicate: AXValuableComponent, descendants: true }, { propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer utilities{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*2)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important;padding-bottom:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-suffix{padding-top:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-input::placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-suffix{opacity:1}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer utilities{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*2)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important;padding-bottom:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-suffix{padding-top:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-input::placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-suffix{opacity:1}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer utilities{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*2)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important;padding-bottom:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content ax-suffix{padding-top:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-input::placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) .ax-placeholder,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-suffix{opacity:1}:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-has-value,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-focused,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label).ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], input: [{
                 type: ContentChild,
                 args: [AXValuableComponent]

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

@@ -66,11 +66,11 @@ class AXImageEditorCropComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
 
 /**
@@ -94,11 +94,11 @@ class AXImageEditorHighlightComponent {
         this.service.highlightWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -122,11 +122,11 @@ class AXImageEditorPenComponent {
         this.service.penWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -147,7 +147,7 @@ class AXImageEditorRotateComponent {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
@@ -158,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXTooltipModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@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-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -453,11 +453,11 @@ class AXImageEditorCropperWindowComponent {
         this.selectedHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@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-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@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-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@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-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@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-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });
 
 class AXImageEditorViewComponent extends MXBaseComponent {
@@ -712,11 +712,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.service.imageBlob.set(blobs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['canvasElem', { isSignal: true }] }], cropperWindow: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 
 /**
@@ -764,7 +764,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
                 useExisting: forwardRef(() => AXImageEditorContainerComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
@@ -788,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXImageEditorPenComponent,
                         AXImageEditorHighlightComponent,
                         AXImageEditorRotateComponent,
-                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-image.mjs

@@ -102,14 +102,14 @@ class AXImageComponent extends MXBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [
             { provide: 'ax-image', useValue: AXImageComponent },
             { provide: AXComponent, useExisting: AXImageComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["@layer components{ax-image{--ax-comp-image-overlay-color:#000000bf;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}ax-image img{width:100%;height:100%;display:block}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay,ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{top:calc(var(--spacing,.25rem)*0);background-color:var(--ax-comp-image-overlay-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}ax-image ax-loading{justify-content:center;align-items:center;width:100%;height:100%;display:flex}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["@layer components{ax-image{--ax-comp-image-overlay-color:#000000bf;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}ax-image img{width:100%;height:100%;display:block}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay,ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{top:calc(var(--spacing,.25rem)*0);background-color:var(--ax-comp-image-overlay-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}ax-image ax-loading{justify-content:center;align-items:center;width:100%;height:100%;display:flex}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: 'ax-image', useValue: AXImageComponent },
                         { provide: AXComponent, useExisting: AXImageComponent },
-                    ], imports: [], template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["@layer components{ax-image{--ax-comp-image-overlay-color:#000000bf;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}ax-image img{width:100%;height:100%;display:block}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay,ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{top:calc(var(--spacing,.25rem)*0);background-color:var(--ax-comp-image-overlay-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}ax-image ax-loading{justify-content:center;align-items:center;width:100%;height:100%;display:flex}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [], template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n", styles: ["@layer components{ax-image{--ax-comp-image-overlay-color:#000000bf;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}ax-image img{width:100%;height:100%;display:block}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay,ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{top:calc(var(--spacing,.25rem)*0);background-color:var(--ax-comp-image-overlay-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}ax-image ax-loading{justify-content:center;align-items:center;width:100%;height:100%;display:flex}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], overlayMode: [{
                 type: Input
             }], src: [{

package/fesm2022/acorex-components-json-viewer.mjs

@@ -38,11 +38,11 @@ class JsonViewerComponent {
         return typeof value === 'boolean';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@layer components{ax-json-viewer{padding:calc(var(--spacing,.25rem)*6);display:block;overflow-x:auto}ax-json-viewer .ax-number-color{color:var(--color-blue-900,oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.dark,.dark *){color:var(--color-indigo-400,oklch(67.3% .182 276.935))!important}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button{-webkit-appearance:none}ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--color-red-600,oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.dark,.dark *){color:var(--color-cyan-400,oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing,.25rem)*0);height:fit-content;padding:calc(var(--spacing,.25rem)*0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing,.25rem)*1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing,.25rem)*8);margin-block:calc(var(--spacing,.25rem)*0);height:fit-content}ax-json-viewer .ax-flex-container{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900,oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.dark,.dark *){color:var(--color-blue-400,oklch(70.7% .165 254.624))!important}ax-json-viewer span{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer summary::marker{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing,.25rem)*-4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@layer components{ax-json-viewer{padding:calc(var(--spacing,.25rem)*6);display:block;overflow-x:auto}ax-json-viewer .ax-number-color{color:var(--color-blue-900,oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.dark,.dark *){color:var(--color-indigo-400,oklch(67.3% .182 276.935))!important}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button{-webkit-appearance:none}ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--color-red-600,oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.dark,.dark *){color:var(--color-cyan-400,oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing,.25rem)*0);height:fit-content;padding:calc(var(--spacing,.25rem)*0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing,.25rem)*1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing,.25rem)*8);margin-block:calc(var(--spacing,.25rem)*0);height:fit-content}ax-json-viewer .ax-flex-container{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900,oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.dark,.dark *){color:var(--color-blue-400,oklch(70.7% .165 254.624))!important}ax-json-viewer span{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer summary::marker{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing,.25rem)*-4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-json-viewer', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@layer components{ax-json-viewer{padding:calc(var(--spacing,.25rem)*6);display:block;overflow-x:auto}ax-json-viewer .ax-number-color{color:var(--color-blue-900,oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.dark,.dark *){color:var(--color-indigo-400,oklch(67.3% .182 276.935))!important}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button{-webkit-appearance:none}ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--color-red-600,oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.dark,.dark *){color:var(--color-cyan-400,oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing,.25rem)*0);height:fit-content;padding:calc(var(--spacing,.25rem)*0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing,.25rem)*1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing,.25rem)*8);margin-block:calc(var(--spacing,.25rem)*0);height:fit-content}ax-json-viewer .ax-flex-container{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900,oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.dark,.dark *){color:var(--color-blue-400,oklch(70.7% .165 254.624))!important}ax-json-viewer span{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer summary::marker{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing,.25rem)*-4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-json-viewer', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@layer components{ax-json-viewer{padding:calc(var(--spacing,.25rem)*6);display:block;overflow-x:auto}ax-json-viewer .ax-number-color{color:var(--color-blue-900,oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.dark,.dark *){color:var(--color-indigo-400,oklch(67.3% .182 276.935))!important}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button{-webkit-appearance:none}ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--color-red-600,oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.dark,.dark *){color:var(--color-cyan-400,oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing,.25rem)*0);height:fit-content;padding:calc(var(--spacing,.25rem)*0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing,.25rem)*1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing,.25rem)*8);margin-block:calc(var(--spacing,.25rem)*0);height:fit-content}ax-json-viewer .ax-flex-container{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900,oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.dark,.dark *){color:var(--color-blue-400,oklch(70.7% .165 254.624))!important}ax-json-viewer span{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer summary::marker{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing,.25rem)*-4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: true }] }] } });
 
 const COMPONENT = [JsonViewerComponent];