@shival99/z-ui 1.9.20 → 1.9.22

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

@@ -4,7 +4,7 @@ import { TemplateRef, Signal, OnInit, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ZPopoverPosition, ZPopoverControl } from '@shival99/z-ui/components/z-popover';
-import { ZEvent } from '@shival99/z-ui/utils';
+import { ZAsyncOptionsConfig, ZEvent } from '@shival99/z-ui/utils';
 import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -22,20 +22,31 @@ interface ZAutocompleteOption<T = unknown> {
     description?: string;
     icon?: ZIcon;
 }
-interface ZAutocompleteConfig {
+interface ZAutocompleteConfig<T = unknown> {
+    /** Số ký tự tối thiểu trước khi bắt đầu search hoặc gọi async.load. */
     minLength: number;
+    /** Thời gian chờ sau khi người dùng ngừng nhập rồi mới phát zOnSearch/call async.load, tính bằng mili giây. */
     debounceTime: number;
+    /** Giới hạn số option hiển thị sau khi filter; đặt 0 để không giới hạn. */
     maxDisplayed: number;
+    /** Bật highlight phần text khớp với keyword trong label của option. */
     highlightMatch: boolean;
+    /** i18n key hoặc text hiển thị khi đã nhập keyword nhưng không có kết quả. */
     emptyMessage: string;
+    /** i18n key hoặc text hiển thị khi chưa có dữ liệu ban đầu. */
     noDataMessage: string;
+    /** Tự đóng dropdown sau khi chọn option. */
     closeOnSelect: boolean;
+    /** Chiều cao mặc định của một option, dùng cho virtual scroll và layout dropdown. */
     optionHeight: number;
+    /** Chiều cao tối đa của dropdown, tính bằng pixel. */
     dropdownMaxHeight: number;
-    /** Skip local filtering when using server-side search */
+    /** Bỏ filter local khi options đã được xử lý từ server qua zOnSearch. */
     serverSearch: boolean;
+    /** Config để component tự search, load-more, loading và append options. */
+    async?: ZAsyncOptionsConfig<ZAutocompleteOption<T>>;
 }
-declare const Z_AUTOCOMPLETE_DEFAULT_CONFIG: ZAutocompleteConfig;
+declare const Z_AUTOCOMPLETE_DEFAULT_CONFIG: Omit<ZAutocompleteConfig, 'async'>;
 type ZAutocompleteSize = 'sm' | 'default' | 'lg';
 type ZAutocompleteType = 'default' | 'address_bar';
 interface ZAutocompleteState {
@@ -90,7 +101,7 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
     protected readonly customOptionDirective: _angular_core.Signal<ZAutocompleteOptionDirective<any> | undefined>;
     readonly class: _angular_core.InputSignal<ClassValue>;
     readonly zOptions: _angular_core.InputSignal<ZAutocompleteOption<T>[]>;
-    readonly zConfig: _angular_core.InputSignal<Partial<ZAutocompleteConfig>>;
+    readonly zConfig: _angular_core.InputSignal<Partial<ZAutocompleteConfig<T>>>;
     readonly zSize: _angular_core.InputSignal<ZAutocompleteSize>;
     readonly zType: _angular_core.InputSignal<ZAutocompleteType>;
     readonly zLabel: _angular_core.InputSignal<string>;
@@ -135,6 +146,12 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
     private readonly _formControl;
     private readonly _popoverControl;
     private readonly _selectedOption;
+    private readonly _asyncOptions;
+    private readonly _asyncKeyword;
+    private readonly _asyncPage;
+    private readonly _asyncHasMore;
+    private readonly _asyncLoading;
+    private readonly _asyncLoadingMore;
     protected readonly uiState: _angular_core.WritableSignal<{
         isOpen: boolean;
         isFocused: boolean;
@@ -153,13 +170,20 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
     private _localLoadingTimeout;
     private _loadMoreObserver;
     private _virtualScrollListener;
+    private _asyncLoadSubscription;
+    private _asyncRequestId;
     private _lastFilteredOptionsLength;
     private _shouldScrollActiveOption;
     /** Stores input value before keyboard navigation for ESC revert */
     private _valueBeforeNavigation;
     protected readonly virtualizer: _shival99_angular_virtual.AngularVirtualizer<HTMLDivElement, Element>;
     private readonly _measureVirtualItems;
-    protected readonly config: _angular_core.Signal<ZAutocompleteConfig>;
+    protected readonly config: _angular_core.Signal<ZAutocompleteConfig<T>>;
+    protected readonly hasAsyncOptions: _angular_core.Signal<boolean>;
+    protected readonly sourceOptions: _angular_core.Signal<ZAutocompleteOption<T>[]>;
+    protected readonly isLoading: _angular_core.Signal<boolean>;
+    protected readonly isLoadingMore: _angular_core.Signal<boolean>;
+    protected readonly canLoadMore: _angular_core.Signal<boolean>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly isReadonly: _angular_core.Signal<boolean>;
     protected readonly isInteractionDisabled: _angular_core.Signal<boolean>;
@@ -226,11 +250,18 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
     private _openPanel;
     private _closePanel;
     private _setupDebounce;
+    private _loadAsyncOptionsOnFocus;
+    private _loadAsyncOptions;
+    private _handleAsyncOptionsError;
+    private _getAsyncOptionsScrollTop;
+    private _restoreAsyncOptionsScrollTop;
+    private _resetAsyncOptions;
     private _clearLocalLoadingTimer;
     private _setupLoadMoreObserver;
     private _cleanupLoadMoreObserver;
     private _setupVirtualScrollLoadMore;
     private _cleanupVirtualScrollListener;
+    private _handleLoadMore;
     private _emitControl;
     private _getOptionKey;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZAutocompleteComponent<any>, never>;

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

@@ -231,7 +231,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" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | null | undefined>;
+    protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "default" | "primary" | "secondary" | "destructive" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "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>;

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

@@ -4,7 +4,7 @@ import { TemplateRef, Signal, OnInit, ElementRef, PipeTransform } from '@angular
 import { ControlValueAccessor } from '@angular/forms';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ZPopoverPosition, ZPopoverControl } from '@shival99/z-ui/components/z-popover';
-import { ZEvent } from '@shival99/z-ui/utils';
+import { ZAsyncOptionsConfig, ZEvent } from '@shival99/z-ui/utils';
 import { ClassValue } from 'clsx';
 import { Observable } from 'rxjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -57,6 +57,15 @@ interface ZSelectOption<T = unknown> {
     group?: string;
     icon?: string;
 }
+interface ZSelectConfig<T = unknown> {
+    /** Số ký tự tối thiểu trước khi gọi async.load khi người dùng search. */
+    minLength: number;
+    /** Debounce search tính bằng mili giây, ưu tiên hơn zDebounce khi được truyền trong zConfig. */
+    debounceTime: number;
+    /** Config để component tự search, load-more, loading và append options. */
+    async?: ZAsyncOptionsConfig<ZSelectOption<T>>;
+}
+declare const Z_SELECT_DEFAULT_CONFIG: Omit<ZSelectConfig, 'async'>;
 interface ZSelectAsyncValidator<T = unknown> {
     error: string;
     message: string;
@@ -132,6 +141,7 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     readonly zVirtualScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zShowAction: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOptions: _angular_core.InputSignal<ZSelectOption<T>[]>;
+    readonly zConfig: _angular_core.InputSignal<Partial<ZSelectConfig<T>>>;
     readonly zTranslateLabels: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zKey: _angular_core.InputSignal<string>;
     readonly zSearchServer: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
@@ -156,6 +166,12 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     private readonly _allKnownOptions;
     private readonly _asyncErrors;
     private readonly _customError;
+    private readonly _asyncOptions;
+    private readonly _asyncKeyword;
+    private readonly _asyncPage;
+    private readonly _asyncHasMore;
+    private readonly _asyncLoading;
+    private readonly _asyncLoadingMore;
     protected readonly uiState: _angular_core.WritableSignal<{
         isOpen: boolean;
         hasScrollShadow: boolean;
@@ -169,6 +185,13 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     protected readonly searchText: _angular_core.WritableSignal<string>;
     protected readonly dropdownWidth: _angular_core.WritableSignal<number>;
     protected readonly currentValue: _angular_core.Signal<T | T[] | null>;
+    protected readonly config: _angular_core.Signal<ZSelectConfig<T>>;
+    protected readonly hasAsyncOptions: _angular_core.Signal<boolean>;
+    protected readonly sourceOptions: _angular_core.Signal<ZSelectOption<T>[]>;
+    protected readonly isLoading: _angular_core.Signal<boolean>;
+    protected readonly isLoadingMore: _angular_core.Signal<boolean>;
+    protected readonly canLoadMore: _angular_core.Signal<boolean>;
+    protected readonly effectiveDebounceTime: _angular_core.Signal<number>;
     protected readonly virtualizer: _shival99_angular_virtual.AngularVirtualizer<HTMLDivElement, Element>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly isReadonly: _angular_core.Signal<boolean>;
@@ -185,6 +208,7 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     protected readonly isTagsMode: _angular_core.Signal<boolean>;
     protected readonly effectiveSelectedTemplate: _angular_core.Signal<TemplateRef<any> | null>;
     protected readonly effectiveOptionTemplate: _angular_core.Signal<TemplateRef<any> | null>;
+    protected readonly knownOptions: _angular_core.Signal<ZSelectOption<T>[]>;
     protected readonly shouldUseVirtualScroll: _angular_core.Signal<boolean>;
     protected readonly selectedOption: _angular_core.Signal<ZSelectOption<T> | null>;
     protected readonly selectedOptions: _angular_core.Signal<ZSelectOption<T>[]>;
@@ -210,6 +234,8 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     private readonly _asyncValidationSubject;
     private _loadMoreObserver;
     private _virtualScrollListener;
+    private _asyncLoadSubscription;
+    private _asyncRequestId;
     private _asyncValidationAbortController;
     private _onChange;
     private _onTouched;
@@ -243,16 +269,23 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
     protected toggleSelectAllAction(): void;
     protected trackByValue: (_index: number, option: ZSelectOption<T>) => unknown;
     private _emitControl;
+    private _loadAsyncOptionsOnFocus;
+    private _loadAsyncOptions;
+    private _handleAsyncOptionsError;
+    private _getAsyncOptionsScrollTop;
+    private _restoreAsyncOptionsScrollTop;
+    private _resetAsyncOptions;
     private _setupLoadMoreObserver;
     private _cleanupLoadMoreObserver;
     private _setupVirtualScrollLoadMore;
     private _cleanupVirtualScrollListener;
+    private _handleLoadMore;
     private _getValidationErrors;
     private _runAsyncValidation;
     private _cancelAsyncValidation;
     private _triggerAsyncValidation;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZSelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZSelectComponent<any>, "z-select", ["zSelect"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zLabelClass": { "alias": "zLabelClass"; "required": false; "isSignal": true; }; "zPlaceholder": { "alias": "zPlaceholder"; "required": false; "isSignal": true; }; "zRequired": { "alias": "zRequired"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zReadonly": { "alias": "zReadonly"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zPrefix": { "alias": "zPrefix"; "required": false; "isSignal": true; }; "zAllowClear": { "alias": "zAllowClear"; "required": false; "isSignal": true; }; "zWrap": { "alias": "zWrap"; "required": false; "isSignal": true; }; "zShowSearch": { "alias": "zShowSearch"; "required": false; "isSignal": true; }; "zPlaceholderSearch": { "alias": "zPlaceholderSearch"; "required": false; "isSignal": true; }; "zDebounce": { "alias": "zDebounce"; "required": false; "isSignal": true; }; "zNotFoundText": { "alias": "zNotFoundText"; "required": false; "isSignal": true; }; "zEmptyText": { "alias": "zEmptyText"; "required": false; "isSignal": true; }; "zEmptyIcon": { "alias": "zEmptyIcon"; "required": false; "isSignal": true; }; "zMaxTagCount": { "alias": "zMaxTagCount"; "required": false; "isSignal": true; }; "zDropdownMaxHeight": { "alias": "zDropdownMaxHeight"; "required": false; "isSignal": true; }; "zOptionHeight": { "alias": "zOptionHeight"; "required": false; "isSignal": true; }; "zVirtualScroll": { "alias": "zVirtualScroll"; "required": false; "isSignal": true; }; "zShowAction": { "alias": "zShowAction"; "required": false; "isSignal": true; }; "zOptions": { "alias": "zOptions"; "required": false; "isSignal": true; }; "zTranslateLabels": { "alias": "zTranslateLabels"; "required": false; "isSignal": true; }; "zKey": { "alias": "zKey"; "required": false; "isSignal": true; }; "zSearchServer": { "alias": "zSearchServer"; "required": false; "isSignal": true; }; "zLoadingMore": { "alias": "zLoadingMore"; "required": false; "isSignal": true; }; "zEnableLoadMore": { "alias": "zEnableLoadMore"; "required": false; "isSignal": true; }; "zScrollDistance": { "alias": "zScrollDistance"; "required": false; "isSignal": true; }; "zMaxVisible": { "alias": "zMaxVisible"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zSelectedTemplate": { "alias": "zSelectedTemplate"; "required": false; "isSignal": true; }; "zOptionTemplate": { "alias": "zOptionTemplate"; "required": false; "isSignal": true; }; "zActionTemplate": { "alias": "zActionTemplate"; "required": false; "isSignal": true; }; "zAsyncValidators": { "alias": "zAsyncValidators"; "required": false; "isSignal": true; }; "zAsyncDebounce": { "alias": "zAsyncDebounce"; "required": false; "isSignal": true; }; "zAsyncValidateOn": { "alias": "zAsyncValidateOn"; "required": false; "isSignal": true; }; "zValidators": { "alias": "zValidators"; "required": false; "isSignal": true; }; }, { "zOnSearch": "zOnSearch"; "zOnLoadMore": "zOnLoadMore"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zControl": "zControl"; "zEvent": "zEvent"; }, ["customSelectedDirective", "customOptionDirective"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZSelectComponent<any>, "z-select", ["zSelect"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zLabelClass": { "alias": "zLabelClass"; "required": false; "isSignal": true; }; "zPlaceholder": { "alias": "zPlaceholder"; "required": false; "isSignal": true; }; "zRequired": { "alias": "zRequired"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zReadonly": { "alias": "zReadonly"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zPrefix": { "alias": "zPrefix"; "required": false; "isSignal": true; }; "zAllowClear": { "alias": "zAllowClear"; "required": false; "isSignal": true; }; "zWrap": { "alias": "zWrap"; "required": false; "isSignal": true; }; "zShowSearch": { "alias": "zShowSearch"; "required": false; "isSignal": true; }; "zPlaceholderSearch": { "alias": "zPlaceholderSearch"; "required": false; "isSignal": true; }; "zDebounce": { "alias": "zDebounce"; "required": false; "isSignal": true; }; "zNotFoundText": { "alias": "zNotFoundText"; "required": false; "isSignal": true; }; "zEmptyText": { "alias": "zEmptyText"; "required": false; "isSignal": true; }; "zEmptyIcon": { "alias": "zEmptyIcon"; "required": false; "isSignal": true; }; "zMaxTagCount": { "alias": "zMaxTagCount"; "required": false; "isSignal": true; }; "zDropdownMaxHeight": { "alias": "zDropdownMaxHeight"; "required": false; "isSignal": true; }; "zOptionHeight": { "alias": "zOptionHeight"; "required": false; "isSignal": true; }; "zVirtualScroll": { "alias": "zVirtualScroll"; "required": false; "isSignal": true; }; "zShowAction": { "alias": "zShowAction"; "required": false; "isSignal": true; }; "zOptions": { "alias": "zOptions"; "required": false; "isSignal": true; }; "zConfig": { "alias": "zConfig"; "required": false; "isSignal": true; }; "zTranslateLabels": { "alias": "zTranslateLabels"; "required": false; "isSignal": true; }; "zKey": { "alias": "zKey"; "required": false; "isSignal": true; }; "zSearchServer": { "alias": "zSearchServer"; "required": false; "isSignal": true; }; "zLoadingMore": { "alias": "zLoadingMore"; "required": false; "isSignal": true; }; "zEnableLoadMore": { "alias": "zEnableLoadMore"; "required": false; "isSignal": true; }; "zScrollDistance": { "alias": "zScrollDistance"; "required": false; "isSignal": true; }; "zMaxVisible": { "alias": "zMaxVisible"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zSelectedTemplate": { "alias": "zSelectedTemplate"; "required": false; "isSignal": true; }; "zOptionTemplate": { "alias": "zOptionTemplate"; "required": false; "isSignal": true; }; "zActionTemplate": { "alias": "zActionTemplate"; "required": false; "isSignal": true; }; "zAsyncValidators": { "alias": "zAsyncValidators"; "required": false; "isSignal": true; }; "zAsyncDebounce": { "alias": "zAsyncDebounce"; "required": false; "isSignal": true; }; "zAsyncValidateOn": { "alias": "zAsyncValidateOn"; "required": false; "isSignal": true; }; "zValidators": { "alias": "zValidators"; "required": false; "isSignal": true; }; }, { "zOnSearch": "zOnSearch"; "zOnLoadMore": "zOnLoadMore"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zControl": "zControl"; "zEvent": "zEvent"; }, ["customSelectedDirective", "customOptionDirective"], never, true, never>;
 }
 
 declare class ZIsSelectedPipe implements PipeTransform {
@@ -296,5 +329,5 @@ declare function filterOptions<T>(options: {
     disabled?: boolean;
 }[];
 
-export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
-export type { ZSelectAsyncValidateOn, ZSelectAsyncValidator, ZSelectControl, ZSelectLabelTemplate, ZSelectLoadMoreEvent, ZSelectMode, ZSelectOption, ZSelectOptionGroup, ZSelectOptionTemplate, ZSelectSize, ZSelectTagColor, ZSelectValidator };
+export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, Z_SELECT_DEFAULT_CONFIG, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
+export type { ZSelectAsyncValidateOn, ZSelectAsyncValidator, ZSelectConfig, ZSelectControl, ZSelectLabelTemplate, ZSelectLoadMoreEvent, ZSelectMode, ZSelectOption, ZSelectOptionGroup, ZSelectOptionTemplate, ZSelectSize, ZSelectTagColor, ZSelectValidator };

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

@@ -215,8 +215,15 @@ interface ZTableBodyColumnConfig<T> {
     contentClass?: string | ((info: CellContext<T, unknown>) => string);
     contentStyle?: Record<string, string> | ((info: CellContext<T, unknown>) => Record<string, string>);
     tooltip?: string | ZTooltipConfig | ((info: CellContext<T, unknown>) => string | ZTooltipConfig);
-    /** Action buttons rendered inside this cell */
-    actions?: ZTableActionColumnConfig<T>;
+    /**
+     * Action buttons rendered inside this cell.
+     *
+     * Preferred: pass an action array or `(row) => action[]` directly.
+     * Deprecated compatibility: `{ actions, maxVisible }` is still supported.
+     */
+    actions?: ZTableActionBodyConfig<T>;
+    /** Maximum visible action buttons before rendering the overflow menu. */
+    actionMaxVisible?: number;
     /** When true, clicking the cell emits a cellClick event */
     enabledClick?: boolean;
     /** Enable inline editing — true uses defaults, or pass full config */
@@ -363,17 +370,25 @@ interface ZTableActionItem<T = unknown> {
     hidden?: boolean | ((row: T) => boolean);
     divide?: 'before' | 'after';
 }
+type ZTableActionList<T = unknown> = ZTableActionItem<T>[] | ((row: T) => ZTableActionItem<T>[]);
 interface ZTableActionClickEvent<T = unknown> {
     key: string;
     row: T;
     rowId: string;
     action: ZTableActionItem<T>;
 }
+/**
+ * @deprecated Use `ZTableBodyColumnConfig.actions` directly with an action array
+ * or `(row) => action[]`, and set `actionMaxVisible` on the body config when needed.
+ */
 interface ZTableActionColumnConfig<T = unknown> {
-    /** Actions - static array or function that returns array based on row data */
-    actions: ZTableActionItem<T>[] | ((row: T) => ZTableActionItem<T>[]);
+    /**
+     * @deprecated Put the action array/function directly in `body.actions` instead.
+     */
+    actions: ZTableActionList<T>;
     maxVisible?: number;
 }
+type ZTableActionBodyConfig<T = unknown> = ZTableActionColumnConfig<T> | (ZTableActionList<T> & Partial<ZTableActionColumnConfig<T>>);
 /** All possible change event types — used as discriminant in ZTableChangeEvent */
 type ZTableChangeType = 'page' | 'sort' | 'filter' | 'search' | 'select' | 'expand' | 'rowSelect' | 'rowSelectAll' | 'rowExpand' | 'rowDrag' | 'cellClick' | 'cellEdit' | 'action';
 interface ZTableChangeEventBase {
@@ -894,6 +909,7 @@ declare class ZTableComponent<T> implements AfterViewInit {
     private _isColumnSortModeLocal;
     private _filterServerModeColumnFilters;
     private _filterServerModeSorting;
+    private _getActionColumnConfig;
     /**
      * Recursively finds a column config by ID with caching.
      * Cache is invalidated when the column array reference changes.
@@ -1103,4 +1119,4 @@ declare const findColumnConfig: <T>(columnId: string, columns: ZTableColumnConfi
 declare function columnConfigToColumnDef<T>(config: ZTableColumnConfig<T>): ColumnDef<T>;
 
 export { ZTableActionsComponent, ZTableComponent, ZTableEditCellComponent, ZTableFilterComponent, ZTableIconTextComponent, columnConfigToColumnDef, findColumnConfig, getBodyConfig, getFooterConfig, getHeaderConfig, isBodyConfig, isFooterConfig, isHeaderConfig };
-export type { ZTableActionClickEvent, ZTableActionColumnConfig, ZTableActionItem, ZTableCellEditChange, ZTableCellEditEvent, ZTableChangeEvent, ZTableColumn, ZTableColumnConfig, ZTableConfig, ZTableControl, ZTableEditCellChangeEvent, ZTableEditConfig, ZTableEditSize, ZTableEditType, ZTableFilterChangeEvent, ZTableFilterConfig, ZTableFilterType, ZTablePageChangeEvent, ZTablePaginationConfig, ZTableRowExpandEvent, ZTableRowSelectEvent, ZTableSavedConfig, ZTableSearchChangeEvent, ZTableSearchConfig, ZTableSortChangeEvent, ZTableSortConfig };
+export type { ZTableActionBodyConfig, ZTableActionClickEvent, ZTableActionColumnConfig, ZTableActionItem, ZTableActionList, ZTableCellEditChange, ZTableCellEditEvent, ZTableChangeEvent, ZTableColumn, ZTableColumnConfig, ZTableConfig, ZTableControl, ZTableEditCellChangeEvent, ZTableEditConfig, ZTableEditSize, ZTableEditType, ZTableFilterChangeEvent, ZTableFilterConfig, ZTableFilterType, ZTablePageChangeEvent, ZTablePaginationConfig, ZTableRowExpandEvent, ZTableRowSelectEvent, ZTableSavedConfig, ZTableSearchChangeEvent, ZTableSearchConfig, ZTableSortChangeEvent, ZTableSortConfig };

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

@@ -75,6 +75,16 @@ declare class ZTagsComponent implements AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTagsComponent, "z-tags", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTags": { "alias": "zTags"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zColor": { "alias": "zColor"; "required": false; "isSignal": true; }; "zClosable": { "alias": "zClosable"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zAddable": { "alias": "zAddable"; "required": false; "isSignal": true; }; "zAddText": { "alias": "zAddText"; "required": false; "isSignal": true; }; "zAddPlaceholder": { "alias": "zAddPlaceholder"; "required": false; "isSignal": true; }; "zRandomColor": { "alias": "zRandomColor"; "required": false; "isSignal": true; }; "zTagClass": { "alias": "zTagClass"; "required": false; "isSignal": true; }; "zLabelClass": { "alias": "zLabelClass"; "required": false; "isSignal": true; }; "zMaxWidth": { "alias": "zMaxWidth"; "required": false; "isSignal": true; }; }, { "zTagClose": "zTagClose"; "zTagAdd": "zTagAdd"; }, never, never, true, never>;
 }
 
+declare class ZTagsDirective {
+    readonly zSize: _angular_core.InputSignal<ZTagSize>;
+    readonly zColor: _angular_core.InputSignal<ZTagColor>;
+    readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly zClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTagsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZTagsDirective, "[z-tags]", ["zTags"], { "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zColor": { "alias": "zColor"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare const zTagsContainerVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -111,5 +121,5 @@ declare class ZTagStylePipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZTagStylePipe, "zTagStyle", true>;
 }
 
-export { ZTagClassesPipe, ZTagClosablePipe, ZTagStylePipe, ZTagsComponent, zTagCloseButtonVariants, zTagVariants, zTagsContainerVariants };
+export { ZTagClassesPipe, ZTagClosablePipe, ZTagStylePipe, ZTagsComponent, ZTagsDirective, zTagCloseButtonVariants, zTagVariants, zTagsContainerVariants };
 export type { ZTagCloseButtonVariants, ZTagColor, ZTagConfig, ZTagItem, ZTagRandomColorCache, ZTagSize, ZTagVariants, ZTagsContainerVariants };

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

@@ -83,6 +83,51 @@ declare const zMiniSearch$: <T>(data: T[], query: string, fields: (keyof T | str
 }) => Observable<T[]>;
 declare const zDetectBrowser: () => ZBrowserInfo;
 
+/** Thông tin truy vấn dùng cho autocomplete/select tự tải dữ liệu. */
+interface ZAsyncOptionsQuery {
+    /** Từ khóa hiện tại người dùng đang nhập. */
+    keyword: string;
+    /** Trang cần tải, bắt đầu từ 1. */
+    page: number;
+    /** Số lượng option mong muốn trên mỗi trang. */
+    pageSize: number;
+}
+/** Kết quả trả về từ hàm tải option bất đồng bộ. */
+interface ZAsyncOptionsResult<TOption> {
+    /** Danh sách option của trang hiện tại. */
+    items: TOption[];
+    /** Tổng số option trên server, dùng để component tự tính còn trang tiếp theo hay không. */
+    total?: number;
+    /** Đặt trực tiếp còn dữ liệu hay không khi API không trả total. */
+    hasMore?: boolean;
+}
+/** Kiểu dữ liệu hàm load có thể trả về: sync, Promise hoặc Observable. */
+type ZAsyncOptionsLoadResult<TOption> = ZAsyncOptionsResult<TOption> | Promise<ZAsyncOptionsResult<TOption>> | Observable<ZAsyncOptionsResult<TOption>>;
+/** Hàm tải option theo keyword/page/pageSize. */
+type ZAsyncOptionsLoadFn<TOption> = (query: ZAsyncOptionsQuery) => ZAsyncOptionsLoadResult<TOption>;
+/** Config giúp component tự xử lý search, phân trang, loading và chống trùng option. */
+interface ZAsyncOptionsConfig<TOption> {
+    /** Hàm gọi API hoặc nguồn dữ liệu bất đồng bộ. */
+    load: ZAsyncOptionsLoadFn<TOption>;
+    /** Số item mỗi lần tải, mặc định 20. */
+    pageSize?: number;
+    /** Tự tải trang đầu khi dropdown mở/focus, kể cả keyword rỗng. */
+    loadOnFocus?: boolean;
+    /** Khóa chống trùng khi append trang mới, ví dụ: option => option.value.code. */
+    dedupeBy?: (option: TOption) => unknown;
+}
+
+/** Số option mặc định mỗi lần component tự gọi load. */
+declare const Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE = 20;
+/** Chuẩn hóa kết quả sync/Promise/Observable về Observable để component xử lý thống nhất. */
+declare function zToAsyncOptionsObservable<TOption>(result: ZAsyncOptionsLoadResult<TOption>): Observable<ZAsyncOptionsResult<TOption>>;
+/** Gộp option mới vào danh sách cũ và loại bỏ phần tử trùng theo dedupeBy/default key. */
+declare function zMergeAsyncOptions<TOption>(current: TOption[], next: TOption[], dedupeBy?: ZAsyncOptionsConfig<TOption>['dedupeBy']): TOption[];
+/** Tính còn dữ liệu để load-more dựa trên hasMore, total hoặc độ dài page vừa trả về. */
+declare function zResolveAsyncOptionsHasMore<TOption>(result: ZAsyncOptionsResult<TOption>, pageSize: number, loadedCount: number): boolean;
+/** Lấy khóa ổn định cho option, hỗ trợ value là object và vẫn cho phép truyền dedupeBy riêng. */
+declare function zGetAsyncOptionKey<TOption>(option: TOption, dedupeBy?: ZAsyncOptionsConfig<TOption>['dedupeBy']): unknown;
+
 interface ZEchartsThemeOptions {
     /** Theme name (default: 'zTheme') */
     themeName?: string;
@@ -152,5 +197,5 @@ interface ZFormDebugOptions {
     logLevel?: 'error' | 'warn' | 'log';
 }
 
-export { VIETNAMESE_MAP, Z_DIVIDE_SCALE, Z_EXCEL_NUMBER_FORMAT_MAP, Z_LOCALE_MAP, zCapitalCase, zCleanObject, zConvertColorToArgb, zCreateEvent, zDebugFormInvalid, zDecodeUnicode, zDetectBrowser, zFormatNum, zFormatNumExcel, zMergeClasses, zMiniSearch, zMiniSearch$, zNoop, zNormalize, zRandomColor, zRegisterEchartsTheme, zRemoveVietnamese, zTransform, zTreeBuild, zTreeFlatten, zUuid, zValidForm };
-export type { ZBlurEventData, ZBrowserInfo, ZBrowserName, ZCapitalizeType, ZChangeEventData, ZClickEventData, ZCopyEventData, ZCutEventData, ZDblclickEventData, ZDeviceType, ZDragenterEventData, ZDragleaveEventData, ZDragoverEventData, ZDropEventData, ZEchartsThemeOptions, ZEmptyCheck, ZEvent, ZEventType, ZFocusEventData, ZFormDebugOptions, ZFormSubmitResult, ZFormatNumExcelOptions, ZFormatNumOptions, ZInputEventData, ZKeydownEventData, ZKeypressEventData, ZKeyupEventData, ZMousedownEventData, ZMouseenterEventData, ZMouseleaveEventData, ZMouseoutEventData, ZMouseoverEventData, ZMouseupEventData, ZNavigatorUABrandVersion, ZNavigatorUAData, ZNumberDivide, ZPasteEventData, ZTouchendEventData, ZTouchmoveEventData, ZTouchstartEventData };
+export { VIETNAMESE_MAP, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, Z_DIVIDE_SCALE, Z_EXCEL_NUMBER_FORMAT_MAP, Z_LOCALE_MAP, zCapitalCase, zCleanObject, zConvertColorToArgb, zCreateEvent, zDebugFormInvalid, zDecodeUnicode, zDetectBrowser, zFormatNum, zFormatNumExcel, zGetAsyncOptionKey, zMergeAsyncOptions, zMergeClasses, zMiniSearch, zMiniSearch$, zNoop, zNormalize, zRandomColor, zRegisterEchartsTheme, zRemoveVietnamese, zResolveAsyncOptionsHasMore, zToAsyncOptionsObservable, zTransform, zTreeBuild, zTreeFlatten, zUuid, zValidForm };
+export type { ZAsyncOptionsConfig, ZAsyncOptionsLoadFn, ZAsyncOptionsLoadResult, ZAsyncOptionsQuery, ZAsyncOptionsResult, ZBlurEventData, ZBrowserInfo, ZBrowserName, ZCapitalizeType, ZChangeEventData, ZClickEventData, ZCopyEventData, ZCutEventData, ZDblclickEventData, ZDeviceType, ZDragenterEventData, ZDragleaveEventData, ZDragoverEventData, ZDropEventData, ZEchartsThemeOptions, ZEmptyCheck, ZEvent, ZEventType, ZFocusEventData, ZFormDebugOptions, ZFormSubmitResult, ZFormatNumExcelOptions, ZFormatNumOptions, ZInputEventData, ZKeydownEventData, ZKeypressEventData, ZKeyupEventData, ZMousedownEventData, ZMouseenterEventData, ZMouseleaveEventData, ZMouseoutEventData, ZMouseoverEventData, ZMouseupEventData, ZNavigatorUABrandVersion, ZNavigatorUAData, ZNumberDivide, ZPasteEventData, ZTouchendEventData, ZTouchmoveEventData, ZTouchstartEventData };