@acorex/components 18.10.11 → 18.10.12

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

@@ -0,0 +1,595 @@
+import { MXLookComponent, MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, Component, ViewEncapsulation, forwardRef, HostBinding, input, viewChild, afterNextRender, effect, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/color-palette';
+import { AXColorPaletteModule } from '@acorex/components/color-palette';
+import * as i4 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3$1 from '@acorex/components/range-slider';
+import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+
+class AXImageEditorService {
+    constructor() {
+        this.penColor = signal('');
+        this.lineCap = signal('round');
+        this.lineWidth = signal(10);
+        this.penType = signal('pen');
+        this.toggleClear = signal({ state: false, userInteract: false });
+        this.cropState = signal({ state: false, userInteract: false });
+        this.rotate = signal({ state: 0, userInteract: false });
+        this.isImageLoad = signal(false);
+        this.newImage = signal(new Image());
+        this.initialImage = signal(new Image());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * paint container.
+ * @category Components
+ */
+class AXImageEditorContainerComponent extends MXLookComponent {
+    constructor() {
+        super(...arguments);
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXImageEditorContainerComponent, selector: "ax-image-editor-container", providers: [AXImageEditorService], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div class=\"ax-editor-container ax-look-solid\">\n    <ng-content> </ng-content>\n  </div>\n} @else {\n  <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n}\n", styles: ["ax-image-editor-container>.ax-editor-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important}\n"], dependencies: [{ kind: "component", type: i1.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-container', encapsulation: ViewEncapsulation.None, providers: [AXImageEditorService], template: "@if (service.isImageLoad()) {\n  <div class=\"ax-editor-container ax-look-solid\">\n    <ng-content> </ng-content>\n  </div>\n} @else {\n  <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n}\n", styles: ["ax-image-editor-container>.ax-editor-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important}\n"] }]
+        }] });
+
+/**
+ *paint toolbar
+ * @category Components
+ */
+class AXImageEditorToolbarComponent extends MXInputBaseValueComponent {
+    constructor() {
+        super(...arguments);
+        /** @ignore */
+        this.dialogService = inject(AXDialogService);
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.options = signal({
+            color: 'primary',
+            title: 'Attention',
+            vertical: false,
+            content: 'Do you want to save changes?',
+            orientation: 'vertical',
+            draggable: true,
+        });
+    }
+    /** @ignore */
+    saveHandler() {
+        if (this.service.initialImage() !== this.service.newImage()) {
+            this.dialogService
+                .confirm(this.options().title, this.options().content, this.options().color, this.options().orientation, this.options().draggable)
+                .then((data) => {
+                if (data.result) {
+                    this.service.initialImage.set(this.service.newImage());
+                    this.commitValue(this.service.newImage().src);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXImageEditorToolbarComponent, selector: "ax-image-editor-toolbar", outputs: { onValueChanged: "onValueChanged" }, providers: [
+            { provide: AXComponent, useExisting: AXImageEditorToolbarComponent },
+            { provide: AXFocusableComponent, useExisting: AXImageEditorToolbarComponent },
+            { provide: AXClearableComponent, useExisting: AXImageEditorToolbarComponent },
+            { provide: AXValuableComponent, useExisting: AXImageEditorToolbarComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXImageEditorToolbarComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toolbar-container\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n<ax-button color=\"primary\" (onClick)=\"saveHandler()\" class=\"ax-save-btn ax-sm\" text=\"Save\"></ax-button>\n", styles: ["ax-image-editor-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;justify-content:space-between}ax-image-editor-toolbar .ax-toolbar-container{display:flex;align-items:center;flex-wrap:wrap}ax-image-editor-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-image-editor-toolbar .ax-save-btn{margin-inline:.5rem}\n"], dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-toolbar', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], providers: [
+                        { provide: AXComponent, useExisting: AXImageEditorToolbarComponent },
+                        { provide: AXFocusableComponent, useExisting: AXImageEditorToolbarComponent },
+                        { provide: AXClearableComponent, useExisting: AXImageEditorToolbarComponent },
+                        { provide: AXValuableComponent, useExisting: AXImageEditorToolbarComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXImageEditorToolbarComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ax-toolbar-container\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n<ax-button color=\"primary\" (onClick)=\"saveHandler()\" class=\"ax-save-btn ax-sm\" text=\"Save\"></ax-button>\n", styles: ["ax-image-editor-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;justify-content:space-between}ax-image-editor-toolbar .ax-toolbar-container{display:flex;align-items:center;flex-wrap:wrap}ax-image-editor-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-image-editor-toolbar .ax-save-btn{margin-inline:.5rem}\n"] }]
+        }] });
+
+/**
+ * paint color picker.
+ * @category Components
+ */
+class AXImageEditorColorPickerComponent {
+    constructor() {
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.selectedColor = signal('rgb(12, 12, 12)');
+        /** @ignore */
+        this.popoverOption = {
+            openOn: 'click',
+            closeOn: 'clickOut',
+            placement: 'top',
+            offsetX: 0,
+            offsetY: 0,
+        };
+    }
+    /** @ignore */
+    changeColorHandler(e) {
+        this.service.penColor.set(e);
+        this.selectedColor.set(e);
+    }
+    get __hostClass() {
+        return `.5rem`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXImageEditorColorPickerComponent, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-button #colorBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n</ax-button>\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"colorBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeColorHandler($event)\" [ngModel]=\"selectedColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i3.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i3.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i3.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-color-picker', encapsulation: ViewEncapsulation.None, template: "<ax-button #colorBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n</ax-button>\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"colorBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeColorHandler($event)\" [ngModel]=\"selectedColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n" }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['style.marginInline']
+            }] } });
+
+/**
+ * paint mode.
+ * @category Components
+ */
+class AXImageEditorCropComponent {
+    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 });
+    }
+    /** @ignore */
+    crop() {
+        this.service.cropState.update((prev) => {
+            return { userInteract: true, state: !prev.state };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", ngImport: i0, template: "<ax-button [selected]=\"service.cropState().state && true\" (click)=\"crop()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, template: "<ax-button [selected]=\"service.cropState().state && true\" (click)=\"crop()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
+        }] });
+
+/**
+ * paint mode.
+ * @category Components
+ */
+class AXImageEditorPenModeChangerComponent {
+    constructor() {
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.value = 10;
+        /** @ignore */
+        this.popoverOption = {
+            openOn: 'click',
+            closeOn: 'clickOut',
+            placement: 'top',
+            offsetX: 0,
+            offsetY: 0,
+        };
+        /** @ignore */
+        this.selectedPenType = signal('pen');
+    }
+    /** @ignore */
+    penTypeHandler(e) {
+        this.service.penType.set(e);
+    }
+    /** @ignore */
+    clear() {
+        this.service.toggleClear.set({ userInteract: true, state: true });
+    }
+    /** @ignore */
+    get __hostClass() {
+        return `.5rem`;
+    }
+    /** @ignore */
+    valueHandler(e) {
+        this.service.lineWidth.set(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXImageEditorPenModeChangerComponent, selector: "ax-image-editor-pen-mode-changer", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-paint-pen-mode-changer-container\">\n  <div class=\"ax-pen-type-container\">\n    <ax-button look=\"blank\" #alignPop>\n      <ax-icon class=\"ax-icon ax-icon-pen-ruler\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <ax-button (click)=\"clear()\" look=\"blank\">\n    <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n  </ax-button>\n\n  <ax-popover\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      <ax-button\n        (click)=\"penTypeHandler('pen')\"\n        look=\"blank\"\n        [selected]=\"this.service.penType() === 'pen' ? true : false\"\n      >\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      </ax-button>\n\n      <ax-button\n        (click)=\"penTypeHandler('highlight')\"\n        look=\"blank\"\n        [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n      >\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      </ax-button>\n\n      <div class=\"ax-paint-width-slider\">\n        <ax-range-slider\n          [min]=\"2\"\n          [max]=\"20\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"valueHandler($event)\"\n        ></ax-range-slider>\n      </div>\n    </div>\n  </ax-popover>\n</div>\n", styles: ["ax-range-slider{padding:.5rem .75rem}ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}.ax-paint-pen-mode-changer-container{display:flex;align-items:center}.ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}.ax-overlay-pane{padding:.5rem!important}\n"], dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.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: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorPenModeChangerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-pen-mode-changer', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-paint-pen-mode-changer-container\">\n  <div class=\"ax-pen-type-container\">\n    <ax-button look=\"blank\" #alignPop>\n      <ax-icon class=\"ax-icon ax-icon-pen-ruler\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <ax-button (click)=\"clear()\" look=\"blank\">\n    <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n  </ax-button>\n\n  <ax-popover\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      <ax-button\n        (click)=\"penTypeHandler('pen')\"\n        look=\"blank\"\n        [selected]=\"this.service.penType() === 'pen' ? true : false\"\n      >\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      </ax-button>\n\n      <ax-button\n        (click)=\"penTypeHandler('highlight')\"\n        look=\"blank\"\n        [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n      >\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      </ax-button>\n\n      <div class=\"ax-paint-width-slider\">\n        <ax-range-slider\n          [min]=\"2\"\n          [max]=\"20\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"valueHandler($event)\"\n        ></ax-range-slider>\n      </div>\n    </div>\n  </ax-popover>\n</div>\n", styles: ["ax-range-slider{padding:.5rem .75rem}ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}.ax-paint-pen-mode-changer-container{display:flex;align-items:center}.ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}.ax-overlay-pane{padding:.5rem!important}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['style.marginInline']
+            }] } });
+
+class AXImageEditorViewComponent {
+    /** @ignore */
+    constructor() {
+        /**
+         * its receive image src.
+         */
+        this.src = input('');
+        /** @ignore */
+        this.canvasElem = viewChild('canvasElem');
+        /** @ignore */
+        this.ctx = signal(null);
+        /** @ignore */
+        this.service = inject(AXImageEditorService);
+        /** @ignore */
+        this.cropImageData = signal(null);
+        /** @ignore */
+        this.isMouseDown = signal(false);
+        /** @ignore */
+        this.cropStartX = signal(0);
+        /** @ignore */
+        this.cropStartY = signal(0);
+        /** @ignore */
+        this.cropEndX = signal(0);
+        /** @ignore */
+        this.cropEndY = signal(0);
+        afterNextRender(() => {
+            this.service.initialImage().src = this.src();
+            this.service.initialImage().crossOrigin = 'anonymous';
+            this.EventListener = this.service.initialImage().addEventListener('load', this.imageLoaded.bind(this));
+        });
+        effect(() => {
+            if (!this.service.toggleClear().userInteract)
+                return;
+            if (this.service.toggleClear().state) {
+                this.imageLoaded();
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (!this.service.cropState().userInteract || !this.ctx())
+                return;
+            if (this.service.cropState().state) {
+                this.ctx().filter = 'brightness(40%)';
+            }
+            else {
+                this.ctx().filter = 'brightness(100%)';
+            }
+            this.ctx().drawImage(this.service.newImage(), 0, 0, this.service.newImage().width, this.service.newImage().height);
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (!this.service.rotate().userInteract || !this.ctx())
+                return;
+            this.rotateImage();
+        }, { allowSignalWrites: true });
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        removeEventListener('load', this.EventListener);
+    }
+    /** @ignore */
+    imageLoaded() {
+        this.service.newImage.set(this.service.initialImage());
+        this.canvasElem().nativeElement.width = this.service.initialImage().width;
+        this.canvasElem().nativeElement.height = this.service.initialImage().height;
+        this.ctx.set(this.canvasElem().nativeElement.getContext('2d', { willReadFrequently: true }));
+        this.ctx().drawImage(this.service.initialImage(), 0, 0, this.service.initialImage().width, this.service.initialImage().height);
+        this.service.toggleClear.set({ userInteract: false, state: false });
+        this.service.isImageLoad.set(true);
+        this.ctx().lineJoin = 'round';
+        this.ctx().lineCap = this.service.lineCap();
+        this.ctx().strokeStyle = this.service.penColor();
+        this.ctx().lineWidth = this.service.lineWidth();
+        this.ctx().globalCompositeOperation = 'source-over';
+        this.ctx().globalAlpha = 1;
+    }
+    /** @ignore */
+    penConfigHandler(penType) {
+        switch (penType) {
+            case 'pen':
+                this.ctx().globalAlpha = 1;
+                break;
+            case 'highlight':
+                this.ctx().globalAlpha = 0.008;
+                break;
+        }
+    }
+    /** @ignore */
+    getBoundingCanvasHandler() {
+        return this.canvasElem().nativeElement.getBoundingClientRect();
+    }
+    /** @ignore */
+    mouseDownHandler(e) {
+        this.isMouseDown.set(true);
+        if (this.service.cropState().state) {
+            this.cropStartX.set(e.offsetX);
+            this.cropStartY.set(e.offsetY);
+            this.cropEndX.set(0);
+        }
+        else {
+            this.penConfigHandler(this.service.penType());
+            this.ctx().strokeStyle = this.service.penColor();
+            this.ctx().lineCap = this.service.lineCap();
+            this.ctx().lineWidth = this.service.lineWidth();
+            this.ctx().beginPath();
+            this.ctx().moveTo(e.offsetX, e.offsetY);
+            this.ctx().lineTo(e.offsetX, e.offsetY);
+            this.ctx().stroke();
+        }
+    }
+    /** @ignore */
+    mouseMoveHandler(e) {
+        if (!this.isMouseDown())
+            return;
+        if (this.service.cropState().state) {
+            this.ctx().globalCompositeOperation = 'screen';
+            this.cropEndX.set(e.offsetX);
+            this.cropEndY.set(e.offsetY);
+            this.drawSelection();
+        }
+        else {
+            this.ctx().lineTo(e.offsetX, e.offsetY);
+            this.ctx().stroke();
+        }
+    }
+    /** @ignore */
+    mouseUpHandler() {
+        this.isMouseDown.set(false);
+        if (this.service.cropState().state && this.cropEndX()) {
+            this.ctx().globalCompositeOperation = 'source-over';
+            this.cropImageFunction();
+        }
+        else {
+            this.ctx().closePath();
+            this.saveImageChange();
+        }
+    }
+    /** @ignore */
+    touchStartHandler(e) {
+        const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;
+        const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;
+        this.isMouseDown.set(true);
+        if (this.service.cropState().state) {
+            this.cropStartX.set(offsetX);
+            this.cropStartY.set(offsetY);
+            this.cropEndX.set(0);
+        }
+        else {
+            this.penConfigHandler(this.service.penType());
+            this.ctx().strokeStyle = this.service.penColor();
+            this.ctx().lineCap = this.service.lineCap();
+            this.ctx().lineWidth = this.service.lineWidth();
+            this.ctx().beginPath();
+            this.ctx().moveTo(offsetX, offsetY);
+            this.ctx().lineTo(offsetX, offsetY);
+            this.ctx().stroke();
+        }
+    }
+    /** @ignore */
+    touchMoveHandler(e) {
+        e.preventDefault(); // prevent page from scroll
+        if (!this.isMouseDown())
+            return;
+        const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;
+        const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;
+        if (this.service.cropState().state) {
+            this.ctx().globalCompositeOperation = 'screen';
+            this.cropEndX.set(offsetX);
+            this.cropEndY.set(offsetY);
+            this.drawSelection();
+        }
+        else {
+            this.ctx().lineTo(offsetX, offsetY);
+            this.ctx().stroke();
+        }
+    }
+    /** @ignore */
+    touchEndHandler() {
+        this.isMouseDown.set(false);
+        if (this.service.cropState().state && this.cropEndX()) {
+            this.ctx().globalCompositeOperation = 'source-over';
+            this.cropImageFunction();
+        }
+        else {
+            this.ctx().closePath();
+            this.saveImageChange();
+        }
+    }
+    /** @ignore */
+    drawSelection() {
+        const cropWidth = this.cropEndX() - this.cropStartX();
+        const cropHeight = this.cropEndY() - this.cropStartY();
+        this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
+        this.ctx().drawImage(this.service.newImage(), 0, 0);
+        this.ctx().strokeStyle = 'white';
+        this.ctx().setLineDash([4, 10]);
+        this.ctx().lineWidth = 2;
+        this.ctx().strokeRect(this.cropStartX(), this.cropStartY(), cropWidth, cropHeight);
+    }
+    /** @ignore */
+    cropImageFunction() {
+        this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
+        this.ctx().drawImage(this.service.newImage(), 0, 0);
+        let imageData;
+        if (this.cropStartX() < this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            imageData = this.ctx().getImageData(this.cropStartX(), this.cropEndY(), this.cropEndX() - this.cropStartX(), this.cropStartY() - this.cropEndY());
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            imageData = this.ctx().getImageData(this.cropEndX(), this.cropEndY(), this.cropStartX() - this.cropEndX(), this.cropStartY() - this.cropEndY());
+        }
+        else if (this.cropStartX() < this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            imageData = this.ctx().getImageData(this.cropStartX(), this.cropStartY(), this.cropEndX() - this.cropStartX(), this.cropEndY() - this.cropStartY());
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            imageData = this.ctx().getImageData(this.cropEndX(), this.cropStartY(), this.cropStartX() - this.cropEndX(), this.cropEndY() - this.cropStartY());
+        }
+        const data = imageData.data;
+        const brightnessFactor = 2.4; // Increase brightness by 20%
+        for (let i = 0; i < data.length; i += 4) {
+            data[i] = data[i] * brightnessFactor; // Red
+            data[i + 1] = data[i + 1] * brightnessFactor; // Green
+            data[i + 2] = data[i + 2] * brightnessFactor; // Blue
+        }
+        if (this.cropStartX() < this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            this.ctx().putImageData(imageData, this.cropStartX(), this.cropEndY());
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            this.ctx().putImageData(imageData, this.cropEndX(), this.cropEndY());
+        }
+        else if (this.cropStartX() < this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            this.ctx().putImageData(imageData, this.cropStartX(), this.cropStartY());
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            this.ctx().putImageData(imageData, this.cropEndX(), this.cropStartY());
+        }
+        this.cropImageData.set(imageData);
+    }
+    /** @ignore */
+    cropButtonHandler() {
+        let cropWidth;
+        let cropHeight;
+        this.service.rotate.update((prev) => {
+            return { userInteract: false, state: prev.state };
+        });
+        if (this.cropStartX() < this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            cropWidth = this.cropEndX() - this.cropStartX();
+            cropHeight = this.cropStartY() - this.cropEndY();
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() > this.cropEndY()) {
+            cropWidth = this.cropStartX() - this.cropEndX();
+            cropHeight = this.cropStartY() - this.cropEndY();
+        }
+        else if (this.cropStartX() < this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            cropWidth = this.cropEndX() - this.cropStartX();
+            cropHeight = this.cropEndY() - this.cropStartY();
+        }
+        else if (this.cropStartX() > this.cropEndX() && this.cropStartY() < this.cropEndY()) {
+            cropWidth = this.cropStartX() - this.cropEndX();
+            cropHeight = this.cropEndY() - this.cropStartY();
+        }
+        this.canvasElem().nativeElement.width = cropWidth;
+        this.canvasElem().nativeElement.height = cropHeight;
+        this.ctx().putImageData(this.cropImageData(), 0, 0);
+        this.saveImageChange();
+        this.cropImageData.set(null);
+        this.service.cropState.set({ userInteract: false, state: false });
+    }
+    /** @ignore */
+    rotateImage() {
+        this.ctx().save();
+        this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
+        this.ctx().translate(this.service.newImage().width / 2, this.service.newImage().height / 2);
+        this.ctx().rotate((this.service.rotate().state * Math.PI) / 180);
+        this.ctx().drawImage(this.service.newImage(), -this.service.newImage().width / 2, -this.service.newImage().height / 2, this.service.newImage().width, this.service.newImage().height);
+        this.ctx().restore();
+        this.saveImageChange();
+        this.service.rotate.update((prev) => {
+            return { state: prev.state, userInteract: false };
+        });
+    }
+    /** @ignore */
+    saveImageChange() {
+        const newImage = new Image();
+        newImage.crossOrigin = 'anonymous';
+        newImage.src = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
+        this.service.newImage.set(newImage);
+    }
+    /** @ignore */
+    get __hostStyle() {
+        return `width: ${this.service.initialImage().width}px; height: ${this.service.initialImage().height}px`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { __hostStyle: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+const COMPONENT = [
+    AXImageEditorToolbarComponent,
+    AXImageEditorColorPickerComponent,
+    AXImageEditorPenModeChangerComponent,
+    AXImageEditorViewComponent,
+    AXImageEditorContainerComponent,
+    AXImageEditorCropComponent,
+];
+const MODULES = [
+    AXButtonModule,
+    FormsModule,
+    AXRangeSliderModule,
+    AXSelectBoxModule,
+    AXColorPaletteModule,
+    AXPopoverModule,
+    AXDecoratorModule,
+    AXLoadingModule,
+    AXDialogModule,
+];
+class AXImageEditorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorModule, declarations: [AXImageEditorToolbarComponent,
+            AXImageEditorColorPickerComponent,
+            AXImageEditorPenModeChangerComponent,
+            AXImageEditorViewComponent,
+            AXImageEditorContainerComponent,
+            AXImageEditorCropComponent], imports: [AXButtonModule,
+            FormsModule,
+            AXRangeSliderModule,
+            AXSelectBoxModule,
+            AXColorPaletteModule,
+            AXPopoverModule,
+            AXDecoratorModule,
+            AXLoadingModule,
+            AXDialogModule], exports: [AXImageEditorToolbarComponent,
+            AXImageEditorColorPickerComponent,
+            AXImageEditorPenModeChangerComponent,
+            AXImageEditorViewComponent,
+            AXImageEditorContainerComponent,
+            AXImageEditorCropComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXImageEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXImageEditorColorPickerComponent, AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorModule, AXImageEditorPenModeChangerComponent, AXImageEditorToolbarComponent, AXImageEditorViewComponent };
+//# sourceMappingURL=acorex-components-image-editor.mjs.map