@acorex/components 19.15.0-next.9 → 20.0.1

package/number-box/index.d.ts

@@ -1,2 +1,190 @@
-export * from './lib/number-box.component';
-export * from './lib/number-box.module';
+import * as polytype from 'polytype';
+import * as i0 from '@angular/core';
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { MaskedNumber } from 'imask';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+import * as i3 from '@acorex/components/button';
+import * as i4 from '@acorex/components/decorators';
+import * as i5 from 'angular-imask';
+
+declare const AXNumberBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<number>;
+    ɵfac: i0.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: i0.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+declare class AXNumberBoxComponent extends AXNumberBoxComponent_base implements AfterViewInit {
+    /** @ignore */
+    input: ElementRef<HTMLInputElement>;
+    /** @ignore */
+    private _thousandsSeparator;
+    /**
+     * This property determines the type of the input element (e.g., 'text', 'password', 'email', etc.). It can be dynamically bound from a parent component template to change the input field type based on different conditions or requirements.
+     */
+    type: i0.InputSignal<string>;
+    /**
+     *  boolean value that specifies the number box change step by scrolling.
+     */
+    changeOnScroll: boolean;
+    /** @ignore */
+    private _allDigits;
+    /**
+     *  A number value that specifies the all digits of number.
+     */
+    get allDigits(): number;
+    /**
+     * Sets the all digits of number.
+     * @param {number} v
+     */
+    set allDigits(v: number);
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get thousandsSeparator(): string;
+    /**
+     * Sets the thousands separator for formatting.
+     * @param {string} v
+     */
+    set thousandsSeparator(v: string);
+    /** @ignore */
+    private _padDecimalZeros;
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get padDecimalZeros(): boolean;
+    /**
+     * Sets whether decimal zeros should be padded.
+     * @param {boolean} v
+     */
+    set padDecimalZeros(v: boolean);
+    /**
+     *  Specifies the value that is used to increment or decrement the **Integer** part of number
+     */
+    /**
+     * Defines the increment step value.
+     */
+    step: number;
+    /** @ignore */
+    private _decimals;
+    /**
+     *  Specifies the number of decimals that the user can enter
+     */
+    get decimals(): number;
+    /**
+     * Sets the decimal places; defaults to 0 if not provided.
+     */
+    set decimals(v: number);
+    /**
+     *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
+     */
+    /**
+     * Defines the step size for decimal values.
+     * @defaultvalue 'auto'
+     */
+    decimalStep: number | 'auto';
+    /**
+     *  Specifies whether the Up and Down spin buttons will be rendered or not
+     */
+    /**
+     * Indicates whether spin buttons are displayed.
+     * @defaultvalue true
+     */
+    showSpinButtons: boolean;
+    /** @ignore */
+    private _minValue;
+    /**
+     *  Specifies the smallest value that is valid
+     */
+    get minValue(): number;
+    /**
+     * Sets the number of decimal places to be used.
+     * @param {number} v
+     * @defaultvalue 0
+     */
+    set minValue(v: number);
+    /** @ignore */
+    private _maxValue;
+    /**
+     *  Specifies the greatest value that is valid
+     */
+    get maxValue(): number;
+    /**
+     * Sets the maximum allowable value, defaulting to `Number.MAX_SAFE_INTEGER` if null.
+     * @param v
+     */
+    set maxValue(v: number);
+    /**
+     * CSS classes to apply to the component.
+     * @param classNames
+     */
+    /**
+     * CSS classes to apply to the component.
+     */
+    classNames: string;
+    /**
+     *  @ignore
+     */
+    _maskObj: MaskedNumber;
+    /** @ignore */
+    /** @ignore */
+    private _maskDirective;
+    /** @ignore */
+    private _onWheelFlag;
+    constructor();
+    /** @ignore */
+    ngAfterViewInit(): void;
+    /**
+     * Handles internal option changes and updates the mask accordingly.
+     */
+    internalOptionChanged(): void;
+    /**
+     * Resets the input element to its default state and calls the parent class reset method.
+     */
+    reset(): void;
+    /**
+     * Ensures the value is within the min-max range, returning the default if null.
+     * @param value
+     */
+    internalSetValue(value: any): number;
+    /** @ignore */
+    private _updateMask;
+    /** @ignore */
+    _handleModelChange(value: number): void;
+    /** @ignore */
+    _handleOnKeydownEvent(e: KeyboardEvent): void;
+    /** @ignore */
+    protected _handleUpDownClick(v: -1 | 1, e: Event): void;
+    /**
+     * Increases the value by the step amount, ensuring it's at least the minimum value.
+     */
+    stepUp(u?: boolean): void;
+    /**
+     * Decreases the value by the step amount, ensuring it's at least the minimum value.
+     */
+    stepDown(u?: boolean): void;
+    /**
+     * Increases the value by the decimal step amount, using 'auto' or a custom step value.
+     */
+    decimalStepUp(u?: boolean): void;
+    /**
+     * Decreases the value by the decimal step amount, using 'auto' or a custom step value.
+     */
+    decimalStepDown(u?: boolean): void;
+    onWheel(event: WheelEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXNumberBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXNumberBoxComponent, "ax-number-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "changeOnScroll": { "alias": "changeOnScroll"; "required": false; }; "allDigits": { "alias": "allDigits"; "required": false; }; "thousandsSeparator": { "alias": "thousandsSeparator"; "required": false; }; "padDecimalZeros": { "alias": "padDecimalZeros"; "required": false; }; "step": { "alias": "step"; "required": false; }; "decimals": { "alias": "decimals"; "required": false; }; "decimalStep": { "alias": "decimalStep"; "required": false; }; "showSpinButtons": { "alias": "showSpinButtons"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "classNames": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
+}
+
+declare class AXNumberBoxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXNumberBoxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXNumberBoxModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXButtonModule, typeof i4.AXDecoratorModule, typeof i5.IMaskModule, typeof AXNumberBoxComponent], [typeof AXNumberBoxComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXNumberBoxModule>;
+}
+
+export { AXNumberBoxComponent, AXNumberBoxModule };

