npm - @acorex/components - Versions diffs - 21.0.3-next.36 → 21.0.3-next.38 - Mend

@acorex/components 21.0.3-next.36 → 21.0.3-next.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

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

@@ -326,11 +326,11 @@ class AXImageEditorCropperWindowComponent {
         this.selectedHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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;@layer components{ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@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 .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@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{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;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}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);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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.3.3 | 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;@layer components{ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@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 .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@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{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;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}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);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });
 class AXImageEditorViewComponent extends MXBaseComponent {
@@ -604,11 +604,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.service.imageBlob.set(blobs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", 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{margin:calc(var(--spacing,.25rem) * 4);position:absolute;top:0;right:0}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", 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{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black, #000)}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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{margin:calc(var(--spacing,.25rem) * 4);position:absolute;top:0;right:0}}\n/*! tailwindcss v4.3.3 | 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{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black, #000)}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperSize", 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 }] }] } });
 /**
@@ -661,7 +661,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    <ng-content select=\"ax-footer\"></ng-content>\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{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding: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-footer,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.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], 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    <ng-content select=\"ax-footer\"></ng-content>\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{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container .ax-loading-spinner-container{display:flex;align-items:center;justify-content:center}ax-image-editor-container ax-footer{width:100%}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.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
@@ -675,7 +675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => AXImageEditorContainerComponent),
                             multi: true,
                         },
-                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent], 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    <ng-content select=\"ax-footer\"></ng-content>\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{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding: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-footer,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.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent], 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    <ng-content select=\"ax-footer\"></ng-content>\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{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container .ax-loading-spinner-container{display:flex;align-items:center;justify-content:center}ax-image-editor-container ax-footer{width:100%}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.16 | 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 }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -976,7 +976,7 @@ class AXImageEditorToolsBarComponent {
     }
     #activeEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ax-image-editor-tools-bar-hidden": "hidden()" } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{width:100%;display:block}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-image-editor-tools-bar .ax-image-editor-tool-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:1;min-width:0;display:flex}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{justify-content:flex-end;align-items:center;gap:var(--spacing,.25rem);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-rotate-options{align-items:center;gap:var(--spacing,.25rem);display:flex}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ax-image-editor-tools-bar-hidden": "hidden()" } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{margin-left:auto;flex:1}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1)}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing, .25rem) * 40);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing, .25rem) * 4)!important;width:calc(var(--spacing, .25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
             type: Component,
@@ -989,7 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXImageEditorHighlightOptionsComponent,
                         AXImageEditorCropOptionsComponent,
                         AXImageEditorRotateOptionsComponent,
-                    ], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{width:100%;display:block}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-image-editor-tools-bar .ax-image-editor-tool-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:1;min-width:0;display:flex}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{justify-content:flex-end;align-items:center;gap:var(--spacing,.25rem);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-rotate-options{align-items:center;gap:var(--spacing,.25rem);display:flex}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{margin-left:auto;flex:1}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1)}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing, .25rem) * 40);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing, .25rem) * 4)!important;width:calc(var(--spacing, .25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], penTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorPenComponent), { isSignal: true }] }], highlightTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorHighlightComponent), { isSignal: true }] }], cropTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorCropComponent), { isSignal: true }] }], rotateTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorRotateComponent), { isSignal: true }] }] } });
 /**