npm - @acorex/components - Versions diffs - 21.1.0-next.2 → 22.0.0-next.1 - Mend

@acorex/components 21.1.0-next.2 → 22.0.0-next.1

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 (218) hide show

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 type AXOtpMode = 'number' \| 'dot' \| 'star';\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, AXOtpMode } 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.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 Controls how entered digits are displayed in each input.\n * - `number`: shows the actual digit\n * - `dot`: shows a dot character\n * - `star`: shows an asterisk character\n /\n mode = input<AXOtpMode>('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-otp .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 displayValue(i: number): string {\n const val = this.inputValues[i];\n return val && val.trim() ? val : '';\n }\n\n /* @ignore /\n protected isMasked(): boolean {\n return this.mode() !== 'number';\n }\n\n /* @ignore /\n protected hasValue(i: number): boolean {\n return !!this.displayValue(i);\n }\n\n /* @ignore /\n protected _maskCharacter(): string {\n return this.mode() === 'dot' ? '•' : '';\n }\n\n /** @ignore /\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('ax-otp .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-otp .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-otp .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-otp .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);\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\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <div\n class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n >\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [class.ax-otp-masked]=\"isMasked()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"displayValue(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 @if (isMasked() && hasValue(i)) {\n <span\n class=\"ax-otp-mask\"\n [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n [class.ax-otp-mask-star]=\"mode() === 'star'\"\n aria-hidden=\"true\"\n >{{ _maskCharacter() }}</span>\n }\n </div>\n }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></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 type AXOtpMode = 'number' \| 'dot' \| 'star';\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 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, AXOtpMode } 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.css'],\n inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n outputs: ['stateChange', 'disabledChange'],\n\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 Controls how entered digits are displayed in each input.\n * - `number`: shows the actual digit\n * - `dot`: shows a dot character\n * - `star`: shows an asterisk character\n /\n mode = input<AXOtpMode>('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-otp .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 displayValue(i: number): string {\n const val = this.inputValues[i];\n return val && val.trim() ? val : '';\n }\n\n /* @ignore /\n protected isMasked(): boolean {\n return this.mode() !== 'number';\n }\n\n /* @ignore /\n protected hasValue(i: number): boolean {\n return !!this.displayValue(i);\n }\n\n /* @ignore /\n protected _maskCharacter(): string {\n return this.mode() === 'dot' ? '•' : '';\n }\n\n /** @ignore /\n protected calcFontSize() {\n const size = this.getHostElement().querySelector<HTMLInputElement>('ax-otp .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-otp .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-otp .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-otp .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);\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\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <div\n class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-error]=\"state === 'error'\"\n [class.ax-state-success]=\"state === 'success'\"\n >\n <input\n [name]=\"name\"\n [type]=\"type()\"\n maxlength=\"1\"\n class=\"ax-input\"\n [class.ax-otp-masked]=\"isMasked()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n [ngModel]=\"displayValue(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 @if (isMasked() && hasValue(i)) {\n <span\n class=\"ax-otp-mask\"\n [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n [class.ax-otp-mask-star]=\"mode() === 'star'\"\n aria-hidden=\"true\"\n >{{ _maskCharacter() }}</span>\n }\n </div>\n }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBasePageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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.2.9", ngImpor
 // TODO: Module is empty!?
 class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],

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

@@ -7,7 +7,7 @@ import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ViewEncapsulation, Component, linkedSignal, ChangeDetectionStrategy, input, effect, forwardRef, HostBinding, Renderer2, PLATFORM_ID, ElementRef, viewChild, afterNextRender, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ViewEncapsulation, Component, linkedSignal, input, effect, forwardRef, HostBinding, Renderer2, PLATFORM_ID, ElementRef, viewChild, afterNextRender, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AXComponent, MXInputBaseValueComponent, MXLookComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
@@ -18,28 +18,39 @@ import { AsyncPipe, isPlatformBrowser } from '@angular/common';
 class AXPaintService {
     constructor() {
-        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 }); }
+        this.penColor = signal('rgb(12, 12, 12)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "penColor" }] : /* istanbul ignore next */ []));
+        this.highlightColor = signal('rgb(255, 210, 48)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightColor" }] : /* istanbul ignore next */ []));
+        this.penWidth = signal(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "penWidth" }] : /* istanbul ignore next */ []));
+        this.highlightWidth = signal(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightWidth" }] : /* istanbul ignore next */ []));
+        this.eraserWidth = signal(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eraserWidth" }] : /* istanbul ignore next */ []));
+        this.toggleClear = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleClear" }] : /* istanbul ignore next */ []));
+        this.activeToolState = signal('pen', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeToolState" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
 class AXPaintToolsSelectorComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        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 */ []));
+        this.pen = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pen" }] : /* istanbul ignore next */ []));
+        this.highlight = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+        this.eraser = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eraser" }] : /* istanbul ignore next */ []));
+        this.reset = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reset" }] : /* istanbul ignore next */ []));
     }
     changeToolHandler(tool) {
         if (this.service.activeToolState() === tool) {
@@ -51,10 +62,10 @@ class AXPaintToolsSelectorComponent {
     clear() {
         this.service.toggleClear.update((prev) => !prev);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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.2.9", ngImport: i0, type: AXPaintToolsSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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,18 +77,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXPaintEraserToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        this.value = linkedSignal(() => this.service.eraserWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = linkedSignal(() => this.service.eraserWidth(), /* @ts-ignore */
+        ...(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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintEraserToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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" }]
+            args: [{ selector: 'ax-paint-eraser-tool', encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXRangeSliderComponent], providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n" }]
         }] });
 /**
@@ -87,8 +99,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXPaintHighlightToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
-        this.value = linkedSignal(() => this.service.highlightWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.selectedColor = linkedSignal(() => this.service.highlightColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.value = linkedSignal(() => this.service.highlightWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.selectedColor = linkedSignal(() => this.service.highlightColor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     changeColorHandler(e) {
         this.service.highlightColor.set(e);
@@ -98,12 +112,12 @@ class AXPaintHighlightToolComponent {
     valueHandler(e) {
         this.service.highlightWidth.set(e);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintHighlightToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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" }]
+            args: [{ selector: 'ax-paint-highlight-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], 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 +128,11 @@ class AXPaintPenToolComponent {
     constructor() {
         this.service = inject(AXPaintService);
         /** @ignore */
-        this.value = linkedSignal(() => this.service.penWidth(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = linkedSignal(() => this.service.penWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.selectedColor = linkedSignal(() => this.service.penColor(), ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.selectedColor = linkedSignal(() => this.service.penColor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     changeColorHandler(e) {
         this.service.penColor.set(e);
@@ -126,12 +142,12 @@ class AXPaintPenToolComponent {
     valueHandler(e) {
         this.service.penWidth.set(e);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintPenToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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" }]
+            args: [{ selector: 'ax-paint-pen-tool', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent], 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 +158,14 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
     constructor() {
         super(...arguments);
         this.service = inject(AXPaintService);
-        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+        this.editMode = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.editMode()) {
                 this.service.activeToolState.set('pen');
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     get __hostClass() {
@@ -212,8 +230,8 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
     get __hostName() {
         return this.name;
     }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 },
@@ -225,7 +243,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
             },
         ], 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;@layer components{ax-paint-container>.ax-editor-container{display:block;height:100%;padding:calc(var(--spacing, .25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:50%}ax-paint-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-paint-container .ax-secondary-toolbar{display:flex;justify-content:center;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)}ax-paint-container .ax-secondary-toolbar:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-darkest-surface))}ax-paint-container .ax-main-toolbar{justify-content:center;padding:calc(var(--spacing, .25rem) * 1)}ax-paint-container ax-paint-tools-selector{display:flex;padding:calc(var(--spacing, .25rem) * 1)}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;}@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}}}\n/*! tailwindcss v4.1.16 | 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.2.9", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look', 'disabled'], providers: [
                         AXPaintService,
@@ -267,15 +285,20 @@ class AXPaintViewComponent {
         this.renderer = inject(Renderer2);
         this.platformID = inject(PLATFORM_ID);
         this.hostElem = inject(ElementRef);
-        this.paintBackgroundColor = input('white', ...(ngDevMode ? [{ debugName: "paintBackgroundColor" }] : /* istanbul ignore next */ []));
+        this.paintBackgroundColor = input('white', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paintBackgroundColor" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.canvasElem = viewChild('c', ...(ngDevMode ? [{ debugName: "canvasElem" }] : /* istanbul ignore next */ []));
+        this.canvasElem = viewChild('c', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvasElem" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.ctx = signal(null, ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
+        this.ctx = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isPainting = signal(false, ...(ngDevMode ? [{ debugName: "isPainting" }] : /* istanbul ignore next */ []));
+        this.isPainting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPainting" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isUserInteract = signal(false, ...(ngDevMode ? [{ debugName: "isUserInteract" }] : /* istanbul ignore next */ []));
+        this.isUserInteract = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUserInteract" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));
             this.ctx().lineJoin = 'round';
@@ -291,7 +314,8 @@ class AXPaintViewComponent {
             this.isUserInteract.set(false);
             this.service.toggleClear();
             this.ctx()?.clearRect(0, 0, this.getBoundingCanvasHandler()?.width, this.getBoundingCanvasHandler()?.height);
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     }
     #init;
     #effect;
@@ -394,12 +418,12 @@ class AXPaintViewComponent {
     get __hostClass() {
         return [`ax-${this.paintBackgroundColor()}`];
     }
-    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;@layer components{ax-paint-view{display:block;width:100%;touch-action:none}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{width:100%;cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", 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;@layer components{ax-paint-view{display:block;width:100%;touch-action:none}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{width:100%;cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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;@layer components{ax-paint-view{display:block;width:100%;touch-action:none}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{width:100%;cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, 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;@layer components{ax-paint-view{display:block;width:100%;touch-action:none}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{width:100%;cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | 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 +448,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXPaintModule {
-    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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
             AXRangeSliderModule,
             AXSelectBoxModule,
             AXButtonModule,
@@ -443,13 +467,13 @@ class AXPaintModule {
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
             AXPaintToolsSelectorComponent,
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],