@shival99/z-ui 2.3.2 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 22, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
   "keywords": [
     "angular",

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

@@ -278,7 +278,7 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
 
 declare const zAutocompleteInputVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "error" | "disabled" | "readonly" | "open" | null | undefined;
+    zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZAutocompleteInputVariants = VariantProps<typeof zAutocompleteInputVariants>;
 declare const zAutocompleteOptionVariants: (props?: ({

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

@@ -431,16 +431,16 @@ declare class ZCalendarComponent implements OnInit, ControlValueAccessor {
 
 declare const zCalendarVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "disabled" | "readonly" | "open" | "error" | null | undefined;
+    zStatus?: "default" | "disabled" | "open" | "error" | "readonly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zCalendarDayVariants: (props?: ({
-    state?: "default" | "disabled" | "today" | "selected" | "inRange" | "rangeStart" | "rangeEnd" | "rangeSingle" | "otherMonth" | "hovered" | null | undefined;
+    state?: "default" | "today" | "selected" | "inRange" | "rangeStart" | "rangeEnd" | "rangeSingle" | "disabled" | "otherMonth" | "hovered" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zCalendarMonthVariants: (props?: ({
-    state?: "default" | "current" | "disabled" | "selected" | null | undefined;
+    state?: "default" | "selected" | "disabled" | "current" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zCalendarYearVariants: (props?: ({
-    state?: "default" | "current" | "disabled" | "selected" | null | undefined;
+    state?: "default" | "selected" | "disabled" | "current" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 export { ZCalendarComponent, zCalendarDayVariants, zCalendarMonthVariants, zCalendarVariants, zCalendarYearVariants };

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

@@ -179,6 +179,12 @@ declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
     set drawerRef(value: ZDrawerRef<T> | undefined);
     protected readonly contentOutlet: _angular_core.Signal<ViewContainerRef | undefined>;
     protected readonly mainContentRef: _angular_core.Signal<NgScrollbar | undefined>;
+    /**
+     * Nội dung được yêu cầu gắn khi `#contentOutlet` chưa tồn tại. `@defer` bọc outlet chỉ render sau
+     * khi Angular nạp xong dependency của block, nên lần mở drawer ĐẦU TIÊN outlet vẫn còn ở
+     * `@placeholder` — giữ lại đây rồi gắn ngay khi outlet xuất hiện. Xem `_attachPendingContent`.
+     */
+    private _pendingContent;
     protected readonly config: ZDrawerOptions<T, U>;
     private readonly _platformId;
     private readonly _host;
@@ -210,7 +216,6 @@ declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
     private readonly _resizedHeight;
     ngAfterViewChecked(): void;
     private _checkScrollState;
-    onContentWheel(event: WheelEvent): void;
     onContentScroll(event: Event): void;
     protected readonly effectiveTitle: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
     protected readonly effectiveDescription: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
@@ -252,6 +257,12 @@ declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
     getNativeElement(): HTMLElement;
     attachComponentPortal<C>(component: Type<C>, injector?: Injector): ComponentRef<C>;
     attachTemplatePortal<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C>;
+    /**
+     * Gắn nội dung đã bị hoãn ở `_pendingContent` ngay khi outlet có thật, và cập nhật
+     * `drawerRef.componentInstance` — thứ mà `ZDrawerService` không set được vì lúc nó gọi
+     * `attachComponentPortal` thì chưa có ref nào để trả về.
+     */
+    private _attachPendingContent;
     onOkClick(): void;
     onCloseClick(): void;
     onBackdropClick(): void;

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

@@ -328,7 +328,7 @@ declare const Z_EDITOR_DEFAULT_TOOLBAR: readonly ZEditorToolbarItem[];
 
 declare const zEditorVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "disabled" | "readonly" | "error" | null | undefined;
+    zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
     zPlaceholderMode?: "firstLine" | "everyLine" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZEditorVariants = VariantProps<typeof zEditorVariants>;

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

@@ -233,7 +233,6 @@ declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     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>;

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

@@ -39,11 +39,17 @@ interface ZOverlayGlobalConfig {
     backdropClass?: string;
     panelClass?: string;
     scrollLock?: boolean;
+    /** Lets free-form overlays own viewport scrolling when their content exceeds the viewport. */
+    scrollable?: boolean;
     size?: ZOverlaySizeConfig;
 }
 interface ZOverlayAnchoredConfig {
     panelClass?: string;
 }
+/** Một overlay toàn màn hình đang mở trong `ZOverlayStackService`. */
+interface ZOverlayStackEntry {
+    readonly hostElement: HTMLElement;
+}
 
 declare function computeZOverlayPlacement(config: ZFloatingPlacementConfig): Promise<ZFloatingPlacementResult>;
 /** Bọc lại `autoUpdate` của Floating UI — thay cho `scrollStrategies.reposition()` của CDK. */
@@ -58,6 +64,7 @@ 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";
+declare const Z_OVERLAY_SCROLLABLE_CLASS = "z-overlay-scrollable";
 /** 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>;
@@ -69,6 +76,30 @@ declare const Z_OVERLAY_FALLBACK_ORDER: Record<ZOverlayPlacement, ZOverlayPlacem
 /** 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[]>;
 
+/**
+ * Ngăn xếp các overlay toàn màn hình (modal/drawer/dynamic) đang mở, theo đúng thứ tự mở.
+ *
+ * Mỗi ref (ZModalRef/ZDrawerRef/ZDynamicRef) tự lắng nghe `keydown` ở tầng `document`, nên nếu
+ * không hỏi ngăn xếp thì MỘT lần Escape sẽ đóng dồn cả stack — modal-trong-modal hay modal mở từ
+ * trong drawer đều biến mất cùng lúc. Có ngăn xếp thì chỉ overlay trên cùng phản hồi Escape.
+ *
+ * Overlay neo theo trigger (tooltip/popover) không đăng ký ở đây — chúng có cơ chế đóng riêng.
+ */
+declare class ZOverlayStackService {
+    private readonly _stack;
+    register(entry: ZOverlayStackEntry): void;
+    unregister(entry: ZOverlayStackEntry): void;
+    /**
+     * `true` khi không còn overlay nào mở phía trên `entry`.
+     *
+     * Ngăn xếp rỗng cũng trả `true`: overlay vừa rời ngăn xếp (đang chạy animation thoát) vẫn được
+     * quyền tự xử lý, còn việc chặn đóng hai lần đã do `_isClosing` của từng ref đảm nhiệm.
+     */
+    isTopmost(entry: ZOverlayStackEntry): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayStackService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ZOverlayStackService>;
+}
+
 /**
  * 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).
@@ -80,9 +111,20 @@ declare class ZOverlayRef {
     private readonly _appRef;
     private readonly _envInjector;
     private readonly _onDispose?;
+    private readonly _stack?;
     private _componentRef;
     private _embeddedViewRef;
-    constructor(hostElement: HTMLElement, overlayElement: HTMLElement, backdropElement: HTMLElement | null, _appRef: ApplicationRef, _envInjector: EnvironmentInjector, _onDispose?: (() => void) | undefined);
+    constructor(hostElement: HTMLElement, overlayElement: HTMLElement, backdropElement: HTMLElement | null, _appRef: ApplicationRef, _envInjector: EnvironmentInjector, _onDispose?: (() => void) | undefined, _stack?: ZOverlayStackService | undefined);
+    /**
+     * `true` khi đây là overlay toàn màn hình trên cùng — dùng để chỉ overlay trên cùng phản hồi
+     * Escape. Overlay không tham gia ngăn xếp (tooltip/popover) luôn trả `true`, giữ nguyên hành vi cũ.
+     */
+    isTopmost(): boolean;
+    /**
+     * Rời ngăn xếp ngay khi bắt đầu đóng, trước cả animation thoát, để lần Escape tiếp theo nhắm
+     * đúng overlay bên dưới thay vì overlay đang biến mất.
+     */
+    markClosing(): void;
     hasAttached(): boolean;
     /**
      * `viewContainerRef`, khi được truyền, cho component tạo ra thừa hưởng injector/vị trí trong
@@ -115,6 +157,7 @@ declare class ZOverlayService {
     private readonly _envInjector;
     private readonly _document;
     private readonly _scrollLock;
+    private readonly _stack;
     private _container;
     createAnchored(config?: ZOverlayAnchoredConfig): ZOverlayRef;
     createGlobal(config: ZOverlayGlobalConfig): ZOverlayRef;
@@ -128,18 +171,35 @@ declare class 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.
- * Giữ nguyên document flow khi khoá để các overlay fixed không bị layout shift do scrollbar biến mất.
+ *
+ * Chống layout shift theo hai bước:
+ *
+ * 1. Nếu trang vốn đã dành chỗ cho scrollbar (`html` hẹp hơn `window.innerWidth`), khoá kèm
+ *    `scrollbar-gutter: stable` để chỗ đó KHÔNG bị nhả ra. Cách này giữ đúng chiều rộng layout
+ *    cho cả nội dung trong flow lẫn element `position: fixed` (backdrop, drawer, toast...),
+ *    nên không cần bù padding và không có gì dịch chuyển.
+ * 2. Nếu trình duyệt vẫn nhả chỗ đó (không hỗ trợ `scrollbar-gutter`), ĐO đúng hiệu số chiều
+ *    rộng của `<html>` trước/sau khi khoá rồi bù vào `padding-right` của body.
+ *
+ * Lưu ý: phải đo bằng `getBoundingClientRect()` của `<html>`, không dùng `documentElement.clientWidth`
+ * — với root element thuộc tính đó trả về kích thước viewport nên luôn cộng thêm chiều rộng scrollbar
+ * khi `overflow: hidden`, dẫn tới bù thừa và làm UI co lại đúng bằng chiều rộng scrollbar.
+ *
+ * Hiệu số còn được ghi ra biến CSS `--z-scroll-lock-gutter` (0px khi không nhả) để app bù thêm cho
+ * element `position: fixed` của riêng mình trong trường hợp 2.
+ *
  * Vị trí scroll vẫn được lưu để khôi phục nếu ứng dụng thay đổi scroll programmatically trong lúc khoá.
  */
 declare class ZScrollLockService {
     private readonly _document;
     private _lockCount;
     private _scrollPosition;
+    private _bodyPaddingRight;
     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 };
+export { ZOverlayRef, ZOverlayService, ZOverlayStackService, 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, Z_OVERLAY_SCROLLABLE_CLASS, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };
+export type { ZFloatingArrowOffsetConfig, ZFloatingPlacementConfig, ZFloatingPlacementResult, ZOverlayAnchoredConfig, ZOverlayGlobalConfig, ZOverlayPlacement, ZOverlaySide, ZOverlaySizeConfig, ZOverlayStackEntry };

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" | "error" | "disabled" | "readonly" | "open" | null | undefined;
+    zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zSelectTagVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;