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 { 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 { classes } from 'polytype';
import { AXTranslatorPipe } from '@acorex/core/translation';
import { AsyncPipe, isPlatformBrowser } from '@angular/common';
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';

class AXImageEditorService {
    constructor() {
        this.activeToolState = signal(null, ...(ngDevMode ? [{ debugName: "activeToolState" }] : []));
        this.penColor = signal('rgb(12, 12, 12)', ...(ngDevMode ? [{ debugName: "penColor" }] : []));
        this.highlightColor = signal('rgb(255, 210, 48)', ...(ngDevMode ? [{ debugName: "highlightColor" }] : []));
        this.penWidth = signal(10, ...(ngDevMode ? [{ debugName: "penWidth" }] : []));
        this.highlightWidth = signal(10, ...(ngDevMode ? [{ debugName: "highlightWidth" }] : []));
        this.penType = signal(null, ...(ngDevMode ? [{ debugName: "penType" }] : []));
        this.rotate = signal({ state: 0, userInteract: false }, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
        this.isImageLoad = signal(false, ...(ngDevMode ? [{ debugName: "isImageLoad" }] : []));
        this.newImage = null;
        this.initialImage = null;
        this.imageBlob = signal([], ...(ngDevMode ? [{ debugName: "imageBlob" }] : []));
        this.undoPressed = signal(false, ...(ngDevMode ? [{ debugName: "undoPressed" }] : []));
        this.redoPressed = signal(false, ...(ngDevMode ? [{ debugName: "redoPressed" }] : []));
        this.cropperRatio = signal(null, ...(ngDevMode ? [{ debugName: "cropperRatio" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }] : []));
    }
    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: "20.3.16", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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>\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: ["ax-image-editor-crop{display:flex;justify-content:space-around;width:100%;padding:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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>\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: ["ax-image-editor-crop{display:flex;justify-content:space-around;width:100%;padding:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\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" }] : []));
        /** @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: "20.3.16", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-highlight ax-color-box{flex:0 0 0}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", "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: "20.3.16", 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: ["ax-image-editor-highlight{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-highlight ax-color-box{flex:0 0 0}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 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" }] : []));
    }
    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: "20.3.16", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-pen ax-color-box{flex:0 0 0}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", "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: "20.3.16", 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: ["ax-image-editor-pen{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-pen ax-color-box{flex:0 0 0}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 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: "20.3.16", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["ax-image-editor-rotate{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\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: "20.3.16", 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  [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", styles: ["ax-image-editor-rotate{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"] }]
        }] });

/**
 * paint mode.
 * @category Components
 */
class AXImageEditorToolSelectorComponent {
    constructor() {
        this.service = inject(AXImageEditorService);
    }
    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: "20.3.16", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('crop')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'crop' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('rotate')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'rotate' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
        }] });

/**
 * paint mode.
 * @category Components
 */
class AXImageEditorCropperWindowComponent {
    constructor() {
        this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
        this.service = inject(AXImageEditorService);
        this.ngZone = inject(NgZone);
        this.selectedHandle = signal(null, ...(ngDevMode ? [{ debugName: "selectedHandle" }] : []));
        this.panState = signal(false, ...(ngDevMode ? [{ debugName: "panState" }] : []));
        this.elementRef = inject(ElementRef);
        this.cropperWindow = viewChild('r', ...(ngDevMode ? [{ debugName: "cropperWindow" }] : []));
        this.currentX = signal(-45, ...(ngDevMode ? [{ debugName: "currentX" }] : []));
        this.currentY = signal(-45, ...(ngDevMode ? [{ debugName: "currentY" }] : []));
        this.prevX = signal(0, ...(ngDevMode ? [{ debugName: "prevX" }] : []));
        this.prevY = signal(0, ...(ngDevMode ? [{ debugName: "prevY" }] : []));
        this.aspectWidth = signal(0, ...(ngDevMode ? [{ debugName: "aspectWidth" }] : []));
        this.aspectHeight = signal(0, ...(ngDevMode ? [{ debugName: "aspectHeight" }] : []));
        this.isMousePressed = signal(false, ...(ngDevMode ? [{ debugName: "isMousePressed" }] : []));
        this.renderer = inject(Renderer2);
        this.platformID = inject(PLATFORM_ID);
        this.#eff = effect(() => {
            const host = this.elementRef.nativeElement;
            let width;
            let height;
            const scale = 150;
            switch (this.service.cropperRatio()) {
                case '1:1':
                    width = 1;
                    height = 1;
                    break;
                case '16:9':
                    width = 1.777777777777778;
                    height = 1;
                    break;
                case null:
                    width = 1;
                    height = 1;
                    break;
                default:
                    [width, height] = this.service.cropperRatio().split(':').map(Number);
            }
            if (width >= height) {
                const aspect = width / height;
                width = aspect;
                height = 1;
                this.aspectWidth.set(aspect);
                this.aspectHeight.set(1);
            }
            else {
                const aspect = height / width;
                width = 1;
                height = aspect;
                this.aspectWidth.set(1);
                this.aspectHeight.set(aspect);
            }
            host.style.width = `${width * scale}px`;
            host.style.height = `${height * scale}px`;
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
        this.#init = afterNextRender(() => {
            const host = this.elementRef.nativeElement;
            this.ngZone.runOutsideAngular(() => {
                this.mouseMoveEvent = this.renderer.listen(document, 'pointermove', this.changeSizeHandler.bind(this));
                this.mouseUpEvent = this.renderer.listen(document, 'pointerup', this.clearSelector.bind(this));
                this.mouseDownEvent = this.renderer.listen(host, 'pointerdown', this.panDown.bind(this));
                this.mouseMoveEvent2 = this.renderer.listen(host, 'pointermove', this.panMove.bind(this));
                this.mouseUpEvent2 = this.renderer.listen(host, 'pointerup', this.panUp.bind(this));
            });
        });
        this.#positionChange = effect(() => {
            this.setPosition(this.currentX(), this.currentY());
        }, ...(ngDevMode ? [{ debugName: "#positionChange" }] : []));
    }
    #eff;
    #init;
    ngOnDestroy() {
        if (isPlatformBrowser(this.platformID) && this.mouseMoveEvent) {
            this.mouseMoveEvent();
        }
        if (isPlatformBrowser(this.platformID) && this.mouseUpEvent) {
            this.mouseUpEvent();
        }
        if (isPlatformBrowser(this.platformID) && this.mouseDownEvent) {
            this.mouseDownEvent();
        }
        if (isPlatformBrowser(this.platformID) && this.mouseMoveEvent2) {
            this.mouseMoveEvent2();
        }
        if (isPlatformBrowser(this.platformID) && this.mouseUpEvent2) {
            this.mouseUpEvent2();
        }
        if (isPlatformBrowser(this.platformID) && this.mouseLeaveEvent) {
            this.mouseLeaveEvent();
        }
    }
    #positionChange;
    panMove(e) {
        if (!this.isMousePressed())
            return;
        if (this.selectedHandle())
            return;
        if (!this.panState())
            return;
        const currentX = e.clientX;
        const currentY = e.clientY;
        const deltaX = currentX - this.prevX();
        const deltaY = currentY - this.prevY();
        this.currentX.update((prev) => prev + deltaX);
        this.currentY.update((prev) => prev + deltaY);
        this.prevX.set(currentX);
        this.prevY.set(currentY);
    }
    panDown(e) {
        this.isMousePressed.set(true);
        if (this.selectedHandle())
            return;
        this.panState.set(true);
        this.prevX.set(e.clientX);
        this.prevY.set(e.clientY);
    }
    panUp() {
        this.isMousePressed.set(false);
        if (this.selectedHandle())
            return;
        this.panState.set(false);
    }
    getCropperArea() {
        return this.elementRef.nativeElement.getBoundingClientRect();
    }
    setPosition(posX, posY) {
        const el = this.elementRef.nativeElement;
        el.style.transform = `translate(${posX}px, ${posY}px)`;
    }
    handleSelector(e, value) {
        if (this.panState())
            return;
        const host = this.elementRef.nativeElement;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.startWidth = host.offsetWidth;
        this.startHeight = host.offsetHeight;
        this.startLeft = host.offsetLeft;
        this.startTop = host.offsetTop;
        this.selectedHandle.set(value);
    }
    changeSizeHandler(e) {
        if (!this.isMousePressed())
            return;
        if (this.panState())
            return;
        if (!this.selectedHandle())
            return;
        const host = this.elementRef.nativeElement;
        const dy = e.clientY - this.startY;
        const dx = e.clientX - this.startX;
        let newWidth;
        let newHeight;
        const minSize = 20;
        switch (this.selectedHandle()) {
            case 'right':
                newWidth = Math.max(minSize, this.startWidth + dx);
                host.style.width = `${newWidth}px`;
                break;
            case 'top':
                newHeight = Math.max(minSize, this.startHeight - dy);
                host.style.height = `${newHeight}px`;
                host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
                break;
            case 'left':
                newWidth = Math.max(minSize, this.startWidth - dx);
                host.style.width = `${newWidth}px`;
                host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
                break;
            case 'bottom':
                newHeight = Math.max(minSize, this.startHeight + dy);
                host.style.height = `${newHeight}px`;
                break;
            case 'right-top':
                if (this.service.cropperRatio()) {
                    newWidth = Math.max(minSize, this.startWidth + dx);
                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
                    if (newHeight < minSize) {
                        newHeight = minSize;
                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
                    }
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
                }
                else {
                    newWidth = Math.max(minSize, this.startWidth + dx);
                    newHeight = Math.max(minSize, this.startHeight - dy);
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
                }
                break;
            case 'bottom-right':
                if (this.service.cropperRatio()) {
                    newWidth = Math.max(minSize, this.startWidth + dx);
                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
                    if (newHeight < minSize) {
                        newHeight = minSize;
                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
                    }
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                }
                else {
                    newWidth = Math.max(minSize, this.startWidth + dx);
                    newHeight = Math.max(minSize, this.startHeight + dy);
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                }
                break;
            case 'bottom-left':
                if (this.service.cropperRatio()) {
                    newWidth = Math.max(minSize, this.startWidth - dx);
                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
                    if (newHeight < minSize) {
                        newHeight = minSize;
                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
                    }
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
                }
                else {
                    newWidth = Math.max(minSize, this.startWidth - dx);
                    newHeight = Math.max(minSize, this.startHeight + dy);
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
                }
                break;
            case 'left-top':
                if (this.service.cropperRatio()) {
                    newWidth = Math.max(minSize, this.startWidth - dx);
                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
                    if (newHeight < minSize) {
                        newHeight = minSize;
                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
                    }
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
                }
                else {
                    newWidth = Math.max(minSize, this.startWidth - dx);
                    newHeight = Math.max(minSize, this.startHeight - dy);
                    host.style.width = `${newWidth}px`;
                    host.style.height = `${newHeight}px`;
                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
                }
                break;
        }
    }
    clearSelector() {
        if (this.panState())
            return;
        this.selectedHandle.set(null);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"] }]
        }], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });

class AXImageEditorViewComponent extends MXBaseComponent {
    /** @ignore */
    resizeWindow() {
        this.canvasResponsive(this.service.newImage);
    }
    /** @ignore */
    canvasResponsive(image) {
        const imageWidth = image.width;
        const imageHeight = image.height;
        this.originalWidth.set(imageWidth);
        this.originalHeight.set(imageHeight);
        if (imageWidth > imageHeight) {
            this.canvasElem().nativeElement.width = imageWidth;
            this.canvasElem().nativeElement.height = imageWidth;
        }
        else {
            this.canvasElem().nativeElement.width = imageHeight;
            this.canvasElem().nativeElement.height = imageHeight;
        }
        requestAnimationFrame(() => {
            //recalculate width after canvas size change
            const recalculateWidth = this.canvasElem().nativeElement.getClientRects()[0]?.width;
            let scale;
            if (imageWidth > imageHeight) {
                scale = this.originalWidth() / recalculateWidth;
            }
            else {
                scale = this.originalHeight() / recalculateWidth;
            }
            this.scale.set(scale);
            this.canvasElem().nativeElement.width = recalculateWidth;
            this.canvasElem().nativeElement.height = recalculateWidth;
            if (imageWidth > imageHeight) {
                this.ctx().drawImage(image, 0, recalculateWidth / 2 - this.originalHeight() / scale / 2, recalculateWidth, this.originalHeight() / scale);
            }
            else {
                this.ctx().drawImage(image, recalculateWidth / 2 - this.originalWidth() / scale / 2, 0, this.originalWidth() / scale, recalculateWidth);
            }
        });
    }
    /** @ignore */
    constructor() {
        super();
        /**
         * its change grid display state.
         */
        this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
        /**
         * its change grid display state.
         */
        this.lockRatio = signal(false, ...(ngDevMode ? [{ debugName: "lockRatio" }] : []));
        /**
         * its receive image src.
         */
        this.src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
        /** @ignore */
        this.canvasElem = viewChild('canvasElem', ...(ngDevMode ? [{ debugName: "canvasElem" }] : []));
        /** @ignore */
        this.cropperWindow = viewChild('f', ...(ngDevMode ? [{ debugName: "cropperWindow" }] : []));
        /** @ignore */
        this.ctx = signal(null, ...(ngDevMode ? [{ debugName: "ctx" }] : []));
        /** @ignore */
        this.service = inject(AXImageEditorService);
        /** @ignore */
        this.isMouseDown = signal(false, ...(ngDevMode ? [{ debugName: "isMouseDown" }] : []));
        /** @ignore */
        this.isDrawRectangleCreated = signal(false, ...(ngDevMode ? [{ debugName: "isDrawRectangleCreated" }] : []));
        /** @ignore */
        this.parent = inject(AXImageEditorContainerComponent);
        /** @ignore */
        this.renderer = inject(Renderer2);
        /** @ignore */
        this.imageEditorHistory = signal([], ...(ngDevMode ? [{ debugName: "imageEditorHistory" }] : []));
        /** @ignore */
        this.imageEditorHistoryPointer = linkedSignal(() => this.imageEditorHistory().length - 1, ...(ngDevMode ? [{ debugName: "imageEditorHistoryPointer" }] : []));
        this.originalWidth = signal(0, ...(ngDevMode ? [{ debugName: "originalWidth" }] : []));
        this.originalHeight = signal(0, ...(ngDevMode ? [{ debugName: "originalHeight" }] : []));
        this.scale = signal(0, ...(ngDevMode ? [{ debugName: "scale" }] : []));
        afterNextRender(() => {
            this.resizeEventListener = this.renderer.listen(window, 'resize', this.resizeWindow.bind(this));
            //set canvas options
            this.ctx.set(this.canvasElem().nativeElement.getContext('2d', { willReadFrequently: true }));
            this.ctx().lineJoin = 'round';
            this.ctx().lineCap = 'round';
        });
        effect(() => {
            this.setInitialImage(this.src());
        });
        effect(() => {
            if (!this.service.undoPressed()) {
                this.imageChanged();
            }
        });
        effect(() => {
            if (!this.service.redoPressed()) {
                this.imageChanged();
            }
        });
        effect(() => {
            if (!this.service.rotate().userInteract || !this.ctx())
                return;
            this.rotateImage();
        });
    }
    /** @ignore */
    ngOnDestroy() {
        if (this.resizeEventListener) {
            this.resizeEventListener();
        }
        if (this.imageLoadEventListener) {
            this.imageLoadEventListener();
        }
    }
    setInitialImage(src, replaceHistory = true) {
        this.service.initialImage = new Image();
        this.service.initialImage.src = src;
        this.service.initialImage.crossOrigin = 'anonymous';
        this.imageLoadEventListener = this.renderer.listen(this.service.initialImage, 'load', () => {
            this.service.newImage = this.service.initialImage;
            this.service.isImageLoad.set(true);
            this.canvasResponsive(this.service.initialImage);
            if (replaceHistory) {
                this.imageEditorHistory.set([this.service.initialImage]);
            }
            else {
                this.imageEditorHistory.update((prev) => [...prev, this.service.initialImage]);
            }
        });
    }
    /** @ignore */
    imageChanged() {
        if (this.service.undoPressed() && this.imageEditorHistoryPointer() >= 1) {
            this.imageEditorHistoryPointer.update((prev) => prev - 1);
            this.service.newImage = 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 = 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;
        }
    }
    /** @ignore */
    mouseDownHandler(e) {
        this.isMouseDown.set(true);
        if (!this.service.penType())
            return;
        this.penConfigHandler(this.service.penType());
        this.ctx().beginPath();
        this.ctx().moveTo(e.offsetX, e.offsetY);
        this.ctx().lineTo(e.offsetX, e.offsetY);
        this.ctx().stroke();
    }
    /** @ignore */
    mouseMoveHandler(e) {
        if (!this.isMouseDown())
            return;
        if (!this.service.penType())
            return;
        this.ctx().lineTo(e.offsetX, e.offsetY);
        this.ctx().stroke();
    }
    /** @ignore */
    mouseUpHandler() {
        this.isMouseDown.set(false);
        this.ctx().closePath();
        this.saveImageChange();
    }
    /** @ignore */
    cropButtonHandler() {
        const cropRect = this.cropperWindow().getCropperArea();
        const canvasRect = this.canvasElem().nativeElement.getClientRects()[0];
        const dx = cropRect.x - canvasRect.x;
        const dy = cropRect.y - canvasRect.y;
        const imageData = this.ctx().getImageData(dx, dy, cropRect.width, cropRect.height);
        this.canvasElem().nativeElement.width = cropRect.width;
        this.canvasElem().nativeElement.height = cropRect.height;
        this.ctx().putImageData(imageData, 0, 0);
        const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
        this.setInitialImage(cropImage, false);
        this.service.activeToolState.set(null);
        this.saveImageChange();
    }
    /** @ignore */
    rotateImage() {
        this.ctx().globalAlpha = 1;
        this.ctx().save();
        this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
        // Calculate scale factor to fit rotated image within canvas
        const rotationAngle = (this.service.rotate().state * Math.PI) / 180;
        const cos = Math.abs(Math.cos(rotationAngle));
        const sin = Math.abs(Math.sin(rotationAngle));
        const rotatedWidth = this.service.newImage.width * cos + this.service.newImage.height * sin;
        const rotatedHeight = this.service.newImage.width * sin + this.service.newImage.height * cos;
        const scaleX = this.canvasElem().nativeElement.width / rotatedWidth;
        const scaleY = this.canvasElem().nativeElement.height / rotatedHeight;
        const scale = Math.min(scaleX, scaleY);
        this.ctx().translate(this.canvasElem().nativeElement.width / 2, this.canvasElem().nativeElement.height / 2);
        this.ctx().rotate(rotationAngle);
        this.ctx().scale(scale, scale);
        this.ctx().drawImage(this.service.newImage, -this.service.newImage.width / 2, -this.service.newImage.height / 2);
        this.ctx().restore();
        this.saveImageChange();
        this.service.rotate.update((prev) => {
            return { state: prev.state, userInteract: false };
        });
    }
    /** @ignore */
    async saveImageChange() {
        const canvas = this.canvasElem().nativeElement;
        const newImage = new Image();
        newImage.crossOrigin = 'anonymous';
        newImage.src = canvas.toDataURL('image/jpeg', 1);
        this.service.newImage = newImage;
        this.imageEditorHistory.update((prev) => [...prev, newImage]);
        const canvasToBlob = (type, quality) => {
            return new Promise((resolve, reject) => {
                canvas.toBlob((blob) => {
                    if (blob) {
                        resolve(blob);
                    }
                    else {
                        reject(new Error(`toBlob returned null for type ${type}`));
                    }
                }, type, quality);
            });
        };
        const blobs = await Promise.all([
            canvasToBlob('image/jpeg', 1),
            canvasToBlob('image/png', 1),
            canvasToBlob('image/webp', 1),
        ]);
        this.service.imageBlob.set(blobs);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
        }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['canvasElem', { isSignal: true }] }], cropperWindow: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });

