@shival99/z-ui 2.2.5 → 2.3.0

package/types/shival99-z-ui-components-z-modal.d.ts

@@ -1,17 +1,53 @@
-import { ComponentType, OverlayRef } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
-import { TemplateRef, Type, WritableSignal, EventEmitter, ViewContainerRef, InjectionToken, OnDestroy, AfterViewChecked, ComponentRef, EmbeddedViewRef } from '@angular/core';
+import { Type, TemplateRef, WritableSignal, EventEmitter, ViewContainerRef, OnDestroy, AfterViewChecked, Injector, ComponentRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ClassValue } from 'clsx';
-import { Observable } from 'rxjs';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { NgScrollbar } from 'ngx-scrollbar';
+import { Observable } from 'rxjs';
+import { ZOverlayRef } from '@shival99/z-ui/components/z-overlay';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
-type ZModalContentType<T> = ComponentType<T> | TemplateRef<T> | string;
-declare const Z_MODAL_DATA: InjectionToken<any>;
+type ZModalContentType<T> = Type<T> | TemplateRef<T> | string;
 type ZModalOnClickCallBack<T> = (instance: T, modalRef?: unknown) => false | void | object;
 type ZModalConfirmType = 'show' | 'info' | 'warning' | 'danger';
+interface ZModalConfirmOptions<U = unknown> {
+    zTitle: string;
+    zContent?: string;
+    zIcon?: ZIcon;
+    zOkText?: string;
+    zCancelText?: string | null;
+    /** Callback when OK is clicked. Return false to prevent auto-close */
+    zOnOk?: () => void | false | Promise<void>;
+    zOnCancel?: () => void;
+    zMaskClosable?: boolean;
+    /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */
+    zWidth?: string;
+    zData?: U;
+}
+interface ZModalConfirmIconColors {
+    ring: string;
+    bg: string;
+    icon: string;
+}
+
+declare class ZModalContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalContentDirective, "[z-modal-content], [zModalContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ZModalFooterDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalFooterDirective, "[z-modal-footer], [zModalFooter]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ZModalHeaderDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalHeaderDirective, "[z-modal-header], [zModalHeader]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Configuration options for z-modal component.
  *
@@ -115,43 +151,6 @@ declare class ZModalOptions<T, U> {
     /** Number of skeleton rows to show when content is loading */
     zSkeletonRows?: number;
 }
