@kris701/ez-ui 1.3.15 → 1.3.16

package/fesm2022/kris701-ez-ui.mjs

@@ -6047,6 +6047,7 @@ class EzUITableSelectFilter {
     selected = [];
     filterType;
     filterTypes;
+    appearanceMap = new Map();
     stringifyOption = (item) => `${item.label}`;
     stringifyValue = (value) => this.getOptionLabel(this.options.find((item) => this.getOptionValue(item) === value));
     getOptionLabel(item) {
@@ -6117,7 +6118,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", optionLabel: "optionLabel", optionValue: "optionValue", 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", appearanceMap: "appearanceMap" }, ngImport: i0, template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -6163,20 +6164,31 @@ class EzUITableSelectFilter {
 						tuiButtonSelect
 						[(ngModel)]="selected"
 					>
-						{{selected.length === 1 ? stringifyValue(selected[0]) : 'Selected ' + selected.length}}
+						@if(selected.length == 0){
+							<span style="opacity:0.7">No items selected</span>
+						}
+						@else {
+							@for(select of selected; track select){
+								@let appearance = appearanceMap.get(select);
+								<span tuiChip size="xs" [appearance]="appearance ? appearance : ''">{{ stringifyValue(select) }}</span>
+							}
+						}
 
-						<tui-data-list *tuiDropdown>
+						<tui-data-list *tuiDropdown style="min-width:20vw">
 							<tui-opt-group
 								label="Options"
 								tuiMultiSelectGroup
 							>
 								@for (option of options; track getOptionValue(option)) {
+									@let value = getOptionValue(option);
+									@let label = getOptionLabel(option);
+									@let appearance = appearanceMap.get(value);
 									<button
 										tuiOption
 										type="button"
-										[value]="getOptionValue(option)"
+										[value]="value"
 									>
-										{{ getOptionLabel(option) }}
+										<span tuiChip size="xs" [appearance]="appearance ? appearance : ''">{{ label }}</span>
 									</button>
 								}
 							</tui-opt-group>
@@ -6206,11 +6218,11 @@ class EzUITableSelectFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i4$1.TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i4$1.TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableSelectFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table-selectfilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiMultiSelect, TuiDataList], template: `
+            args: [{ selector: 'ezui-table-selectfilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiMultiSelect, TuiDataList, TuiChip], template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -6256,20 +6268,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiButtonSelect
 						[(ngModel)]="selected"
 					>
-						{{selected.length === 1 ? stringifyValue(selected[0]) : 'Selected ' + selected.length}}
+						@if(selected.length == 0){
+							<span style="opacity:0.7">No items selected</span>
+						}
+						@else {
+							@for(select of selected; track select){
+								@let appearance = appearanceMap.get(select);
+								<span tuiChip size="xs" [appearance]="appearance ? appearance : ''">{{ stringifyValue(select) }}</span>
+							}
+						}
 
-						<tui-data-list *tuiDropdown>
+						<tui-data-list *tuiDropdown style="min-width:20vw">
 							<tui-opt-group
 								label="Options"
 								tuiMultiSelectGroup
 							>
 								@for (option of options; track getOptionValue(option)) {
+									@let value = getOptionValue(option);
+									@let label = getOptionLabel(option);
+									@let appearance = appearanceMap.get(value);
 									<button
 										tuiOption
 										type="button"
-										[value]="getOptionValue(option)"
+										[value]="value"
 									>
-										{{ getOptionLabel(option) }}
+										<span tuiChip size="xs" [appearance]="appearance ? appearance : ''">{{ label }}</span>
 									</button>
 								}
 							</tui-opt-group>
@@ -6308,6 +6331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], options: [{
                 type: Input
+            }], appearanceMap: [{
+                type: Input
             }] } });
 
 class EzUITableTextFilter {