@shival99/z-ui 2.3.1 → 2.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "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-drawer.d.ts

@@ -210,7 +210,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>;

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-gallery.d.ts

@@ -187,7 +187,7 @@ declare class ZGalleryComponent implements AfterViewInit {
     protected readonly headerControlHeight: _angular_core.Signal<"1.75rem" | "2rem" | "2.5rem" | "2.25rem">;
     protected readonly skeletonMediaHeight: _angular_core.Signal<"9rem" | "14rem" | "11rem">;
     protected readonly toggleIconSize: _angular_core.Signal<"14" | "16" | "20" | "18">;
-    protected readonly searchInputSize: _angular_core.Signal<"sm" | "default" | "lg">;
+    protected readonly searchInputSize: _angular_core.Signal<"default" | "sm" | "lg">;
     protected readonly filteredFiles: _angular_core.Signal<ZGalleryFile[]>;
     protected readonly selectedIds: _angular_core.Signal<Set<string>>;
     protected readonly isAllSelected: _angular_core.Signal<boolean>;
@@ -383,16 +383,16 @@ declare const isPreviewable: (file: ZGalleryFile) => boolean;
 declare const isImage: (file: ZGalleryFile) => boolean;
 
 declare const zGalleryVariants: (props?: ({
-    zSize?: "sm" | "default" | "lg" | null | undefined;
+    zSize?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryVariants = VariantProps<typeof zGalleryVariants>;
 declare const zGalleryItemVariants: (props?: ({
     zMode?: "grid" | "list" | null | undefined;
-    zSize?: "sm" | "default" | "lg" | null | undefined;
+    zSize?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryItemVariants = VariantProps<typeof zGalleryItemVariants>;
 declare const zGalleryFileIconVariants: (props?: ({
-    zSize?: "sm" | "default" | "lg" | null | undefined;
+    zSize?: "default" | "sm" | "lg" | null | undefined;
     zMode?: "grid" | "list" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryFileIconVariants = VariantProps<typeof zGalleryFileIconVariants>;

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

@@ -217,6 +217,10 @@ declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     private _originalNextSibling;
     private _backdropSubscription;
     private _closeTimeout;
+    private _contentRevealTimeout;
+    private _contentResizeObserver;
+    private _lastLoadingHeight;
+    private _wasContentLoading;
     protected readonly isLeaving: _angular_core.WritableSignal<boolean>;
     protected readonly hasScrollableContent: _angular_core.WritableSignal<boolean>;
     protected readonly isScrolledFromTop: _angular_core.WritableSignal<boolean>;
@@ -229,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>;
@@ -273,6 +276,8 @@ declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     private _openTemplateOverlay;
     private _closeWithAnimation;
     private _clearCloseTimeout;
+    private _revealContentWithAnimation;
+    private _clearContentRevealTimeout;
     private _disposeTemplateOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalComponent<any, any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZModalComponent<any, any>, "z-modal", ["zModal"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zBodyClass": { "alias": "zBodyClass"; "required": false; "isSignal": true; }; "zVisible": { "alias": "zVisible"; "required": false; "isSignal": true; }; "zTitle": { "alias": "zTitle"; "required": false; "isSignal": true; }; "zDescription": { "alias": "zDescription"; "required": false; "isSignal": true; }; "zWidth": { "alias": "zWidth"; "required": false; "isSignal": true; }; "zClosable": { "alias": "zClosable"; "required": false; "isSignal": true; }; "zMaskClosable": { "alias": "zMaskClosable"; "required": false; "isSignal": true; }; "zDisableShadow": { "alias": "zDisableShadow"; "required": false; "isSignal": true; }; "zHeaderBorder": { "alias": "zHeaderBorder"; "required": false; "isSignal": true; }; "zFooterBorder": { "alias": "zFooterBorder"; "required": false; "isSignal": true; }; "zHideHeader": { "alias": "zHideHeader"; "required": false; "isSignal": true; }; "zHideFooter": { "alias": "zHideFooter"; "required": false; "isSignal": true; }; "zOkText": { "alias": "zOkText"; "required": false; "isSignal": true; }; "zCancelText": { "alias": "zCancelText"; "required": false; "isSignal": true; }; "zOkDestructive": { "alias": "zOkDestructive"; "required": false; "isSignal": true; }; "zOkDisabled": { "alias": "zOkDisabled"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zContentLoading": { "alias": "zContentLoading"; "required": false; "isSignal": true; }; "zSkeletonRows": { "alias": "zSkeletonRows"; "required": false; "isSignal": true; }; "zOverlay": { "alias": "zOverlay"; "required": false; "isSignal": true; }; }, { "zOk": "zOk"; "zCancel": "zCancel"; "zAfterClose": "zAfterClose"; "zScrollbar": "zScrollbar"; "zVisible": "zVisibleChange"; }, ["customHeader", "customContent", "customFooter"], ["*"], true, never>;

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

@@ -39,6 +39,8 @@ 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 {
@@ -58,6 +60,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>;
@@ -128,18 +131,19 @@ 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.
- * 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.
+ * Giữ nguyên document flow bằng cách bù chiều rộng scrollbar ở body khi scrollbar biến mất.
+ * 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 { 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, Z_OVERLAY_SCROLLABLE_CLASS, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };
 export type { ZFloatingArrowOffsetConfig, ZFloatingPlacementConfig, ZFloatingPlacementResult, ZOverlayAnchoredConfig, ZOverlayGlobalConfig, ZOverlayPlacement, ZOverlaySide, ZOverlaySizeConfig };

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

@@ -113,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>;

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;

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" | "pill-solid" | "pill-blur" | "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" | "square" | "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" | "pill-solid" | "pill-blur" | "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" | "square" | "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' | 'pill-solid' | 'pill-blur' | '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' | 'square' | 'vertical-sharp' | 'code-line';
 type ZTabsSize = 'xs' | 'sm' | 'default' | 'lg';
 type ZTabsOrientation = 'horizontal' | 'vertical';
 type ZTabsContentFit = 'none' | 'screen';
@@ -50,6 +50,8 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly zLazy: _angular_core.InputSignal<boolean>;
     readonly zDestroyInactive: _angular_core.InputSignal<boolean>;
     readonly zTabsOnly: _angular_core.InputSignal<boolean>;
+    readonly zShowNavWrapper: _angular_core.InputSignal<boolean>;
+    readonly zNavFullWidth: _angular_core.InputSignal<boolean>;
     readonly zShowContentWrapper: _angular_core.InputSignal<boolean>;
     readonly zReloadable: _angular_core.InputSignal<boolean>;
     readonly zEmitOnActiveClick: _angular_core.InputSignal<boolean>;
@@ -95,7 +97,7 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     private _getCacheKey;
     protected scrollToActiveDropdownItem(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowNavWrapper": { "alias": "zShowNavWrapper"; "required": false; "isSignal": true; }; "zNavFullWidth": { "alias": "zNavFullWidth"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
 }
 
 export { ZTabPanelDirective, ZTabsComponent, zTabItemVariants, zTabsVariants };

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

@@ -57,7 +57,7 @@ declare class ZToastComponent {
     private readonly _themeService;
     private readonly _config;
     readonly class: _angular_core.InputSignal<ClassValue>;
-    readonly zVariant: _angular_core.InputSignal<"success" | "error" | "warning" | "info" | "default" | null | undefined>;
+    readonly zVariant: _angular_core.InputSignal<"success" | "info" | "warning" | "error" | "default" | null | undefined>;
     readonly zTheme: _angular_core.InputSignal<ZToastTheme | undefined>;
     readonly zPosition: _angular_core.InputSignal<ZToastPosition | undefined>;
     readonly zRichColors: _angular_core.InputSignal<boolean | undefined>;
@@ -159,7 +159,7 @@ declare class ZToastService implements OnDestroy {
 }
 
 declare const zToastVariants: (props?: ({
-    zVariant?: "success" | "error" | "warning" | "info" | "default" | null | undefined;
+    zVariant?: "success" | "info" | "warning" | "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZToastVariants = VariantProps<typeof zToastVariants>;
 

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

@@ -100,7 +100,7 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
     protected readonly hasError: _angular_core.Signal<boolean>;
     protected readonly showError: _angular_core.Signal<boolean>;
     protected readonly errorMessage: _angular_core.Signal<string>;
-    protected readonly currentStatus: _angular_core.Signal<"default" | "disabled" | "readonly" | "error" | "active">;
+    protected readonly currentStatus: _angular_core.Signal<"default" | "error" | "disabled" | "readonly" | "active">;
     protected readonly dropzoneClasses: _angular_core.Signal<string>;
     protected readonly acceptTypes: _angular_core.Signal<string>;
     protected readonly formatFileSize: (bytes: number) => string;
@@ -141,11 +141,11 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
 
 declare const zUploadDropzoneVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "disabled" | "readonly" | "error" | "active" | null | undefined;
+    zStatus?: "default" | "error" | "active" | "disabled" | "readonly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZUploadDropzoneVariants = VariantProps<typeof zUploadDropzoneVariants>;
 declare const zUploadFileItemVariants: (props?: ({
-    zStatus?: "error" | "pending" | "uploading" | "success" | null | undefined;
+    zStatus?: "pending" | "uploading" | "success" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZUploadFileItemVariants = VariantProps<typeof zUploadFileItemVariants>;