import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
import * as i1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXPopoverModule } from '@acorex/components/popover';
import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
import { AXSelectBoxModule } from '@acorex/components/select-box';
import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
import * as i0 from '@angular/core';
import { signal, Injectable, inject, ViewEncapsulation, Component, linkedSignal, ChangeDetectionStrategy, input, effect, forwardRef, HostBinding, Renderer2, PLATFORM_ID, ElementRef, viewChild, afterNextRender, NgModule } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AXComponent, MXInputBaseValueComponent, MXLookComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
import { AXToolBarComponent } from '@acorex/components/toolbar';
import { classes } from 'polytype';
import { AXTranslatorPipe } from '@acorex/core/translation';
import { AsyncPipe, isPlatformBrowser } from '@angular/common';

class AXPaintService {
    constructor() {
        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.eraserWidth = signal(10, ...(ngDevMode ? [{ debugName: "eraserWidth" }] : []));
        this.toggleClear = signal(false, ...(ngDevMode ? [{ debugName: "toggleClear" }] : []));
        this.activeToolState = signal('pen', ...(ngDevMode ? [{ debugName: "activeToolState" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintService, decorators: [{
            type: Injectable
        }] });

class AXPaintToolsSelectorComponent {
    constructor() {
        this.service = inject(AXPaintService);
        this.pen = signal(null, ...(ngDevMode ? [{ debugName: "pen" }] : []));
        this.highlight = signal(null, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
        this.eraser = signal(null, ...(ngDevMode ? [{ debugName: "eraser" }] : []));
        this.reset = signal(null, ...(ngDevMode ? [{ debugName: "reset" }] : []));
    }
    changeToolHandler(tool) {
        if (this.service.activeToolState() === tool) {
            this.service.activeToolState.set(null);
            return;
        }
        this.service.activeToolState.set(tool);
    }
    clear() {
        this.service.toggleClear.update((prev) => !prev);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPaintToolsSelectorComponent, isStandalone: true, selector: "ax-paint-tools-selector", providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], 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:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", styles: [""], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "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: AXPaintToolsSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-tools-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], 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:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
        }] });

/**
 * paint mode.
 * @category Components
 */
class AXPaintEraserToolComponent {
    constructor() {
        this.service = inject(AXPaintService);
        this.value = linkedSignal(() => this.service.eraserWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
    }
    /** @ignore */
    valueHandler(e) {
        this.service.eraserWidth.set(e);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPaintEraserToolComponent, isStandalone: true, selector: "ax-paint-eraser-tool", providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], ngImport: i0, template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-paint-eraser-tool{display:flex}ax-paint-eraser-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-eraser-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ 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: "20.3.16", ngImport: i0, type: AXPaintEraserToolComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-eraser-tool', encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-paint-eraser-tool{display:flex}ax-paint-eraser-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-eraser-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
        }] });

/**
 * paint mode.
 * @category Components
 */
class AXPaintHighlightToolComponent {
    constructor() {
        this.service = inject(AXPaintService);
        this.value = linkedSignal(() => this.service.highlightWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
        this.selectedColor = linkedSignal(() => this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
    }
    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: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPaintHighlightToolComponent, isStandalone: true, selector: "ax-paint-highlight-tool", providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], 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-paint-highlight-tool{display:flex}ax-paint-highlight-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-highlight-tool 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$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: "20.3.16", ngImport: i0, type: AXPaintHighlightToolComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-highlight-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], 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-paint-highlight-tool{display:flex}ax-paint-highlight-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-highlight-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
        }] });

/**
 * paint mode.
 * @category Components
 */
class AXPaintPenToolComponent {
    constructor() {
        this.service = inject(AXPaintService);
        /** @ignore */
        this.value = linkedSignal(() => this.service.penWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
        /** @ignore */
        this.selectedColor = linkedSignal(() => 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: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPaintPenToolComponent, isStandalone: true, selector: "ax-paint-pen-tool", providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], 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-paint-pen-tool{display:flex}ax-paint-pen-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-pen-tool 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$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: "20.3.16", ngImport: i0, type: AXPaintPenToolComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-pen-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], 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-paint-pen-tool{display:flex}ax-paint-pen-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-pen-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
        }] });

/**
 * paint container.
 * @category Components
 */
