@acorex/components 18.16.0-next.9 → 18.16.0

package/fesm2022/acorex-components-paint.mjs

@@ -12,7 +12,7 @@ import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i3 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i0 from '@angular/core';
-import { signal, Injectable, forwardRef, Component, ViewEncapsulation, inject, HostBinding, Renderer2, PLATFORM_ID, input, viewChild, afterNextRender, effect, NgModule } from '@angular/core';
+import { signal, Injectable, forwardRef, Component, ViewEncapsulation, inject, HostBinding, model, effect, input, Renderer2, PLATFORM_ID, viewChild, afterNextRender, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
@@ -26,10 +26,10 @@ class AXPaintService {
         this.penType = signal('pen');
         this.toggleClear = signal(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
 
@@ -38,8 +38,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPaintContainerComponent, selector: "ax-paint-container", inputs: { look: "look" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPaintContainerComponent, isStandalone: false, selector: "ax-paint-container", inputs: { look: "look" }, providers: [
             AXPaintService,
             { provide: AXComponent, useExisting: AXPaintContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },
@@ -52,7 +52,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look'], providers: [
                         AXPaintService,
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => AXPaintContainerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important}\n"] }]
+                    ], standalone: false, template: "<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important}\n"] }]
         }] });
 
 /**
@@ -73,12 +73,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXPaintToolbarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPaintToolbarComponent, selector: "ax-paint-toolbar", ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-paint-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}ax-paint-toolbar .ax-toolbar-container{display:flex;justify-content:flex-start;align-items:center;margin-inline:.5rem}ax-paint-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-paint-toolbar ax-prefix,ax-paint-toolbar ax-suffix{margin-inline:.3rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPaintToolbarComponent, isStandalone: false, selector: "ax-paint-toolbar", ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-paint-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}ax-paint-toolbar .ax-toolbar-container{display:flex;justify-content:flex-start;align-items:center;margin-inline:.5rem}ax-paint-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-paint-toolbar ax-prefix,ax-paint-toolbar ax-suffix{margin-inline:.3rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-toolbar', encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-paint-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}ax-paint-toolbar .ax-toolbar-container{display:flex;justify-content:flex-start;align-items:center;margin-inline:.5rem}ax-paint-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-paint-toolbar ax-prefix,ax-paint-toolbar ax-suffix{margin-inline:.3rem}\n"] }]
+            args: [{ selector: 'ax-paint-toolbar', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-paint-toolbar{padding:.3rem;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}ax-paint-toolbar .ax-toolbar-container{display:flex;justify-content:flex-start;align-items:center;margin-inline:.5rem}ax-paint-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-paint-toolbar ax-prefix,ax-paint-toolbar ax-suffix{margin-inline:.3rem}\n"] }]
         }] });
 
 /**
@@ -100,12 +100,12 @@ class AXPaintColorPickerComponent {
     get __hostClass() {
         return `.5rem`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPaintColorPickerComponent, selector: "ax-paint-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-color-text-default));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ 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: i2.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPaintColorPickerComponent, isStandalone: false, selector: "ax-paint-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-color-text-default));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ 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: i2.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-color-picker', encapsulation: ViewEncapsulation.None, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-color-text-default));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
+            args: [{ selector: 'ax-paint-color-picker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-color-text-default));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['style.marginInline']
@@ -120,7 +120,12 @@ class AXPaintPenModeChangerComponent {
         /** @ignore */
         this.service = inject(AXPaintService);
         /** @ignore */
-        this.value = 10;
+        this.defaultWidth = model(10);
+        this.#defaultWidthChange = effect(() => {
+            if (this.defaultWidth()) {
+                this.valueHandler(this.defaultWidth());
+            }
+        });
         /** @ignore */
         this.popoverOption = {
             openOn: 'click',
@@ -131,7 +136,10 @@ class AXPaintPenModeChangerComponent {
         };
         /** @ignore */
         this.selectedPenType = signal('pen');
+        this.penTypes = input(['pen', 'highlight', 'eraser']);
+        this.sizeSlider = input(true);
     }
