@acorex/components 20.1.24 → 20.1.25

package/fesm2022/acorex-components-paint.mjs

@@ -26,10 +26,10 @@ class AXPaintService {
         this.toggleClear = signal(false, ...(ngDevMode ? [{ debugName: "toggleClear" }] : []));
         this.activeToolState = signal('pen', ...(ngDevMode ? [{ debugName: "activeToolState" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
 
@@ -51,10 +51,10 @@ class AXPaintToolsSelectorComponent {
     clear() {
         this.service.toggleClear.update((prev) => !prev);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: AXPaintToolsSelectorComponent, isStandalone: true, selector: "ax-paint-tools-selector", providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", styles: [""], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "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: "20.1.8", ngImport: i0, type: AXPaintToolsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPaintToolsSelectorComponent, isStandalone: true, selector: "ax-paint-tools-selector", providers: [{ provide: AXComponent, useExisting: AXPaintToolsSelectorComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", styles: [""], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintToolsSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('pen')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'pen' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('highlight')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'highlight' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.eraser' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"changeToolHandler('eraser')\"\n  look=\"blank\"\n  [selected]=\"this.service.activeToolState() === 'eraser' ? true : false\"\n  [color]=\"this.service.activeToolState() === 'eraser' ? 'primary' : 'default'\"\n>\n  <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:paint.actions.reset' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"clear()\"\n  look=\"blank\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n" }]
         }] });
@@ -72,10 +72,10 @@ class AXPaintEraserToolComponent {
     valueHandler(e) {
         this.service.eraserWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: AXPaintEraserToolComponent, isStandalone: true, selector: "ax-paint-eraser-tool", providers: [{ provide: AXComponent, useExisting: AXPaintEraserToolComponent }], ngImport: i0, template: "<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-paint-eraser-tool{display:flex}ax-paint-eraser-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-eraser-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintEraserToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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", styles: ["ax-paint-eraser-tool{display:flex}ax-paint-eraser-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-eraser-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintEraserToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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", styles: ["ax-paint-eraser-tool{display:flex}ax-paint-eraser-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-eraser-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
@@ -98,10 +98,10 @@ class AXPaintHighlightToolComponent {
     valueHandler(e) {
         this.service.highlightWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: AXPaintHighlightToolComponent, isStandalone: true, selector: "ax-paint-highlight-tool", providers: [{ provide: AXComponent, useExisting: AXPaintHighlightToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-paint-highlight-tool{display:flex}ax-paint-highlight-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-highlight-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { 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: "20.1.8", ngImport: i0, type: AXPaintHighlightToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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", styles: ["ax-paint-highlight-tool{display:flex}ax-paint-highlight-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-highlight-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintHighlightToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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", styles: ["ax-paint-highlight-tool{display:flex}ax-paint-highlight-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-highlight-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
@@ -126,10 +126,10 @@ class AXPaintPenToolComponent {
     valueHandler(e) {
         this.service.penWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: AXPaintPenToolComponent, isStandalone: true, selector: "ax-paint-pen-tool", providers: [{ provide: AXComponent, useExisting: AXPaintPenToolComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  axTooltip=\"Pen Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-paint-pen-tool{display:flex}ax-paint-pen-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-pen-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { 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: "20.1.8", ngImport: i0, type: AXPaintPenToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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", styles: ["ax-paint-pen-tool{display:flex}ax-paint-pen-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-pen-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintPenToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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", styles: ["ax-paint-pen-tool{display:flex}ax-paint-pen-tool ax-range-slider{padding:.5rem .75rem;width:10rem}ax-paint-pen-tool ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
         }] });
@@ -179,8 +179,8 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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: "20.1.8", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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 },
@@ -192,7 +192,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <ax-toolbar class=\"ax-secondary-toolbar\">\n      <ax-prefix>\n        @switch (service.activeToolState()) {\n          @case ('pen') {\n            <ax-paint-pen-tool></ax-paint-pen-tool>\n          }\n          @case ('eraser') {\n            <ax-paint-eraser-tool></ax-paint-eraser-tool>\n          }\n          @case ('highlight') {\n            <ax-paint-highlight-tool></ax-paint-highlight-tool>\n          }\n        }\n      </ax-prefix>\n    </ax-toolbar>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-paint-container .ax-secondary-toolbar{padding:.2rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface));justify-content:center}ax-paint-container .ax-main-toolbar{justify-content:center;padding:.2rem}\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look', 'disabled'], providers: [
                         AXPaintService,
@@ -343,10 +343,10 @@ class AXPaintViewComponent {
     get __hostClass() {
         return [this.customClass(), `ax-${this.paintBackgroundColor()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%;touch-action:none}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%;touch-action:none}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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: ["ax-paint-view{display:block;width:100%;touch-action:none}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -373,8 +373,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXPaintModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXPaintModule, imports: [FormsModule,
             AXRangeSliderModule,
             AXSelectBoxModule,
             AXButtonModule,
@@ -392,13 +392,13 @@ class AXPaintModule {
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintContainerComponent,
             AXPaintToolsSelectorComponent,
             AXPaintPenToolComponent,
             AXPaintHighlightToolComponent,
             AXPaintEraserToolComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],