class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        this.service = inject(AXPaintService);
        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
        this.#eff = effect(() => {
            if (this.editMode()) {
                this.service.activeToolState.set('pen');
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    #eff;
    get __hostClass() {
        if (this.disabled)
            return 'ax-state-disabled';
        return '';
    }
    /**
     * Sets the active drawing tool.
     *
     * @param tool - The tool to activate: 'pen', 'highlight', or 'eraser'
     */
    setActiveTool(tool) {
        this.service.activeToolState.set(tool);
    }
    /**
     * Sets the pen color for drawing.
     *
     * @param color - The color to use for the pen tool
     */
    setPenColor(color) {
        this.service.penColor.set(color);
    }
    /**
     * Sets the highlight color for highlighting.
     *
     * @param color - The color to use for the highlight tool
     */
    setHighlightColor(color) {
        this.service.highlightColor.set(color);
    }
    /**
     * Sets the pen width for drawing.
     *
     * @param width - The width of the pen stroke in pixels
     */
    setPenWidth(width) {
        this.service.penWidth.set(width);
    }
    /**
     * Sets the highlight width for highlighting.
     *
     * @param width - The width of the highlight stroke in pixels
     */
    setHighlightWidth(width) {
        this.service.highlightWidth.set(width);
    }
    /**
     * Sets the eraser width for erasing.
     *
     * @param width - The width of the eraser in pixels
     */
    setEraserWidth(width) {
        this.service.eraserWidth.set(width);
    }
    /**
     * Clears the entire canvas.
     */
    clear() {
        this.service.toggleClear.update((prev) => !prev);
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPaintContainerComponent, isStandalone: true, selector: "ax-paint-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
            AXPaintService,
            { provide: AXComponent, useExisting: AXPaintContainerComponent },
            { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },
            { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXPaintContainerComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <ax-toolbar class=\"ax-secondary-toolbar\">\n      <ax-prefix>\n        @switch (service.activeToolState()) {\n          @case ('pen') {\n            <ax-paint-pen-tool></ax-paint-pen-tool>\n          }\n          @case ('eraser') {\n            <ax-paint-eraser-tool></ax-paint-eraser-tool>\n          }\n          @case ('highlight') {\n            <ax-paint-highlight-tool></ax-paint-highlight-tool>\n          }\n        }\n      </ax-prefix>\n    </ax-toolbar>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-paint-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-paint-container .ax-main-toolbar{justify-content:center;padding:.2rem}\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { 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: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look', 'disabled'], providers: [
                        AXPaintService,
                        { provide: AXComponent, useExisting: AXPaintContainerComponent },
                        { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },
                        { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXPaintContainerComponent),
                            multi: true,
                        },
                    ], imports: [
                        AXToolBarComponent,
                        AXDecoratorModule,
                        AXPaintToolsSelectorComponent,
                        AXPaintPenToolComponent,
                        AXPaintHighlightToolComponent,
                        AXPaintEraserToolComponent,
                    ], template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <ax-toolbar class=\"ax-secondary-toolbar\">\n      <ax-prefix>\n        @switch (service.activeToolState()) {\n          @case ('pen') {\n            <ax-paint-pen-tool></ax-paint-pen-tool>\n          }\n          @case ('eraser') {\n            <ax-paint-eraser-tool></ax-paint-eraser-tool>\n          }\n          @case ('highlight') {\n            <ax-paint-highlight-tool></ax-paint-highlight-tool>\n          }\n        }\n      </ax-prefix>\n    </ax-toolbar>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-paint-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-paint-container .ax-main-toolbar{justify-content:center;padding:.2rem}\n"] }]
        }], propDecorators: { editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

/**
 * @category Components
 * paint view
 */
class AXPaintViewComponent {
    constructor() {
        /** @ignore */
        this.parent = inject(AXPaintContainerComponent);
        /** @ignore */
        this.service = inject(AXPaintService);
        /** @ignore */
        this.renderer = inject(Renderer2);
        this.platformID = inject(PLATFORM_ID);
        this.hostElem = inject(ElementRef);
        /**
         * Specifies the class that pass to component.
         *
         */
        this.customClass = input('', ...(ngDevMode ? [{ debugName: "customClass", alias: 'class' }] : [{ alias: 'class' }]));
        this.paintBackgroundColor = input('white', ...(ngDevMode ? [{ debugName: "paintBackgroundColor" }] : []));
        /** @ignore */
        this.canvasElem = viewChild('c', ...(ngDevMode ? [{ debugName: "canvasElem" }] : []));
        /** @ignore */
        this.ctx = signal(null, ...(ngDevMode ? [{ debugName: "ctx" }] : []));
        /** @ignore */
        this.isPainting = signal(false, ...(ngDevMode ? [{ debugName: "isPainting" }] : []));
        /** @ignore */
        this.isUserInteract = signal(false, ...(ngDevMode ? [{ debugName: "isUserInteract" }] : []));
        this.#init = afterNextRender(() => {
            this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));
            this.ctx().lineJoin = 'round';
            this.ctx().lineCap = 'round';
            setTimeout(() => {
                this.resizeEventHandler();
            });
            if (isPlatformBrowser(this.platformID)) {
                this.resizeEvent = this.renderer.listen(window, 'resize', this.resizeEventHandler.bind(this));
            }
        });
        this.#effect = effect(() => {
            this.isUserInteract.set(false);
            this.service.toggleClear();
            this.ctx()?.clearRect(0, 0, this.getBoundingCanvasHandler()?.width, this.getBoundingCanvasHandler()?.height);
        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
    }
    #init;
    #effect;
    /** @ignore */
    ngOnDestroy() {
        if (isPlatformBrowser(this.platformID) && this.resizeEvent) {
            this.resizeEvent();
        }
    }
    /** @ignore */
    resizeEventHandler() {
        this.ctx().canvas.width = this.getBoundingCanvasHandler()?.width;
        this.ctx().canvas.height = this.getBoundingCanvasHandler()?.height;
    }
    /** @ignore */
    penConfigHandler(penType) {
        switch (penType) {
            case 'pen':
                this.ctx().globalAlpha = 1;
                this.ctx().globalCompositeOperation = 'source-over';
                this.ctx().strokeStyle = this.service.penColor();
                this.ctx().lineWidth = this.service.penWidth();
                break;
            case 'eraser':
                this.ctx().globalAlpha = 1;
                this.ctx().globalCompositeOperation = 'destination-out';
                this.ctx().lineWidth = this.service.eraserWidth();
                break;
            case 'highlight':
                this.ctx().globalAlpha = 0.008;
                this.ctx().globalCompositeOperation = 'source-over';
                this.ctx().strokeStyle = this.service.highlightColor();
                this.ctx().lineWidth = this.service.highlightWidth();
                break;
        }
    }
    /** @ignore */
    getBoundingCanvasHandler() {
        return this.hostElem.nativeElement.getBoundingClientRect();
    }
    /** @ignore */
    mouseDownHandler(e) {
        if (!this.service.activeToolState())
            return;
        this.isPainting.set(true);
        this.isUserInteract.set(true);
        this.penConfigHandler(this.service.activeToolState());
        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.isPainting()) {
            this.ctx().lineTo(e.offsetX, e.offsetY);
            this.ctx().stroke();
        }
    }
    /** @ignore */
    mouseUpHandler() {
        this.ctx().closePath();
        this.isPainting.set(false);
    }
    /**
     * Exports the canvas content as an image.
     *
     * @param format - The image format: 'image/webp', 'image/png', or 'image/jpeg'
     */
    getOutPut(e) {
        const base64 = this.canvasElem().nativeElement.toDataURL(e, 0.1);
        if (this.isUserInteract()) {
            this.parent.commitValue(base64);
        }
        else {
            this.parent.commitValue(null);
        }
    }
    get __hostClass() {
        return [this.customClass(), `ax-${this.paintBackgroundColor()}`];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%;touch-action:none}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%;touch-action:none}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"] }]
        }], propDecorators: { customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], paintBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "paintBackgroundColor", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