/**
 * paint container.
 * @category Components
 */
class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        /** @ignore */
        this.service = inject(AXImageEditorService);
        this.imageEditorContainer = viewChild('f', ...(ngDevMode ? [{ debugName: "imageEditorContainer" }] : []));
        this.view = contentChild(AXImageEditorViewComponent, ...(ngDevMode ? [{ debugName: "view" }] : []));
        this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
        this.#eff = effect(() => {
            void this.service.imageBlob();
            if (this.service.imageBlob().length) {
                this.commitValue(this.service.imageBlob(), true);
            }
            else {
                this.commitValue(null);
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    #eff;
    cropButtonHandler() {
        this.view().cropButtonHandler();
    }
    get __hostClass() {
        if (this.disabled)
            return 'ax-state-disabled';
        return '';
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: [
            AXImageEditorService,
            { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
            { provide: AXFocusableComponent, 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    <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: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image-editor-container', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look', 'disabled'], providers: [
                        AXImageEditorService,
                        { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
                        { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
                        { provide: AXValuableComponent, useExisting: AXImageEditorContainerComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            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-{{ 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: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container ax-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"] }]
        }], 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: [{
                type: HostBinding,
                args: ['class']
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

/**
 * 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: "20.3.16", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"UndoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"RedoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["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: "20.3.16", 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: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"UndoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"RedoHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
        }] });

const COMPONENT = [
    AXImageEditorViewComponent,
    AXImageEditorContainerComponent,
    AXImageEditorCropComponent,
    AXImageEditorHistoryComponent,
    AXImageEditorToolSelectorComponent,
    AXImageEditorPenComponent,
    AXImageEditorHighlightComponent,
    AXImageEditorRotateComponent,
    AXImageEditorCropperWindowComponent,
];
const MODULES = [
    AXButtonModule,
    FormsModule,
    AXRangeSliderModule,
    AXSelectBoxModule,
    AXColorBoxModule,
    AXPopoverModule,
    AXDecoratorModule,
    AXLoadingModule,
    AXDialogModule,
];
class AXImageEditorModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
            FormsModule,
            AXRangeSliderModule,
            AXSelectBoxModule,
            AXColorBoxModule,
            AXPopoverModule,
            AXDecoratorModule,
            AXLoadingModule,
            AXDialogModule, AXImageEditorViewComponent,
            AXImageEditorContainerComponent,
            AXImageEditorCropComponent,
            AXImageEditorHistoryComponent,
            AXImageEditorToolSelectorComponent,
            AXImageEditorPenComponent,
            AXImageEditorHighlightComponent,
            AXImageEditorRotateComponent,
            AXImageEditorCropperWindowComponent], exports: [AXImageEditorViewComponent,
            AXImageEditorContainerComponent,
            AXImageEditorCropComponent,
            AXImageEditorHistoryComponent,
            AXImageEditorToolSelectorComponent,
            AXImageEditorPenComponent,
            AXImageEditorHighlightComponent,
            AXImageEditorRotateComponent,
            AXImageEditorCropperWindowComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, AXImageEditorContainerComponent,
            AXImageEditorCropComponent,
            AXImageEditorHistoryComponent,
            AXImageEditorToolSelectorComponent,
            AXImageEditorPenComponent,
            AXImageEditorHighlightComponent,
            AXImageEditorRotateComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXImageEditorModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent };
//# sourceMappingURL=acorex-components-image-editor.mjs.map
