@kris701/ez-ui 1.1.9 → 1.1.11

package/fesm2022/kris701-ez-ui.mjs

@@ -3246,30 +3246,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class EzUIFilterHelpers {
-    static textFilter(values, fn, column) {
+    static genericFilter(values, fn, column) {
         const filtered = [];
         for (const value of values) {
-            const asStr = value[column];
-            if (fn(asStr))
-                filtered.push(value);
+            const base = value[column];
+            if (Array.isArray(base)) {
+                for (let item of base) {
+                    const asGeneric = item;
+                    if (fn(asGeneric)) {
+                        filtered.push(value);
+                        break;
+                    }
+                }
+            }
+            else {
+                const asGeneric = base;
+                if (fn(asGeneric))
+                    filtered.push(value);
+            }
         }
         return filtered;
     }
     static dateFilter(values, fn, column) {
         const filtered = [];
         for (const value of values) {
-            const asDate = new Date(value[column]);
-            if (fn(asDate))
-                filtered.push(value);
-        }
-        return filtered;
-    }
-    static boolFilter(values, fn, column) {
-        const filtered = [];
-        for (const value of values) {
-            const asBoolean = value[column];
-            if (fn(asBoolean))
-                filtered.push(value);
+            const base = value[column];
+            if (Array.isArray(base)) {
+                for (let item of base) {
+                    const asDate = new Date(item);
+                    if (fn(asDate)) {
+                        filtered.push(value);
+                        break;
+                    }
+                }
+            }
+            else {
+                const asDate = new Date(base);
+                if (fn(asDate))
+                    filtered.push(value);
+            }
         }
         return filtered;
     }
@@ -3303,33 +3318,33 @@ class EzUITableFilterService {
         {
             key: 'str',
             action: 'con',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.includes(value), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i.includes(value), column)
         },
         {
             key: 'str',
             action: 'ncon',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => !i.includes(value), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => !i.includes(value), column)
         },
         {
             key: 'str',
             action: 'sta',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.startsWith(value), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i.startsWith(value), column)
         },
         {
             key: 'str',
             action: 'end',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.endsWith(value), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i.endsWith(value), column)
         },
         // Select filters
         {
             key: 'sel',
             action: 'con',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => value.includes(i), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => value.includes(i), column)
         },
         {
             key: 'sel',
             action: 'ncon',
-            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => !value.includes(i), column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => !value.includes(i), column)
         },
         // Date filters
         {
@@ -3354,7 +3369,7 @@ class EzUITableFilterService {
         {
             key: 'bol',
             action: 'true',
-            filter: (values, column, value) => EzUIFilterHelpers.boolFilter(values, (i) => i === value, column)
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i === value, column)
         },
     ];
     sort(values, sort) {
@@ -4122,11 +4137,28 @@ class EzUITableSelectFilter {
     filterVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
     table;
+    optionLabel = undefined;
+    optionValue = undefined;
     options = [];
     selected = [];
     filterType;
     filterTypes;
-    stringify = (item) => `${item.label}`;
+    stringifyOption = (item) => `${item.label}`;
+    stringifyValue = (value) => this.getOptionLabel(this.options.find((item) => this.getOptionValue(item) === value));
+    getOptionLabel(item) {
+        if (!item)
+            return "";
+        if (this.optionLabel == undefined || this.optionLabel == '')
+            return item;
+        return item[this.optionLabel];
+    }
+    getOptionValue(item) {
+        if (!item)
+            return "";
+        if (this.optionValue == undefined || this.optionValue == '')
+            return item;
+        return item[this.optionValue];
+    }
     constructor(table) {
         this.table = table;
         this.filterTypes = [
@@ -4181,7 +4213,7 @@ class EzUITableSelectFilter {
         this.filterApplied.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableSelectFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableSelectFilter, isStandalone: true, selector: "ezui-table-selectfilter", inputs: { column: "column", options: "options" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableSelectFilter, isStandalone: true, selector: "ezui-table-selectfilter", inputs: { column: "column", optionLabel: "optionLabel", optionValue: "optionValue", options: "options" }, ngImport: i0, template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -4215,7 +4247,7 @@ class EzUITableSelectFilter {
 						{{ filterType.label }}
 					<tui-data-list-wrapper
 							*tuiDropdown
-							[itemContent]="stringify | tuiStringifyContent"
+							[itemContent]="stringifyOption | tuiStringifyContent"
 							[items]="filterTypes"
 						/>
 					</button>
@@ -4227,20 +4259,20 @@ class EzUITableSelectFilter {
 						tuiButtonSelect
 						[(ngModel)]="selected"
 					>
-						{{selected.length === 1 ? selected[0] : 'Selected ' + selected.length}}
+						{{selected.length === 1 ? stringifyValue(selected[0]) : 'Selected ' + selected.length}}
 
 						<tui-data-list *tuiDropdown>
 							<tui-opt-group
 								label="Options"
 								tuiMultiSelectGroup
 							>
-								@for (option of options; track option) {
+								@for (option of options; track getOptionValue(option)) {
 									<button
 										tuiOption
 										type="button"
-										[value]="option"
+										[value]="getOptionValue(option)"
 									>
-										{{ option }}
+										{{ getOptionLabel(option) }}
 									</button>
 								}
 							</tui-opt-group>
@@ -4308,7 +4340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						{{ filterType.label }}
 					<tui-data-list-wrapper
 							*tuiDropdown
-							[itemContent]="stringify | tuiStringifyContent"
+							[itemContent]="stringifyOption | tuiStringifyContent"
 							[items]="filterTypes"
 						/>
 					</button>
@@ -4320,20 +4352,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiButtonSelect
 						[(ngModel)]="selected"
 					>
-						{{selected.length === 1 ? selected[0] : 'Selected ' + selected.length}}
+						{{selected.length === 1 ? stringifyValue(selected[0]) : 'Selected ' + selected.length}}
 
 						<tui-data-list *tuiDropdown>
 							<tui-opt-group
 								label="Options"
 								tuiMultiSelectGroup
 							>
-								@for (option of options; track option) {
+								@for (option of options; track getOptionValue(option)) {
 									<button
 										tuiOption
 										type="button"
-										[value]="option"
+										[value]="getOptionValue(option)"
 									>
-										{{ option }}
+										{{ getOptionLabel(option) }}
 									</button>
 								}
 							</tui-opt-group>
@@ -4366,6 +4398,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     `, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"] }]
         }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { column: [{
                 type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
             }], options: [{
                 type: Input
             }] } });