@shival99/z-ui 2.1.31 → 2.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.1.31",
+  "version": "2.1.33",
   "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 21, 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

@@ -108,6 +108,8 @@ declare class ZDrawerOptions<T, U> {
     readonly zContentLoading?: WritableSignal<boolean>;
     /** Number of skeleton rows to show when content is loading (default: 5 for left/right, 3 for top/bottom) */
     zSkeletonRows?: number;
+    /** Whether the drawer can be resized from its outer edge */
+    zExpand?: boolean;
 }
 
 declare class ZDrawerRef<T = any, R = any, U = any> {
@@ -165,6 +167,7 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     readonly zShape: _angular_core.InputSignal<ZDrawerShape>;
     readonly zContentLoading: _angular_core.InputSignal<boolean>;
     readonly zSkeletonRows: _angular_core.InputSignal<number | null>;
+    readonly zExpand: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly customHeader: _angular_core.Signal<ZDrawerHeaderDirective | undefined>;
     protected readonly customContent: _angular_core.Signal<ZDrawerContentDirective | undefined>;
     protected readonly customFooter: _angular_core.Signal<ZDrawerFooterDirective | undefined>;
@@ -182,11 +185,15 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     private readonly _zTranslate;
     private readonly _overlayContainerService;
     private readonly _zIndexService;
+    private readonly _indexDb;
     private _templateOverlayRef;
     private _originalParent;
     private _originalNextSibling;
     private _backdropSubscription;
     private _closeTimeout;
+    private _resizeCleanup;
+    private _resizeStorageKey;
+    protected readonly isResizing: _angular_core.WritableSignal<boolean>;
     protected readonly isLeaving: _angular_core.WritableSignal<boolean>;
     protected readonly hasScrollableContent: _angular_core.WritableSignal<boolean>;
     protected readonly isScrolledFromTop: _angular_core.WritableSignal<boolean>;
@@ -196,6 +203,8 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     protected readonly shouldRenderContent: _angular_core.Signal<boolean>;
     protected readonly isStringContent: _angular_core.Signal<boolean>;
     private _lastScrollHeight;
+    private readonly _resizedWidth;
+    private readonly _resizedHeight;
     ngAfterViewChecked(): void;
     private _checkScrollState;
     onContentScroll(event: Event): void;
@@ -220,6 +229,8 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     protected readonly effectiveContentLoading: _angular_core.Signal<boolean>;
     protected readonly effectiveSkeletonRows: _angular_core.Signal<number>;
     protected readonly effectivePlacement: _angular_core.Signal<ZDrawerPlacement>;
+    protected readonly effectiveExpand: _angular_core.Signal<boolean>;
+    protected readonly resizeIcon: _angular_core.Signal<"lucideGripVertical" | "lucideGripHorizontal">;
     protected readonly effectiveShadow: _angular_core.Signal<boolean>;
     protected readonly effectiveShape: _angular_core.Signal<ZDrawerShape>;
     protected readonly effectiveWidth: _angular_core.Signal<string | null>;
@@ -229,6 +240,8 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     protected readonly hostClasses: _angular_core.Signal<string>;
     constructor();
     ngOnDestroy(): void;
+    startResize(event: PointerEvent): void;
+    onHostPointerDown(event: PointerEvent): void;
     isDestroyed(): boolean;
     getNativeElement(): HTMLElement;
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
@@ -240,11 +253,14 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     close(): void;
     private _createOverlay;
     private _openTemplateOverlay;
+    private _getResizeKey;
+    private _restoreResize;
+    private _persistResize;
     private _closeWithAnimation;
     private _clearCloseTimeout;
     private _disposeTemplateOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZDrawerComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZDrawerComponent<any, any>, "z-drawer", ["zDrawer"], { "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; }; "zHeight": { "alias": "zHeight"; "required": false; "isSignal": true; }; "zPlacement": { "alias": "zPlacement"; "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; }; "zHideFooter": { "alias": "zHideFooter"; "required": false; "isSignal": true; }; "zHideHeader": { "alias": "zHideHeader"; "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; }; "zOverlay": { "alias": "zOverlay"; "required": false; "isSignal": true; }; "zShadow": { "alias": "zShadow"; "required": false; "isSignal": true; }; "zShape": { "alias": "zShape"; "required": false; "isSignal": true; }; "zContentLoading": { "alias": "zContentLoading"; "required": false; "isSignal": true; }; "zSkeletonRows": { "alias": "zSkeletonRows"; "required": false; "isSignal": true; }; }, { "zOnOk": "zOnOk"; "zOnCancel": "zOnCancel"; "zAfterClose": "zAfterClose"; "zScrollbar": "zScrollbar"; "zVisible": "zVisibleChange"; }, ["customHeader", "customContent", "customFooter"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZDrawerComponent<any, any>, "z-drawer", ["zDrawer"], { "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; }; "zHeight": { "alias": "zHeight"; "required": false; "isSignal": true; }; "zPlacement": { "alias": "zPlacement"; "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; }; "zHideFooter": { "alias": "zHideFooter"; "required": false; "isSignal": true; }; "zHideHeader": { "alias": "zHideHeader"; "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; }; "zOverlay": { "alias": "zOverlay"; "required": false; "isSignal": true; }; "zShadow": { "alias": "zShadow"; "required": false; "isSignal": true; }; "zShape": { "alias": "zShape"; "required": false; "isSignal": true; }; "zContentLoading": { "alias": "zContentLoading"; "required": false; "isSignal": true; }; "zSkeletonRows": { "alias": "zSkeletonRows"; "required": false; "isSignal": true; }; "zExpand": { "alias": "zExpand"; "required": false; "isSignal": true; }; }, { "zOnOk": "zOnOk"; "zOnCancel": "zOnCancel"; "zAfterClose": "zAfterClose"; "zScrollbar": "zScrollbar"; "zVisible": "zVisibleChange"; }, ["customHeader", "customContent", "customFooter"], ["*"], true, never>;
 }
 
 declare class ZDrawerService {

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

@@ -1488,6 +1488,8 @@ declare class ZTableComponent<T> implements AfterViewInit {
     private _updateVerticalScrollShadowState;
     hasRightPinnedColumns(): boolean;
     onTbodyScroll(event: Event): void;
+    /** Chặn wheel trực tiếp trên header; header chỉ nhận scrollLeft từ body. */
+    onTheadWheel(event: WheelEvent): void;
     private _syncScrollLeft;
     /**
      * @deprecated Header sort now lives in the column filter popover.
@@ -1692,7 +1694,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>;
@@ -1764,7 +1766,7 @@ declare class ZTableActionsComponent<T = unknown> {
     readonly zConfig: _angular_core.InputSignal<ZTableActionColumnConfig<T>>;
     readonly zRow: _angular_core.InputSignal<T>;
     readonly zRowId: _angular_core.InputSignal<string>;
-    readonly zDropdownButtonSize: _angular_core.InputSignal<"sm" | "default" | "lg" | "xs" | "xl" | null | undefined>;
+    readonly zDropdownButtonSize: _angular_core.InputSignal<"default" | "sm" | "lg" | "xs" | "xl" | null | undefined>;
     readonly zActionClick: _angular_core.OutputEmitterRef<ZTableActionClickEvent<T>>;
     protected readonly allActions: _angular_core.Signal<ZTableActionItem<T>[]>;
     protected readonly shouldShowAsButtons: _angular_core.Signal<boolean>;

package/types/shival99-z-ui-services.d.ts

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Signal, InjectionToken } from '@angular/core';
+import { Type, TemplateRef, ViewContainerRef, EventEmitter, ComponentRef, Signal, InjectionToken } from '@angular/core';
+import { PositionStrategy, ScrollStrategy, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ZFormatNumExcelOptions } from '@shival99/z-ui/utils';
 import { HttpHeaders, HttpContext, HttpParams, HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { TranslationObject, TranslateService } from '@ngx-translate/core';
-import { OverlayRef } from '@angular/cdk/overlay';
 
 interface ZCacheEntry<T = unknown> {
     data: T;
@@ -43,6 +43,107 @@ declare class ZCacheService {
     static ɵprov: i0.ɵɵInjectableDeclaration<ZCacheService>;
 }
 
+/** Content accepted by the dynamic overlay service. */
+type ZDynamicContent<T> = Type<T> | TemplateRef<T>;
+/** Template context supplied to a dynamic template. */
+interface ZDynamicTemplateContext<TData, TResult> {
+    /** Dynamic ref exposed as the implicit template value. */
+    $implicit: ZDynamicRef<unknown, TResult>;
+    /** Dynamic ref used to close or update the overlay from the template. */
+    dynamicRef: ZDynamicRef<unknown, TResult>;
+    /** Data passed to `open`. */
+    data: TData | undefined;
+}
+/** Options for opening a free-form CDK dynamic overlay. */
+interface ZDynamicOptions<TData = unknown> {
+    /** Data injected into a component or exposed in a template context. */
+    data?: TData;
+    /** View container used as the logical parent of the attached portal. */
+    viewContainerRef?: ViewContainerRef;
+    /** Whether the overlay renders a backdrop. Defaults to `true`. */
+    hasBackdrop?: boolean;
+    /** CSS class or classes applied to the backdrop. */
+    backdropClass?: string | string[];
+    /** CSS class or classes applied to the overlay pane. */
+    panelClass?: string | string[];
+    /** Custom position strategy. Defaults to a global overlay strategy. */
+    positionStrategy?: PositionStrategy;
+    /** Custom scroll strategy. Defaults to the CDK block strategy. */
+    scrollStrategy?: ScrollStrategy;
+    /** Close when the backdrop is clicked. Defaults to `true`. */
+    closeOnBackdropClick?: boolean;
+    /** Close when Escape is pressed. Defaults to `true`. */
+    closeOnEscape?: boolean;
+    /** Initial pane width passed to CDK. */
+    width?: OverlayConfig['width'];
+    /** Initial pane height passed to CDK. */
+    height?: OverlayConfig['height'];
+    /** Minimum pane width passed to CDK. */
+    minWidth?: OverlayConfig['minWidth'];
+    /** Maximum pane width passed to CDK. */
+    maxWidth?: OverlayConfig['maxWidth'];
+    /** Minimum pane height passed to CDK. */
+    minHeight?: OverlayConfig['minHeight'];
+    /** Maximum pane height passed to CDK. */
+    maxHeight?: OverlayConfig['maxHeight'];
+}
+/** Result type emitted when a dynamic overlay closes. */
+type ZDynamicResult<TResult> = TResult | undefined;
+
+/**
+ * Controls one free-form dynamic overlay instance.
+ *
+ * @template T Component instance type, when the overlay contains a component.
+ * @template TResult Value emitted after the overlay closes.
+ */
+declare class ZDynamicRef<T = unknown, TResult = unknown> {
+    private readonly _overlayRef;
+    private readonly _platformId;
+    private readonly _destroy$;
+    private _isClosing;
+    private _componentRef;
+    /** Component instance attached to the overlay, or `null` for template content. */
+    componentInstance: T | null;
+    /** Emits the close result once, then completes. */
+    readonly afterClose: EventEmitter<ZDynamicResult<TResult>>;
+    constructor(_overlayRef: OverlayRef | undefined, _platformId: object);
+    private _closeOnBackdropClick;
+    private _closeOnEscape;
+    /** Configures close triggers for the instance. */
+    setCloseBehavior(closeOnBackdropClick: boolean, closeOnEscape: boolean): void;
+    /** Returns whether this ref has already been closed. */
+    isClosed(): boolean;
+    /** Closes the overlay and emits the optional result exactly once. */
+    close(result?: TResult): void;
+    /** Updates the overlay position using its configured strategy. */
+    updatePosition(): void;
+    /** Updates the overlay pane dimensions. */
+    updateSize(width?: string, height?: string): void;
+    /** @internal Used by the service after attaching a component portal. */
+    attachComponentRef(componentRef: ComponentRef<T>): void;
+}
+
+/**
+ * Opens components and templates in a bare CDK overlay.
+ *
+ * @description The service supplies overlay lifecycle and positioning only. The
+ * mounted content owns its complete layout, including close controls and styling.
+ */
+declare class ZDynamicService {
+    private readonly _overlay;
+    private readonly _injector;
+    private readonly _platformId;
+    private readonly _zIndexService;
+    /** Alias for `open`, matching the create-style API used by modal and drawer services. */
+    create<T, TData = unknown, TResult = unknown>(content: ZDynamicContent<T>, options?: ZDynamicOptions<TData>): ZDynamicRef<T, TResult>;
+    /** Opens a component or template in a free-form CDK overlay. */
+    open<T, TData = unknown, TResult = unknown>(content: ZDynamicContent<T>, options?: ZDynamicOptions<TData>): ZDynamicRef<T, TResult>;
+    private _createOverlay;
+    private _isTemplate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ZDynamicService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ZDynamicService>;
+}
+
 type ZExcelAlign = 'left' | 'center' | 'right';
 interface ZExcelTableColumnConfig<T = unknown> {
     id: string;
@@ -589,6 +690,9 @@ declare function zBuildScopedCacheKey(baseKey: string): string;
 declare function zBuildScopedDbName(baseDbName: string): string;
 declare function zStripScopedCacheKey(key: string): string;
 
+/** Injection token for data passed to a dynamic component or template. */
+declare const Z_DYNAMIC_DATA: InjectionToken<unknown>;
+
 declare const Z_EXCEL_COLORS: {
     readonly 'green-50': "FFF0FDF4";
     readonly 'green-100': "FFDCFCE7";
@@ -667,5 +771,5 @@ interface ZTranslateI18nConfig {
 }
 declare const Z_LANG_CACHE_KEY = "Z_LANGUAGE";
 
-export { ZCacheService, ZExcelService, ZHttpAbstractService, ZIndexDbService, ZOverlayContainerService, ZOverlayZIndexService, ZSubjectService, ZThemeService, ZTranslateService, Z_DEFAULT_THEME, Z_EXCEL_BORDER_THIN, Z_EXCEL_CHAR_WIDTH_MAP, Z_EXCEL_COLORS, Z_EXCEL_DEFAULT_CONFIG, Z_EXCEL_FONT_MULTIPLIERS, Z_EXCEL_WIDTH_LIMITS, Z_HTTP_DEFAULT_CONFIG, Z_INDEXDB_BATCH_SIZE, Z_INDEXDB_DEFAULT_CONFIG, Z_INDEXDB_MAX_VERSION, Z_LANG_CACHE_KEY, Z_LANG_TO_LOCALE, Z_THEME_CONFIG, Z_THEME_CSS_MAP, Z_THEME_PREFERENCES_CACHE_KEY, zBuildScopedCacheKey, zBuildScopedDbName, zStripScopedCacheKey };
-export type { ZCacheConfig, ZCacheEntry, ZExcelAlign, ZExcelCell, ZExcelCellContext, ZExcelColumnConfig, ZExcelConfig, ZExcelDefaultConfig, ZExcelExportOptions, ZExcelExportResult, ZExcelFontConfig, ZExcelFromTableConfig, ZExcelHeaderColors, ZExcelHeaderContext, ZExcelSheetSource, ZExcelTableColumnConfig, ZExcelTableHeaderConfig, ZExcelToastHandler, ZHttpBaseOptions, ZHttpCacheEntry, ZHttpConfig, ZHttpContentType, ZHttpError, ZHttpNetworkCheck, ZHttpOptions, ZHttpParamsType, ZIndexDbConfig, ZIndexDbGetOptions, ZIndexDbSetOptions, ZIndexDbStoreConfig, ZTableToExcelColumn, ZThemeConfig, ZThemeName, ZThemePreferences, ZTranslateConfig, ZTranslateI18nConfig };
+export { ZCacheService, ZDynamicRef, ZDynamicService, ZExcelService, ZHttpAbstractService, ZIndexDbService, ZOverlayContainerService, ZOverlayZIndexService, ZSubjectService, ZThemeService, ZTranslateService, Z_DEFAULT_THEME, Z_DYNAMIC_DATA, Z_EXCEL_BORDER_THIN, Z_EXCEL_CHAR_WIDTH_MAP, Z_EXCEL_COLORS, Z_EXCEL_DEFAULT_CONFIG, Z_EXCEL_FONT_MULTIPLIERS, Z_EXCEL_WIDTH_LIMITS, Z_HTTP_DEFAULT_CONFIG, Z_INDEXDB_BATCH_SIZE, Z_INDEXDB_DEFAULT_CONFIG, Z_INDEXDB_MAX_VERSION, Z_LANG_CACHE_KEY, Z_LANG_TO_LOCALE, Z_THEME_CONFIG, Z_THEME_CSS_MAP, Z_THEME_PREFERENCES_CACHE_KEY, zBuildScopedCacheKey, zBuildScopedDbName, zStripScopedCacheKey };
+export type { ZCacheConfig, ZCacheEntry, ZDynamicContent, ZDynamicOptions, ZDynamicResult, ZDynamicTemplateContext, ZExcelAlign, ZExcelCell, ZExcelCellContext, ZExcelColumnConfig, ZExcelConfig, ZExcelDefaultConfig, ZExcelExportOptions, ZExcelExportResult, ZExcelFontConfig, ZExcelFromTableConfig, ZExcelHeaderColors, ZExcelHeaderContext, ZExcelSheetSource, ZExcelTableColumnConfig, ZExcelTableHeaderConfig, ZExcelToastHandler, ZHttpBaseOptions, ZHttpCacheEntry, ZHttpConfig, ZHttpContentType, ZHttpError, ZHttpNetworkCheck, ZHttpOptions, ZHttpParamsType, ZIndexDbConfig, ZIndexDbGetOptions, ZIndexDbSetOptions, ZIndexDbStoreConfig, ZTableToExcelColumn, ZThemeConfig, ZThemeName, ZThemePreferences, ZTranslateConfig, ZTranslateI18nConfig };