@acorex/components 22.2.14 → 22.2.15

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

@@ -110,10 +110,10 @@ class AXImageEditorService {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorService, decorators: [{
             type: Injectable
         }] });
 
@@ -365,10 +365,10 @@ class AXImageEditorCropperWindowComponent {
         host.style.left = `${this.currentX()}px`;
         host.style.top = `${this.currentY()}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);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: "22.0.8", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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;@layer components{ax-image-editor-cropper-window{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);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 }] }] } });
@@ -895,10 +895,10 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\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-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\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-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}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: "22.0.8", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\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-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}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 }] }] } });
@@ -985,8 +985,8 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         }
         return view.commitChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "handleHistoryShortcut($event)" }, properties: { "class.ax-state-disabled": "disabled", "attr.name": "name" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "handleHistoryShortcut($event)" }, properties: { "class.ax-state-disabled": "disabled", "attr.name": "name" } }, providers: [
             AXImageEditorService,
             { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
@@ -998,7 +998,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             },
         ], 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: "<div\n  #f\n  class=\"ax-editor-container ax-default {{ look }}\"\n  [class.ax-image-editor-pending]=\"!service.isImageLoad()\"\n  (pointerdown)=\"onEditorPointerDown($event)\"\n>\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\n@if (!service.isImageLoad()) {\n  @if (service.loadError()) {\n    <div class=\"ax-error-container\">{{ '@acorex:image-editor.load-error' | translate | async }}</div>\n  } @else {\n    <div class=\"ax-loading-spinner-container\">\n      <ax-loading-spinner\n        [size]=\"16\"\n        color=\"primary\"\n        [text]=\"('@acorex:image-editor.loading' | translate | async) || ''\"\n      ></ax-loading-spinner>\n    </div>\n  }\n}\n\n<div class=\"ax-error-container\"></div>\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-editor-container.ax-image-editor-pending{position:absolute;height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 0);overflow:hidden;opacity:0%}ax-image-editor-container .ax-loading-spinner-container,ax-image-editor-container .ax-error-container{display:flex;min-height:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align: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"] }, { 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: "22.0.8", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look', 'disabled'], host: {
                         '[class.ax-state-disabled]': 'disabled',
@@ -1090,10 +1090,10 @@ class AXImageEditorCropComponent extends AXImageEditorToolComponent {
     crop() {
         this.container.crop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n" }]
         }], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -1107,10 +1107,10 @@ class AXImageEditorHighlightComponent extends AXImageEditorToolComponent {
         super(...arguments);
         this.tool = 'highlight';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHighlightComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n" }]
         }] });
@@ -1129,10 +1129,10 @@ class AXImageEditorHistoryComponent {
     RedoHandler() {
         this.service.redo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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: "22.0.8", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-history', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n" }]
         }] });
@@ -1146,10 +1146,10 @@ class AXImageEditorPenComponent extends AXImageEditorToolComponent {
         super(...arguments);
         this.tool = 'pen';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorPenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n" }]
         }] });
@@ -1163,10 +1163,10 @@ class AXImageEditorRotateComponent extends AXImageEditorToolComponent {
         super(...arguments);
         this.tool = 'rotate';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorRotateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-rotate', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
         }] });
@@ -1194,10 +1194,10 @@ class AXImageEditorCropOptionsComponent {
             this.service.cropperRatio.set(r);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"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]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"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</div>\n\n<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", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"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]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"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</div>\n\n<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", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-crop-options', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"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]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"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</div>\n\n<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" }]
         }], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
@@ -1220,10 +1220,10 @@ class AXImageEditorHighlightOptionsComponent {
     valueHandler(e) {
         this.service.highlightWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightOptionsComponent, isStandalone: true, selector: "ax-image-editor-highlight-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightOptionsComponent }], 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", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorHighlightOptionsComponent, isStandalone: true, selector: "ax-image-editor-highlight-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightOptionsComponent }], 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", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-highlight-options', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightOptionsComponent }], 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" }]
         }] });
@@ -1246,10 +1246,10 @@ class AXImageEditorPenOptionsComponent {
     valueHandler(e) {
         this.service.penWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenOptionsComponent, isStandalone: true, selector: "ax-image-editor-pen-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenOptionsComponent }], 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", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorPenOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorPenOptionsComponent, isStandalone: true, selector: "ax-image-editor-pen-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenOptionsComponent }], 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", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorPenOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-pen-options', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorPenOptionsComponent }], 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" }]
         }] });
@@ -1265,10 +1265,10 @@ class AXImageEditorRotateOptionsComponent {
     rotateLeftHandler() {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\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  [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", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorRotateOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\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  [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", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorRotateOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-rotate-options', encapsulation: ViewEncapsulation.None, imports: [
                         AXButtonComponent,
@@ -1311,10 +1311,10 @@ class AXImageEditorToolsBarComponent {
         ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
     }
     #activeEffect;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, host: {
                         '[class.ax-image-editor-tools-bar-hidden]': 'hidden()',
@@ -1337,10 +1337,10 @@ class AXImageEditorToolSelectorComponent {
         this.aspectRatio = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n  <ax-image-editor-pen></ax-image-editor-pen>\n  <ax-image-editor-highlight></ax-image-editor-highlight>\n  <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n  <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n  <ax-image-editor-pen></ax-image-editor-pen>\n  <ax-image-editor-highlight></ax-image-editor-highlight>\n  <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n  <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [
                         AXImageEditorToolsBarComponent,
@@ -1364,8 +1364,8 @@ const PUBLIC_COMPONENTS = [
     AXImageEditorCropperWindowComponent,
 ];
 class AXImageEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorViewComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
@@ -1384,7 +1384,7 @@ class AXImageEditorModule {
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent,
             AXImageEditorCropperWindowComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorContainerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorContainerComponent,
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
             AXImageEditorToolSelectorComponent,
@@ -1393,7 +1393,7 @@ class AXImageEditorModule {
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...PUBLIC_COMPONENTS],

package/fesm2022/acorex-components-image.mjs

@@ -100,13 +100,13 @@ class AXImageComponent extends MXBaseComponent {
     get __hostStyle() {
         return `width: ${this.width()}px; height: ${this.height()}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: rgb(0 0 0 / .75);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}ax-image img{display:block;height:100%;width:100%}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{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: 'ax-image', useValue: AXImageComponent },
@@ -135,11 +135,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }] } });
 
 class AXImageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXImageComponent],

package/fesm2022/acorex-components-inline-reaction.mjs

@@ -82,20 +82,20 @@ class AXInlineReactionComponent {
         this.expanded.set(value);
         this.expandedChange.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXInlineReactionComponent, isStandalone: true, selector: "ax-inline-reaction", inputs: { emojis: { classPropertyName: "emojis", publicName: "emojis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, showExpanded: { classPropertyName: "showExpanded", publicName: "showExpanded", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", expandedChange: "expandedChange" }, providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], ngImport: i0, template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@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-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXInlineReactionComponent, isStandalone: true, selector: "ax-inline-reaction", inputs: { emojis: { classPropertyName: "emojis", publicName: "emojis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, showExpanded: { classPropertyName: "showExpanded", publicName: "showExpanded", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", expandedChange: "expandedChange" }, providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], ngImport: i0, template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@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-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-inline-reaction', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXEmojiComponent], providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@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-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], showExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpanded", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class AXInlineReactionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent], exports: [AXInlineReactionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent], exports: [AXInlineReactionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXInlineReactionComponent],