@shival99/z-ui 1.2.11 → 1.2.12

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -243,9 +243,22 @@ class ZTableFilterComponent {
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "dateRangeValue" }] : []));
+    selectValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        return value;
+    }, ...(ngDevMode ? [{ debugName: "selectValue" }] : []));
+    multiSelectValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (Array.isArray(value)) {
+            return value;
+        }
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "multiSelectValue" }] : []));
     selectOptions = computed(() => {
         const columnDef = this._columnDef();
-        // Note: 'All' option is handled via zPlaceholder in template
         if (columnDef.filterOptions && columnDef.filterOptions.length > 0) {
             return columnDef.filterOptions;
         }
@@ -281,6 +294,13 @@ class ZTableFilterComponent {
         }
         this.zColumn().setFilterValue(value || undefined);
     }
+    onMultiSelectChange(value) {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            this.zColumn().setFilterValue(undefined);
+            return;
+        }
+        this.zColumn().setFilterValue(value);
+    }
     onDateChange(value) {
         this.zColumn().setFilterValue(value || undefined);
     }
@@ -347,13 +367,41 @@ class ZTableFilterComponent {
       @case ('select') {
         <z-select
           zSize="sm"
+          zAllowClear
+          [zWrap]="false"
           [zOptions]="selectOptions()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          [zPlaceholder]="'i18n_z_ui_table_filter_all' | translate"
+          [ngModel]="selectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
         />
       }
+      @case ('multi-select') {
+        <z-select
+          zMode="multiple"
+          zSize="sm"
+          zAllowClear
+          [zWrap]="false"
+          [zOptions]="selectOptions()"
+          [ngModel]="multiSelectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+          (ngModelChange)="onMultiSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('tags') {
+        <z-select
+          zMode="tags"
+          zSize="sm"
+          zAllowClear
+          [zWrap]="false"
+          [zOptions]="selectOptions()"
+          [ngModel]="multiSelectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+          (ngModelChange)="onMultiSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
       @case ('number') {
         <z-input
           zType="number"
@@ -377,15 +425,11 @@ class ZTableFilterComponent {
         />
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zLocale", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate"], outputs: ["zControl", "zChange"], exportAs: ["zCalendar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zLocale", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate"], outputs: ["zControl", "zChange"], exportAs: ["zCalendar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFilterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'z-table-filter',
-                    imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent, TranslatePipe],
-                    standalone: true,
-                    template: `
+            args: [{ selector: 'z-table-filter', imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent, TranslatePipe], standalone: true, template: `
     @switch (filterType()) {
       @case ('range') {
         <div class="flex gap-1">
@@ -434,13 +478,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       @case ('select') {
         <z-select
           zSize="sm"
+          zAllowClear
+          [zWrap]="false"
           [zOptions]="selectOptions()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          [zPlaceholder]="'i18n_z_ui_table_filter_all' | translate"
+          [ngModel]="selectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
         />
       }
+      @case ('multi-select') {
+        <z-select
+          zMode="multiple"
+          zSize="sm"
+          zAllowClear
+          [zWrap]="false"
+          [zOptions]="selectOptions()"
+          [ngModel]="multiSelectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+          (ngModelChange)="onMultiSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('tags') {
+        <z-select
+          zMode="tags"
+          zSize="sm"
+          zAllowClear
+          [zWrap]="false"
+          [zOptions]="selectOptions()"
+          [ngModel]="multiSelectValue()"
+          [zPlaceholder]="'i18n_z_ui_common_select' | translate"
+          (ngModelChange)="onMultiSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
       @case ('number') {
         <z-input
           zType="number"
@@ -464,12 +536,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         />
       }
     }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-table-filter block',
-                    },
-                }]
+                    }, styles: [":host{color:var(--foreground);font-weight:450;font-style:normal;text-decoration:none;text-transform:none;letter-spacing:normal}\n"] }]
         }], propDecorators: { zColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumn", required: true }] }], zTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTable", required: true }] }] } });
 
 const Z_DEFAULT_ROW_HEIGHT = 40;
@@ -881,6 +950,22 @@ function columnConfigToColumnDef(config) {
             return cellValue === filterValue;
         };
     }
+    if (filterConfig?.type === 'multi-select' || filterConfig?.type === 'tags') {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
+                return true;
+            }
+            const cellValue = row.getValue(columnId);
+            if (!Array.isArray(filterValue)) {
+                return cellValue === filterValue;
+            }
+            const filterSet = new Set(filterValue);
+            if (Array.isArray(cellValue)) {
+                return cellValue.some(cv => filterSet.has(cv));
+            }
+            return filterSet.has(cellValue);
+        };
+    }
     if (config.columns && config.columns.length > 0) {
         columnDef.columns = config.columns.map(subConfig => columnConfigToColumnDef(subConfig));
     }
