@shival99/z-ui 1.2.21 → 1.2.22

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

@@ -264,8 +264,26 @@ class ZTableFilterComponent {
         if (columnDef.filterOptions && columnDef.filterOptions.length > 0) {
             return columnDef.filterOptions;
         }
-        const uniqueValues = Array.from(this.zColumn().getFacetedUniqueValues().keys()).sort().slice(0, 5000);
-        return uniqueValues.map(v => ({ label: String(v), value: String(v) }));
+        const facetedValues = this.zColumn().getFacetedUniqueValues();
+        if (facetedValues && facetedValues.size > 0) {
+            const uniqueValues = Array.from(facetedValues.keys()).sort().slice(0, 5000);
+            return uniqueValues.map(v => ({ label: String(v), value: String(v) }));
+        }
+        const table = this.zTable();
+        const column = this.zColumn();
+        const { rows } = table.getRowModel();
+        if (rows.length === 0) {
+            return [];
+        }
+        const uniqueValues = new Set();
+        for (const row of rows) {
+            const value = row.getValue(column.id);
+            if (value !== null && value !== undefined && value !== '') {
+                uniqueValues.add(String(value));
+            }
+        }
+        const sortedValues = Array.from(uniqueValues).sort();
+        return sortedValues.map(v => ({ label: String(v), value: String(v) }));
     }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
     ngOnDestroy() {
         if (this._debounceTimeout) {
@@ -348,6 +366,7 @@ class ZTableFilterComponent {
           zSize="sm"
           zAllowClear
           zValueType="date"
+          [zScrollClose]="true"
           [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
           [ngModel]="dateValue()"
           (ngModelChange)="onDateChange($event)"
@@ -360,6 +379,7 @@ class ZTableFilterComponent {
           zSize="sm"
           zAllowClear
           zValueType="date"
+          [zScrollClose]="true"
           [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
           [ngModel]="dateRangeValue()"
           (ngModelChange)="onDateRangeChange($event)"
@@ -371,8 +391,10 @@ class ZTableFilterComponent {
           zSize="sm"
           zAllowClear
           [zWrap]="false"
+          [zScrollClose]="true"
           [zOptions]="selectOptions()"
           [ngModel]="selectValue()"
+          [zMaxVisible]="30"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
@@ -384,8 +406,10 @@ class ZTableFilterComponent {
           zSize="sm"
           zAllowClear
           [zWrap]="false"
+          [zScrollClose]="true"
           [zOptions]="selectOptions()"
           [zMaxTagCount]="1"
+          [zMaxVisible]="30"
           [ngModel]="multiSelectValue()"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onMultiSelectChange($event)"
@@ -398,7 +422,9 @@ class ZTableFilterComponent {
           zSize="sm"
           [zOptions]="selectOptions()"
           [zWrap]="false"
+          [zScrollClose]="true"
           [zMaxTagCount]="1"
+          [zMaxVisible]="30"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           class="w-full min-w-0"
           [zAllowClear]="true"
@@ -429,7 +455,7 @@ class ZTableFilterComponent {
         />
       }
     }
-  `, 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 });
+  `, 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", "zMaxVisible", "zScrollClose", "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", "zScrollClose"], 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,
@@ -461,6 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zSize="sm"
           zAllowClear
           zValueType="date"
+          [zScrollClose]="true"
           [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
           [ngModel]="dateValue()"
           (ngModelChange)="onDateChange($event)"
@@ -473,6 +500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zSize="sm"
           zAllowClear
           zValueType="date"
+          [zScrollClose]="true"
           [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
           [ngModel]="dateRangeValue()"
           (ngModelChange)="onDateRangeChange($event)"
@@ -484,8 +512,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zSize="sm"
           zAllowClear
           [zWrap]="false"
+          [zScrollClose]="true"
           [zOptions]="selectOptions()"
           [ngModel]="selectValue()"
+          [zMaxVisible]="30"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
@@ -497,8 +527,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zSize="sm"
           zAllowClear
           [zWrap]="false"
+          [zScrollClose]="true"
           [zOptions]="selectOptions()"
           [zMaxTagCount]="1"
+          [zMaxVisible]="30"
           [ngModel]="multiSelectValue()"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onMultiSelectChange($event)"
@@ -511,7 +543,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zSize="sm"
           [zOptions]="selectOptions()"
           [zWrap]="false"
+          [zScrollClose]="true"
           [zMaxTagCount]="1"
+          [zMaxVisible]="30"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           class="w-full min-w-0"
           [zAllowClear]="true"
@@ -1029,6 +1063,91 @@ function columnConfigToColumnDef(config) {
             return filterSet.has(cellValue);
         };
     }
+    if (filterConfig?.type === 'date') {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue) {
+                return true;
+            }
+            const cellValue = row.getValue(columnId);
+            if (!cellValue) {
+                return false;
+            }
+            const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
+            const filterDate = filterValue instanceof Date ? filterValue : new Date(filterValue);
+            if (isNaN(cellDate.getTime()) || isNaN(filterDate.getTime())) {
+                return false;
+            }
+            return (cellDate.getFullYear() === filterDate.getFullYear() &&
+                cellDate.getMonth() === filterDate.getMonth() &&
+                cellDate.getDate() === filterDate.getDate());
+        };
+    }
+    if (filterConfig?.type === 'date-range') {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue || typeof filterValue !== 'object') {
+                return true;
+            }
+            const { start, end } = filterValue;
+            if (!start && !end) {
+                return true;
+            }
+            const cellValue = row.getValue(columnId);
+            if (!cellValue) {
+                return false;
+            }
+            const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
+            if (isNaN(cellDate.getTime())) {
+                return false;
+            }
+            // Normalize cell date to start of day for comparison
+            const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
+            if (start) {
+                const startDate = start instanceof Date ? start : new Date(start);
+                if (!isNaN(startDate.getTime())) {
+                    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+                    if (cellDateOnly < startDateOnly) {
+                        return false;
+                    }
+                }
+            }
+            if (end) {
+                const endDate = end instanceof Date ? end : new Date(end);
+                if (!isNaN(endDate.getTime())) {
+                    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+                    if (cellDateOnly > endDateOnly) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        };
+    }
+    if (filterConfig?.type === 'range') {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue || !Array.isArray(filterValue)) {
+                return true;
+            }
+            const [min, max] = filterValue;
+            if (min === undefined && max === undefined) {
+                return true;
+            }
+            const cellValue = row.getValue(columnId);
+            if (cellValue === null || cellValue === undefined) {
+                return false;
+            }
+            const numValue = typeof cellValue === 'number' ? cellValue : Number(cellValue);
+            if (isNaN(numValue)) {
+                return false;
+            }
+            if (min !== undefined && numValue < min) {
+                return false;
+            }
+            if (max !== undefined && numValue > max) {
+                return false;
+            }
+            return true;
+        };
+    }
     if (config.columns && config.columns.length > 0) {
         columnDef.columns = config.columns.map(subConfig => columnConfigToColumnDef(subConfig));
     }