@acorex/components 19.11.0-next.1 → 19.11.0-next.3

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

@@ -1,143 +1,168 @@
-import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent, MXBaseComponent } from '@acorex/components/common';
+import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { MXBaseComponent, MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
 import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
+import * as i2 from '@acorex/components/toolbar';
+import { AXToolBarModule } from '@acorex/components/toolbar';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, viewChild, forwardRef, Component, ViewEncapsulation, HostBinding, input, Renderer2, computed, NgZone, afterNextRender, effect, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy, input, viewChild, Renderer2, computed, linkedSignal, NgZone, afterNextRender, effect, HostBinding, contentChild, forwardRef, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
-import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
 import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
-import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
+import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
 import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
+import { AXPopoverModule } from '@acorex/components/popover';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 
 class AXImageEditorService {
     constructor() {
-        this.penColor = signal('');
-        this.lineCap = signal('round');
-        this.lineWidth = signal(10);
-        this.penType = signal('pen');
-        this.toggleClear = signal({ state: false, userInteract: false });
-        this.cropState = signal({ state: false, userInteract: false });
+        this.activeToolState = signal(null);
+        this.penColor = signal('rgb(12, 12, 12)');
+        this.highlightColor = signal('rgb(255, 210, 48)');
+        this.penWidth = signal(10);
+        this.highlightWidth = signal(10);
+        this.penType = signal(null);
         this.rotate = signal({ state: 0, userInteract: false });
         this.isImageLoad = signal(false);
         this.newImage = signal(null);
         this.initialImage = signal(null);
         this.imageBlob = signal([]);
+        this.undoPressed = signal(false);
+        this.redoPressed = signal(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService, decorators: [{
             type: Injectable
         }] });
 
 /**
- * paint container.
+ * paint mode.
  * @category Components
  */
-class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+class AXImageEditorCropComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+        this.cropPressed = output();
+    }
+    cropButtonHandler() {
+        this.cropPressed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", outputs: { cropPressed: "cropPressed" }, ngImport: i0, template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], template: "<ax-button (click)=\"cropButtonHandler()\" class=\"ax-crop-save ax-sm\" text=\"Crop\"></ax-button>\n" }]
+        }] });
+
+/**
+ * paint mode.
+ * @category Components
+ */
+class AXImageEditorHistoryComponent {
+    constructor() {
+        this.service = inject(AXImageEditorService);
+    }
+    UndoHandler() {
+        this.service.undoPressed.set(true);
+    }
+    RedoHandler() {
+        this.service.redoPressed.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", ngImport: i0, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "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: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-button axTooltip=\"Undo\" axTooltipPlacement=\"top\" (onClick)=\"UndoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Redo\" axTooltipPlacement=\"top\" (onClick)=\"RedoHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
+        }] });
+
+/**
+ * paint mode.
+ * @category Components
+ */
+class AXimageEditorHeaderComponent {
+    constructor() {
+        this.parent = inject(AXImageEditorContainerComponent);
+    }
+    saveHandler() {
+        this.parent.save();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXimageEditorHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXimageEditorHeaderComponent, isStandalone: true, selector: "ax-image-editor-header", ngImport: i0, template: "<ax-toolbar>\n  <ax-prefix>\n    <ax-image-editor-history></ax-image-editor-history>\n  </ax-prefix>\n\n  <ax-suffix>\n    <ax-button type=\"submit\" (onClick)=\"saveHandler()\" axTooltip=\"Save\" axTooltipPlacement=\"top\" look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-save\"> </ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-toolbar>\n", styles: ["ax-image-editor-header{width:100%}ax-image-editor-header ax-toolbar{justify-content:space-between}ax-image-editor-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "component", type: AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "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: "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.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXimageEditorHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-header', encapsulation: ViewEncapsulation.None, imports: [AXImageEditorHistoryComponent, AXButtonComponent, AXDecoratorModule, AXToolBarModule, AXTooltipDirective], template: "<ax-toolbar>\n  <ax-prefix>\n    <ax-image-editor-history></ax-image-editor-history>\n  </ax-prefix>\n\n  <ax-suffix>\n    <ax-button type=\"submit\" (onClick)=\"saveHandler()\" axTooltip=\"Save\" axTooltipPlacement=\"top\" look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-save\"> </ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-toolbar>\n", styles: ["ax-image-editor-header{width:100%}ax-image-editor-header ax-toolbar{justify-content:space-between}ax-image-editor-header .ax-start-toolbar-divider{display:none}\n"] }]
+        }] });
+
+/**
+ * paint mode.
+ * @category Components
+ */
+class AXImageEditorHighlightComponent {
     constructor() {
-        super(...arguments);
-        /** @ignore */
         this.service = inject(AXImageEditorService);
-        this.imageEditorContainer = viewChild('f');
         /** @ignore */
-        this.dialogService = inject(AXDialogService);
+        this.selectedColor = signal(this.service.highlightColor());
         /** @ignore */
-        this.options = signal({
-            color: 'primary',
-            title: 'Attention',
-            vertical: false,
-            content: 'Do you want to save changes?',
-            orientation: 'vertical',
-            draggable: true,
-        });
+        this.value = this.service.highlightWidth();
     }
-    save() {
-        if (this.service.initialImage() !== this.service.newImage()) {
-            this.dialogService
-                .confirm(this.options().title, this.options().content, this.options().color, this.options().orientation, this.options().draggable)
-                .then((data) => {
-                if (data.result) {
-                    this.service.initialImage.set(this.service.newImage());
-                    this.commitValue(this.service.imageBlob(), true);
-                }
-            })
-                .catch(() => this.commitValue(null));
-        }
-        else {
-            this.commitValue(null);
-        }
+    changeColorHandler(e) {
+        this.service.highlightColor.set(e);
+        this.selectedColor.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
-            AXImageEditorService,
-            { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
-            { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
-            { provide: AXClearableComponent, useExisting: AXImageEditorContainerComponent },
-            { provide: AXValuableComponent, useExisting: AXImageEditorContainerComponent },
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AXImageEditorContainerComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ng-content> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </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", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @ignore */
+    valueHandler(e) {
+        this.service.highlightWidth.set(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Highlight Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-container', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look'], providers: [
-                        AXImageEditorService,
-                        { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
-                        { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
-                        { provide: AXClearableComponent, useExisting: AXImageEditorContainerComponent },
-                        { provide: AXValuableComponent, useExisting: AXImageEditorContainerComponent },
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AXImageEditorContainerComponent),
-                            multi: true,
-                        },
-                    ], imports: [AXLoadingSpinnerComponent], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ng-content> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </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", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, CommonModule, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Highlight Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
 
 /**
- * paint color picker.
+ * paint mode.
  * @category Components
  */
-class AXImageEditorColorPickerComponent {
+class AXImageEditorPenComponent {
     constructor() {
-        /** @ignore */
         this.service = inject(AXImageEditorService);
         /** @ignore */
-        this.selectedColor = signal('rgb(12, 12, 12)');
+        this.value = this.service.penWidth();
+        /** @ignore */
+        this.selectedColor = signal(this.service.penColor());
     }
-    /** @ignore */
     changeColorHandler(e) {
         this.service.penColor.set(e);
         this.selectedColor.set(e);
     }
-    get __hostClass() {
-        return `.5rem`;
+    /** @ignore */
+    valueHandler(e) {
+        this.service.penWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXImageEditorColorPickerComponent, isStandalone: true, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-color-picker', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, AXTooltipDirective, FormsModule], template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
-        }], propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['style.marginInline']
-            }] } });
+            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, CommonModule, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
+        }] });
 
 /**
  * paint mode.
  * @category Components
  */
