@acorex/components 20.1.4 → 20.1.6

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

@@ -3,18 +3,20 @@ import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
-import * as i2 from '@acorex/components/toolbar';
+import * as i2$1 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
 import * as i0 from '@angular/core';
 import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy, input, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, computed, linkedSignal, HostBinding, contentChild, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import * as i1$2 from '@angular/common';
+import { AsyncPipe, isPlatformBrowser, CommonModule } from '@angular/common';
 import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
 import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
-import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
-import * as i1$2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i2 from '@acorex/components/tooltip';
+import { AXTooltipModule, AXTooltipDirective } from '@acorex/components/tooltip';
 import { AXDialogModule } from '@acorex/components/dialog';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
@@ -64,11 +66,11 @@ class AXImageEditorCropComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('1:1')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"1:1\"\n></ax-button>\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('16:9')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"16:9\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n></ax-button>\n\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('1:1')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"1:1\"\n></ax-button>\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('16:9')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"16:9\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('1:1')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"1:1\"\n></ax-button>\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('16:9')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"16:9\"\n></ax-button>\n" }]
+            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n></ax-button>\n\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('1:1')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"1:1\"\n></ax-button>\n<ax-button\n  [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n  [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n  (click)=\"ratioHandler('16:9')\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"16:9\"\n></ax-button>\n" }]
         }] });
 
 /**
@@ -92,11 +94,11 @@ class AXImageEditorHighlightComponent {
         this.service.highlightWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Highlight Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Highlight Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
+            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
 
 /**
@@ -120,11 +122,11 @@ class AXImageEditorPenComponent {
         this.service.penWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
+            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
 
 /**
@@ -145,11 +147,18 @@ class AXImageEditorRotateComponent {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], 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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXTooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-rotate', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n" }]
+            args: [{ selector: 'ax-image-editor-rotate', encapsulation: ViewEncapsulation.None, imports: [
+                        AXButtonComponent,
+                        AXTooltipDirective,
+                        AXDecoratorIconComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], 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" }]
         }] });
 
 /**
@@ -171,11 +180,11 @@ class AXImageEditorToolSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-button\n  axTooltip=\"pen\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"highlight\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"crop\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"rotate\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXTooltipModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], template: "<ax-button\n  axTooltip=\"pen\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"highlight\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"crop\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"rotate\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
+            args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
         }] });
 
 /**
@@ -685,7 +694,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
                 useExisting: forwardRef(() => AXImageEditorContainerComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      <ax-toolbar class=\"ax-secondary-toolbar\">\n        <ax-prefix>\n          @switch (service.activeToolState()) {\n            @case ('pen') {\n              <ax-image-editor-pen></ax-image-editor-pen>\n            }\n            @case ('crop') {\n              <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n            }\n            @case ('highlight') {\n              <ax-image-editor-highlight></ax-image-editor-highlight>\n            }\n            @case ('rotate') {\n              <ax-image-editor-rotate></ax-image-editor-rotate>\n            }\n          }\n        </ax-prefix>\n      </ax-toolbar>\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      <ax-toolbar class=\"ax-secondary-toolbar\">\n        <ax-prefix>\n          @switch (service.activeToolState()) {\n            @case ('pen') {\n              <ax-image-editor-pen></ax-image-editor-pen>\n            }\n            @case ('crop') {\n              <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n            }\n            @case ('highlight') {\n              <ax-image-editor-highlight></ax-image-editor-highlight>\n            }\n            @case ('rotate') {\n              <ax-image-editor-rotate></ax-image-editor-rotate>\n            }\n          }\n        </ax-prefix>\n      </ax-toolbar>\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
@@ -730,11 +739,11 @@ class AXImageEditorHistoryComponent {
         this.service.redoPressed.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"UndoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"RedoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXTooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
+            args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"UndoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"RedoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
         }] });
 
 const COMPONENT = [
@@ -758,7 +767,6 @@ const MODULES = [
     AXDecoratorModule,
     AXLoadingModule,
     AXDialogModule,
-    AXTooltipModule,
 ];
 class AXImageEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -770,8 +778,7 @@ class AXImageEditorModule {
             AXPopoverModule,
             AXDecoratorModule,
             AXLoadingModule,
-            AXDialogModule,
-            AXTooltipModule, AXImageEditorViewComponent,
+            AXDialogModule, AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,