package/number-box-2/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/number-box-2
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/number-box-2`.

package/number-box-2/index.d.ts

@@ -0,0 +1,39 @@
+import * as polytype from 'polytype';
+import * as _angular_core from '@angular/core';
+import { AXInputMaskEvent } from '@acorex/cdk/input-mask';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+
+declare const AXNumberBox2Component_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<number>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+declare class AXNumberBox2Component extends AXNumberBox2Component_base {
+    #private;
+    minValue: _angular_core.InputSignal<number>;
+    maxValue: _angular_core.InputSignal<number>;
+    showSpinButtons: _angular_core.InputSignal<boolean>;
+    thousandsSeparator: _angular_core.ModelSignal<string>;
+    decimals: _angular_core.InputSignal<number>;
+    changeOnScroll: _angular_core.InputSignal<boolean>;
+    step: _angular_core.InputSignal<number>;
+    protected mode: _angular_core.WritableSignal<"digits" | "thousandsSeparator" | "decimal">;
+    private input;
+    protected stringValue: string;
+    private plusValue;
+    private minusValue;
+    protected handleOnKeydownEvent(e: KeyboardEvent): void;
+    protected handleUpClick(): void;
+    protected handleDownClick(): void;
+    protected handleOnMaskChanged(e: AXInputMaskEvent): void;
+    protected onWheel(event: WheelEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXNumberBox2Component, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXNumberBox2Component, "ax-number-box-2", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "showSpinButtons": { "alias": "showSpinButtons"; "required": false; "isSignal": true; }; "thousandsSeparator": { "alias": "thousandsSeparator"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "changeOnScroll": { "alias": "changeOnScroll"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; "thousandsSeparator": "thousandsSeparatorChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
+}
+
+export { AXNumberBox2Component };

package/otp/index.d.ts

@@ -1,3 +1,74 @@
-export * from './lib/otp.class';
-export * from './lib/otp.component';
-export * from './lib/otp.module';
+import { AXEvent, MXValueComponent, MXLookComponent } from '@acorex/cdk/common';
+import * as polytype from 'polytype';
+import * as _angular_core from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+
+declare class AXOtpCompletedEvent extends AXEvent {
+    value: string;
+    isCompleted: boolean;
+}
+
+declare const AXOtpComponent_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXValueComponent<string>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXValueComponent<any>>;
+}, typeof MXLookComponent]>;
+/**
+ * @category
+ * A component for OTP input fields with state management and custom styling support.
+ */
+declare class AXOtpComponent extends AXOtpComponent_base {
+    type: _angular_core.InputSignal<"number" | "text">;
+    /**
+     * Holds the length of the OTP input field.
+     */
+    length: _angular_core.ModelSignal<number>;
+    /**
+     * @event
+     * Emits an event when the OTP input is completed.
+     */
+    onCompleted: _angular_core.OutputEmitterRef<AXOtpCompletedEvent>;
+    /**
+     * Stores the values entered in the OTP input fields.
+     */
+    protected inputValues: string[];
+    /**
+     * Holds the input values as a signal.
+     */
+    protected inputs: _angular_core.Signal<number[]>;
+    /** @ignore */
+    constructor();
+    /**
+     * Converts the value string to input values and updates the inputValues array.
+     */
+    mapValueToInputs(): void;
+    /**
+     * Resets the input values to an empty array.
+     */
+    reset(): void;
+    /** @ignore */
+    protected _handleOnInput(event: any, i: number): void;
+    /** @ignore */
+    internalSetValue(value: any): string;
+    /** @ignore */
+    protected calcFontSize(): void;
+    /** @ignore */
+    protected _handleOnKeyDown(event: KeyboardEvent, i: number): void;
+    /** @ignore */
+    protected _handleOnPaste(event: ClipboardEvent): void;
+    /** @ignore */
+    protected _handleFocus(i: any): void;
+    /** @ignore */
+    protected _emitOnComplete(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXOtpComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXOtpComponent, "ax-otp", never, { "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "look": { "alias": "look"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "disabledChange": "disabledChange"; "length": "lengthChange"; "onCompleted": "onCompleted"; }, never, never, true, never>;
+}
+
+declare class AXOtpModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXOtpModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXOtpModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof AXOtpComponent], [typeof AXOtpComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXOtpModule>;
+}
+
+export { AXOtpCompletedEvent, AXOtpComponent, AXOtpModule };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@acorex/components",
-  "version": "19.15.0-next.9",
+  "version": "20.0.1",
   "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
     "polytype": ">=0.17.0",
     "imask": ">=7.6.1",
     "angular-imask": ">=7.6.1",
@@ -25,18 +25,22 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/acorex-components.mjs"
     },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "default": "./fesm2022/acorex-components-accordion.mjs"
+    },
     "./action-sheet": {
       "types": "./action-sheet/index.d.ts",
       "default": "./fesm2022/acorex-components-action-sheet.mjs"
     },
-    "./audio-wave": {
-      "types": "./audio-wave/index.d.ts",
-      "default": "./fesm2022/acorex-components-audio-wave.mjs"
-    },
     "./alert": {
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/acorex-components-alert.mjs"
     },
+    "./audio-wave": {
+      "types": "./audio-wave/index.d.ts",
+      "default": "./fesm2022/acorex-components-audio-wave.mjs"
+    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./fesm2022/acorex-components-autocomplete.mjs"
@@ -137,14 +141,18 @@
       "types": "./drawer/index.d.ts",
       "default": "./fesm2022/acorex-components-drawer.mjs"
     },
-    "./dropdown-button": {
-      "types": "./dropdown-button/index.d.ts",
-      "default": "./fesm2022/acorex-components-dropdown-button.mjs"
+    "./drawer-2": {
+      "types": "./drawer-2/index.d.ts",
+      "default": "./fesm2022/acorex-components-drawer-2.mjs"
     },
     "./dropdown": {
       "types": "./dropdown/index.d.ts",
       "default": "./fesm2022/acorex-components-dropdown.mjs"
     },
+    "./dropdown-button": {
+      "types": "./dropdown-button/index.d.ts",
+      "default": "./fesm2022/acorex-components-dropdown-button.mjs"
+    },
     "./file-explorer": {
       "types": "./file-explorer/index.d.ts",
       "default": "./fesm2022/acorex-components-file-explorer.mjs"
@@ -173,6 +181,10 @@
       "types": "./json-viewer/index.d.ts",
       "default": "./fesm2022/acorex-components-json-viewer.mjs"
     },
+    "./kanban": {
+      "types": "./kanban/index.d.ts",
+      "default": "./fesm2022/acorex-components-kanban.mjs"
+    },
     "./kbd": {
       "types": "./kbd/index.d.ts",
       "default": "./fesm2022/acorex-components-kbd.mjs"
@@ -221,6 +233,10 @@
       "types": "./number-box/index.d.ts",
       "default": "./fesm2022/acorex-components-number-box.mjs"
     },
+    "./number-box-2": {
+      "types": "./number-box-2/index.d.ts",
+      "default": "./fesm2022/acorex-components-number-box-2.mjs"
+    },
     "./otp": {
       "types": "./otp/index.d.ts",
       "default": "./fesm2022/acorex-components-otp.mjs"
@@ -317,6 +333,10 @@
       "types": "./selection-list/index.d.ts",
       "default": "./fesm2022/acorex-components-selection-list.mjs"
     },
+    "./selection-list-2": {
+      "types": "./selection-list-2/index.d.ts",
+      "default": "./fesm2022/acorex-components-selection-list-2.mjs"
+    },
     "./side-menu": {
       "types": "./side-menu/index.d.ts",
       "default": "./fesm2022/acorex-components-side-menu.mjs"

package/page/index.d.ts

@@ -1,3 +1,58 @@
-export * from './lib/base-page.class';
-export * from './lib/page.component';
-export * from './lib/page.module';
+import { MXBaseComponent, AXComponentCloseEvent, AXComponentClosing } from '@acorex/cdk/common';
+import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
+import * as i0 from '@angular/core';
+import { OnDestroy, EventEmitter } from '@angular/core';
+
+declare class AXBasePageComponent extends MXBaseComponent implements OnDestroy {
+    private _loadingId;
+    private _loadingService;
+    setTitle: (title: string) => void;
+    footer: AXDecoratorGenericComponent;
+    isLoadingChange: EventEmitter<boolean>;
+    private _isLoading;
+    get isLoading(): boolean;
+    set isLoading(v: boolean);
+    private _isPopup;
+    get isPopup(): boolean;
+    onClosed: EventEmitter<AXComponentCloseEvent>;
+    close(data?: unknown): void;
+    onClosing(e: AXComponentClosing): void | Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXBasePageComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXBasePageComponent>;
+}
+
+declare abstract class AXPageComponent extends MXBaseComponent {
+    private _loadingService;
+    /** @ignore */
+    constructor(_loadingService: any);
+    /** @ignore */
+    private _loadingId;
+    /**
+     * @event
+     * Emits an event when the loading state changes.
+     */
+    isLoadingChange: EventEmitter<boolean>;
+    /** @ignore */
+    private _isLoading;
+    /**
+     * Controls the loading state and visibility of the loading indicator.
+     * @param {boolean} v
+     */
+    get isLoading(): boolean;
+    /**
+     * Sets the loading state, showing or hiding the loading indicator based on the value.
+     * @param {boolean} v
+     */
+    set isLoading(v: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXPageComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXPageComponent>;
+}
+
+declare class AXPageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXPageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXPageModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXPageModule>;
+}
+
+export { AXBasePageComponent, AXPageComponent, AXPageModule };

package/paint/index.d.ts

@@ -1,7 +1,157 @@
-export * from './lib/paint.module';
-export * from './lib/paint/paint-container/paint-container.component';
-export * from './lib/paint/paint-tools-selector/paint-tools-selector.component';
-export * from './lib/paint/paint-tools/paint-eraser-tool/paint-eraser-tool.component';
-export * from './lib/paint/paint-tools/paint-highlight-tool/paint-highlight-tool.component';
-export * from './lib/paint/paint-tools/paint-pen-tool/paint-pen-tool.component';
-export * from './lib/paint/paint-view/paint-view.component';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, Renderer2, ElementRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import * as i2 from '@acorex/components/range-slider';
+import * as i3 from '@acorex/components/select-box';
+import * as i4 from '@acorex/components/button';
+import * as i5 from '@acorex/components/color-box';
+import * as i6 from '@acorex/components/popover';
+import * as i7 from '@acorex/components/decorators';
+import * as i8 from '@acorex/components/tooltip';
+import * as polytype from 'polytype';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+
+declare class AXPaintService {
+    penColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
+    highlightColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
+    penWidth: _angular_core.WritableSignal<number>;
+    highlightWidth: _angular_core.WritableSignal<number>;
+    eraserWidth: _angular_core.WritableSignal<number>;
+    toggleClear: _angular_core.WritableSignal<boolean>;
+    activeToolState: _angular_core.WritableSignal<"pen" | "highlight" | "eraser">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXPaintService>;
+}
+
+declare const AXPaintContainerComponent_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<string>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+/**
+ * paint container.
+ * @category Components
+ */
+declare class AXPaintContainerComponent extends AXPaintContainerComponent_base {
+    protected service: AXPaintService;
+    get __hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintContainerComponent, "ax-paint-container", never, { "look": { "alias": "look"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*", "ax-validation-rule"], true, never>;
+}
+
+/**
+ * @category Components
+ * paint view
+ */
+declare class AXPaintViewComponent implements OnDestroy {
+    #private;
+    /** @ignore */
+    parent: AXPaintContainerComponent;
+    /** @ignore */
+    protected service: AXPaintService;
+    /** @ignore */
+    protected renderer: Renderer2;
+    private platformID;
+    /** @ignore */
+    resizeEvent: () => void;
+    /**
+     * Specifies the class that pass to component.
+     *
+     */
+    customClass: _angular_core.InputSignal<string>;
+    paintBackgroundColor: _angular_core.InputSignal<"black" | "white">;
+    /** @ignore */
+    protected canvasElem: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
+    /** @ignore */
+    protected ctx: _angular_core.WritableSignal<CanvasRenderingContext2D>;
+    /** @ignore */
+    protected isPainting: _angular_core.WritableSignal<boolean>;
+    /** @ignore */
+    protected isUserInteract: _angular_core.WritableSignal<boolean>;
+    protected hostElem: ElementRef<any>;
+    /** @ignore */
+    ngOnDestroy(): void;
+    /** @ignore */
+    protected resizeEventHandler(): void;
+    /** @ignore */
+    protected penConfigHandler(penType: 'eraser' | 'pen' | 'highlight'): void;
+    /** @ignore */
+    protected getBoundingCanvasHandler(): any;
+    /** @ignore */
+    protected mouseDownHandler(e: MouseEvent): void;
+    /** @ignore */
+    protected mouseMoveHandler(e: MouseEvent): void;
+    /** @ignore */
+    protected mouseUpHandler(): void;
+    /**
+     * @param e - output file type
+     */
+    getOutPut(e: 'image/webp' | 'image/png' | 'image/jpeg'): void;
+    get __hostClass(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintViewComponent, "ax-paint-view", never, { "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "paintBackgroundColor": { "alias": "paintBackgroundColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXPaintToolsSelectorComponent {
+    protected service: AXPaintService;
+    protected changeToolHandler(tool: 'pen' | 'highlight' | 'eraser'): void;
+    protected clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintToolsSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintToolsSelectorComponent, "ax-paint-tools-selector", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * paint mode.
+ * @category Components
+ */
+declare class AXPaintPenToolComponent {
+    protected service: AXPaintService;
+    /** @ignore */
+    protected value: number;
+    /** @ignore */
+    protected selectedColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
+    protected changeColorHandler(e: string): void;
+    /** @ignore */
+    protected valueHandler(e: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintPenToolComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintPenToolComponent, "ax-paint-pen-tool", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * paint mode.
+ * @category Components
+ */
+declare class AXPaintHighlightToolComponent {
+    protected service: AXPaintService;
+    /** @ignore */
+    protected value: number;
+    /** @ignore */
+    protected selectedColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
+    protected changeColorHandler(e: string): void;
+    /** @ignore */
+    protected valueHandler(e: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintHighlightToolComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintHighlightToolComponent, "ax-paint-highlight-tool", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * paint mode.
+ * @category Components
+ */
+declare class AXPaintEraserToolComponent {
+    protected service: AXPaintService;
+    /** @ignore */
+    protected value: number;
+    /** @ignore */
+    protected valueHandler(e: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintEraserToolComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPaintEraserToolComponent, "ax-paint-eraser-tool", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXPaintModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPaintModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXPaintModule, never, [typeof i1.FormsModule, typeof i2.AXRangeSliderModule, typeof i3.AXSelectBoxModule, typeof i4.AXButtonModule, typeof i5.AXColorBoxModule, typeof i6.AXPopoverModule, typeof i7.AXDecoratorModule, typeof i8.AXTooltipModule, typeof AXPaintContainerComponent, typeof AXPaintViewComponent, typeof AXPaintToolsSelectorComponent, typeof AXPaintPenToolComponent, typeof AXPaintHighlightToolComponent, typeof AXPaintEraserToolComponent], [typeof AXPaintContainerComponent, typeof AXPaintViewComponent, typeof AXPaintToolsSelectorComponent, typeof AXPaintPenToolComponent, typeof AXPaintHighlightToolComponent, typeof AXPaintEraserToolComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXPaintModule>;
+}
+
+export { AXPaintContainerComponent, AXPaintEraserToolComponent, AXPaintHighlightToolComponent, AXPaintModule, AXPaintPenToolComponent, AXPaintToolsSelectorComponent, AXPaintViewComponent };