-class AXImageEditorCropComponent {
+class AXImageEditorRotateComponent {
     constructor() {
         /** @ignore */
         this.service = inject(AXImageEditorService);
@@ -150,67 +175,39 @@ class AXImageEditorCropComponent {
     rotateLeftHandler() {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
-    /** @ignore */
-    crop() {
-        this.service.cropState.update((prev) => {
-            return { userInteract: true, state: !prev.state };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", ngImport: i0, template: "<ax-button\n  axTooltip=\"Crop Image\"\n  axTooltipPlacement=\"top\"\n  [selected]=\"service.cropState().state && true\"\n  (click)=\"crop()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", ngImport: i0, template: "<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent], template: "<ax-button\n  axTooltip=\"Crop Image\"\n  axTooltipPlacement=\"top\"\n  [selected]=\"service.cropState().state && true\"\n  (click)=\"crop()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
+            args: [{ selector: 'ax-image-editor-rotate', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n" }]
         }] });
 
 /**
  * paint mode.
  * @category Components
  */
-class AXImageEditorPenModeChangerComponent {
+class AXImageEditorToolSelectorComponent {
     constructor() {
-        /** @ignore */
         this.service = inject(AXImageEditorService);
-        /** @ignore */
-        this.value = 10;
-        /** @ignore */
-        this.popoverOption = {
-            openOn: 'click',
-            closeOn: 'clickOut',
-            placement: 'top',
-            offsetX: 0,
-            offsetY: 0,
-        };
-        /** @ignore */
-        this.selectedPenType = signal('pen');
-    }
-    /** @ignore */
-    penTypeHandler(e) {
-        this.service.penType.set(e);
-    }
-    /** @ignore */
-    clear() {
-        this.service.toggleClear.set({ userInteract: true, state: true });
-    }
-    /** @ignore */
-    get __hostClass() {
-        return `.5rem`;
     }
-    /** @ignore */
-    valueHandler(e) {
-        this.service.lineWidth.set(e);
+    changeToolHandler(tool) {
+        if (this.service.activeToolState() === tool) {
+            this.service.activeToolState.set(null);
+            return;
+        }
+        this.service.activeToolState.set(tool);
+        if (tool === 'pen' || tool === 'highlight') {
+            this.service.penType.set(tool);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXImageEditorPenModeChangerComponent, isStandalone: true, selector: "ax-image-editor-pen-mode-changer", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-button\n      (click)=\"penTypeHandler('pen')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'pen' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    </ax-button>\n\n    <ax-button\n      (click)=\"penTypeHandler('highlight')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-image-editor-pen-mode-changer{margin-inline:0!important}ax-image-editor-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-image-editor-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container{display:flex;align-items:center}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}ax-image-editor-pen-mode-changer .ax-overlay-pane{padding:.5rem!important}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", ngImport: i0, template: "<ax-button\n  axTooltip=\"pen\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"highlight\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"crop\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"rotate\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "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: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorPenModeChangerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-pen-mode-changer', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent, AXPopoverComponent, AXRangeSliderComponent, FormsModule], template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-button\n      (click)=\"penTypeHandler('pen')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'pen' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    </ax-button>\n\n    <ax-button\n      (click)=\"penTypeHandler('highlight')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-image-editor-pen-mode-changer{margin-inline:0!important}ax-image-editor-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-image-editor-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container{display:flex;align-items:center}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}ax-image-editor-pen-mode-changer .ax-overlay-pane{padding:.5rem!important}\n"] }]
-        }], propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['style.marginInline']
-            }] } });
+            args: [{ selector: 'ax-image-editor-tool-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective], template: "<ax-button\n  axTooltip=\"pen\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"highlight\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"crop\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  axTooltip=\"rotate\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
+        }] });
 
 class AXImageEditorViewComponent extends MXBaseComponent {
     /** @ignore */
@@ -264,12 +261,16 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         /** @ignore */
         this.cropEndY = signal(0);
         /** @ignore */
+        this.isDrawRectangleCreated = signal(false);
+        /** @ignore */
         this.parent = inject(AXImageEditorContainerComponent);
         this.renderer = inject(Renderer2);
         /** @ignore */
         this.imageAspect = computed(() => {
             return this.service.initialImage().width / this.service.initialImage().height;
         });
+        this.imageEditorHistory = signal([]);
+        this.imageEditorHistoryPointer = linkedSignal(() => this.imageEditorHistory().length - 1);
         this.ngZone = inject(NgZone);
         afterNextRender(() => {
             this.resizeEventListener = this.renderer.listen(window, 'resize', this.resizeWindow.bind(this));
@@ -281,11 +282,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             //set canvas options
             this.ctx.set(this.canvasElem().nativeElement.getContext('2d', { willReadFrequently: true }));
             this.ctx().lineJoin = 'round';
-            this.ctx().lineCap = this.service.lineCap();
-            this.ctx().strokeStyle = this.service.penColor();
-            this.ctx().lineWidth = this.service.lineWidth();
-            this.ctx().globalCompositeOperation = 'source-over';
-            this.ctx().globalAlpha = 1;
+            this.ctx().lineCap = 'round';
         });
         effect(() => {
             if (this.parent.imageEditorContainer() && this.service.isImageLoad()) {
@@ -293,21 +290,27 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             }
         });
         effect(() => {
-            if (!this.service.toggleClear().userInteract)
-                return;
-            if (this.service.toggleClear().state) {
-                this.imageLoaded();
+            if (!this.service.undoPressed()) {
+                this.imageChanged();
+            }
+        });
+        effect(() => {
+            if (!this.service.redoPressed()) {
+                this.imageChanged();
             }
         });
         effect(() => {
-            if (!this.service.cropState().userInteract || !this.ctx())
+            if (!this.ctx())
                 return;
-            if (this.service.cropState().state) {
+            this.ctx().globalAlpha = 1;
+            if (this.service.activeToolState() === 'crop') {
                 this.ctx().filter = 'brightness(40%)';
             }
             else {
                 this.ctx().filter = 'brightness(100%)';
             }
+            if (!this.service.newImage())
+                return;
             this.ctx().drawImage(this.service.newImage(), 0, 0, this.service.newImage().width, this.service.newImage().height);
         });
         effect(() => {
@@ -327,19 +330,37 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     }
     /** @ignore */
     imageLoaded() {
+        this.imageEditorHistory.set([this.service.initialImage()]);
         this.service.newImage.set(this.service.initialImage());
-        this.service.toggleClear.set({ userInteract: false, state: false });
         this.service.isImageLoad.set(true);
-        this.canvasResponsive(this.service.initialImage());
+    }
+    /** @ignore */
+    imageChanged() {
+        if (this.service.undoPressed() && this.imageEditorHistoryPointer() >= 1) {
+            this.imageEditorHistoryPointer.update((prev) => prev - 1);
+            this.service.newImage.set(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+            this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+        }
+        if (this.service.redoPressed() && this.imageEditorHistoryPointer() < this.imageEditorHistory().length - 1) {
+            this.imageEditorHistoryPointer.update((prev) => prev + 1);
+            this.service.newImage.set(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+            this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+        }
+        this.service.undoPressed.set(false);
+        this.service.redoPressed.set(false);
     }
     /** @ignore */
     penConfigHandler(penType) {
         switch (penType) {
             case 'pen':
                 this.ctx().globalAlpha = 1;
+                this.ctx().strokeStyle = this.service.penColor();
+                this.ctx().lineWidth = this.service.penWidth();
                 break;
             case 'highlight':
                 this.ctx().globalAlpha = 0.008;
+                this.ctx().strokeStyle = this.service.highlightColor();
+                this.ctx().lineWidth = this.service.highlightWidth();
                 break;
         }
     }
@@ -350,16 +371,15 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     /** @ignore */
     mouseDownHandler(e) {
         this.isMouseDown.set(true);
-        if (this.service.cropState().state) {
+        if (this.service.activeToolState() === 'crop') {
             this.cropStartX.set(e.offsetX);
             this.cropStartY.set(e.offsetY);
             this.cropEndX.set(0);
         }
         else {
+            if (!this.service.penType())
+                return;
             this.penConfigHandler(this.service.penType());
-            this.ctx().strokeStyle = this.service.penColor();
-            this.ctx().lineCap = this.service.lineCap();
-            this.ctx().lineWidth = this.service.lineWidth();
             this.ctx().beginPath();
             this.ctx().moveTo(e.offsetX, e.offsetY);
             this.ctx().lineTo(e.offsetX, e.offsetY);
@@ -370,13 +390,15 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     mouseMoveHandler(e) {
         if (!this.isMouseDown())
             return;
-        if (this.service.cropState().state) {
+        if (this.service.activeToolState() === 'crop') {
             this.ctx().globalCompositeOperation = 'screen';
             this.cropEndX.set(e.offsetX);
             this.cropEndY.set(e.offsetY);
             this.drawSelection();
         }
         else {
+            if (!this.service.penType())
+                return;
             this.ctx().lineTo(e.offsetX, e.offsetY);
             this.ctx().stroke();
         }
@@ -384,7 +406,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     /** @ignore */
     mouseUpHandler() {
         this.isMouseDown.set(false);
-        if (this.service.cropState().state && this.cropEndX()) {
+        if (this.service.activeToolState() === 'crop' && this.cropEndX()) {
             this.ctx().globalCompositeOperation = 'source-over';
             this.cropImageFunction();
         }
@@ -395,19 +417,18 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     }
     /** @ignore */
     touchStartHandler(e) {
+        this.isMouseDown.set(true);
         const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;
         const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;
-        this.isMouseDown.set(true);
-        if (this.service.cropState().state) {
+        if (this.service.activeToolState() === 'crop') {
             this.cropStartX.set(offsetX);
             this.cropStartY.set(offsetY);
             this.cropEndX.set(0);
         }
         else {
+            if (!this.service.penType())
+                return;
             this.penConfigHandler(this.service.penType());
-            this.ctx().strokeStyle = this.service.penColor();
-            this.ctx().lineCap = this.service.lineCap();
-            this.ctx().lineWidth = this.service.lineWidth();
             this.ctx().beginPath();
             this.ctx().moveTo(offsetX, offsetY);
             this.ctx().lineTo(offsetX, offsetY);
@@ -421,13 +442,15 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             return;
         const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;
         const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;
-        if (this.service.cropState().state) {
+        if (this.service.activeToolState() === 'crop') {
             this.ctx().globalCompositeOperation = 'screen';
             this.cropEndX.set(offsetX);
             this.cropEndY.set(offsetY);
             this.drawSelection();
         }
         else {
+            if (!this.service.penType())
+                return;
             this.ctx().lineTo(offsetX, offsetY);
             this.ctx().stroke();
         }
@@ -435,7 +458,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     /** @ignore */
     touchEndHandler() {
         this.isMouseDown.set(false);
-        if (this.service.cropState().state && this.cropEndX()) {
+        if (this.service.activeToolState() === 'crop' && this.cropEndX()) {
             this.ctx().globalCompositeOperation = 'source-over';
             this.cropImageFunction();
         }
@@ -456,6 +479,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             this.ctx().lineWidth = 2;
             this.ctx().strokeRect(this.cropStartX(), this.cropStartY(), cropWidth, cropHeight);
         });
+        this.isDrawRectangleCreated.set(true);
     }
     /** @ignore */
     cropImageFunction() {
@@ -497,6 +521,8 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     }
     /** @ignore */
     cropButtonHandler() {
+        if (!this.isDrawRectangleCreated())
+            return;
         let cropWidth;
         let cropHeight;
         this.service.rotate.update((prev) => {
@@ -523,7 +549,8 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.ctx().putImageData(this.cropImageData(), 0, 0);
         this.saveImageChange();
         this.cropImageData.set(null);
-        this.service.cropState.set({ userInteract: false, state: false });
+        this.service.activeToolState.set(null);
+        this.isDrawRectangleCreated.set(false);
     }
     /** @ignore */
     rotateImage() {
@@ -544,6 +571,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         newImage.crossOrigin = 'anonymous';
         newImage.src = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
         this.service.newImage.set(newImage);
+        this.imageEditorHistory.update((prev) => [...prev, newImage]);
         const tempBlob = [];
         this.canvasElem().nativeElement.toBlob((blob) => {
             tempBlob.push(blob);
@@ -560,23 +588,111 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     get __hostStyle() {
         return `width: ${this.service.initialImage()?.width}px; height: ${this.service.initialImage()?.height}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.7", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.8", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostStyle: [{
                 type: HostBinding,
                 args: ['style']
             }] } });
 
+/**
+ * paint container.
+ * @category Components
+ */
+class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+        this.imageEditorContainer = viewChild('f');
+        this.view = contentChild(AXImageEditorViewComponent);
+        /** @ignore */
+        this.dialogService = inject(AXDialogService);
+        /** @ignore */
+        this.options = signal({
+            color: 'primary',
+            title: 'Attention',
+            vertical: false,
+            content: 'Do you want to save changes?',
+            orientation: 'vertical',
+            draggable: true,
+        });
+    }
+    save() {
+        if (this.service.initialImage() !== this.service.newImage()) {
+            this.dialogService
+                .confirm(this.options().title, this.options().content, this.options().color, this.options().orientation, this.options().draggable)
+                .then((data) => {
+                if (data.result) {
+                    this.service.initialImage.set(this.service.newImage());
+                    this.commitValue(this.service.imageBlob(), true);
+                }
+            })
+                .catch(() => this.commitValue(null));
+        }
+        else {
+            this.commitValue(null);
+        }
+    }
+    cropButtonHandler() {
+        this.view().cropButtonHandler();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
+            AXImageEditorService,
+            { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
+            { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
+            { provide: AXClearableComponent, useExisting: AXImageEditorContainerComponent },
+            { provide: AXValuableComponent, useExisting: AXImageEditorContainerComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXImageEditorContainerComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ax-image-editor-header></ax-image-editor-header>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      <ax-toolbar class=\"ax-secondary-toolbar\">\n        <ax-prefix>\n          @switch (service.activeToolState()) {\n            @case ('pen') {\n              <ax-image-editor-pen></ax-image-editor-pen>\n            }\n            @case ('crop') {\n              <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n            }\n            @case ('highlight') {\n              <ax-image-editor-highlight></ax-image-editor-highlight>\n            }\n            @case ('rotate') {\n              <ax-image-editor-rotate></ax-image-editor-rotate>\n            }\n          }\n        </ax-prefix>\n      </ax-toolbar>\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }, { kind: "component", type: AXimageEditorHeaderComponent, selector: "ax-image-editor-header" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-container', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look'], providers: [
+                        AXImageEditorService,
+                        { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
+                        { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
+                        { provide: AXClearableComponent, useExisting: AXImageEditorContainerComponent },
+                        { provide: AXValuableComponent, useExisting: AXImageEditorContainerComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXImageEditorContainerComponent),
+                            multi: true,
+                        },
+                    ], imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXLoadingSpinnerComponent,
+                        AXToolBarModule,
+                        AXImageEditorCropComponent,
+                        AXButtonModule,
+                        AXImageEditorToolSelectorComponent,
+                        AXImageEditorPenComponent,
+                        AXImageEditorHighlightComponent,
+                        AXImageEditorRotateComponent,
+                        AXimageEditorHeaderComponent,
+                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container  ax-{{ look }}\">\n    <ax-image-editor-header></ax-image-editor-header>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      <ax-toolbar class=\"ax-secondary-toolbar\">\n        <ax-prefix>\n          @switch (service.activeToolState()) {\n            @case ('pen') {\n              <ax-image-editor-pen></ax-image-editor-pen>\n            }\n            @case ('crop') {\n              <ax-image-editor-crop (cropPressed)=\"cropButtonHandler()\"></ax-image-editor-crop>\n            }\n            @case ('highlight') {\n              <ax-image-editor-highlight></ax-image-editor-highlight>\n            }\n            @case ('rotate') {\n              <ax-image-editor-rotate></ax-image-editor-rotate>\n            }\n          }\n        </ax-prefix>\n      </ax-toolbar>\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}\n"] }]
+        }] });
+
 const COMPONENT = [
-    AXImageEditorColorPickerComponent,
-    AXImageEditorPenModeChangerComponent,
     AXImageEditorViewComponent,
     AXImageEditorContainerComponent,
     AXImageEditorCropComponent,
+    AXImageEditorHistoryComponent,
+    AXImageEditorToolSelectorComponent,
+    AXImageEditorPenComponent,
+    AXImageEditorHighlightComponent,
+    AXImageEditorRotateComponent,
+    AXimageEditorHeaderComponent,
 ];
 const MODULES = [
     AXButtonModule,
@@ -591,8 +707,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXImageEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
             FormsModule,
             AXRangeSliderModule,
             AXSelectBoxModule,
@@ -601,18 +717,33 @@ class AXImageEditorModule {
             AXDecoratorModule,
             AXLoadingModule,
             AXDialogModule,
-            AXTooltipModule, AXImageEditorColorPickerComponent,
-            AXImageEditorPenModeChangerComponent,
-            AXImageEditorViewComponent,
+            AXTooltipModule, AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
-            AXImageEditorCropComponent], exports: [AXImageEditorColorPickerComponent,
-            AXImageEditorPenModeChangerComponent,
-            AXImageEditorViewComponent,
+            AXImageEditorCropComponent,
+            AXImageEditorHistoryComponent,
+            AXImageEditorToolSelectorComponent,
+            AXImageEditorPenComponent,
+            AXImageEditorHighlightComponent,
+            AXImageEditorRotateComponent,
+            AXimageEditorHeaderComponent], exports: [AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
-            AXImageEditorCropComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, COMPONENT] }); }
+            AXImageEditorCropComponent,
+            AXImageEditorHistoryComponent,
+            AXImageEditorToolSelectorComponent,
+            AXImageEditorPenComponent,
+            AXImageEditorHighlightComponent,
+            AXImageEditorRotateComponent,
+            AXimageEditorHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, AXImageEditorContainerComponent,
+            AXImageEditorCropComponent,
+            AXImageEditorHistoryComponent,
+            AXImageEditorToolSelectorComponent,
+            AXImageEditorPenComponent,
+            AXImageEditorHighlightComponent,
+            AXImageEditorRotateComponent,
+            AXimageEditorHeaderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -625,5 +756,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXImageEditorColorPickerComponent, AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorModule, AXImageEditorPenModeChangerComponent, AXImageEditorViewComponent };
+export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent, AXimageEditorHeaderComponent };
 //# sourceMappingURL=acorex-components-image-editor.mjs.map