@acorex/cdk 21.0.1-next.0 → 21.0.1-next.1

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: "20.3.9", ngImport: i0, type: AXZindexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXZindexDirective, isStandalone: true, selector: "[axZindex]", exportAs: ["axZindex"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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":["../tmp-esm2022/z-index/lib/z-index.directive.js","../tmp-esm2022/z-index/acorex-cdk-z-index.js"],"sourcesContent":["import { AXZIndexService } from '@acorex/core/z-index';\nimport { afterNextRender, Directive, ElementRef, inject, signal } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXZindexDirective {\n    constructor() {\n        this.el = inject(ElementRef);\n        this.z = inject(AXZIndexService);\n        this.token = signal(null, ...(ngDevMode ? [{ debugName: \"token\" }] : []));\n        this.#init = afterNextRender(() => {\n            this.token.set(this.z.acquire());\n            this.el.nativeElement.style.zIndex = String(this.token().zIndex);\n        });\n    }\n    #init;\n    ngOnDestroy() {\n        this.z.release(this.token());\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.9\", ngImport: i0, type: AXZindexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }\n    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"20.3.9\", type: AXZindexDirective, isStandalone: true, selector: \"[axZindex]\", exportAs: [\"axZindex\"], ngImport: i0 }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.9\", ngImport: i0, type: AXZindexDirective, decorators: [{\n            type: Directive,\n            args: [{\n                    selector: '[axZindex]',\n                    exportAs: 'axZindex',\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiei1pbmRleC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jZGsvei1pbmRleC9zcmMvbGliL3otaW5kZXguZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQVksTUFBTSxzQkFBc0IsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFhLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFLbEcsTUFBTSxPQUFPLGlCQUFpQjtJQUo5QjtRQUtVLE9BQUUsR0FBRyxNQUFNLENBQTBCLFVBQVUsQ0FBQyxDQUFDO1FBQ2pELE1BQUMsR0FBRyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUM7UUFFNUIsVUFBSyxHQUFHLE1BQU0sQ0FBVyxJQUFJLGlEQUFDLENBQUM7UUFFdkMsVUFBSyxHQUFHLGVBQWUsQ0FBQyxHQUFHLEVBQUU7WUFDM0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNuRSxDQUFDLENBQUMsQ0FBQztLQUtKO0lBUkMsS0FBSyxDQUdGO0lBRUgsV0FBVztRQUNULElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQy9CLENBQUM7OEdBYlUsaUJBQWlCO2tHQUFqQixpQkFBaUI7OzJGQUFqQixpQkFBaUI7a0JBSjdCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRSxVQUFVO2lCQUNyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYWkluZGV4U2VydmljZSwgQVhaVG9rZW4gfSBmcm9tICdAYWNvcmV4L2NvcmUvei1pbmRleCc7XG5pbXBvcnQgeyBhZnRlck5leHRSZW5kZXIsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgaW5qZWN0LCBPbkRlc3Ryb3ksIHNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2F4WmluZGV4XScsXG4gIGV4cG9ydEFzOiAnYXhaaW5kZXgnLFxufSlcbmV4cG9ydCBjbGFzcyBBWFppbmRleERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgZWwgPSBpbmplY3Q8RWxlbWVudFJlZjxIVE1MRWxlbWVudD4+KEVsZW1lbnRSZWYpO1xuICBwcml2YXRlIHogPSBpbmplY3QoQVhaSW5kZXhTZXJ2aWNlKTtcblxuICBwcml2YXRlIHRva2VuID0gc2lnbmFsPEFYWlRva2VuPihudWxsKTtcblxuICAjaW5pdCA9IGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG4gICAgdGhpcy50b2tlbi5zZXQodGhpcy56LmFjcXVpcmUoKSk7XG4gICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLnpJbmRleCA9IFN0cmluZyh0aGlzLnRva2VuKCkuekluZGV4KTtcbiAgfSk7XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy56LnJlbGVhc2UodGhpcy50b2tlbigpKTtcbiAgfVxufVxuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNkay16LWluZGV4LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY2RrL3otaW5kZXgvc3JjL2Fjb3JleC1jZGstei1pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":";;;;AAGO,MAAM,iBAAiB,CAAC;AAC/B,IAAI,WAAW,GAAG;AAClB,QAAQ,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;AACpC,QAAQ,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC;AACxC,QAAQ,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AACjF,QAAQ,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,MAAM;AAC3C,YAAY,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAC5C,YAAY,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC;AAC5E,QAAQ,CAAC,CAAC;AACV,IAAI;AACJ,IAAI,KAAK;AACT,IAAI,WAAW,GAAG;AAClB,QAAQ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AACpC,IAAI;AACJ,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC;AACnL,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;AACzM;AACA,EAAE,CAAC,wBAAwB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3H,YAAY,IAAI,EAAE,SAAS;AAC3B,YAAY,IAAI,EAAE,CAAC;AACnB,oBAAoB,QAAQ,EAAE,YAAY;AAC1C,oBAAoB,QAAQ,EAAE,UAAU;AACxC,iBAAiB;AACjB,SAAS,CAAC,EAAE,CAAC;;AC1Bb;AACA;AACA;;;;"}

package/fesm2022/acorex-cdk.mjs.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

package/overlay/index.d.ts

@@ -1,10 +1,33 @@
 import { AXComponentOptions, AXComponentContent } from '@acorex/core/components';
-import { AXPlacement } from '@acorex/cdk/common';
+import { AXPlacement, AXPlacementType, AXConnectedPosition } from '@acorex/cdk/common';
+import { AXZToken } from '@acorex/core/z-index';
 import * as i0 from '@angular/core';
-import { EmbeddedViewRef, ComponentRef } 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?: {
@@ -14,14 +37,78 @@ interface AXOverlayOptions extends AXComponentOptions {
         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;
 }
+/**
+ * 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, margin?: number): boolean;
+/**
+ * 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;
-    create<T = any>(content: AXComponentContent<T>, options?: AXOverlayOptions): Promise<AXOverlayRef<T>>;
+    private document;
+    private zIndexService;
+    /**
+     * 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 };
-export type { AXOverlayOptions, AXOverlayRef };
+export { AXOverlayService, calculateAnchorPosition, findBestPosition, fitsInViewport };
+export type { AXOverlayAnchorOptions, AXOverlayOptions, AXOverlayRef };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@acorex/cdk",
-  "version": "21.0.1-next.0",
+  "version": "21.0.1-next.1",
   "peerDependencies": {
-    "@acorex/core": "21.0.1-next.0",
+    "@acorex/core": "21.0.1-next.1",
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "quill": ">=2.0.2",
@@ -112,6 +112,10 @@
     "./wysiwyg": {
       "types": "./wysiwyg/index.d.ts",
       "default": "./fesm2022/acorex-cdk-wysiwyg.mjs"
+    },
+    "./z-index": {
+      "types": "./z-index/index.d.ts",
+      "default": "./fesm2022/acorex-cdk-z-index.mjs"
     }
   },
   "dependencies": {

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/z-index/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 };