@acorex/cdk 21.0.1-next.6 → 21.0.1-next.61

package/fesm2022/acorex-cdk-z-index.mjs

@@ -0,0 +1,35 @@
+import { AXZIndexService } from '@acorex/core/z-index';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, afterNextRender, Directive } from '@angular/core';
+
+class AXZindexDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.z = inject(AXZIndexService);
+        this.token = signal(null, ...(ngDevMode ? [{ debugName: "token" }] : []));
+        this.#init = afterNextRender(() => {
+            this.token.set(this.z.acquire());
+            this.el.nativeElement.style.zIndex = String(this.token().zIndex);
+        });
+    }
+    #init;
+    ngOnDestroy() {
+        this.z.release(this.token());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXZindexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: AXZindexDirective, isStandalone: true, selector: "[axZindex]", exportAs: ["axZindex"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXZindexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axZindex]',
+                    exportAs: 'axZindex',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXZindexDirective };
+//# sourceMappingURL=acorex-cdk-z-index.mjs.map

package/fesm2022/acorex-cdk-z-index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-cdk-z-index.mjs","sources":["../../../../packages/cdk/z-index/src/lib/z-index.directive.ts","../../../../packages/cdk/z-index/src/acorex-cdk-z-index.ts"],"sourcesContent":["import { AXZIndexService, AXZToken } from '@acorex/core/z-index';\nimport { afterNextRender, Directive, ElementRef, inject, OnDestroy, signal } from '@angular/core';\n@Directive({\n  selector: '[axZindex]',\n  exportAs: 'axZindex',\n})\nexport class AXZindexDirective implements OnDestroy {\n  private el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private z = inject(AXZIndexService);\n\n  private token = signal<AXZToken>(null);\n\n  #init = afterNextRender(() => {\n    this.token.set(this.z.acquire());\n    this.el.nativeElement.style.zIndex = String(this.token().zIndex);\n  });\n\n  ngOnDestroy() {\n    this.z.release(this.token());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,iBAAiB,CAAA;AAJ9B,IAAA,WAAA,GAAA;AAKU,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAA0B,UAAU,CAAC;AAChD,QAAA,IAAA,CAAA,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC;AAE3B,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAW,IAAI,iDAAC;AAEtC,QAAA,IAAA,CAAA,KAAK,GAAG,eAAe,CAAC,MAAK;AAC3B,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC;AAClE,QAAA,CAAC,CAAC;AAKH,IAAA;AARC,IAAA,KAAK;IAKL,WAAW,GAAA;QACT,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAC9B;8GAbW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,QAAQ,EAAE,UAAU;AACrB,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/acorex-cdk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-cdk.mjs","sources":["../tmp-esm2022/index.js","../tmp-esm2022/acorex-cdk.js"],"sourcesContent":["export const ACOREX_CDK = 'ACorex CDK';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jZGsvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgQUNPUkVYX0NESyA9ICdBQ29yZXggQ0RLJztcbiJdfQ==","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNkay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2Nkay9zcmMvYWNvcmV4LWNkay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"AAAY,MAAC,UAAU,GAAG;;ACA1B;AACA;AACA;;;;"}
+{"version":3,"file":"acorex-cdk.mjs","sources":["../../../../packages/cdk/src/index.ts","../../../../packages/cdk/src/acorex-cdk.ts"],"sourcesContent":["export const ACOREX_CDK = 'ACorex CDK';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAO,MAAM,UAAU,GAAG;;ACA1B;;AAEG;;;;"}

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@acorex/cdk",
-  "version": "21.0.1-next.6",
+  "version": "21.0.1-next.61",
   "peerDependencies": {
-    "@acorex/core": "21.0.1-next.6",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
+    "@acorex/core": "21.0.1-next.61",
     "quill": ">=2.0.2",
     "qrcode": ">=1.5.4",
     "swiper": ">=11.1.15",
@@ -12,106 +10,110 @@
   },
   "sideEffects": false,
   "module": "fesm2022/acorex-cdk.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/acorex-cdk.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/acorex-cdk.d.ts",
       "default": "./fesm2022/acorex-cdk.mjs"
     },
     "./accordion": {
-      "types": "./accordion/index.d.ts",
+      "types": "./types/acorex-cdk-accordion.d.ts",
       "default": "./fesm2022/acorex-cdk-accordion.mjs"
     },
     "./carousel": {
-      "types": "./carousel/index.d.ts",
+      "types": "./types/acorex-cdk-carousel.d.ts",
       "default": "./fesm2022/acorex-cdk-carousel.mjs"
     },
     "./clipboard": {
-      "types": "./clipboard/index.d.ts",
+      "types": "./types/acorex-cdk-clipboard.d.ts",
       "default": "./fesm2022/acorex-cdk-clipboard.mjs"
     },
     "./common": {
-      "types": "./common/index.d.ts",
+      "types": "./types/acorex-cdk-common.d.ts",
       "default": "./fesm2022/acorex-cdk-common.mjs"
     },
     "./dom": {
-      "types": "./dom/index.d.ts",
+      "types": "./types/acorex-cdk-dom.d.ts",
       "default": "./fesm2022/acorex-cdk-dom.mjs"
     },
     "./double-click": {
-      "types": "./double-click/index.d.ts",
+      "types": "./types/acorex-cdk-double-click.d.ts",
       "default": "./fesm2022/acorex-cdk-double-click.mjs"
     },
     "./drag-drop": {
-      "types": "./drag-drop/index.d.ts",
+      "types": "./types/acorex-cdk-drag-drop.d.ts",
       "default": "./fesm2022/acorex-cdk-drag-drop.mjs"
     },
     "./drawer": {
-      "types": "./drawer/index.d.ts",
+      "types": "./types/acorex-cdk-drawer.d.ts",
       "default": "./fesm2022/acorex-cdk-drawer.mjs"
     },
     "./focus-trap": {
-      "types": "./focus-trap/index.d.ts",
+      "types": "./types/acorex-cdk-focus-trap.d.ts",
       "default": "./fesm2022/acorex-cdk-focus-trap.mjs"
     },
     "./full-screen": {
-      "types": "./full-screen/index.d.ts",
+      "types": "./types/acorex-cdk-full-screen.d.ts",
       "default": "./fesm2022/acorex-cdk-full-screen.mjs"
     },
     "./input-mask": {
-      "types": "./input-mask/index.d.ts",
+      "types": "./types/acorex-cdk-input-mask.d.ts",
       "default": "./fesm2022/acorex-cdk-input-mask.mjs"
     },
     "./list-navigation": {
-      "types": "./list-navigation/index.d.ts",
+      "types": "./types/acorex-cdk-list-navigation.d.ts",
       "default": "./fesm2022/acorex-cdk-list-navigation.mjs"
     },
     "./outline": {
-      "types": "./outline/index.d.ts",
+      "types": "./types/acorex-cdk-outline.d.ts",
       "default": "./fesm2022/acorex-cdk-outline.mjs"
     },
     "./overlay": {
-      "types": "./overlay/index.d.ts",
+      "types": "./types/acorex-cdk-overlay.d.ts",
       "default": "./fesm2022/acorex-cdk-overlay.mjs"
     },
     "./pan-view": {
-      "types": "./pan-view/index.d.ts",
+      "types": "./types/acorex-cdk-pan-view.d.ts",
       "default": "./fesm2022/acorex-cdk-pan-view.mjs"
     },
     "./qrcode": {
-      "types": "./qrcode/index.d.ts",
+      "types": "./types/acorex-cdk-qrcode.d.ts",
       "default": "./fesm2022/acorex-cdk-qrcode.mjs"
     },
     "./resizable": {
-      "types": "./resizable/index.d.ts",
+      "types": "./types/acorex-cdk-resizable.d.ts",
       "default": "./fesm2022/acorex-cdk-resizable.mjs"
     },
     "./selection": {
-      "types": "./selection/index.d.ts",
+      "types": "./types/acorex-cdk-selection.d.ts",
       "default": "./fesm2022/acorex-cdk-selection.mjs"
     },
     "./sliding-item": {
-      "types": "./sliding-item/index.d.ts",
+      "types": "./types/acorex-cdk-sliding-item.d.ts",
       "default": "./fesm2022/acorex-cdk-sliding-item.mjs"
     },
     "./sticky": {
-      "types": "./sticky/index.d.ts",
+      "types": "./types/acorex-cdk-sticky.d.ts",
       "default": "./fesm2022/acorex-cdk-sticky.mjs"
     },
     "./uploader": {
-      "types": "./uploader/index.d.ts",
+      "types": "./types/acorex-cdk-uploader.d.ts",
       "default": "./fesm2022/acorex-cdk-uploader.mjs"
     },
     "./virtual-scroll": {
-      "types": "./virtual-scroll/index.d.ts",
+      "types": "./types/acorex-cdk-virtual-scroll.d.ts",
       "default": "./fesm2022/acorex-cdk-virtual-scroll.mjs"
     },
     "./wysiwyg": {
-      "types": "./wysiwyg/index.d.ts",
+      "types": "./types/acorex-cdk-wysiwyg.d.ts",
       "default": "./fesm2022/acorex-cdk-wysiwyg.mjs"
+    },
+    "./z-index": {
+      "types": "./types/acorex-cdk-z-index.d.ts",
+      "default": "./fesm2022/acorex-cdk-z-index.mjs"
     }
   },
   "dependencies": {

package/types/acorex-cdk-carousel.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from '@angular/core';
+import { Swiper, SwiperOptions } from 'swiper/types';
+
+type AXCarousel = Swiper;
+type AXCarouselOptions = SwiperOptions;
+declare class AXCarouselDirective {
+    carousel: i0.WritableSignal<Swiper>;
+    private el;
+    private platformId;
+    init(option: AXCarouselOptions): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXCarouselDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXCarouselDirective, "[axCarousel]", ["axCarousel"], {}, {}, never, never, true, never>;
+}
+
+export { AXCarouselDirective };
+export type { AXCarousel, AXCarouselOptions };

package/{common/index.d.ts → types/acorex-cdk-common.d.ts}

@@ -22,8 +22,11 @@ declare abstract class NXButtonComponent {
  * A token that specifies the  color style of component.
  */
 type AXStyleColorType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+type AXStyleColorClassType = `ax-${AXStyleColorType}`;
 declare const AX_STYLE_COLOR_TYPES: AXStyleColorType[];
 type AXStyleLookType = 'solid' | 'blank' | 'outline' | 'twotone' | 'flat' | 'fill' | 'link' | 'none';
+type AXStyleLookClassType = `ax-${AXStyleLookType}`;
+type AXStyleInteractiveLookClassType = `${AXStyleLookClassType}-interactive`;
 declare const AX_STYLE_LOOK_TYPES: AXStyleLookType[];
 type AXSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AXStyleSizeType = `ax-${AXSizeType}`;
@@ -432,6 +435,7 @@ declare class MXValueComponent<T = any> extends MXInteractiveComponent implement
      * @param ruleToRemove - The validation rule to remove.
      */
     removeValidationRule(ruleToRemove: AXFormValidationRule): void;
+    removeValidationRuleByType(type: string): void;
     /**
      * Validates the component.
      *
@@ -771,8 +775,8 @@ declare class MXColorComponent extends MXBaseComponent {
     /**
      *  Predefined color schemes
      */
-    get color(): AXStyleColorType;
-    set color(value: AXStyleColorType);
+    get color(): AXStyleColorClassType | string;
+    set color(value: AXStyleColorType | string);
 }
 
 declare abstract class MXLookableComponent {
@@ -786,8 +790,9 @@ declare class MXLookComponent extends MXBaseComponent {
     /**
      *  Predefined look schemes
      */
-    get look(): AXStyleLookType;
-    set look(value: AXStyleLookType);
+    get look(): AXStyleLookClassType | string;
+    get interactiveLook(): AXStyleInteractiveLookClassType | string;
+    set look(value: AXStyleLookType | string);
 }
 
 declare const MXColorLookComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXColorComponent, typeof MXLookComponent]>;
@@ -841,8 +846,6 @@ declare class MXButtonBaseComponent extends MXButtonBaseComponent_base {
      */
     protected get cssClasses(): {
         'ax-button-icon': boolean;
-        'ax-state-disabled': boolean;
-        'ax-state-selected': boolean;
     };
 }
 
@@ -1155,4 +1158,4 @@ declare class AXHotkeysService {
 }
 
 export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXItemSelectedEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, applyDataSourceQuery, convertArrayToDataSource, convertToPlacement };