+    #defaultWidthChange;
     /** @ignore */
     penTypeHandler(e) {
         this.service.penType.set(e);
@@ -147,12 +155,12 @@ class AXPaintPenModeChangerComponent {
     valueHandler(e) {
         this.service.lineWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPaintPenModeChangerComponent, selector: "ax-paint-pen-mode-changer", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n    @case ('eraser') {\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\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    <ax-button\n      (click)=\"penTypeHandler('eraser')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ 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: i2$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: i3$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: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPaintPenModeChangerComponent, isStandalone: false, selector: "ax-paint-pen-mode-changer", inputs: { defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, penTypes: { classPropertyName: "penTypes", publicName: "penTypes", isSignal: true, isRequired: false, transformFunction: null }, sizeSlider: { classPropertyName: "sizeSlider", publicName: "sizeSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultWidth: "defaultWidthChange" }, host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\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\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\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\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ 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: i2$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: i3$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: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintPenModeChangerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintPenModeChangerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-pen-mode-changer', encapsulation: ViewEncapsulation.None, template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n    @case ('eraser') {\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\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    <ax-button\n      (click)=\"penTypeHandler('eraser')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
+            args: [{ selector: 'ax-paint-pen-mode-changer', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\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\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\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\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['style.marginInline']
@@ -198,7 +206,7 @@ class AXPaintViewComponent {
             this.isUserInteract.set(false);
             this.service.toggleClear();
             this.ctx()?.clearRect(0, 0, this.getBoundingCanvasHandler()?.width, this.getBoundingCanvasHandler()?.height);
-        }, { allowSignalWrites: true });
+        });
         if (isPlatformBrowser(this.platformID)) {
             this.resizeEvent = this.rendred.listen(window, 'resize', this.resizeEventHandler.bind(this));
         }
@@ -303,12 +311,12 @@ class AXPaintViewComponent {
     get __hostClass() {
         return `${this.customClass()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: AXPaintViewComponent, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\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>\n</canvas>\n", styles: ["ax-paint-view{display:block}ax-paint-view .ax-canvas-element{height:100%;border-bottom:1px solid rgb(var(--ax-color-border-default));width:100%;cursor:crosshair}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPaintViewComponent, isStandalone: false, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\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>\n</canvas>\n", styles: ["ax-paint-view{display:block}ax-paint-view .ax-canvas-element{height:100%;border-bottom:1px solid rgb(var(--ax-color-border-default));width:100%;cursor:crosshair}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, template: "<canvas\n  #c\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>\n</canvas>\n", styles: ["ax-paint-view{display:block}ax-paint-view .ax-canvas-element{height:100%;border-bottom:1px solid rgb(var(--ax-color-border-default));width:100%;cursor:crosshair}\n"] }]
+            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<canvas\n  #c\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>\n</canvas>\n", styles: ["ax-paint-view{display:block}ax-paint-view .ax-canvas-element{height:100%;border-bottom:1px solid rgb(var(--ax-color-border-default));width:100%;cursor:crosshair}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -332,8 +340,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXPaintModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPaintModule, declarations: [AXPaintContainerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, declarations: [AXPaintContainerComponent,
             AXPaintToolbarComponent,
             AXPaintViewComponent,
             AXPaintColorPickerComponent,
@@ -349,9 +357,9 @@ class AXPaintModule {
             AXPaintViewComponent,
             AXPaintColorPickerComponent,
             AXPaintPenModeChangerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-paint.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-paint.mjs","sources":["../../../../libs/components/paint/src/lib/paint/paint.service.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.html","../../../../libs/components/paint/src/lib/paint/paint-toolbar/paint-toolbar.component.ts","../../../../libs/components/paint/src/lib/paint/paint-toolbar/paint-toolbar.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.html","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.ts","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.html","../../../../libs/components/paint/src/lib/paint.module.ts","../../../../libs/components/paint/src/acorex-components-paint.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXPaintService {\n  penColor = signal<string | CanvasGradient | CanvasPattern>('');\n  lineWidth = signal<number>(10);\n  penType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n  toggleClear = signal(false);\n}\n","import {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { Component, ViewEncapsulation, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * paint container.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-container',\n  templateUrl: './paint-container.component.html',\n  styleUrl: './paint-container.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['look'],\n  providers: [\n    AXPaintService,\n    { provide: AXComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXClearableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPaintContainerComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXPaintContainerComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {}\n","<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n","import { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n *paint toolbar\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-toolbar',\n  templateUrl: './paint-toolbar.component.html',\n  styleUrl: './paint-toolbar.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXPaintToolbarComponent {}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { Component, HostBinding, ViewEncapsulation, inject, signal } from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint color picker.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-color-picker',\n  templateUrl: './paint-color-picker.component.html',\n  styleUrl: './paint-color-picker.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXPaintColorPickerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected selectedColor = signal('rgb(12, 12, 12)');\n\n  /** @ignore */\n  protected changeColorHandler(e: string) {\n    this.service.penColor.set(e);\n    this.selectedColor.set(e);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n}\n","<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n","import { AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport { Component, HostBinding, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint mode.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-pen-mode-changer',\n  templateUrl: './paint-pen-mode-changer.component.html',\n  styleUrl: './paint-pen-mode-changer.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXPaintPenModeChangerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected value = 10;\n\n  /** @ignore */\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  /** @ignore */\n  protected selectedPenType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n\n  /** @ignore */\n  protected penTypeHandler(e: 'pen' | 'highlight' | 'eraser') {\n    this.service.penType.set(e);\n  }\n\n  /** @ignore */\n  protected clear() {\n    this.service.toggleClear.update((prev) => !prev);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n\n  /** @ignore */\n  protected valueHandler(e: number) {\n    this.service.lineWidth.set(e);\n  }\n}\n","<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n    @case ('eraser') {\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\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    <ax-button\n      (click)=\"penTypeHandler('eraser')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-eraser\"></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","import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  OnDestroy,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintContainerComponent } from '../paint-container/paint-container.component';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * @category Components\n * paint view\n */\n@Component({\n  selector: 'ax-paint-view',\n  templateUrl: './paint-view.component.html',\n  styleUrl: './paint-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXPaintViewComponent implements OnDestroy {\n  /** @ignore */\n  parent = inject(AXPaintContainerComponent);\n\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected rendred = inject(Renderer2);\n\n  private platformID = inject(PLATFORM_ID);\n\n  /** @ignore */\n  resizeEvent;\n\n  /**\n   * Specifies the class that pass to component.\n   *\n   */\n  customClass = input<string>('', { alias: 'class' });\n\n  /** @ignore */\n  protected canvasElem = viewChild<ElementRef<HTMLCanvasElement>>('c');\n\n  /** @ignore */\n  protected ctx = signal<CanvasRenderingContext2D>(null);\n\n  /** @ignore */\n  protected isPainting = signal(false);\n\n  /** @ignore */\n  protected isUserInteract = signal(false);\n\n  /** @ignore */\n  constructor() {\n    afterNextRender(() => {\n      this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));\n      this.ctx().canvas.width = this.getBoundingCanvasHandler().width;\n      this.ctx().canvas.height = this.getBoundingCanvasHandler().height;\n      this.ctx().lineJoin = 'round';\n      this.ctx().lineCap = 'round';\n      this.ctx().strokeStyle = this.service.penColor();\n      this.ctx().lineWidth = this.service.lineWidth();\n    });\n\n    effect(\n      () => {\n        this.isUserInteract.set(false);\n        this.service.toggleClear();\n        this.ctx()?.clearRect(\n          0,\n          0,\n          this.getBoundingCanvasHandler()?.width,\n          this.getBoundingCanvasHandler()?.height,\n        );\n      },\n      { allowSignalWrites: true },\n    );\n\n    if (isPlatformBrowser(this.platformID)) {\n      this.resizeEvent = this.rendred.listen(window, 'resize', this.resizeEventHandler.bind(this));\n    }\n  }\n\n  /** @ignore */\n  ngOnDestroy(): void {\n    if (isPlatformBrowser(this.platformID) && this.resizeEvent) {\n      this.resizeEvent();\n    }\n  }\n\n  /** @ignore */\n  protected resizeEventHandler() {\n    this.ctx().canvas.width = this.getBoundingCanvasHandler()?.width;\n    this.ctx().canvas.height = this.getBoundingCanvasHandler()?.height;\n  }\n\n  /** @ignore */\n  protected penConfigHandler(penType: 'eraser' | 'pen' | 'highlight') {\n    switch (penType) {\n      case 'pen':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n      case 'eraser':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'destination-out';\n        break;\n      case 'highlight':\n        this.ctx().globalAlpha = 0.008;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected getBoundingCanvasHandler() {\n    return this.canvasElem().nativeElement.getBoundingClientRect();\n  }\n\n  /** @ignore */\n  protected mouseDownHandler(e: MouseEvent) {\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(e.offsetX, e.offsetY);\n    this.ctx().lineTo(e.offsetX, e.offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected mouseMoveHandler(e: MouseEvent) {\n    if (this.isPainting()) {\n      this.ctx().lineTo(e.offsetX, e.offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected mouseUpHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /** @ignore */\n  protected touchStartHandler(e: TouchEvent) {\n    const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n    const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(offsetX, offsetY);\n    this.ctx().lineTo(offsetX, offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected touchMoveHandler(e: TouchEvent) {\n    e.preventDefault(); // prevent page from scroll\n    if (this.isPainting()) {\n      const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n      const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n      this.ctx().lineTo(offsetX, offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected touchEndHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /**\n   * @param e - output file type\n   */\n  getOutPut(e: 'image/webp' | 'image/png' | 'image/jpeg') {\n    const base64 = this.canvasElem().nativeElement.toDataURL(e, 0.1);\n    if (this.isUserInteract()) {\n      this.parent.commitValue(base64);\n    } else {\n      this.parent.commitValue(null);\n    }\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.customClass()}`;\n  }\n}\n","<canvas\n  #c\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>\n</canvas>\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXColorBoxModule } from '@acorex/components/color-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXRangeSliderModule } from '@acorex/components/range-slider';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { AXTooltipModule } from '@acorex/components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPaintContainerComponent } from './paint/paint-container/paint-container.component';\nimport { AXPaintToolbarComponent } from './paint/paint-toolbar/paint-toolbar.component';\nimport { AXPaintColorPickerComponent } from './paint/paint-tools/paint-color-picker/paint-color-picker.component';\nimport { AXPaintPenModeChangerComponent } from './paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component';\nimport { AXPaintViewComponent } from './paint/paint-view/paint-view.component';\n\nconst COMPONENT = [\n  AXPaintContainerComponent,\n  AXPaintToolbarComponent,\n  AXPaintViewComponent,\n  AXPaintColorPickerComponent,\n  AXPaintPenModeChangerComponent,\n];\n\nconst MODULES = [\n  FormsModule,\n  AXRangeSliderModule,\n  AXSelectBoxModule,\n  AXButtonModule,\n  AXColorBoxModule,\n  AXPopoverModule,\n  AXDecoratorModule,\n  AXTooltipModule,\n];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPaintModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i3","i6"],"mappings":"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"}
+{"version":3,"file":"acorex-components-paint.mjs","sources":["../../../../libs/components/paint/src/lib/paint/paint.service.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.html","../../../../libs/components/paint/src/lib/paint/paint-toolbar/paint-toolbar.component.ts","../../../../libs/components/paint/src/lib/paint/paint-toolbar/paint-toolbar.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.html","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.ts","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.html","../../../../libs/components/paint/src/lib/paint.module.ts","../../../../libs/components/paint/src/acorex-components-paint.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXPaintService {\n  penColor = signal<string | CanvasGradient | CanvasPattern>('');\n  lineWidth = signal<number>(10);\n  penType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n  toggleClear = signal(false);\n}\n","import {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { Component, ViewEncapsulation, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * paint container.\n * @category Components\n */\n@Component({\n    selector: 'ax-paint-container',\n    templateUrl: './paint-container.component.html',\n    styleUrl: './paint-container.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['look'],\n    providers: [\n        AXPaintService,\n        { provide: AXComponent, useExisting: AXPaintContainerComponent },\n        { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },\n        { provide: AXClearableComponent, useExisting: AXPaintContainerComponent },\n        { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => AXPaintContainerComponent),\n            multi: true,\n        },\n    ],\n    standalone: false\n})\nexport class AXPaintContainerComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {}\n","<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n","import { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n *paint toolbar\n * @category Components\n */\n@Component({\n    selector: 'ax-paint-toolbar',\n    templateUrl: './paint-toolbar.component.html',\n    styleUrl: './paint-toolbar.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    standalone: false\n})\nexport class AXPaintToolbarComponent {}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-toolbar-container\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { Component, HostBinding, ViewEncapsulation, inject, signal } from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint color picker.\n * @category Components\n */\n@Component({\n    selector: 'ax-paint-color-picker',\n    templateUrl: './paint-color-picker.component.html',\n    styleUrl: './paint-color-picker.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    standalone: false\n})\nexport class AXPaintColorPickerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected selectedColor = signal('rgb(12, 12, 12)');\n\n  /** @ignore */\n  protected changeColorHandler(e: string) {\n    this.service.penColor.set(e);\n    this.selectedColor.set(e);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n}\n","<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n","import { AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport {\n  Component,\n  effect,\n  HostBinding,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint mode.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-pen-mode-changer',\n  templateUrl: './paint-pen-mode-changer.component.html',\n  styleUrl: './paint-pen-mode-changer.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintPenModeChangerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  defaultWidth = model(10);\n\n  #defaultWidthChange = effect(() => {\n    if (this.defaultWidth()) {\n      this.valueHandler(this.defaultWidth());\n    }\n  });\n\n  /** @ignore */\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  /** @ignore */\n  protected selectedPenType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n\n  penTypes = input<('pen' | 'highlight' | 'eraser')[]>(['pen', 'highlight', 'eraser']);\n\n  sizeSlider = input(true);\n\n  /** @ignore */\n  protected penTypeHandler(e: 'pen' | 'highlight' | 'eraser') {\n    this.service.penType.set(e);\n  }\n\n  /** @ignore */\n  protected clear() {\n    this.service.toggleClear.update((prev) => !prev);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n\n  /** @ignore */\n  protected valueHandler(e: number) {\n    this.service.lineWidth.set(e);\n  }\n}\n","@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\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\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\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\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  OnDestroy,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintContainerComponent } from '../paint-container/paint-container.component';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * @category Components\n * paint view\n */\n@Component({\n  selector: 'ax-paint-view',\n  templateUrl: './paint-view.component.html',\n  styleUrl: './paint-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintViewComponent implements OnDestroy {\n  /** @ignore */\n  parent = inject(AXPaintContainerComponent);\n\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected rendred = inject(Renderer2);\n\n  private platformID = inject(PLATFORM_ID);\n\n  /** @ignore */\n  resizeEvent;\n\n  /**\n   * Specifies the class that pass to component.\n   *\n   */\n  customClass = input<string>('', { alias: 'class' });\n\n  /** @ignore */\n  protected canvasElem = viewChild<ElementRef<HTMLCanvasElement>>('c');\n\n  /** @ignore */\n  protected ctx = signal<CanvasRenderingContext2D>(null);\n\n  /** @ignore */\n  protected isPainting = signal(false);\n\n  /** @ignore */\n  protected isUserInteract = signal(false);\n\n  /** @ignore */\n  constructor() {\n    afterNextRender(() => {\n      this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));\n      this.ctx().canvas.width = this.getBoundingCanvasHandler().width;\n      this.ctx().canvas.height = this.getBoundingCanvasHandler().height;\n      this.ctx().lineJoin = 'round';\n      this.ctx().lineCap = 'round';\n      this.ctx().strokeStyle = this.service.penColor();\n      this.ctx().lineWidth = this.service.lineWidth();\n    });\n\n    effect(() => {\n      this.isUserInteract.set(false);\n      this.service.toggleClear();\n      this.ctx()?.clearRect(\n        0,\n        0,\n        this.getBoundingCanvasHandler()?.width,\n        this.getBoundingCanvasHandler()?.height,\n      );\n    });\n\n    if (isPlatformBrowser(this.platformID)) {\n      this.resizeEvent = this.rendred.listen(window, 'resize', this.resizeEventHandler.bind(this));\n    }\n  }\n\n  /** @ignore */\n  ngOnDestroy(): void {\n    if (isPlatformBrowser(this.platformID) && this.resizeEvent) {\n      this.resizeEvent();\n    }\n  }\n\n  /** @ignore */\n  protected resizeEventHandler() {\n    this.ctx().canvas.width = this.getBoundingCanvasHandler()?.width;\n    this.ctx().canvas.height = this.getBoundingCanvasHandler()?.height;\n  }\n\n  /** @ignore */\n  protected penConfigHandler(penType: 'eraser' | 'pen' | 'highlight') {\n    switch (penType) {\n      case 'pen':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n      case 'eraser':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'destination-out';\n        break;\n      case 'highlight':\n        this.ctx().globalAlpha = 0.008;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected getBoundingCanvasHandler() {\n    return this.canvasElem().nativeElement.getBoundingClientRect();\n  }\n\n  /** @ignore */\n  protected mouseDownHandler(e: MouseEvent) {\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(e.offsetX, e.offsetY);\n    this.ctx().lineTo(e.offsetX, e.offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected mouseMoveHandler(e: MouseEvent) {\n    if (this.isPainting()) {\n      this.ctx().lineTo(e.offsetX, e.offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected mouseUpHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /** @ignore */\n  protected touchStartHandler(e: TouchEvent) {\n    const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n    const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(offsetX, offsetY);\n    this.ctx().lineTo(offsetX, offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected touchMoveHandler(e: TouchEvent) {\n    e.preventDefault(); // prevent page from scroll\n    if (this.isPainting()) {\n      const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n      const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n      this.ctx().lineTo(offsetX, offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected touchEndHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /**\n   * @param e - output file type\n   */\n  getOutPut(e: 'image/webp' | 'image/png' | 'image/jpeg') {\n    const base64 = this.canvasElem().nativeElement.toDataURL(e, 0.1);\n    if (this.isUserInteract()) {\n      this.parent.commitValue(base64);\n    } else {\n      this.parent.commitValue(null);\n    }\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.customClass()}`;\n  }\n}\n","<canvas\n  #c\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>\n</canvas>\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXColorBoxModule } from '@acorex/components/color-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXRangeSliderModule } from '@acorex/components/range-slider';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { AXTooltipModule } from '@acorex/components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPaintContainerComponent } from './paint/paint-container/paint-container.component';\nimport { AXPaintToolbarComponent } from './paint/paint-toolbar/paint-toolbar.component';\nimport { AXPaintColorPickerComponent } from './paint/paint-tools/paint-color-picker/paint-color-picker.component';\nimport { AXPaintPenModeChangerComponent } from './paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component';\nimport { AXPaintViewComponent } from './paint/paint-view/paint-view.component';\n\nconst COMPONENT = [\n  AXPaintContainerComponent,\n  AXPaintToolbarComponent,\n  AXPaintViewComponent,\n  AXPaintColorPickerComponent,\n  AXPaintPenModeChangerComponent,\n];\n\nconst MODULES = [\n  FormsModule,\n  AXRangeSliderModule,\n  AXSelectBoxModule,\n  AXButtonModule,\n  AXColorBoxModule,\n  AXPopoverModule,\n  AXDecoratorModule,\n  AXTooltipModule,\n];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPaintModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i3","i6"],"mappings":"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"}

package/fesm2022/acorex-components-password-box.mjs

@@ -53,8 +53,8 @@ class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLook
             this._icon = 'ax-icon-visibility';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", autoComplete: "autoComplete", showToggleButton: "showToggleButton", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPasswordBoxComponent, isStandalone: false, selector: "ax-password-box", inputs: { readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", autoComplete: "autoComplete", showToggleButton: "showToggleButton", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, providers: [
             { provide: AXComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
@@ -66,7 +66,7 @@ class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLook
             },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-look-{{ look }} {{ classNames }}\" [class.ax-state-disabled]=\"disabled\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [name]=\"name\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\">\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n<div class=\"ax-strength-validation-container\">\n  <ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n</div>\n", styles: [".ax-strength-validation-container{margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: ['readonly', 'disabled', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                         'valueChange',
@@ -89,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => AXPasswordBoxComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ax-editor-container ax-look-{{ look }} {{ classNames }}\" [class.ax-state-disabled]=\"disabled\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [name]=\"name\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\">\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n<div class=\"ax-strength-validation-container\">\n  <ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n</div>\n", styles: [".ax-strength-validation-container{margin-top:.25rem}\n"] }]
+                    ], standalone: false, template: "<div class=\"ax-editor-container ax-look-{{ look }} {{ classNames }}\" [class.ax-state-disabled]=\"disabled\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [name]=\"name\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\">\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n<div class=\"ax-strength-validation-container\">\n  <ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n</div>\n", styles: [".ax-strength-validation-container{margin-top:.25rem}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -158,12 +158,12 @@ class AXPasswordStrengthValidationComponent {
         this.strengthLabelColor.set(strength <= 2 ? 'danger' : strength <= 3 ? 'warning' : 'success');
         this.passwordStrength.set((strength * 100) / 5);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPasswordStrengthValidationComponent, selector: "ax-password-strength-validation", inputs: { showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span [class.ax-line]=\"isLenghtgraterThan8().state\">\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseUpperCase().state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseLowerCase().state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseNumber().state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseSpecialCharacter().state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-500))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-500))}.ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-500))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container .ax-line{text-decoration:line-through}\n"], dependencies: [{ kind: "component", type: i1$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPasswordStrengthValidationComponent, isStandalone: false, selector: "ax-password-strength-validation", inputs: { showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-500))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-500))}.ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-500))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-dark .ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-200))}.ax-dark .ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-200))}.ax-dark .ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-200))}\n"], dependencies: [{ kind: "component", type: i1$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span [class.ax-line]=\"isLenghtgraterThan8().state\">\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseUpperCase().state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseLowerCase().state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseNumber().state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\" [class.ax-line]=\"isUseSpecialCharacter().state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-500))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-500))}.ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-500))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container .ax-line{text-decoration:line-through}\n"] }]
+            args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-500))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-500))}.ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-500))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-dark .ax-state-password.ax-text-red{color:rgb(var(--ax-color-danger-200))}.ax-dark .ax-state-password.ax-text-orange{color:rgb(var(--ax-color-warning-200))}.ax-dark .ax-state-password.ax-text-green{color:rgb(var(--ax-color-success-200))}\n"] }]
         }] });
 
 const COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];
@@ -177,17 +177,17 @@ const MODULES = [
     AXTranslationModule,
 ];
 class AXPasswordBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent], imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule,
             AXProgressBarModule,
             AXBadgeModule,
             AXTranslationModule], exports: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],