@acorex/cdk 21.0.1-next.7 → 21.0.1-next.70

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 };