npm - @acorex/components - Versions diffs - 21.0.2-next.4 → 21.0.2-next.40 - Mend

@acorex/components 21.0.2-next.4 → 21.0.2-next.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/fesm2022/acorex-components-otp.mjs CHANGED Viewed

@@ -17,11 +17,11 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     /** @ignore */
     constructor() {
         super();
-        this.type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * Holds the length of the OTP input field.
          */
-        this.length = model(...(ngDevMode ? [undefined, { debugName: "length" }] : []));
+        this.length = model(...(ngDevMode ? [undefined, { debugName: "length" }] : /* istanbul ignore next */ []));
         /**
          * @event
          * Emits an event when the OTP input is completed.
@@ -40,7 +40,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             return Array(this.length())
                 .fill(1)
                 .map((x, i) => i);
-        }, ...(ngDevMode ? [{ debugName: "inputs" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.calcFontSize();
             this.mapValueToInputs();
@@ -177,8 +177,8 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXOtpComponent),
@@ -190,9 +190,9 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             },
             { provide: AXValuableComponent, useExisting: AXOtpComponent },
             { provide: AXFocusableComponent, useExisting: AXOtpComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:calc(var(--spacing,.25rem) * 0)!important;display:grid!important}ax-otp input{padding:calc(var(--spacing,.25rem) * 0);text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:0!important;display:grid!important}ax-otp input{text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding:0}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "21.1.3", ngImport: i0, type: AXOtpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly', 'look', 'name'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -206,15 +206,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         },
                         { provide: AXValuableComponent, useExisting: AXOtpComponent },
                         { provide: AXFocusableComponent, useExisting: AXOtpComponent },
-                    ], imports: [NgStyle, FormsModule], template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:calc(var(--spacing,.25rem) * 0)!important;display:grid!important}ax-otp input{padding:calc(var(--spacing,.25rem) * 0);text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [NgStyle, FormsModule], template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:0!important;display:grid!important}ax-otp input{text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding:0}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], onCompleted: [{ type: i0.Output, args: ["onCompleted"] }] } });
 class AXOtpModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent], exports: [AXOtpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent], exports: [AXOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXOtpComponent],

package/fesm2022/acorex-components-otp.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n value: string;\n isCompleted: boolean;\n}\n","import {\n AXComponent,\n AXFocusableComponent,\n AXValuableComponent,\n MXLookComponent,\n MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n afterNextRender,\n computed,\n forwardRef,\n input,\n model,\n output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/*\n @category\n * A component for OTP input fields with state management and custom styling support.\n /\n@Component({\n selector: 'ax-otp',\n templateUrl: './otp.component.html',\n styleUrls: ['./otp.component.compiled.css'],\n inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n outputs: ['stateChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXOtpComponent),\n multi: true,\n },\n {\n provide: AXComponent,\n useExisting: AXOtpComponent,\n },\n { provide: AXValuableComponent, useExisting: AXOtpComponent },\n { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n ],\n imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n type = input<'number' \| 'text'>('number');\n\n /\n Holds the length of the OTP input field.\n /\n length = model<number>();\n\n /\n @event\n * Emits an event when the OTP input is completed.\n /\n onCompleted = output<AXOtpCompletedEvent>();\n\n /\n Stores the values entered in the OTP input fields.\n /\n protected inputValues: string[] = [];\n\n /\n Holds the input values as a signal.\n /\n protected inputs = computed(() => {\n this.calcFontSize();\n //\n return Array(this.length())\n .fill(1)\n .map((x, i) => i);\n });\n\n /* @ignore /\n constructor() {\n super();\n afterNextRender(() => {\n this.calcFontSize();\n this.mapValueToInputs();\n });\n }\n\n /\n Converts the value string to input values and updates the inputValues array.\n /\n mapValueToInputs() {\n this._emitOnComplete();\n if (!this.value) {\n return;\n }\n this.value.split('').map((v, i) => {\n this.inputValues[i] = v;\n });\n }\n\n /\n Resets the input values to an empty array.\n /\n override reset() {\n this.inputValues = [];\n for (let index = 0; index < this.length(); index++) {\n this.inputValues.push(' ');\n }\n }\n\n /* @ignore /\n protected _handleOnInput(event: any, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n if (this.type() === 'number') {\n const numberRegex = /^\\d+$/;\n if (!numberRegex.test(event.target.value)) {\n event.target.value = '';\n return;\n }\n }\n if (event.target.value.length > 1) {\n const currentValue = event.target.value;\n event.target.value = '';\n event.target.value = currentValue.slice(-1);\n }\n if (inputs[i + 1]) {\n inputs[i + 1].select();\n }\n this.inputValues[i] = event.target.value;\n this._emitOnComplete();\n }\n\n /* @ignore /\n override internalSetValue(value: any): string {\n if (value) {\n this.inputValues = value?.toString().split('') as any;\n }\n return value;\n }\n\n /* @ignore /\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n const fontSize = size 0.5;\n this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n }\n\n /** @ignore /\n protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n switch (event.key) {\n case 'Backspace':\n if (this.readonly \|\| this.disabled) return;\n inputs[i].value = '';\n if (inputs[i - 1]) {\n inputs[i - 1].focus();\n event.preventDefault();\n }\n this.inputValues[i] = ' ';\n this.commitValue(this.inputValues.join(''), true);\n inputs[i].value = '';\n break;\n\n case 'ArrowRight':\n if (inputs[i + 1]) {\n event.preventDefault();\n inputs[i + 1].select();\n }\n break;\n\n case 'ArrowLeft':\n if (inputs[i - 1]) {\n event.preventDefault();\n inputs[i - 1].select();\n }\n break;\n\n case 'Home':\n event.preventDefault();\n inputs[0].select();\n break;\n\n case 'End':\n event.preventDefault();\n inputs[this.length() - 1].select();\n break;\n\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n }\n }\n\n /* @ignore /\n protected _handleOnPaste(event: ClipboardEvent) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n const data = event.clipboardData.getData('text');\n const isNumber = /\\d+/;\n\n if (isNumber.test(data)) {\n inputs[inputs.length - 1].focus();\n this.inputValues = [];\n for (let i = 0; i < inputs.length; i++) {\n this.inputValues[i] = data[i];\n }\n this._emitOnComplete();\n }\n\n event.preventDefault();\n }\n\n /* @ignore /\n protected _handleFocus(i) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n inputs[i].select();\n }\n\n /* @ignore /\n protected _emitOnComplete() {\n // TODO: Check Value delay\n setTimeout(() => {\n const filteredValues = this.inputValues.filter((c) => c && c !== ' ');\n const value = filteredValues.join('').trim();\n this.commitValue(value, true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value,\n isCompleted: filteredValues.length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"inputValues[i]\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n imports: [AXOtpComponent],\n exports: [AXOtpComponent],\n})\nexport class AXOtpModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n value: string;\n isCompleted: boolean;\n}\n","import {\n AXComponent,\n AXFocusableComponent,\n AXValuableComponent,\n MXLookComponent,\n MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n afterNextRender,\n computed,\n forwardRef,\n input,\n model,\n output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/*\n @category\n * A component for OTP input fields with state management and custom styling support.\n /\n@Component({\n selector: 'ax-otp',\n templateUrl: './otp.component.html',\n styleUrls: ['./otp.component.compiled.css'],\n inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n outputs: ['stateChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXOtpComponent),\n multi: true,\n },\n {\n provide: AXComponent,\n useExisting: AXOtpComponent,\n },\n { provide: AXValuableComponent, useExisting: AXOtpComponent },\n { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n ],\n imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n type = input<'number' \| 'text'>('number');\n\n /\n Holds the length of the OTP input field.\n /\n length = model<number>();\n\n /\n @event\n * Emits an event when the OTP input is completed.\n /\n onCompleted = output<AXOtpCompletedEvent>();\n\n /\n Stores the values entered in the OTP input fields.\n /\n protected inputValues: string[] = [];\n\n /\n Holds the input values as a signal.\n /\n protected inputs = computed(() => {\n this.calcFontSize();\n //\n return Array(this.length())\n .fill(1)\n .map((x, i) => i);\n });\n\n /* @ignore /\n constructor() {\n super();\n afterNextRender(() => {\n this.calcFontSize();\n this.mapValueToInputs();\n });\n }\n\n /\n Converts the value string to input values and updates the inputValues array.\n /\n mapValueToInputs() {\n this._emitOnComplete();\n if (!this.value) {\n return;\n }\n this.value.split('').map((v, i) => {\n this.inputValues[i] = v;\n });\n }\n\n /\n Resets the input values to an empty array.\n /\n override reset() {\n this.inputValues = [];\n for (let index = 0; index < this.length(); index++) {\n this.inputValues.push(' ');\n }\n }\n\n /* @ignore /\n protected _handleOnInput(event: any, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n if (this.type() === 'number') {\n const numberRegex = /^\\d+$/;\n if (!numberRegex.test(event.target.value)) {\n event.target.value = '';\n return;\n }\n }\n if (event.target.value.length > 1) {\n const currentValue = event.target.value;\n event.target.value = '';\n event.target.value = currentValue.slice(-1);\n }\n if (inputs[i + 1]) {\n inputs[i + 1].select();\n }\n this.inputValues[i] = event.target.value;\n this._emitOnComplete();\n }\n\n /* @ignore /\n override internalSetValue(value: any): string {\n if (value) {\n this.inputValues = value?.toString().split('') as any;\n }\n return value;\n }\n\n /* @ignore /\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n const fontSize = size 0.5;\n this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n }\n\n /** @ignore /\n protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n switch (event.key) {\n case 'Backspace':\n if (this.readonly \|\| this.disabled) return;\n inputs[i].value = '';\n if (inputs[i - 1]) {\n inputs[i - 1].focus();\n event.preventDefault();\n }\n this.inputValues[i] = ' ';\n this.commitValue(this.inputValues.join(''), true);\n inputs[i].value = '';\n break;\n\n case 'ArrowRight':\n if (inputs[i + 1]) {\n event.preventDefault();\n inputs[i + 1].select();\n }\n break;\n\n case 'ArrowLeft':\n if (inputs[i - 1]) {\n event.preventDefault();\n inputs[i - 1].select();\n }\n break;\n\n case 'Home':\n event.preventDefault();\n inputs[0].select();\n break;\n\n case 'End':\n event.preventDefault();\n inputs[this.length() - 1].select();\n break;\n\n case 'ArrowUp':\n case 'ArrowDown':\n event.preventDefault();\n break;\n }\n }\n\n /* @ignore /\n protected _handleOnPaste(event: ClipboardEvent) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n const data = event.clipboardData.getData('text');\n const isNumber = /\\d+/;\n\n if (isNumber.test(data)) {\n inputs[inputs.length - 1].focus();\n this.inputValues = [];\n for (let i = 0; i < inputs.length; i++) {\n this.inputValues[i] = data[i];\n }\n this._emitOnComplete();\n }\n\n event.preventDefault();\n }\n\n /* @ignore /\n protected _handleFocus(i) {\n const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n inputs[i].select();\n }\n\n /* @ignore /\n protected _emitOnComplete() {\n // TODO: Check Value delay\n setTimeout(() => {\n const filteredValues = this.inputValues.filter((c) => c && c !== ' ');\n const value = filteredValues.join('').trim();\n this.commitValue(value, true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value,\n isCompleted: filteredValues.length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n (paste)=\"_handleOnPaste($event)\"\n class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"inputValues[i]\"\n [attr.disabled]=\"disabled\"\n (input)=\"_handleOnInput($event, i)\"\n [class.ax-state-disabled]=\"disabled\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n />\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n imports: [AXOtpComponent],\n exports: [AXOtpComponent],\n})\nexport class AXOtpModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-page.mjs CHANGED Viewed

@@ -47,10 +47,10 @@ class AXBasePageComponent extends MXBaseComponent {
     ngOnDestroy() {
         this.onClosed.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
         }], propDecorators: { footer: [{
                 type: ViewChild,
@@ -101,10 +101,10 @@ class AXPageComponent extends MXBaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -117,11 +117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 // TODO: Module is empty!?
 class AXPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],

package/fesm2022/acorex-components-paint.mjs CHANGED Viewed

@@ -18,28 +18,28 @@ import { AsyncPipe, isPlatformBrowser } from '@angular/common';
 class AXPaintService {
     constructor() {
-        this.penColor = signal('rgb(12, 12, 12)', ...(ngDevMode ? [{ debugName: "penColor" }] : []));
-        this.highlightColor = signal('rgb(255, 210, 48)', ...(ngDevMode ? [{ debugName: "highlightColor" }] : []));
-        this.penWidth = signal(10, ...(ngDevMode ? [{ debugName: "penWidth" }] : []));
-        this.highlightWidth = signal(10, ...(ngDevMode ? [{ debugName: "highlightWidth" }] : []));
-        this.eraserWidth = signal(10, ...(ngDevMode ? [{ debugName: "eraserWidth" }] : []));
-        this.toggleClear = signal(false, ...(ngDevMode ? [{ debugName: "toggleClear" }] : []));
-        this.activeToolState = signal('pen', ...(ngDevMode ? [{ debugName: "activeToolState" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintService }); }
+        this.penColor = signal('rgb(12, 12, 12)', ...(ngDevMode ? [{ debugName: "penColor" }] : /* istanbul ignore next */ []));
+        this.highlightColor = signal('rgb(255, 210, 48)', ...(ngDevMode ? [{ debugName: "highlightColor" }] : /* istanbul ignore next */ []));
+        this.penWidth = signal(10, ...(ngDevMode ? [{ debugName: "penWidth" }] : /* istanbul ignore next */ []));
+        this.highlightWidth = signal(10, ...(ngDevMode ? [{ debugName: "highlightWidth" }] : /* istanbul ignore next */ []));
+        this.eraserWidth = signal(10, ...(ngDevMode ? [{ debugName: "eraserWidth" }] : /* istanbul ignore next */ []));
+        this.toggleClear = signal(false, ...(ngDevMode ? [{ debugName: "toggleClear" }] : /* istanbul ignore next */ []));
+        this.activeToolState = signal('pen', ...(ngDevMode ? [{ debugName: "activeToolState" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
 class AXPaintToolsSelectorComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        this.pen = signal(null, ...(ngDevMode ? [{ debugName: "pen" }] : []));
-        this.highlight = signal(null, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
-        this.eraser = signal(null, ...(ngDevMode ? [{ debugName: "eraser" }] : []));
-        this.reset = signal(null, ...(ngDevMode ? [{ debugName: "reset" }] : []));
+        this.pen = signal(null, ...(ngDevMode ? [{ debugName: "pen" }] : /* istanbul ignore next */ []));
+        this.highlight = signal(null, ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+        this.eraser = signal(null, ...(ngDevMode ? [{ debugName: "eraser" }] : /* istanbul ignore next */ []));
+        this.reset = signal(null, ...(ngDevMode ? [{ debugName: "reset" }] : /* istanbul ignore next */ []));
     }
     changeToolHandler(tool) {
         if (this.service.activeToolState() === tool) {
@@ -51,10 +51,10 @@ class AXPaintToolsSelectorComponent {
     clear() {
         this.service.toggleClear.update((prev) => !prev);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPaintToolsSelectorComponent, isStandalone: true, selector: "ax-paint-tools-selector", providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPaintToolsSelectorComponent, isStandalone: true, selector: "ax-paint-tools-selector", providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintToolsSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintToolsSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-tools-selector', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
         }] });
@@ -66,16 +66,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AXPaintEraserToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        this.value = linkedSignal(() => this.service.eraserWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.value = linkedSignal(() => this.service.eraserWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     /** @ignore */
     valueHandler(e) {
         this.service.eraserWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPaintEraserToolComponent, isStandalone: true, selector: "ax-paint-eraser-tool", providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], ngImport: i0, template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPaintEraserToolComponent, isStandalone: true, selector: "ax-paint-eraser-tool", providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], ngImport: i0, template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintEraserToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintEraserToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-eraser-tool', encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n" }]
         }] });
@@ -87,8 +87,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AXPaintHighlightToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        this.value = linkedSignal(() => this.service.highlightWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.selectedColor = linkedSignal(() => this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+        this.value = linkedSignal(() => this.service.highlightWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.selectedColor = linkedSignal(() => this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     changeColorHandler(e) {
         this.service.highlightColor.set(e);
@@ -98,10 +98,10 @@ class AXPaintHighlightToolComponent {
     valueHandler(e) {
         this.service.highlightWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPaintHighlightToolComponent, isStandalone: true, selector: "ax-paint-highlight-tool", providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPaintHighlightToolComponent, isStandalone: true, selector: "ax-paint-highlight-tool", providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintHighlightToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintHighlightToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-highlight-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n" }]
         }] });
@@ -114,9 +114,9 @@ class AXPaintPenToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
         /** @ignore */
-        this.value = linkedSignal(() => this.service.penWidth(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.value = linkedSignal(() => this.service.penWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.selectedColor = linkedSignal(() => this.service.penColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+        this.selectedColor = linkedSignal(() => this.service.penColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     changeColorHandler(e) {
         this.service.penColor.set(e);
@@ -126,10 +126,10 @@ class AXPaintPenToolComponent {
     valueHandler(e) {
         this.service.penWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPaintPenToolComponent, isStandalone: true, selector: "ax-paint-pen-tool", providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPaintPenToolComponent, isStandalone: true, selector: "ax-paint-pen-tool", providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintPenToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintPenToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-pen-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n" }]
         }] });
@@ -142,12 +142,12 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
     constructor() {
         super(...arguments);
         this.service = inject(AXPaintService);
-        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.editMode()) {
                 this.service.activeToolState.set('pen');
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     get __hostClass() {
@@ -212,8 +212,8 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXPaintContainerComponent, isStandalone: true, selector: "ax-paint-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPaintContainerComponent, isStandalone: true, selector: "ax-paint-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
             AXPaintService,
             { provide: AXComponent, useExisting: AXPaintContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },
@@ -223,9 +223,9 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
                 useExisting: forwardRef(() => AXPaintContainerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-darkest-surface))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:0!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-darkest-surface))}ax-paint-container .ax-main-toolbar{padding:var(--spacing,.25rem);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:var(--spacing,.25rem);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look', 'disabled'], providers: [
                         AXPaintService,
@@ -244,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXPaintPenToolComponent,
                         AXPaintHighlightToolComponent,
                         AXPaintEraserToolComponent,
-                    ], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-darkest-surface))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:0!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{cursor:not-allowed;width:100%;height:100%;position:absolute;top:0;left:0}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-darkest-surface))}ax-paint-container .ax-main-toolbar{padding:var(--spacing,.25rem);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:var(--spacing,.25rem);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -267,15 +267,15 @@ class AXPaintViewComponent {
         this.renderer = inject(Renderer2);
         this.platformID = inject(PLATFORM_ID);
         this.hostElem = inject(ElementRef);
-        this.paintBackgroundColor = input('white', ...(ngDevMode ? [{ debugName: "paintBackgroundColor" }] : []));
+        this.paintBackgroundColor = input('white', ...(ngDevMode ? [{ debugName: "paintBackgroundColor" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.canvasElem = viewChild('c', ...(ngDevMode ? [{ debugName: "canvasElem" }] : []));
+        this.canvasElem = viewChild('c', ...(ngDevMode ? [{ debugName: "canvasElem" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.ctx = signal(null, ...(ngDevMode ? [{ debugName: "ctx" }] : []));
+        this.ctx = signal(null, ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isPainting = signal(false, ...(ngDevMode ? [{ debugName: "isPainting" }] : []));
+        this.isPainting = signal(false, ...(ngDevMode ? [{ debugName: "isPainting" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isUserInteract = signal(false, ...(ngDevMode ? [{ debugName: "isUserInteract" }] : []));
+        this.isUserInteract = signal(false, ...(ngDevMode ? [{ debugName: "isUserInteract" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));
             this.ctx().lineJoin = 'round';
@@ -291,7 +291,7 @@ class AXPaintViewComponent {
             this.isUserInteract.set(false);
             this.service.toggleClear();
             this.ctx()?.clearRect(0, 0, this.getBoundingCanvasHandler()?.width, this.getBoundingCanvasHandler()?.height);
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     }
     #init;
     #effect;
@@ -394,12 +394,12 @@ class AXPaintViewComponent {
     get __hostClass() {
         return [`ax-${this.paintBackgroundColor()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { paintBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "paintBackgroundColor", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -424,8 +424,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXPaintModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
             AXRangeSliderModule,
             AXSelectBoxModule,
             AXButtonModule,
@@ -443,13 +443,13 @@ class AXPaintModule {
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
             AXPaintToolsSelectorComponent,
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],