-export type { AXAnimationEasing, AXComponentState, AXConnectedPosition, AXDataListFetchCallbackResult, AXDataListFetchDataCallback, AXDataListItems, AXDataListQuery, AXDataSourceByKeyCallback, AXDataSourceCallbackResult, AXDataSourceChangedEvent, AXDataSourceConfig, AXDataSourceFilterOption, AXDataSourceItemExpandedEvent, AXDataSourceLoadCallback, AXDataSourceOperator, AXDataSourceQuery, AXDataSourceSortOption, AXDirection, AXExpandToggleIcons, AXFilterLogic, AXFormValidationRule, AXHotKeyAction, AXLocation, AXOrientation, AXPagedComponentInterface, AXPlacement, AXPlacementType, AXRange, AXScrollPosition, AXSelectionMode, AXSizeType, AXSortOrder, AXStyleColorType, AXStyleLookType, AXStyleSizeType, AXSurfaceType, DisabledCallback, MXComponentOptionChanged, MXComponentOptionChanging, MXComponentSetOption, NormalizedItem };
+export type { AXAnimationEasing, AXComponentState, AXConnectedPosition, AXDataListFetchCallbackResult, AXDataListFetchDataCallback, AXDataListItems, AXDataListQuery, AXDataSourceByKeyCallback, AXDataSourceCallbackResult, AXDataSourceChangedEvent, AXDataSourceConfig, AXDataSourceFilterOption, AXDataSourceItemExpandedEvent, AXDataSourceLoadCallback, AXDataSourceOperator, AXDataSourceQuery, AXDataSourceSortOption, AXDirection, AXExpandToggleIcons, AXFilterLogic, AXFormValidationRule, AXHotKeyAction, AXLocation, AXOrientation, AXPagedComponentInterface, AXPlacement, AXPlacementType, AXRange, AXScrollPosition, AXSelectionMode, AXSizeType, AXSortOrder, AXStyleColorClassType, AXStyleColorType, AXStyleInteractiveLookClassType, AXStyleLookClassType, AXStyleLookType, AXStyleSizeType, AXSurfaceType, DisabledCallback, MXComponentOptionChanged, MXComponentOptionChanging, MXComponentSetOption, NormalizedItem };

