@acorex/components 21.0.3-next.12 → 21.0.3-next.13

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

@@ -1,21 +1,21 @@
 import { AXComponent, MXBaseComponent, MXInputBaseValueComponent, MXLookComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
-import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
-import * as i1$1 from '@acorex/components/decorators';
-import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
-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, input, ViewEncapsulation, Component, ChangeDetectionStrategy, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, linkedSignal, contentChild, forwardRef, HostBinding, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { signal, Injectable, input, inject, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, linkedSignal, contentChild, forwardRef, HostBinding, output, computed, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
+import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import * as i2 from '@acorex/components/tooltip';
+import { AXTooltipModule, AXTooltipDirective } from '@acorex/components/tooltip';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { AsyncPipe, isPlatformBrowser } from '@angular/common';
+import * as i2$1 from '@acorex/components/toolbar';
+import { AXToolBarModule } from '@acorex/components/toolbar';
 import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
 import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
-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';
@@ -37,154 +37,24 @@ class AXImageEditorService {
         this.redoPressed = signal(false, ...(ngDevMode ? [{ debugName: "redoPressed" }] : /* istanbul ignore next */ []));
         this.cropperRatio = signal(null, ...(ngDevMode ? [{ debugName: "cropperRatio" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * paint mode.
- * @category Components
- */
-class AXImageEditorCropComponent {
-    constructor() {
-        this.service = inject(AXImageEditorService);
-        this.cropPressed = output();
-        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
-    }
-    cropButtonHandler() {
-        this.cropPressed.emit();
-    }
-    ratioHandler(r) {
-        if (this.service.cropperRatio() === r) {
-            this.service.cropperRatio.set(null);
-        }
-        else {
-            this.service.cropperRatio.set(r);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));width:100%;padding:calc(var(--spacing,.25rem) * 2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));width:100%;padding:calc(var(--spacing,.25rem) * 2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
-
-/**
- * paint mode.
- * @category Components
- */
-class AXImageEditorHighlightComponent {
-    constructor() {
-        this.service = inject(AXImageEditorService);
-        /** @ignore */
-        this.selectedColor = signal(this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.value = this.service.highlightWidth();
-    }
-    changeColorHandler(e) {
-        this.service.highlightColor.set(e);
-        this.selectedColor.set(e);
-    }
-    /** @ignore */
-    valueHandler(e) {
-        this.service.highlightWidth.set(e);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
-
-/**
- * paint mode.
- * @category Components
- */
-class AXImageEditorPenComponent {
-    constructor() {
-        this.service = inject(AXImageEditorService);
-        /** @ignore */
-        this.value = this.service.penWidth();
-        /** @ignore */
-        this.selectedColor = signal(this.service.penColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
-    }
-    changeColorHandler(e) {
-        this.service.penColor.set(e);
-        this.selectedColor.set(e);
-    }
-    /** @ignore */
-    valueHandler(e) {
-        this.service.penWidth.set(e);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
-
-/**
- * paint mode.
- * @category Components
- */
-class AXImageEditorRotateComponent {
-    constructor() {
-        /** @ignore */
-        this.service = inject(AXImageEditorService);
-    }
-    /** @ignore */
-    rotateRightHandler() {
-        this.service.rotate.set({ state: 90, userInteract: true });
-    }
-    /** @ignore */
-    rotateLeftHandler() {
-        this.service.rotate.set({ state: -90, userInteract: true });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
-            type: Component,
-            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  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
-
-/**
- * paint mode.
- * @category Components
- */
-class AXImageEditorToolSelectorComponent {
-    constructor() {
-        this.service = inject(AXImageEditorService);
-    }
-    changeToolHandler(tool) {
-        if (this.service.activeToolState() === tool) {
-            this.service.activeToolState.set(null);
+    toggleTool(tool) {
+        if (this.activeToolState() === tool) {
+            this.activeToolState.set(null);
             return;
         }
-        this.service.activeToolState.set(tool);
+        this.activateTool(tool);
+    }
+    activateTool(tool) {
+        this.activeToolState.set(tool);
         if (tool === 'pen' || tool === 'highlight') {
-            this.service.penType.set(tool);
+            this.penType.set(tool);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\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    class=\"ax-sm\"\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    class=\"ax-sm\"\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    class=\"ax-sm\"\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</div>\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: ["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: "21.2.9", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\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    class=\"ax-sm\"\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    class=\"ax-sm\"\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    class=\"ax-sm\"\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</div>\n" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorService, decorators: [{
+            type: Injectable
         }] });
 
 /**
@@ -730,7 +600,6 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         this.service = inject(AXImageEditorService);
         this.imageEditorContainer = viewChild('f', ...(ngDevMode ? [{ debugName: "imageEditorContainer" }] : /* istanbul ignore next */ []));
         this.view = contentChild(AXImageEditorViewComponent, ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
-        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             void this.service.imageBlob();
             if (this.service.imageBlob().length) {
@@ -742,9 +611,6 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
-    cropButtonHandler() {
-        this.view().cropButtonHandler();
-    }
     get __hostClass() {
         if (this.disabled)
             return 'ax-state-disabled';
@@ -754,7 +620,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         return this.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
             AXImageEditorService,
             { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
@@ -764,7 +630,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
                 useExisting: forwardRef(() => AXImageEditorContainerComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding:0;display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:var(--spacing,.25rem);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding:0;display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container ax-footer,ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
@@ -778,18 +644,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => AXImageEditorContainerComponent),
                             multi: true,
                         },
-                    ], imports: [
-                        AXDecoratorModule,
-                        AXLoadingSpinnerComponent,
-                        AXToolBarModule,
-                        AXImageEditorCropComponent,
-                        AXButtonModule,
-                        AXImageEditorToolSelectorComponent,
-                        AXImageEditorPenComponent,
-                        AXImageEditorHighlightComponent,
-                        AXImageEditorRotateComponent,
-                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding:0;display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:var(--spacing,.25rem);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], __hostClass: [{
+                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-image-editor-container>.ax-editor-container{padding:0;display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container ax-footer,ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], __hostName: [{
@@ -797,6 +653,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['attr.name']
             }] } });
 
+/**
+ * Base class for image editor tool trigger components.
+ * @category Components
+ */
+class AXImageEditorToolComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+    }
+    setActive() {
+        this.service.activateTool(this.tool);
+    }
+}
+
+/**
+ * Crop tool trigger for the image editor toolbar.
+ * @category Components
+ */
+class AXImageEditorCropComponent extends AXImageEditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.tool = 'crop';
+        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", 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", "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.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: "21.2.9", 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 }] }] } });
+
+/**
+ * Highlight tool trigger for the image editor toolbar.
+ * @category Components
+ */
+class AXImageEditorHighlightComponent extends AXImageEditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.tool = 'highlight';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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", "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.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
 /**
  * paint mode.
  * @category Components
@@ -812,19 +716,230 @@ class AXImageEditorHistoryComponent {
         this.service.redoPressed.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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  >\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  >\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", "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: ["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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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  >\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  >\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", "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.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: "21.2.9", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
             type: Component,
             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: "<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  >\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  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n" }]
         }] });
 
+/**
+ * Pen tool trigger for the image editor toolbar.
+ * @category Components
+ */
+class AXImageEditorPenComponent extends AXImageEditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.tool = 'pen';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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", "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.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
+/**
+ * Rotate tool trigger for the image editor toolbar.
+ * @category Components
+ */
+class AXImageEditorRotateComponent extends AXImageEditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.tool = 'rotate';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorRotateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "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: "21.2.9", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-rotate', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
+/** @ignore */
+class AXImageEditorCropOptionsComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+        this.container = inject(AXImageEditorContainerComponent);
+        this.cropPressed = output();
+        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    }
+    cropButtonHandler() {
+        this.cropPressed.emit();
+        this.container.view()?.cropButtonHandler();
+    }
+    ratioHandler(r) {
+        if (this.service.cropperRatio() === r) {
+            this.service.cropperRatio.set(null);
+        }
+        else {
+            this.service.cropperRatio.set(r);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 aspectRatio(); track $index) {\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", "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: "21.2.9", 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 aspectRatio(); track $index) {\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 }] }] } });
+
+/** @ignore */
+class AXImageEditorHighlightOptionsComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.selectedColor = signal(this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.value = this.service.highlightWidth();
+    }
+    changeColorHandler(e) {
+        this.service.highlightColor.set(e);
+        this.selectedColor.set(e);
+    }
+    /** @ignore */
+    valueHandler(e) {
+        this.service.highlightWidth.set(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorHighlightOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-highlight-options', encapsulation: ViewEncapsulation.None, imports: [
+                        AXColorBoxComponent,
+                        FormsModule,
+                        AXRangeSliderComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
+/** @ignore */
+class AXImageEditorPenOptionsComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.value = this.service.penWidth();
+        /** @ignore */
+        this.selectedColor = signal(this.service.penColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+    }
+    changeColorHandler(e) {
+        this.service.penColor.set(e);
+        this.selectedColor.set(e);
+    }
+    /** @ignore */
+    valueHandler(e) {
+        this.service.penWidth.set(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorPenOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-pen-options', encapsulation: ViewEncapsulation.None, imports: [
+                        AXColorBoxComponent,
+                        FormsModule,
+                        AXRangeSliderComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
+/** @ignore */
+class AXImageEditorRotateOptionsComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+    }
+    rotateRightHandler() {
+        this.service.rotate.set({ state: 90, userInteract: true });
+    }
+    rotateLeftHandler() {
+        this.service.rotate.set({ state: -90, userInteract: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorRotateOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorRotateOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-rotate-options', encapsulation: ViewEncapsulation.None, imports: [
+                        AXButtonComponent,
+                        AXTooltipDirective,
+                        AXDecoratorIconComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], 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" }]
+        }] });
+
+/**
+ * Toolbar layout for configurable image editor tools.
+ * @category Components
+ */
+class AXImageEditorToolsBarComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+        /**
+         * Tool component reference to activate on load.
+         */
+        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+        this.penTool = contentChild(AXImageEditorPenComponent, ...(ngDevMode ? [{ debugName: "penTool" }] : /* istanbul ignore next */ []));
+        this.highlightTool = contentChild(AXImageEditorHighlightComponent, ...(ngDevMode ? [{ debugName: "highlightTool" }] : /* istanbul ignore next */ []));
+        this.cropTool = contentChild(AXImageEditorCropComponent, ...(ngDevMode ? [{ debugName: "cropTool" }] : /* istanbul ignore next */ []));
+        this.rotateTool = contentChild(AXImageEditorRotateComponent, ...(ngDevMode ? [{ debugName: "rotateTool" }] : /* istanbul ignore next */ []));
+        this.cropAspectRatio = computed(() => this.cropTool()?.aspectRatio() ?? [], ...(ngDevMode ? [{ debugName: "cropAspectRatio" }] : /* istanbul ignore next */ []));
+        this.#activeEffect = effect(() => {
+            this.active()?.setActive();
+        }, ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
+    }
+    #activeEffect;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{width:100%;display:block}ax-image-editor-tools-bar .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-image-editor-tools-bar .ax-image-editor-tool-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:1;min-width:0;display:flex}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{justify-content:flex-end;align-items:center;gap:var(--spacing,.25rem);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-rotate-options{align-items:center;gap:var(--spacing,.25rem);display:flex}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AXDecoratorModule,
+                        AXToolBarModule,
+                        AXImageEditorPenOptionsComponent,
+                        AXImageEditorHighlightOptionsComponent,
+                        AXImageEditorCropOptionsComponent,
+                        AXImageEditorRotateOptionsComponent,
+                    ], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n  <ax-prefix class=\"ax-image-editor-tool-triggers\">\n    <ng-content\n      select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n    ></ng-content>\n  </ax-prefix>\n\n  @if (service.activeToolState()) {\n    <ax-suffix class=\"ax-image-editor-tool-options\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          @if (penTool()) {\n            <ax-image-editor-pen-options></ax-image-editor-pen-options>\n          }\n        }\n        @case ('highlight') {\n          @if (highlightTool()) {\n            <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n          }\n        }\n        @case ('crop') {\n          @if (cropTool()) {\n            <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n          }\n        }\n        @case ('rotate') {\n          @if (rotateTool()) {\n            <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n          }\n        }\n      }\n    </ax-suffix>\n  }\n</ax-toolbar>\n", styles: ["@layer components{ax-image-editor-tools-bar{width:100%;display:block}ax-image-editor-tools-bar .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{justify-content:flex-start;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-image-editor-tools-bar .ax-image-editor-tool-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:1;min-width:0;display:flex}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{justify-content:flex-end;align-items:center;gap:var(--spacing,.25rem);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-color-box{flex-shrink:0}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}ax-image-editor-tools-bar ax-image-editor-crop-options{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}ax-image-editor-tools-bar ax-image-editor-rotate-options{align-items:center;gap:var(--spacing,.25rem);display:flex}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], penTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorPenComponent), { isSignal: true }] }], highlightTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorHighlightComponent), { isSignal: true }] }], cropTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorCropComponent), { isSignal: true }] }], rotateTool: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorRotateComponent), { isSignal: true }] }] } });
+
+/**
+ * Convenience wrapper that includes all image editor tools.
+ * @category Components
+ */
+class AXImageEditorToolSelectorComponent {
+    constructor() {
+        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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"] }, { 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"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [
+                        AXImageEditorToolsBarComponent,
+                        AXImageEditorPenComponent,
+                        AXImageEditorHighlightComponent,
+                        AXImageEditorCropComponent,
+                        AXImageEditorRotateComponent,
+                    ], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], 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" }]
+        }], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
+
 const COMPONENT = [
     AXImageEditorViewComponent,
     AXImageEditorContainerComponent,
     AXImageEditorCropComponent,
     AXImageEditorHistoryComponent,
     AXImageEditorToolSelectorComponent,
+    AXImageEditorToolsBarComponent,
     AXImageEditorPenComponent,
     AXImageEditorHighlightComponent,
     AXImageEditorRotateComponent,
@@ -856,6 +971,7 @@ class AXImageEditorModule {
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
             AXImageEditorToolSelectorComponent,
+            AXImageEditorToolsBarComponent,
             AXImageEditorPenComponent,
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent,
@@ -864,6 +980,7 @@ class AXImageEditorModule {
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
             AXImageEditorToolSelectorComponent,
+            AXImageEditorToolsBarComponent,
             AXImageEditorPenComponent,
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent,
@@ -872,6 +989,7 @@ class AXImageEditorModule {
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
             AXImageEditorToolSelectorComponent,
+            AXImageEditorToolsBarComponent,
             AXImageEditorPenComponent,
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent] }); }
@@ -889,5 +1007,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent };
+export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolComponent, AXImageEditorToolSelectorComponent, AXImageEditorToolsBarComponent, AXImageEditorViewComponent };
 //# sourceMappingURL=acorex-components-image-editor.mjs.map