@@ -1929,6 +2014,8 @@ class ZTableComponent {
     _columnPinVersion = signal(0, ...(ngDevMode ? [{ debugName: "_columnPinVersion" }] : []));
     _dataForceUpdate = signal(0, ...(ngDevMode ? [{ debugName: "_dataForceUpdate" }] : []));
     _configLoadedFromCache = signal(false, ...(ngDevMode ? [{ debugName: "_configLoadedFromCache" }] : []));
+    _columnConfigCache = new Map();
+    _lastColumnsRef = null;
     pinnedColumnIds = computed(() => {
         this._columnPinVersion();
         return this.columnOrder().filter(id => {
@@ -2146,23 +2233,37 @@ class ZTableComponent {
     virtualRowHeight = computed(() => this._virtualConfig().rowHeight ?? Z_DEFAULT_ROW_HEIGHT, ...(ngDevMode ? [{ debugName: "virtualRowHeight" }] : []));
     groupSize = computed(() => this._virtualConfig().groupSize ?? Z_DEFAULT_GROUP_SIZE, ...(ngDevMode ? [{ debugName: "groupSize" }] : []));
     groupHeight = computed(() => this.groupSize() * this.virtualRowHeight(), ...(ngDevMode ? [{ debugName: "groupHeight" }] : []));
+    _dynamicGroupsVersion = signal(0, ...(ngDevMode ? [{ debugName: "_dynamicGroupsVersion" }] : []));
     dynamicGroups = computed(() => {
         if (!this.isVirtual()) {
             return [];
         }
-        this.columnFilters();
-        this.globalFilter();
-        this.sorting();
-        this.pagination();
-        const rows = untracked(() => this.table.getRowModel().rows);
+        this._dynamicGroupsVersion();
+        const { rows } = this.table.getRowModel();
         const rowHeight = this.virtualRowHeight();
+        if (!this.hasBodyRowSpan()) {
+            const size = this.groupSize();
+            const groups = [];
+            const totalGroups = Math.ceil(rows.length / size);
+            for (let j = 0; j < totalGroups; j++) {
+                const startIndex = j * size;
+                const endIndex = Math.min(startIndex + size - 1, rows.length - 1);
+                groups.push({
+                    startIndex,
+                    endIndex,
+                    rowCount: endIndex - startIndex + 1,
+                    height: (endIndex - startIndex + 1) * rowHeight,
+                });
+            }
+            return groups;
+        }
         const groups = [];
         let i = 0;
         while (i < rows.length) {
             const startIndex = i;
             let maxRowSpan = 1;
             const row = rows[i];
-            const cells = untracked(() => row.getAllCells());
+            const cells = row.getAllCells();
             for (const cell of cells) {
                 const columnConfig = this._findColumnConfig(cell.column.id);
                 const rowSpanValue = getBodyRowSpan(columnConfig, cell.getContext());
@@ -2485,7 +2586,6 @@ class ZTableComponent {
             const cfg = this.zConfig();
             const initial = cfg.initialState;
             untracked(() => {
-                // Skip if config was already loaded from cache
                 if (this._configLoadedFromCache()) {
                     return;
                 }
@@ -2591,13 +2691,13 @@ class ZTableComponent {
                 }
                 return;
             }
-            setTimeout(() => {
+            queueMicrotask(() => {
                 const wrapperEl = this.tbodyWrapper()?.nativeElement;
                 if (wrapperEl) {
                     wrapperEl.scrollTop = 0;
                     wrapperEl.scrollLeft = this._savedScrollLeft();
                 }
-            }, 0);
+            });
         });
         explicitEffect([
             this.columnOrder,
@@ -2856,10 +2956,10 @@ class ZTableComponent {
                     pagination: this.pagination(),
                 },
             });
-            setTimeout(() => {
+            queueMicrotask(() => {
                 this._checkVerticalScroll();
                 this._checkHorizontalScroll();
-            }, 0);
+            });
         });
     }
     toggleHeaderFooterShadow() {
@@ -3088,8 +3188,16 @@ class ZTableComponent {
         }
     }
     _findColumnConfig(columnId) {
-        const findInColumns = (columns) => {
-            for (const col of columns) {
+        const { columns } = this.zConfig();
+        if (columns !== this._lastColumnsRef) {
+            this._columnConfigCache.clear();
+            this._lastColumnsRef = columns;
+        }
+        if (this._columnConfigCache.has(columnId)) {
+            return this._columnConfigCache.get(columnId);
+        }
+        const findInColumns = (cols) => {
+            for (const col of cols) {
                 if (col.id === columnId) {
                     return col;
                 }
@@ -3102,7 +3210,9 @@ class ZTableComponent {
             }
             return undefined;
         };
-        return findInColumns(this.zConfig().columns);
+        const result = findInColumns(columns);
+        this._columnConfigCache.set(columnId, result);
+        return result;
     }
     _filterVisibleColumns(columns) {
         return columns