package/{drawer/index.d.ts → types/acorex-cdk-drawer.d.ts}

@@ -10,6 +10,8 @@ declare class AXDrawerItemDirective implements OnDestroy {
     private htmlElem;
     private parent;
     private platformID;
+    private zIndexService;
+    private zToken;
     private collapseState;
     private resizeObserver;
     collapseStateChanged: _angular_core.OutputEmitterRef<boolean>;

package/{focus-trap/index.d.ts → types/acorex-cdk-focus-trap.d.ts}

@@ -11,7 +11,7 @@ declare class AXFocusTrapDirective implements OnDestroy {
     private observer;
     ngOnDestroy(): void;
     private setFocusableElements;
-    private handleKeyboardEvent;
+    handleKeyboardEvent(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXFocusTrapDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXFocusTrapDirective, "[axFocusTrap]", never, {}, {}, never, never, true, never>;
 }

package/{full-screen/index.d.ts → types/acorex-cdk-full-screen.d.ts}

@@ -26,8 +26,13 @@ declare class AXFullScreenDirective {
      * Fullscreen change event
      */
     readonly fullscreenChange: i0.OutputEmitterRef<boolean>;
+    /**
+     * Z-index token for this fullscreen instance
+     */
+    private zToken;
     private readonly renderer;
     private readonly elementRef;
+    private readonly zIndexService;
     constructor();
     /**
      * Toggle fullscreen state

package/{input-mask/index.d.ts → types/acorex-cdk-input-mask.d.ts}

@@ -11,7 +11,22 @@ type AXInputMaskEvent = {
 /**
  * Available input mask modes for different data types.
  */
-type AXInputMaskModes = 'hijriDate' | 'digits' | 'thousandsSeparator' | 'decimal';
+type AXInputMaskModes = 'hijriDate' | 'digits' | 'thousandsSeparator' | 'decimal' | 'mask';
+/**
+ * Token definitions for custom mask patterns.
+ * - `#`: Digit (0-9)
+ * - `^`: Letter (a-z, A-Z)
+ * - `@`: Alphanumeric (0-9, a-z, A-Z)
+ */
+type AXMaskTokens = {
+    [key: string]: {
+        pattern: RegExp;
+        optional?: boolean;
+        transform?: (char: string) => string;
+        repeated?: boolean;
+        multiple?: boolean;
+    };
+};
 /**
  * Directive that provides input masking functionality for various data types including
  * Hijri dates, digits, decimal numbers, and thousands-separated numbers.
@@ -55,14 +70,35 @@ declare class AXInputMaskDirective {
      * @default 0
      */
     decimal: _angular_core.InputSignal<number>;
+    /**
+     * Custom mask pattern for 'mask' mode.
+     * Use the following tokens:
+     * - `#`: Required digit (0-9)
+     * - `^`: Required letter (a-z, A-Z)
+     * - `@`: Required alphanumeric (0-9, a-z, A-Z)
+     *
+     * Use ! before token to escape symbol. For example !# will render # instead of a digit.
+     * Any other character is treated as a literal separator.
+     * @example '(###) ###-####' for phone numbers
+     * @example 'AA-####' for license plates
+     * @example '##/##/####' for dates
+     */
+    maskPattern: _angular_core.InputSignal<string>;
+    /**
+     * Custom token definitions to extend or override default mask tokens.
+     * Each token maps to a pattern regex and optional transformation.
+     * @example { 'P': { pattern: /[1-9]/, transform: (c) => c.toUpperCase() } }
+     */
+    customTokens: _angular_core.InputSignal<AXMaskTokens>;
     private initializeMask;
     private thousandsSeparatorHandler;
     private hijriMaskHandler;
     private rangeValueLimit;
+    private convertToEnglishDigits;
     private decimalMaskHandler;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXInputMaskDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXInputMaskDirective, "[axInputMask]", ["axInputMask"], { "maskMode": { "alias": "maskMode"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "eager": { "alias": "eager"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "decimal": { "alias": "decimal"; "required": false; "isSignal": true; }; }, { "onMaskChanged": "onMaskChanged"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXInputMaskDirective, "[axInputMask]", ["axInputMask"], { "maskMode": { "alias": "maskMode"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "eager": { "alias": "eager"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "decimal": { "alias": "decimal"; "required": false; "isSignal": true; }; "maskPattern": { "alias": "maskPattern"; "required": false; "isSignal": true; }; "customTokens": { "alias": "customTokens"; "required": false; "isSignal": true; }; }, { "onMaskChanged": "onMaskChanged"; }, never, never, true, never>;
 }
 
 export { AXInputMaskDirective };
-export type { AXInputMaskEvent, AXInputMaskModes };
+export type { AXInputMaskEvent, AXInputMaskModes, AXMaskTokens };

package/types/acorex-cdk-overlay.d.ts

@@ -0,0 +1,128 @@
+import { AXComponentOptions, AXComponentContent } from '@acorex/core/components';
+import { AXPlacementType, AXPlacement, AXConnectedPosition } from '@acorex/cdk/common';
+import { AXZToken } from '@acorex/core/z-index';
+import * as i0 from '@angular/core';
+import { ElementRef, EmbeddedViewRef, ComponentRef } from '@angular/core';
+
+interface AXOverlayRef<T> {
+    instance: EmbeddedViewRef<T> | ComponentRef<T>;
+    /** Updates the overlay position relative to the anchor */
+    updatePosition: () => void;
+    /** Destroys the overlay and removes it from the DOM */
+    dispose: () => void;
+    /** The overlay container element */
+    overlayElement: HTMLElement | null;
+    /** The z-index token for this overlay */
+    zToken: AXZToken | null;
+    /** Brings this overlay to the front of all other overlays */
+    bringToFront: () => void;
+}
+interface AXOverlayAnchorOptions {
+    /** The anchor element to position relative to */
+    anchor: HTMLElement | ElementRef<HTMLElement>;
+    /** Placement of the overlay relative to the anchor */
+    placement?: AXPlacementType;
+    /** Horizontal offset in pixels */
+    offsetX?: number;
+    /** Vertical offset in pixels */
+    offsetY?: number;
+    /** Whether to flip the overlay when it overflows the viewport */
+    autoFlip?: boolean;
+}
+interface AXOverlayOptions extends AXComponentOptions {
+    backdrop?: {
+        enabled?: boolean;
+        background?: boolean;
+        backdropClass?: string;
+        closeOnClick?: boolean;
+    };
+    position?: AXPlacement;
+    /** Anchor-based positioning options for tooltips, popovers, etc. */
+    anchorOptions?: AXOverlayAnchorOptions;
+    /** Custom CSS class for the overlay panel */
+    panelClass?: string | string[];
+    /** Whether to close when clicking outside */
+    closeOnOutsideClick?: boolean;
+    /** Whether to close when pressing Escape */
+    closeOnEscape?: boolean;
+    /** Width of the overlay container (e.g., 'auto', '200px', '100%') */
+    width?: string;
+    /** Callback when the overlay is disposed (e.g., due to scroll) */
+    onDispose?: () => void;
+    /** Whether to use centered container (default: true). Set to false for positioned overlays like toasts */
+    centered?: boolean;
+    actionSheetStyle?: boolean;
+}
+/**
+ * Calculates the position of an overlay element relative to an anchor element.
+ */
+declare function calculateAnchorPosition(anchorRect: DOMRect, overlayRect: DOMRect, position: AXConnectedPosition): {
+    top: number;
+    left: number;
+};
+/**
+ * Checks if the overlay position fits within the viewport.
+ */
+declare function fitsInViewport(position: {
+    top: number;
+    left: number;
+}, overlayRect: DOMRect, viewportWidth: number, viewportHeight: number): boolean;
+/**
+ * Clamps a position to ensure the overlay stays within viewport bounds.
+ */
+declare function clampToViewport(coords: {
+    top: number;
+    left: number;
+}, overlayRect: DOMRect, viewportWidth: number, viewportHeight: number, margin?: number): {
+    top: number;
+    left: number;
+};
+/**
+ * Finds the best position for an overlay that fits in the viewport.
+ */
+declare function findBestPosition(anchorRect: DOMRect, overlayRect: DOMRect, positions: AXConnectedPosition[], viewportWidth: number, viewportHeight: number): {
+    position: AXConnectedPosition;
+    coords: {
+        top: number;
+        left: number;
+    };
+};
+
+declare class AXOverlayService {
+    private componentService;
+    private document;
+    private zIndexService;
+    private _platform;
+    /**
+     * Creates an overlay with optional anchor-based positioning.
+     * @param content - Component or template to display
+     * @param options - Configuration options for the overlay
+     * @returns Promise<AXOverlayRef> - Reference to the created overlay
+     */
+    create<T = unknown>(content: AXComponentContent<T>, options?: AXOverlayOptions): Promise<AXOverlayRef<T>>;
+    /**
+     * Creates a backdrop element.
+     */
+    private createBackdrop;
+    /**
+     * Creates a centered overlay container (for modals/popups).
+     */
+    private createCenteredOverlayContainer;
+    /**
+     * Gets the host element from a ComponentRef or EmbeddedViewRef.
+     */
+    private getHostElement;
+    /**
+     * Creates an overlay container element and appends the content to it.
+     */
+    private createOverlayContainer;
+    /**
+     * Positions the overlay container relative to the anchor element.
+     */
+    private positionOverlay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXOverlayService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXOverlayService>;
+}
+
+export { AXOverlayService, calculateAnchorPosition, clampToViewport, findBestPosition, fitsInViewport };
+export type { AXOverlayAnchorOptions, AXOverlayOptions, AXOverlayRef };

package/{sticky/index.d.ts → types/acorex-cdk-sticky.d.ts}

@@ -2,30 +2,37 @@ import * as i0 from '@angular/core';
 import { AfterViewInit, OnDestroy, EventEmitter } from '@angular/core';
 
 declare class AXStickyDirective implements AfterViewInit, OnDestroy {
+    stickyClass: string;
+    stickyOffset: number;
+    stickyParent: string | HTMLElement;
+    stickyTarget: string;
+    isStickyChange: EventEmitter<boolean>;
     private element;
     private renderer;
     private zone;
     private cdr;
-    stickyClass: string;
-    stickyOffset: number;
-    isStickyChange: EventEmitter<boolean>;
-    private _isSticky;
-    get isSticky(): boolean;
-    set isSticky(value: boolean);
-    private topOffset;
     private parentElement;
     private targetElement;
     private mutationObserver;
-    stickyParent: string | HTMLElement;
-    stickyTarget: string;
+    private _isSticky;
+    get isSticky(): boolean;
+    set isSticky(value: boolean);
+    private readonly onWindowResize;
     ngAfterViewInit(): void;
     private initSticky;
-    private updateTopOffset;
+    private getScrollTop;
+    /**
+     * Toggle stuck styling only while this element is visually pinned (matches `position: sticky; top: 0`).
+     * Scroll-offset thresholds would stay true for every section already passed, so multiple stacked stickies
+     * would all keep `--stuck`; geometry fixes that.
+     */
+    private computeShouldStick;
+    private applyStickyStateFromScrollPosition;
     private onParentScroll;
     private toggleStickyClasses;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXStickyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXStickyDirective, "[axSticky]", ["axpSticky"], { "stickyClass": { "alias": "axSticky"; "required": false; }; "stickyOffset": { "alias": "stickyOffset"; "required": false; }; "stickyParent": { "alias": "stickyParent"; "required": false; }; "stickyTarget": { "alias": "stickyTarget"; "required": false; }; }, { "isStickyChange": "isStickyChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXStickyDirective, "[axSticky]", ["axpSticky"], { "stickyClass": { "alias": "axpSticky"; "required": false; }; "stickyOffset": { "alias": "stickyOffset"; "required": false; }; "stickyParent": { "alias": "stickyParent"; "required": false; }; "stickyTarget": { "alias": "stickyTarget"; "required": false; }; }, { "isStickyChange": "isStickyChange"; }, never, never, true, never>;
 }
 
 export { AXStickyDirective };

package/types/acorex-cdk-z-index.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from '@angular/core';
+import { OnDestroy } from '@angular/core';
+
+declare class AXZindexDirective implements OnDestroy {
+    #private;
+    private el;
+    private z;
+    private token;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXZindexDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXZindexDirective, "[axZindex]", ["axZindex"], {}, {}, never, never, true, never>;
+}
+
+export { AXZindexDirective };

package/z-index/README.md

@@ -0,0 +1,3 @@
+# @acorex/cdk/z-index
+
+Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/z-index`.

package/carousel/index.d.ts

@@ -1,18 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { Swiper, SwiperOptions } from 'swiper/types';
-
-type AXCarousel = Swiper;
-type AXCarouselOptions = SwiperOptions;
-declare class AXCarouselDirective {
-    #private;
-    carousel: _angular_core.WritableSignal<Swiper>;
-    carouselOptions: _angular_core.InputSignal<SwiperOptions>;
-    private el;
-    private platformId;
-    private init;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCarouselDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXCarouselDirective, "[axCarousel]", ["axCarousel"], { "carouselOptions": { "alias": "carouselOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-export { AXCarouselDirective };
-export type { AXCarousel, AXCarouselOptions };

package/overlay/index.d.ts

@@ -1,27 +0,0 @@
-import { AXComponentOptions, AXComponentContent } from '@acorex/core/components';
-import { AXPlacement } from '@acorex/cdk/common';
-import * as i0 from '@angular/core';
-import { EmbeddedViewRef, ComponentRef } from '@angular/core';
-
-interface AXOverlayRef<T> {
-    instance: EmbeddedViewRef<T> | ComponentRef<T>;
-}
-interface AXOverlayOptions extends AXComponentOptions {
-    backdrop?: {
-        enabled?: boolean;
-        background?: boolean;
-        backdropClass?: string;
-        closeOnClick?: boolean;
-    };
-    position?: AXPlacement;
-}
-
-declare class AXOverlayService {
-    private componentService;
-    create<T = any>(content: AXComponentContent<T>, options?: AXOverlayOptions): Promise<AXOverlayRef<T>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXOverlayService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXOverlayService>;
-}
-
-export { AXOverlayService };
-export type { AXOverlayOptions, AXOverlayRef };