-interface ZModalConfirmOptions<U = unknown> {
-    zTitle: string;
-    zContent?: string;
-    zIcon?: ZIcon;
-    zOkText?: string;
-    zCancelText?: string | null;
-    /** Callback when OK is clicked. Return false to prevent auto-close */
-    zOnOk?: () => void | false | Promise<void>;
-    zOnCancel?: () => void;
-    zMaskClosable?: boolean;
-    /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */
-    zWidth?: string;
-    zData?: U;
-}
-interface ZModalConfirmIconColors {
-    ring: string;
-    bg: string;
-    icon: string;
-}
-
-declare class ZModalContentDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalContentDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalContentDirective, "[z-modal-content], [zModalContent]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ZModalFooterDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalFooterDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalFooterDirective, "[z-modal-footer], [zModalFooter]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ZModalHeaderDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalHeaderDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalHeaderDirective, "[z-modal-header], [zModalHeader]", never, {}, {}, never, never, true, never>;
-}
 
 declare class ZModalRef<T = any, R = any, U = any> {
     private readonly _overlayRef;
@@ -164,7 +163,7 @@ declare class ZModalRef<T = any, R = any, U = any> {
     componentInstance: T | null;
     readonly loading: _angular_core.WritableSignal<boolean>;
     readonly zAfterClose: EventEmitter<R | undefined>;
-    constructor(_overlayRef: OverlayRef, _config: ZModalOptions<T, U>, _containerInstance: ZModalComponent<T, U>, _platformId: object);
+    constructor(_overlayRef: ZOverlayRef, _config: ZModalOptions<T, U>, _containerInstance: ZModalComponent<T, U>, _platformId: object);
     setLoading(value: boolean): void;
     close(result?: R): void;
     private _trigger;
@@ -172,7 +171,7 @@ declare class ZModalRef<T = any, R = any, U = any> {
     private _closeWithResult;
 }
 
-declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestroy, AfterViewChecked {
+declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     zOk: _angular_core.OutputEmitterRef<void>;
     zCancel: _angular_core.OutputEmitterRef<void>;
     zAfterClose: _angular_core.OutputEmitterRef<void>;
@@ -202,14 +201,12 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     protected readonly customContent: _angular_core.Signal<ZModalContentDirective | undefined>;
     protected readonly customFooter: _angular_core.Signal<ZModalFooterDirective | undefined>;
     modalRef?: ZModalRef<T>;
-    readonly portalOutlet: _angular_core.Signal<CdkPortalOutlet | undefined>;
-    protected readonly dummyTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    protected readonly contentOutlet: _angular_core.Signal<ViewContainerRef | undefined>;
     protected readonly mainContentRef: _angular_core.Signal<NgScrollbar | undefined>;
     protected readonly config: ZModalOptions<T, U>;
     private readonly _platformId;
     private readonly _host;
-    private readonly _overlay;
-    private readonly _viewContainerRef;
+    private readonly _overlayService;
     private readonly _cdr;
     private readonly _destroyRef;
     private readonly _zTranslate;
@@ -232,6 +229,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     private _lastScrollHeight;
     ngAfterViewChecked(): void;
     private _checkScrollState;
+    onContentWheel(event: WheelEvent): void;
     onContentScroll(event: Event): void;
     protected readonly confirmIconColors: _angular_core.Signal<ZModalConfirmIconColors>;
     protected readonly effectiveTitle: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
@@ -251,7 +249,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     protected readonly effectiveOkText: _angular_core.Signal<string | null | undefined>;
     protected readonly effectiveCancelText: _angular_core.Signal<string | null | undefined>;
     protected readonly effectiveOkDestructive: _angular_core.Signal<boolean | undefined>;
-    protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "link" | "default" | "primary" | "secondary" | "destructive" | "destructive-heartbeat" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-shimmer" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "outline-primary-soft" | "outline-success-soft" | "outline-info-soft" | "outline-warning-soft" | "outline-error-soft" | "outline-destructive-soft" | "outline-primary-soft-border" | "outline-success-soft-border" | "outline-info-soft-border" | "outline-warning-soft-border" | "outline-error-soft-border" | "outline-destructive-soft-border" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "subtle-outline" | "subtle-primary-outline" | "subtle-success-outline" | "subtle-info-outline" | "subtle-warning-outline" | "subtle-destructive-outline" | null | undefined>;
+    protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "default" | "primary" | "secondary" | "destructive" | "destructive-heartbeat" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-shimmer" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "outline-primary-soft" | "outline-success-soft" | "outline-info-soft" | "outline-warning-soft" | "outline-error-soft" | "outline-destructive-soft" | "outline-primary-soft-border" | "outline-success-soft-border" | "outline-info-soft-border" | "outline-warning-soft-border" | "outline-error-soft-border" | "outline-destructive-soft-border" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "subtle-outline" | "subtle-primary-outline" | "subtle-success-outline" | "subtle-info-outline" | "subtle-warning-outline" | "subtle-destructive-outline" | "link" | null | undefined>;
     protected readonly effectiveOkDisabled: _angular_core.Signal<boolean | undefined>;
     protected readonly effectiveLoading: _angular_core.Signal<boolean>;
     protected readonly effectiveContentLoading: _angular_core.Signal<boolean>;
@@ -264,8 +262,8 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     ngOnDestroy(): void;
     isDestroyed(): boolean;
     getNativeElement(): HTMLElement;
-    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
-    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    attachComponentPortal<C>(component: Type<C>, injector?: Injector): ComponentRef<C>;
+    attachTemplatePortal<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C>;
     onOkClick(): void;
     onCloseClick(): void;
     onBackdropClick(): void;
@@ -281,7 +279,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
 }
 
 declare class ZModalService {
-    private readonly _overlay;
+    private readonly _overlayService;
     private readonly _injector;
     private readonly _platformId;
     private readonly _zTranslate;
@@ -301,6 +299,8 @@ declare class ZModalService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ZModalService>;
 }
 
+declare const Z_MODAL_DATA: InjectionToken<any>;
+
 declare const zModalVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 
 export { ZModalComponent, ZModalContentDirective, ZModalFooterDirective, ZModalHeaderDirective, ZModalOptions, ZModalRef, ZModalService, Z_MODAL_DATA, zModalVariants };

package/types/shival99-z-ui-components-z-overlay.d.ts

@@ -0,0 +1,145 @@
+import { AutoUpdateOptions, Placement } from '@floating-ui/dom';
+import * as i0 from '@angular/core';
+import { ApplicationRef, EnvironmentInjector, Type, Injector, ViewContainerRef, ComponentRef, TemplateRef, EmbeddedViewRef } from '@angular/core';
+import { Observable } from 'rxjs';
+
+type ZOverlaySide = 'top' | 'bottom' | 'left' | 'right';
+type ZOverlayPlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
+interface ZFloatingPlacementConfig {
+    reference: Element;
+    floating: HTMLElement;
+    placement: ZOverlayPlacement;
+    fallbackPlacements: ZOverlayPlacement[];
+    offset: number;
+    viewportPadding?: number;
+    push?: boolean;
+    flexibleDimensions?: boolean;
+}
+interface ZFloatingPlacementResult {
+    x: number;
+    y: number;
+    placement: ZOverlayPlacement;
+}
+interface ZFloatingArrowOffsetConfig {
+    triggerRect: DOMRectReadOnly;
+    overlayRect: DOMRectReadOnly;
+    placement: ZOverlayPlacement;
+    edgePadding?: number;
+}
+interface ZOverlaySizeConfig {
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    height?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+}
+interface ZOverlayGlobalConfig {
+    hasBackdrop: boolean;
+    backdropClass?: string;
+    panelClass?: string;
+    scrollLock?: boolean;
+    size?: ZOverlaySizeConfig;
+}
+interface ZOverlayAnchoredConfig {
+    panelClass?: string;
+}
+
+declare function computeZOverlayPlacement(config: ZFloatingPlacementConfig): Promise<ZFloatingPlacementResult>;
+/** Bọc lại `autoUpdate` của Floating UI — thay cho `scrollStrategies.reposition()` của CDK. */
+declare function startZOverlayAutoUpdate(reference: Element, floating: HTMLElement, onUpdate: () => void, options?: Partial<AutoUpdateOptions>): () => void;
+/**
+ * Tính độ lệch mũi tên so với tâm overlay, kẹp trong biên overlay.
+ * Y hệt logic `_calculateArrowOffset` cũ của tooltip/popover — chỉ tách ra dùng chung.
+ */
+declare function computeZOverlayArrowOffset(config: ZFloatingArrowOffsetConfig): number;
+
+declare const Z_OVERLAY_DEFAULT_VIEWPORT_PADDING = 8;
+declare const Z_OVERLAY_DEFAULT_ARROW_EDGE_PADDING = 12;
+declare const Z_OVERLAY_CONTAINER_CLASS = "z-overlay-container";
+declare const Z_OVERLAY_HOST_CLASS = "z-overlay-host";
+/** Z-UI position name -> Floating UI placement (12 vị trí khớp 1:1). */
+declare const Z_OVERLAY_PLACEMENT_MAP: Record<ZOverlayPlacement, Placement>;
+declare const Z_OVERLAY_PLACEMENT_REVERSE_MAP: Record<Placement, ZOverlayPlacement>;
+/**
+ * Thứ tự fallback khi vị trí chính không đủ chỗ (không gồm vị trí chính — flip() tự thử trước).
+ * Dùng chung cho tooltip lẫn popover, hai nơi này vốn có bảng y hệt nhau.
+ */
+declare const Z_OVERLAY_FALLBACK_ORDER: Record<ZOverlayPlacement, ZOverlayPlacement[]>;
+/** Thứ tự ưu tiên khi vị trí chính còn đủ chỗ (tooltip dùng để giữ đúng cạnh, không nhảy sang cạnh đối diện). */
+declare const Z_OVERLAY_PREFERRED_SIDE_ORDER: Record<ZOverlayPlacement, ZOverlayPlacement[]>;
+
+/**
+ * Thay cho `OverlayRef` của CDK. `overlayElement` là pane được Floating UI định vị
+ * (overlay neo theo trigger) hoặc chính `hostElement` (overlay toàn màn hình — modal/drawer).
+ */
+declare class ZOverlayRef {
+    readonly hostElement: HTMLElement;
+    readonly overlayElement: HTMLElement;
+    readonly backdropElement: HTMLElement | null;
+    private readonly _appRef;
+    private readonly _envInjector;
+    private readonly _onDispose?;
+    private _componentRef;
+    private _embeddedViewRef;
+    constructor(hostElement: HTMLElement, overlayElement: HTMLElement, backdropElement: HTMLElement | null, _appRef: ApplicationRef, _envInjector: EnvironmentInjector, _onDispose?: (() => void) | undefined);
+    hasAttached(): boolean;
+    /**
+     * `viewContainerRef`, khi được truyền, cho component tạo ra thừa hưởng injector/vị trí trong
+     * cây view của chính VCR đó (giữ đúng ngữ nghĩa `ZModalOptions.zViewContainerRef` công khai) —
+     * dù vậy DOM node vẫn luôn được chuyển vào `overlayElement`, y hệt `DomPortalOutlet` của CDK cũ.
+     */
+    attach<T>(component: Type<T>, options?: {
+        injector?: Injector;
+        viewContainerRef?: ViewContainerRef;
+    }): ComponentRef<T>;
+    /** Gắn một `TemplateRef` (thay `TemplatePortal`) — chỉ dùng cho overlay tự do (z-dynamic.service). */
+    attachTemplate<C>(templateRef: TemplateRef<C>, viewContainerRef: ViewContainerRef, context: C): EmbeddedViewRef<C>;
+    updateSize(size: ZOverlaySizeConfig): void;
+    backdropClick(): Observable<MouseEvent>;
+    outsidePointerEvents(): Observable<PointerEvent>;
+    dispose(): void;
+}
+
+/**
+ * Tạo overlay host `[popover=manual]` (top layer, thay cho `.cdk-overlay-pane`) và trả về `ZOverlayRef`.
+ *
+ * - `createAnchored`: overlay neo theo trigger (tooltip/popover) — có thêm `.z-overlay-pane` để
+ *   Floating UI định vị bằng `left`/`top` (không dùng `transform`, vì các class `z-animate-*`
+ *   trong `animations.css` đã chiếm `transform` cho hiệu ứng enter/exit).
+ * - `createGlobal`: overlay toàn màn hình (modal/drawer) — component gắn vào tự định vị bằng
+ *   `zModalVariants`/`zDrawerVariants` (đã là `fixed` + toạ độ cố định), nên không cần pane riêng.
+ */
+declare class ZOverlayService {
+    private readonly _appRef;
+    private readonly _envInjector;
+    private readonly _document;
+    private readonly _scrollLock;
+    private _container;
+    createAnchored(config?: ZOverlayAnchoredConfig): ZOverlayRef;
+    createGlobal(config: ZOverlayGlobalConfig): ZOverlayRef;
+    private _createHost;
+    private _showHost;
+    private _getContainer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ZOverlayService>;
+}
+
+/**
+ * Khoá scroll trang khi overlay toàn màn hình (modal/drawer) mở — thay cho
+ * `scrollStrategies.block()` của CDK. Đếm tham chiếu để modal-trong-modal không mở khoá sớm.
+ * Dùng `top`/`left` âm theo vị trí scroll hiện tại (giống thuật toán `BlockScrollStrategy` của CDK)
+ * để không giật layout và giữ nguyên vị trí scroll khi mở khoá lại.
+ */
+declare class ZScrollLockService {
+    private readonly _document;
+    private _lockCount;
+    private _scrollPosition;
+    lock(): void;
+    unlock(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZScrollLockService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ZScrollLockService>;
+}
+
+export { ZOverlayRef, ZOverlayService, ZScrollLockService, Z_OVERLAY_CONTAINER_CLASS, Z_OVERLAY_DEFAULT_ARROW_EDGE_PADDING, Z_OVERLAY_DEFAULT_VIEWPORT_PADDING, Z_OVERLAY_FALLBACK_ORDER, Z_OVERLAY_HOST_CLASS, Z_OVERLAY_PLACEMENT_MAP, Z_OVERLAY_PLACEMENT_REVERSE_MAP, Z_OVERLAY_PREFERRED_SIDE_ORDER, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };
+export type { ZFloatingArrowOffsetConfig, ZFloatingPlacementConfig, ZFloatingPlacementResult, ZOverlayAnchoredConfig, ZOverlayGlobalConfig, ZOverlayPlacement, ZOverlaySide, ZOverlaySizeConfig };

package/types/shival99-z-ui-components-z-popover.d.ts

@@ -23,8 +23,7 @@ interface ZPopoverControl {
 
 declare class ZPopoverComponent implements OnInit, OnDestroy {
     private static readonly _openPopovers;
-    private readonly _overlay;
-    private readonly _overlayPositionBuilder;
+    private readonly _overlayService;
     private readonly _renderer;
     private readonly _destroyRef;
     private readonly _platformId;
@@ -54,7 +53,7 @@ declare class ZPopoverComponent implements OnInit, OnDestroy {
     private _componentRef;
     private _delaySubject;
     private _listenerCleanups;
-    private _positionSubscription;
+    private _autoUpdateCleanup;
     private _scrollSubscription;
     private _viewportResizeSubscription;
     private _resizeObserver;
@@ -74,7 +73,6 @@ declare class ZPopoverComponent implements OnInit, OnDestroy {
     isOpen(): boolean;
     updatePosition(): void;
     private _createOverlay;
-    private _createScrollStrategy;
     private _disposeOverlay;
     private _setupDelayMechanism;
     private _setupTriggers;
@@ -85,19 +83,17 @@ declare class ZPopoverComponent implements OnInit, OnDestroy {
     private _showPopover;
     private _isNestedPopoverTarget;
     private _setupResizeObserver;
-    private _updatePositionAfterContentSettles;
     private _schedulePositionUpdate;
     private _scheduleSettledPositionUpdate;
     private _cancelScheduledPositionUpdate;
     private _updatePositionNow;
+    private _applyPosition;
     private _markViewportSettling;
     private _shouldDeferForMobileKeyboard;
     private _shouldSkipMobileKeyboardUpdate;
     private _isMobileOverlayTextInputFocused;
     private _clearViewportResizeTimeout;
-    private _applyMobilePopoverPosition;
     private _isTriggerVisibleInViewport;
-    private _setOverlayPaneStyles;
     private _setupPopoverHover;
     private _hidePopover;
     private _clearHideTimeout;
@@ -117,7 +113,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     readonly zHideDelay: _angular_core.InputSignal<number>;
     readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOffset: _angular_core.InputSignal<number>;
-    readonly zPopoverWidth: _angular_core.InputSignal<number | "trigger" | "auto">;
+    readonly zPopoverWidth: _angular_core.InputSignal<number | "auto" | "trigger">;
     readonly zTriggerRef: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | null>;
     readonly zManualClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOutsideClickClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
@@ -132,8 +128,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     readonly zPositionChange: _angular_core.OutputEmitterRef<ZPopoverPosition>;
     readonly zOutsideClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private readonly _trigger;
-    private readonly _overlay;
-    private readonly _overlayPositionBuilder;
+    private readonly _overlayService;
     private readonly _elementRef;
     private readonly _renderer;
     private readonly _destroyRef;
@@ -145,7 +140,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     private _componentRef;
     private _delaySubject;
     private _listenerCleanups;
-    private _positionSubscription;
+    private _autoUpdateCleanup;
     private _scrollSubscription;
     private _viewportResizeSubscription;
     private _resizeObserver;
@@ -166,7 +161,6 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     isOpen(): boolean;
     updatePosition(): void;
     private _createOverlay;
-    private _createScrollStrategy;
     private _getWidthConfig;
     private _getTriggerElement;
     private _disposeOverlay;
@@ -179,19 +173,17 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     private _showPopover;
     private _isNestedPopoverTarget;
     private _setupResizeObserver;
-    private _updatePositionAfterContentSettles;
     private _schedulePositionUpdate;
     private _scheduleSettledPositionUpdate;
     private _cancelScheduledPositionUpdate;
     private _updatePositionNow;
+    private _applyPosition;
     private _markViewportSettling;
     private _shouldDeferForMobileKeyboard;
     private _shouldSkipMobileKeyboardUpdate;
     private _isMobileOverlayTextInputFocused;
     private _clearViewportResizeTimeout;
-    private _applyMobilePopoverPosition;
     private _isTriggerVisibleInViewport;
-    private _setOverlayPaneStyles;
     private _setupPopoverHover;
     private _hidePopover;
     private _clearHideTimeout;

package/types/shival99-z-ui-components-z-qrcode.d.ts

@@ -17,7 +17,7 @@ declare class ZQrCodeComponent {
     readonly zLogo: _angular_core.InputSignal<string>;
     readonly zLogoSize: _angular_core.InputSignal<number>;
     readonly zLogoBgColor: _angular_core.InputSignal<string>;
-    readonly zLogoBgShape: _angular_core.InputSignal<"square" | "circle" | "none">;
+    readonly zLogoBgShape: _angular_core.InputSignal<"circle" | "square" | "none">;
     readonly zLogoPadding: _angular_core.InputSignal<number>;
     readonly zFgColor: _angular_core.InputSignal<string>;
     readonly zBgColor: _angular_core.InputSignal<string>;

package/types/shival99-z-ui-components-z-select.d.ts

@@ -331,7 +331,7 @@ declare class ZTagClassesPipe implements PipeTransform {
 
 declare const zSelectVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
+    zStatus?: "default" | "error" | "disabled" | "readonly" | "open" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zSelectTagVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;

package/types/shival99-z-ui-components-z-skeleton.d.ts

@@ -25,6 +25,8 @@ declare class ZSkeletonComponent implements AfterViewInit {
     private readonly _calculatedRows;
     ngAfterViewInit(): void;
     protected readonly containerClass: _angular_core.Signal<string>;
+    protected readonly hostDisplay: _angular_core.Signal<"inline-block" | "block">;
+    protected readonly hostWidth: _angular_core.Signal<string | undefined>;
     protected readonly hostHeight: _angular_core.Signal<string | undefined>;
     protected readonly skeletonClasses: _angular_core.Signal<string>;
     protected readonly circleStyles: _angular_core.Signal<{

package/types/shival99-z-ui-components-z-table.d.ts

@@ -6,7 +6,6 @@ import { ZInputAlign, ZInputSize } from '@shival99/z-ui/components/z-input';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, Type, AfterViewInit, ElementRef, OnInit } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { ConnectedPosition } from '@angular/cdk/overlay';
 import { ZPopoverPosition, ZPopoverTrigger, ZPopoverControl, ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
 import { ClassValue } from 'clsx';
 import { NgScrollbar } from 'ngx-scrollbar';
@@ -1120,6 +1119,8 @@ declare class ZTableComponent<T> implements AfterViewInit {
     private readonly _document;
     private readonly _zExcel;
     private readonly _zTranslate;
+    private readonly _overlayService;
+    private readonly _viewContainerRef;
     /** Prevents recursive scroll sync between thead/tbody/tfoot */
     private readonly _isSyncingScroll;
     private _lastSyncedScrollLeft;
@@ -1134,6 +1135,7 @@ declare class ZTableComponent<T> implements AfterViewInit {
     private _filterEmitDebounceTimeout;
     /** Keeps the bulk bar mounted long enough for its exit animation */
     private _bulkBarTimer;
+    private _bulkBarOverlayRef;
     private _contentRowMenuOutsideTimer;
     private _contentRowMenuOutsideCleanup;
     private _cellInteractionOutsideCleanup;
@@ -1242,6 +1244,7 @@ declare class ZTableComponent<T> implements AfterViewInit {
     protected readonly bulkBarConfig: _angular_core.WritableSignal<ZTableBulkActionOptions<T> | null>;
     protected readonly bulkBarContext: _angular_core.WritableSignal<ZTableBulkActionContext<T> | null>;
     protected readonly bulkBarItems: _angular_core.WritableSignal<ZTableBulkActionRenderItem<T>[]>;
+    protected readonly bulkBarTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /** True when table body is scrolled away from left edge (shows left pin shadow) */
     protected readonly hasScrollLeft: _angular_core.WritableSignal<boolean>;
     /** True when table has right-pinned columns and body isn't scrolled to the end */
@@ -1854,7 +1857,6 @@ declare class ZTableComponent<T> implements AfterViewInit {
     protected readonly bulkActionConfig: _angular_core.Signal<ZTableBulkActionOptions<T> | null>;
     protected readonly bulkActionItems: _angular_core.Signal<ZTableBulkActionRenderItem<T>[]>;
     protected readonly showBulkBar: _angular_core.Signal<boolean>;
-    protected readonly bulkBarPositions: ConnectedPosition[];
     private readonly _bulkBarExitDuration;
     /** Stable identity key per virtual index (row/group id, not array index) — prevents height jitter on fast scroll. */
     private readonly _virtualItemKeys;
@@ -1922,6 +1924,8 @@ declare class ZTableComponent<T> implements AfterViewInit {
     private _getExcelColumnHeader;
     private _getExcelColumnHeaderAlign;
     private _clearBulkBarTimer;
+    private _openBulkBarOverlay;
+    private _disposeBulkBarOverlay;
     private _clearContentRowMenuOutsideListener;
     /**
      * Wraps state mutations with a debounced processing indicator.
@@ -2163,7 +2167,7 @@ declare class ZTableFilterComponent<T> {
     protected readonly filterBadgeCount: _angular_core.Signal<number>;
     protected readonly hasFilterValue: _angular_core.Signal<boolean>;
     protected readonly isActive: _angular_core.Signal<boolean>;
-    protected readonly draftSortValue: _angular_core.Signal<"none" | "asc" | "desc">;
+    protected readonly draftSortValue: _angular_core.Signal<"asc" | "desc" | "none">;
     protected readonly rangeMinValue: _angular_core.Signal<any>;
     protected readonly rangeMaxValue: _angular_core.Signal<any>;
     protected readonly dateValue: _angular_core.Signal<Date | null>;

package/types/shival99-z-ui-components-z-tabs.d.ts

@@ -13,11 +13,11 @@ declare class ZTabPanelDirective {
 }
 
 declare const zTabsVariants: (props?: ({
-    zType?: "line" | "soft" | "segment" | "segment-solid" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
+    zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
     zOrientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zTabItemVariants: (props?: ({
-    zType?: "line" | "soft" | "segment" | "segment-solid" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
+    zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
     zSize?: "xs" | "sm" | "default" | "lg" | null | undefined;
     zOrientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -30,7 +30,7 @@ interface ZTab {
     badge?: string | number;
     template?: TemplateRef<unknown>;
 }
-type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'vertical-sharp' | 'code-line';
+type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'pill-solid' | 'pill-blur' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'vertical-sharp' | 'code-line';
 type ZTabsSize = 'xs' | 'sm' | 'default' | 'lg';
 type ZTabsOrientation = 'horizontal' | 'vertical';
 type ZTabsContentFit = 'none' | 'screen';
@@ -60,6 +60,15 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     protected readonly loadedTabs: _angular_core.WritableSignal<Set<string>>;
     protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
     protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
+    protected readonly bouncingTab: _angular_core.WritableSignal<string | null>;
+    protected readonly isGlideType: _angular_core.Signal<boolean>;
+    protected readonly glideStyle: _angular_core.WritableSignal<{
+        transform: string;
+        width: string;
+        height: string;
+    } | null>;
+    protected readonly glideReady: _angular_core.WritableSignal<boolean>;
+    protected readonly glideSquashing: _angular_core.WritableSignal<boolean>;
     protected readonly panelRenderStates: _angular_core.Signal<Map<string, boolean>>;
     private _resizeObserver?;
     private readonly _cacheInstanceId;
@@ -79,6 +88,7 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     protected scrollLeft(): void;
     protected scrollRight(): void;
     protected onTabsScroll(): void;
+    private _updateGlideIndicator;
     private _setupResizeObserver;
     private _restoreActiveTabFromCache;
     private _saveActiveTabToCache;

package/types/shival99-z-ui-components-z-toast.d.ts

@@ -118,7 +118,7 @@ declare class ZToastCustomComponent {
 declare function provideZToast(config?: Partial<ZToasterConfig>): EnvironmentProviders;
 
 declare class ZToastService implements OnDestroy {
-    private readonly _overlay;
+    private readonly _overlayService;
     private readonly _injector;
     private readonly _platformId;
     private readonly _document;
@@ -143,6 +143,12 @@ declare class ZToastService implements OnDestroy {
     ngOnDestroy(): void;
     private _ensureToasterAttached;
     private _moveToTop;
+    /**
+     * Theo dõi cả hai container overlay (`.cdk-overlay-container` — z-command/z-gallery-preview/
+     * z-dynamic.service vẫn dùng CDK, và `.z-overlay-container` — tooltip/popover/modal/drawer dùng
+     * engine mới) để bật toast lên top layer mỗi khi có overlay khác vừa mở, giữ đúng hành vi
+     * "toast luôn nổi trên cùng" bất kể overlay đó thuộc engine nào.
+     */
     private _setupOverlayObserver;
     private _disconnectObserver;
     private _attachToaster;

package/types/shival99-z-ui-components-z-tooltip.d.ts

@@ -1,9 +1,11 @@
+import * as _shival99_z_ui_components_z_overlay from '@shival99/z-ui/components/z-overlay';
+import { ZOverlayPlacement } from '@shival99/z-ui/components/z-overlay';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, OnInit, OnDestroy } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
-type ZTooltipPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
+type ZTooltipPosition = ZOverlayPlacement;
 
 declare const zTooltipVariants: (props?: ({
     zType?: "default" | "dark" | "light" | "primary" | "success" | "warning" | "error" | "info" | null | undefined;
@@ -32,8 +34,8 @@ interface ZTooltipConfig {
 
 declare class ZTooltipDirective implements OnInit, OnDestroy {
     readonly zContent: _angular_core.InputSignal<ZTooltipContent>;
-    readonly zPosition: _angular_core.InputSignal<ZTooltipPosition>;
-    readonly zTooltipPosition: _angular_core.InputSignal<ZTooltipPosition | undefined>;
+    readonly zPosition: _angular_core.InputSignal<_shival99_z_ui_components_z_overlay.ZOverlayPlacement>;
+    readonly zTooltipPosition: _angular_core.InputSignal<_shival99_z_ui_components_z_overlay.ZOverlayPlacement | undefined>;
     readonly zTrigger: _angular_core.InputSignal<ZTooltipTrigger>;
     readonly zTooltipTrigger: _angular_core.InputSignal<ZTooltipTrigger | undefined>;
     readonly zType: _angular_core.InputSignal<"default" | "dark" | "light" | "primary" | "success" | "warning" | "error" | "info" | null | undefined>;
@@ -64,8 +66,7 @@ declare class ZTooltipDirective implements OnInit, OnDestroy {
     private readonly _offset;
     readonly zShow: _angular_core.OutputEmitterRef<void>;
     readonly zHide: _angular_core.OutputEmitterRef<void>;
-    private readonly _overlay;
-    private readonly _overlayPositionBuilder;
+    private readonly _overlayService;
     private readonly _elementRef;
     private readonly _renderer;
     private readonly _destroyRef;
@@ -75,7 +76,7 @@ declare class ZTooltipDirective implements OnInit, OnDestroy {
     private _componentRef;
     private _delaySubject;
     private _listenerCleanups;
-    private _positionSubscription;
+    private _autoUpdateCleanup;
     private _hideTimeout;
     private readonly _isVisible;
     constructor();
@@ -87,13 +88,14 @@ declare class ZTooltipDirective implements OnInit, OnDestroy {
     private _isFormControlValueTruncated;
     hide(): void;
     toggle(): void;
-    private _createOverlay;
+    private _getAnchorElement;
     private _disposeOverlay;
     private _setupDelayMechanism;
     private _setupTriggers;
     private _setupOutsideClick;
     private _delay;
     private _showTooltip;
+    private _applyPosition;
     private _setupTooltipHover;
     private _hideTooltip;
     private _clearHideTimeout;