@acorex/components 21.0.1-next.8 → 21.0.1-next.80

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-page.mjs","sources":["../tmp-esm2022/page/lib/base-page.class.js","../tmp-esm2022/page/lib/page.component.js","../tmp-esm2022/page/lib/page.module.js","../tmp-esm2022/page/acorex-components-page.js"],"sourcesContent":["import { MXBaseComponent } from '@acorex/cdk/common';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { EventEmitter, Injectable, Input, Output, ViewChild, inject } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXBasePageComponent extends MXBaseComponent {\n    constructor() {\n        super(...arguments);\n        this._loadingService = inject(AXLoadingService);\n        this.isLoadingChange = new EventEmitter();\n        this._isLoading = false;\n        this._isPopup = false;\n        this.onClosed = new EventEmitter();\n    }\n    get isLoading() {\n        return this._isLoading;\n    }\n    set isLoading(v) {\n        this.setOption({\n            name: 'isLoading',\n            value: v,\n            afterCallback: () => {\n                if (this._loadingId && !v) {\n                    this._loadingService.hide(this._loadingId);\n                    this._loadingId = 0;\n                }\n                if (v) {\n                    this._loadingId = this._loadingService.show({\n                        location: this.getHostElement().closest('.ax-loading-container'),\n                    });\n                }\n                this.cdr.markForCheck();\n            },\n        });\n    }\n    get isPopup() {\n        return this._isPopup;\n    }\n    close(data) {\n        this.onClosed.emit({\n            component: this,\n            data: data,\n        });\n    }\n    onClosing(e) { }\n    ngOnDestroy() {\n        this.onClosed.unsubscribe();\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }\n    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXBasePageComponent }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXBasePageComponent, decorators: [{\n            type: Injectable\n        }], propDecorators: { footer: [{\n                type: ViewChild,\n                args: ['ax-footer', { static: true }]\n            }], isLoadingChange: [{\n                type: Output\n            }], isLoading: [{\n                type: Input\n            }] } });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1wYWdlLmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9wYWdlL3NyYy9saWIvYmFzZS1wYWdlLmNsYXNzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBNkMsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDaEcsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDNUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUd0RyxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsZUFBZTtJQUR4RDs7UUFHVSxvQkFBZSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBUW5ELG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUV0QyxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBd0JuQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBS3pCLGFBQVEsR0FBd0MsSUFBSSxZQUFZLEVBQXlCLENBQUM7S0FjM0Y7SUExQ0MsSUFDVyxTQUFTO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBQ0QsSUFBVyxTQUFTLENBQUMsQ0FBVTtRQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2IsSUFBSSxFQUFFLFdBQVc7WUFDakIsS0FBSyxFQUFFLENBQUM7WUFDUixhQUFhLEVBQUUsR0FBRyxFQUFFO2dCQUNsQixJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQztvQkFDMUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQztnQkFDdEIsQ0FBQztnQkFDRCxJQUFJLENBQUMsRUFBRSxDQUFDO29CQUNOLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUM7d0JBQzFDLFFBQVEsRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsT0FBTyxDQUFDLHVCQUF1QixDQUFDO3FCQUNqRSxDQUFDLENBQUM7Z0JBQ0wsQ0FBQztnQkFDRCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzFCLENBQUM7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBR0QsSUFBVyxPQUFPO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDO0lBSUQsS0FBSyxDQUFDLElBQWM7UUFDbEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7WUFDakIsU0FBUyxFQUFFLElBQUk7WUFDZixJQUFJLEVBQUUsSUFBSTtTQUNYLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxTQUFTLENBQUMsQ0FBcUIsSUFBeUIsQ0FBQztJQUV6RCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM5QixDQUFDOytHQXREVSxtQkFBbUI7bUhBQW5CLG1CQUFtQjs7NEZBQW5CLG1CQUFtQjtrQkFEL0IsVUFBVTs7c0JBT1IsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFOztzQkFHdkMsTUFBTTs7c0JBSU4sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ29tcG9uZW50Q2xvc2VFdmVudCwgQVhDb21wb25lbnRDbG9zaW5nLCBNWEJhc2VDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2Nkay9jb21tb24nO1xuaW1wb3J0IHsgQVhEZWNvcmF0b3JHZW5lcmljQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2RlY29yYXRvcnMnO1xuaW1wb3J0IHsgQVhMb2FkaW5nU2VydmljZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9sb2FkaW5nJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciwgSW5qZWN0YWJsZSwgSW5wdXQsIE9uRGVzdHJveSwgT3V0cHV0LCBWaWV3Q2hpbGQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgQVhCYXNlUGFnZUNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgX2xvYWRpbmdJZDogbnVtYmVyO1xuICBwcml2YXRlIF9sb2FkaW5nU2VydmljZSA9IGluamVjdChBWExvYWRpbmdTZXJ2aWNlKTtcblxuICBwdWJsaWMgc2V0VGl0bGU6ICh0aXRsZTogc3RyaW5nKSA9PiB2b2lkO1xuXG4gIEBWaWV3Q2hpbGQoJ2F4LWZvb3RlcicsIHsgc3RhdGljOiB0cnVlIH0pXG4gIGZvb3RlcjogQVhEZWNvcmF0b3JHZW5lcmljQ29tcG9uZW50O1xuXG4gIEBPdXRwdXQoKVxuICBpc0xvYWRpbmdDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgcHJpdmF0ZSBfaXNMb2FkaW5nID0gZmFsc2U7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBnZXQgaXNMb2FkaW5nKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9pc0xvYWRpbmc7XG4gIH1cbiAgcHVibGljIHNldCBpc0xvYWRpbmcodjogYm9vbGVhbikge1xuICAgIHRoaXMuc2V0T3B0aW9uKHtcbiAgICAgIG5hbWU6ICdpc0xvYWRpbmcnLFxuICAgICAgdmFsdWU6IHYsXG4gICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLl9sb2FkaW5nSWQgJiYgIXYpIHtcbiAgICAgICAgICB0aGlzLl9sb2FkaW5nU2VydmljZS5oaWRlKHRoaXMuX2xvYWRpbmdJZCk7XG4gICAgICAgICAgdGhpcy5fbG9hZGluZ0lkID0gMDtcbiAgICAgICAgfVxuICAgICAgICBpZiAodikge1xuICAgICAgICAgIHRoaXMuX2xvYWRpbmdJZCA9IHRoaXMuX2xvYWRpbmdTZXJ2aWNlLnNob3coe1xuICAgICAgICAgICAgbG9jYXRpb246IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKS5jbG9zZXN0KCcuYXgtbG9hZGluZy1jb250YWluZXInKSxcbiAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIF9pc1BvcHVwID0gZmFsc2U7XG4gIHB1YmxpYyBnZXQgaXNQb3B1cCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5faXNQb3B1cDtcbiAgfVxuXG4gIG9uQ2xvc2VkOiBFdmVudEVtaXR0ZXI8QVhDb21wb25lbnRDbG9zZUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8QVhDb21wb25lbnRDbG9zZUV2ZW50PigpO1xuXG4gIGNsb3NlKGRhdGE/OiB1bmtub3duKSB7XG4gICAgdGhpcy5vbkNsb3NlZC5lbWl0KHtcbiAgICAgIGNvbXBvbmVudDogdGhpcyxcbiAgICAgIGRhdGE6IGRhdGEsXG4gICAgfSk7XG4gIH1cblxuICBvbkNsb3NpbmcoZTogQVhDb21wb25lbnRDbG9zaW5nKTogdm9pZCB8IFByb21pc2U8dm9pZD4ge31cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLm9uQ2xvc2VkLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiJdfQ==","import { MXBaseComponent } from '@acorex/cdk/common';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { EventEmitter, Inject, Injectable, Input, Output } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXPageComponent extends MXBaseComponent {\n    /** @ignore */\n    constructor(_loadingService) {\n        super();\n        this._loadingService = _loadingService;\n        /**\n         * @event\n         * Emits an event when the loading state changes.\n         */\n        this.isLoadingChange = new EventEmitter();\n        /** @ignore */\n        this._isLoading = false;\n    }\n    /**\n     * Controls the loading state and visibility of the loading indicator.\n     * @param {boolean} v\n     */\n    get isLoading() {\n        return this._isLoading;\n    }\n    /**\n     * Sets the loading state, showing or hiding the loading indicator based on the value.\n     * @param {boolean} v\n     */\n    set isLoading(v) {\n        this.setOption({\n            name: 'isLoading',\n            value: v,\n            afterCallback: () => {\n                if (this._loadingId && !v) {\n                    this._loadingService.hide(this._loadingId);\n                    this._loadingId = 0;\n                }\n                if (v) {\n                    this._loadingId = this._loadingService.show(this.getHostElement());\n                }\n                this.cdr.markForCheck();\n            },\n        });\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }\n    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageComponent }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageComponent, decorators: [{\n            type: Injectable\n        }], ctorParameters: () => [{ type: undefined, decorators: [{\n                    type: Inject,\n                    args: [AXLoadingService]\n                }] }], propDecorators: { isLoadingChange: [{\n                type: Output\n            }], isLoading: [{\n                type: Input\n            }] } });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL3BhZ2Uvc3JjL2xpYi9wYWdlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDckQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBR2hGLE1BQU0sT0FBZ0IsZUFBZ0IsU0FBUSxlQUFlO0lBQzNELGNBQWM7SUFDZCxZQUE4QyxlQUFlO1FBQzNELEtBQUssRUFBRSxDQUFDO1FBRG9DLG9CQUFlLEdBQWYsZUFBZSxDQUFBO1FBTzdEOzs7V0FHRztRQUVILG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUU5QyxjQUFjO1FBQ04sZUFBVSxHQUFZLEtBQUssQ0FBQztJQWJwQyxDQUFDO0lBZUQ7OztPQUdHO0lBQ0gsSUFNVyxTQUFTO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBVyxTQUFTLENBQUMsQ0FBVTtRQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2IsSUFBSSxFQUFFLFdBQVc7WUFDakIsS0FBSyxFQUFFLENBQUM7WUFDUixhQUFhLEVBQUUsR0FBRyxFQUFFO2dCQUNsQixJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQztvQkFDMUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQztnQkFDdEIsQ0FBQztnQkFDRCxJQUFJLENBQUMsRUFBRSxDQUFDO29CQUNOLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUM7Z0JBQ3JFLENBQUM7Z0JBQ0QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUMxQixDQUFDO1NBQ0YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0FwRG1CLGVBQWUsa0JBRWYsZ0JBQWdCO21IQUZoQixlQUFlOzs0RkFBZixlQUFlO2tCQURwQyxVQUFVOzswQkFHSSxNQUFNOzJCQUFDLGdCQUFnQjs7c0JBV25DLE1BQU07O3NCQVVOLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNWEJhc2VDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2Nkay9jb21tb24nO1xuaW1wb3J0IHsgQVhMb2FkaW5nU2VydmljZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9sb2FkaW5nJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciwgSW5qZWN0LCBJbmplY3RhYmxlLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBBWFBhZ2VDb21wb25lbnQgZXh0ZW5kcyBNWEJhc2VDb21wb25lbnQge1xuICAvKiogQGlnbm9yZSAqL1xuICBjb25zdHJ1Y3RvcihASW5qZWN0KEFYTG9hZGluZ1NlcnZpY2UpIHByaXZhdGUgX2xvYWRpbmdTZXJ2aWNlKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIC8qKiBAaWdub3JlICovXG4gIHByaXZhdGUgX2xvYWRpbmdJZDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBAZXZlbnRcbiAgICogRW1pdHMgYW4gZXZlbnQgd2hlbiB0aGUgbG9hZGluZyBzdGF0ZSBjaGFuZ2VzLlxuICAgKi9cbiAgQE91dHB1dCgpXG4gIGlzTG9hZGluZ0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAvKiogQGlnbm9yZSAqL1xuICBwcml2YXRlIF9pc0xvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogQ29udHJvbHMgdGhlIGxvYWRpbmcgc3RhdGUgYW5kIHZpc2liaWxpdHkgb2YgdGhlIGxvYWRpbmcgaW5kaWNhdG9yLlxuICAgKiBAcGFyYW0ge2Jvb2xlYW59IHZcbiAgICovXG4gIEBJbnB1dCgpXG5cbiAgLyoqXG4gICAqIEBwYXJhbSB7Ym9vbGVhbn0gdlxuICAgKiBVcGRhdGVzIHRoZSBsb2FkaW5nIHN0YXRlIGFuZCBtYW5hZ2VzIHRoZSBsb2FkaW5nIGluZGljYXRvciB2aXNpYmlsaXR5LlxuICAgKi9cbiAgcHVibGljIGdldCBpc0xvYWRpbmcoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2lzTG9hZGluZztcbiAgfVxuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBsb2FkaW5nIHN0YXRlLCBzaG93aW5nIG9yIGhpZGluZyB0aGUgbG9hZGluZyBpbmRpY2F0b3IgYmFzZWQgb24gdGhlIHZhbHVlLlxuICAgKiBAcGFyYW0ge2Jvb2xlYW59IHZcbiAgICovXG4gIHB1YmxpYyBzZXQgaXNMb2FkaW5nKHY6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAnaXNMb2FkaW5nJyxcbiAgICAgIHZhbHVlOiB2LFxuICAgICAgYWZ0ZXJDYWxsYmFjazogKCkgPT4ge1xuICAgICAgICBpZiAodGhpcy5fbG9hZGluZ0lkICYmICF2KSB7XG4gICAgICAgICAgdGhpcy5fbG9hZGluZ1NlcnZpY2UuaGlkZSh0aGlzLl9sb2FkaW5nSWQpO1xuICAgICAgICAgIHRoaXMuX2xvYWRpbmdJZCA9IDA7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKHYpIHtcbiAgICAgICAgICB0aGlzLl9sb2FkaW5nSWQgPSB0aGlzLl9sb2FkaW5nU2VydmljZS5zaG93KHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSk7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICB9LFxuICAgIH0pO1xuICB9XG59XG4iXX0=","import { NgModule } from '@angular/core';\nimport * as i0 from \"@angular/core\";\n// TODO: Module is empty!?\nexport class AXPageModule {\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }\n    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageModule }); }\n    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageModule }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.15\", ngImport: i0, type: AXPageModule, decorators: [{\n            type: NgModule,\n            args: [{\n                    imports: [],\n                    exports: [],\n                    declarations: [],\n                    providers: [],\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL3BhZ2Uvc3JjL2xpYi9wYWdlLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUV6QywwQkFBMEI7QUFPMUIsTUFBTSxPQUFPLFlBQVk7K0dBQVosWUFBWTtnSEFBWixZQUFZO2dIQUFaLFlBQVk7OzRGQUFaLFlBQVk7a0JBTnhCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLEVBQUU7b0JBQ1gsT0FBTyxFQUFFLEVBQUU7b0JBQ1gsWUFBWSxFQUFFLEVBQUU7b0JBQ2hCLFNBQVMsRUFBRSxFQUFFO2lCQUNkIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLy8gVE9ETzogTW9kdWxlIGlzIGVtcHR5IT9cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtdLFxuICBleHBvcnRzOiBbXSxcbiAgZGVjbGFyYXRpb25zOiBbXSxcbiAgcHJvdmlkZXJzOiBbXSxcbn0pXG5leHBvcnQgY2xhc3MgQVhQYWdlTW9kdWxlIHt9XG4iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMtcGFnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvcGFnZS9zcmMvYWNvcmV4LWNvbXBvbmVudHMtcGFnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-page.mjs","sources":["../../../../packages/components/page/src/lib/base-page.class.ts","../../../../packages/components/page/src/lib/page.component.ts","../../../../packages/components/page/src/lib/page.module.ts","../../../../packages/components/page/src/acorex-components-page.ts"],"sourcesContent":["import { AXComponentCloseEvent, AXComponentClosing, MXBaseComponent } from '@acorex/cdk/common';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { EventEmitter, Injectable, Input, OnDestroy, Output, ViewChild, inject } from '@angular/core';\n\n@Injectable()\nexport class AXBasePageComponent extends MXBaseComponent implements OnDestroy {\n  private _loadingId: number;\n  private _loadingService = inject(AXLoadingService);\n\n  public setTitle: (title: string) => void;\n\n  @ViewChild('ax-footer', { static: true })\n  footer: AXDecoratorGenericComponent;\n\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  private _isLoading = false;\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this._loadingId && !v) {\n          this._loadingService.hide(this._loadingId);\n          this._loadingId = 0;\n        }\n        if (v) {\n          this._loadingId = this._loadingService.show({\n            location: this.getHostElement().closest('.ax-loading-container'),\n          });\n        }\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  private _isPopup = false;\n  public get isPopup(): boolean {\n    return this._isPopup;\n  }\n\n  onClosed: EventEmitter<AXComponentCloseEvent> = new EventEmitter<AXComponentCloseEvent>();\n\n  close(data?: unknown) {\n    this.onClosed.emit({\n      component: this,\n      data: data,\n    });\n  }\n\n  onClosing(e: AXComponentClosing): void | Promise<void> {}\n\n  ngOnDestroy() {\n    this.onClosed.unsubscribe();\n  }\n}\n","import { MXBaseComponent } from '@acorex/cdk/common';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { EventEmitter, Inject, Injectable, Input, Output } from '@angular/core';\n\n@Injectable()\nexport abstract class AXPageComponent extends MXBaseComponent {\n  /** @ignore */\n  constructor(@Inject(AXLoadingService) private _loadingService) {\n    super();\n  }\n\n  /** @ignore */\n  private _loadingId: number;\n\n  /**\n   * @event\n   * Emits an event when the loading state changes.\n   */\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  /** @ignore */\n  private _isLoading: boolean = false;\n\n  /**\n   * Controls the loading state and visibility of the loading indicator.\n   * @param {boolean} v\n   */\n  @Input()\n\n  /**\n   * @param {boolean} v\n   * Updates the loading state and manages the loading indicator visibility.\n   */\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n\n  /**\n   * Sets the loading state, showing or hiding the loading indicator based on the value.\n   * @param {boolean} v\n   */\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this._loadingId && !v) {\n          this._loadingService.hide(this._loadingId);\n          this._loadingId = 0;\n        }\n        if (v) {\n          this._loadingId = this._loadingService.show(this.getHostElement());\n        }\n        this.cdr.markForCheck();\n      },\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\n\n// TODO: Module is empty!?\n@NgModule({\n  imports: [],\n  exports: [],\n  declarations: [],\n  providers: [],\n})\nexport class AXPageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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