const COMPONENT = [
    AXPaintContainerComponent,
    AXPaintViewComponent,
    AXPaintToolsSelectorComponent,
    AXPaintPenToolComponent,
    AXPaintHighlightToolComponent,
    AXPaintEraserToolComponent,
];
const MODULES = [
    FormsModule,
    AXRangeSliderModule,
    AXSelectBoxModule,
    AXButtonModule,
    AXColorBoxModule,
    AXPopoverModule,
    AXDecoratorModule,
    AXTooltipModule,
];
class AXPaintModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
            AXRangeSliderModule,
            AXSelectBoxModule,
            AXButtonModule,
            AXColorBoxModule,
            AXPopoverModule,
            AXDecoratorModule,
            AXTooltipModule, AXPaintContainerComponent,
            AXPaintViewComponent,
            AXPaintToolsSelectorComponent,
            AXPaintPenToolComponent,
            AXPaintHighlightToolComponent,
            AXPaintEraserToolComponent], exports: [AXPaintContainerComponent,
            AXPaintViewComponent,
            AXPaintToolsSelectorComponent,
            AXPaintPenToolComponent,
            AXPaintHighlightToolComponent,
            AXPaintEraserToolComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
            AXPaintToolsSelectorComponent,
            AXPaintPenToolComponent,
            AXPaintHighlightToolComponent,
            AXPaintEraserToolComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPaintModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXPaintContainerComponent, AXPaintEraserToolComponent, AXPaintHighlightToolComponent, AXPaintModule, AXPaintPenToolComponent, AXPaintToolsSelectorComponent, AXPaintViewComponent };
//# sourceMappingURL=acorex-components-paint.mjs.map
