@kris701/ez-ui 1.1.8 → 1.1.10

package/fesm2022/kris701-ez-ui.mjs

@@ -1,20 +1,20 @@
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Output, Input, Component, ViewChild, ContentChild, Directive, inject } from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, ViewChild, ContentChild, Directive, inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i3$1 from '@taiga-ui/core';
+import { TuiIcon, TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiHint, TuiLoader, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
+import * as i4$1 from '@taiga-ui/kit';
+import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i3$3 from '@taiga-ui/addon-mobile';
 import { TuiDropdownSheet } from '@taiga-ui/addon-mobile';
 import { TuiDay, TuiTime } from '@taiga-ui/cdk/date-time';
-import * as i3$1 from '@taiga-ui/core';
-import { TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiIcon, TuiHint, TuiLoader, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
-import * as i4$1 from '@taiga-ui/kit';
-import { TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBlock, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i2 from '@taiga-ui/core/components/label';
 import * as i3 from '@taiga-ui/core/components/textfield';
 import * as i4 from '@taiga-ui/core/portals/dropdown';
 import * as i6 from '@taiga-ui/core/components/calendar';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
 import * as i7 from '@taiga-ui/cdk/directives/item';
@@ -28,6 +28,76 @@ import * as i1$1 from '@angular/common/http';
 import * as i3$4 from '@angular/router';
 import { RouterLink, NavigationEnd, RouterModule } from '@angular/router';
 
+class EzUIBooleanInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    value = false;
+    valueChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIBooleanInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIBooleanInput, isStandalone: true, selector: "ezui-booleaninput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+	    <label class="boolean-container" [tuiBlock]="size">
+			@if(icon && icon != ''){
+				<tui-icon [icon]="icon" />
+			}
+	        {{label}}
+			<div style="flex-grow:1"></div>
+	        <input
+	            size="s"
+	            tuiSwitch
+	            type="checkbox"
+				[disabled]="disabled"
+				[(ngModel)]="value"
+				(ngModelChange)="valueChange.emit(value)"
+	        />
+	    </label>
+    `, isInline: true, styles: [".boolean-container{display:flex;flex-direction:row;gap:10px;width:100%;background-color:var(--tui-background-neutral-1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiBlock, selector: "label[tuiBlock],input[tuiBlock]", inputs: ["tuiBlock"] }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIBooleanInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-booleaninput', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiBlock,
+                        TuiSwitch,
+                        TuiIcon
+                    ], template: `
+	    <label class="boolean-container" [tuiBlock]="size">
+			@if(icon && icon != ''){
+				<tui-icon [icon]="icon" />
+			}
+	        {{label}}
+			<div style="flex-grow:1"></div>
+	        <input
+	            size="s"
+	            tuiSwitch
+	            type="checkbox"
+				[disabled]="disabled"
+				[(ngModel)]="value"
+				(ngModelChange)="valueChange.emit(value)"
+	        />
+	    </label>
+    `, styles: [".boolean-container{display:flex;flex-direction:row;gap:10px;width:100%;background-color:var(--tui-background-neutral-1)}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class EzUIDateInput {
     icon = '';
     label = '';
@@ -3176,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;
     }
@@ -3233,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
         {
@@ -3284,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) {
@@ -4052,11 +4137,27 @@ 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}`;
+    stringify = (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 = [
@@ -4111,7 +4212,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()){
@@ -4164,13 +4265,13 @@ class EzUITableSelectFilter {
 								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>
@@ -4257,13 +4358,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 								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>
@@ -4296,6 +4397,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
             }] } });
@@ -5190,5 +5295,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map