@kris701/ez-ui 1.2.4 → 1.2.6

package/fesm2022/kris701-ez-ui.mjs

@@ -1,13 +1,13 @@
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, signal, ViewChild, ContentChild, Directive, inject, viewChild } from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, ContentChild, ViewChild, Directive, inject, viewChild } 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, TuiLink, TuiHint, TuiLoader, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
+import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiLink, TuiHint, 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, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
+import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, 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';
@@ -15,11 +15,11 @@ 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 i4$2 from '@taiga-ui/layout';
+import { TuiHeader, TuiElasticContainer, TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
 import * as i7 from '@taiga-ui/cdk/directives/item';
-import * as i4$2 from '@taiga-ui/layout';
-import { TuiElasticContainer, TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
 import { v4 } from 'uuid';
@@ -368,6 +368,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }] } });
 
+class EzUIDialog {
+    layoutService;
+    content;
+    size = 'm';
+    title = '';
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    showDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDialog" }] : /* istanbul ignore next */ []));
+    showSave = false;
+    showDelete = false;
+    onSaveItem = new EventEmitter();
+    onDeleteItem = new EventEmitter();
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDialog, deps: [{ token: EzUILayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDialog, isStandalone: true, selector: "ezui-dialog", inputs: { size: "size", title: "title", isLoading: "isLoading", showDialog: "showDialog", showSave: "showSave", showDelete: "showDelete" }, outputs: { onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+		<ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
+			<header tuiHeader>
+				<hgroup tuiTitle>
+					<h2 [id]="id">{{title}}</h2>
+				</hgroup>
+			</header>
+
+			<tui-loader [overlay]="true" [loading]="isLoading()">
+				<ng-container [ngTemplateOutlet]="content"></ng-container>
+			</tui-loader>
+
+			@if(!isLoading() && (showSave || showDelete)){
+				<footer class="dialog-footer">
+					@if(showSave){
+						<button tuiButton iconStart="save" size="s" (click)="onSaveItem.emit()">Save</button>
+					}
+					@if(showDelete){
+						<button tuiButton iconStart="x" size="s" appearance="negative" (click)="onDeleteItem.emit()">Delete</button>
+					}
+				</footer>
+			}
+		</ng-template>
+    `, isInline: true, styles: [".dialog-footer{display:flex!important;flex-direction:row!important;gap:5px!important;margin-top:auto!important;margin-block-start:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "directive", type: TuiDialog, selector: "ng-template[tuiDialog]", inputs: ["tuiDialogOptions"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-dialog', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiHeader,
+                        TuiTitle,
+                        TuiLoader,
+                        TuiDialog,
+                        TuiButton
+                    ], template: `
+		<ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
+			<header tuiHeader>
+				<hgroup tuiTitle>
+					<h2 [id]="id">{{title}}</h2>
+				</hgroup>
+			</header>
+
+			<tui-loader [overlay]="true" [loading]="isLoading()">
+				<ng-container [ngTemplateOutlet]="content"></ng-container>
+			</tui-loader>
+
+			@if(!isLoading() && (showSave || showDelete)){
+				<footer class="dialog-footer">
+					@if(showSave){
+						<button tuiButton iconStart="save" size="s" (click)="onSaveItem.emit()">Save</button>
+					}
+					@if(showDelete){
+						<button tuiButton iconStart="x" size="s" appearance="negative" (click)="onDeleteItem.emit()">Delete</button>
+					}
+				</footer>
+			}
+		</ng-template>
+    `, styles: [".dialog-footer{display:flex!important;flex-direction:row!important;gap:5px!important;margin-top:auto!important;margin-block-start:auto!important}\n"] }]
+        }], ctorParameters: () => [{ type: EzUILayoutService }], propDecorators: { content: [{
+                type: ContentChild,
+                args: ['content', { static: false }]
+            }], size: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], showDialog: [{
+                type: Input
+            }], showSave: [{
+                type: Input
+            }], showDelete: [{
+                type: Input
+            }], onSaveItem: [{
+                type: Output
+            }], onDeleteItem: [{
+                type: Output
+            }] } });
+
 class EzUIFileInput {
     files = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
@@ -2860,6 +2957,7 @@ class EzUIMultiSelect {
     disabled = false;
     selected = undefined;
     selectedChange = new EventEmitter();
+    appearanceMap = {};
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -2881,22 +2979,26 @@ class EzUIMultiSelect {
         return item[this.optionValue];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != ''){
 				<label tuiLabel>{{label}}</label>
 			}
 			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
-			<tui-input-chip *tuiItem />
+			<tui-input-chip
+				*tuiItem="let context"
+				[appearance]="appearanceMap[getOptionValue(context.item)] ? appearanceMap[getOptionValue(context.item)] : 'neutral'"/>
 			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
 				@for (item of options; track getOptionValue(item)) {
-					<button tuiOption [value]="getOptionValue(item)">
-						{{ getOptionLabel(item) }}
+					@let value = getOptionValue(item);
+					@let label = getOptionLabel(item);
+					<button tuiOption [value]="value" >
+						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
 					</button>
 				}
 			</tui-data-list>
 		</tui-textfield>
-    `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { 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: i7.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+    `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { 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: i7.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, decorators: [{
             type: Component,
@@ -2911,18 +3013,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiSelectLike,
                         TuiMultiSelect,
                         TuiDropdown,
-                        TuiChevron
+                        TuiChevron,
+                        TuiChip
                     ], template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != ''){
 				<label tuiLabel>{{label}}</label>
 			}
 			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
-			<tui-input-chip *tuiItem />
+			<tui-input-chip
+				*tuiItem="let context"
+				[appearance]="appearanceMap[getOptionValue(context.item)] ? appearanceMap[getOptionValue(context.item)] : 'neutral'"/>
 			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
 				@for (item of options; track getOptionValue(item)) {
-					<button tuiOption [value]="getOptionValue(item)">
-						{{ getOptionLabel(item) }}
+					@let value = getOptionValue(item);
+					@let label = getOptionLabel(item);
+					<button tuiOption [value]="value" >
+						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
 					</button>
 				}
 			</tui-data-list>
@@ -2946,6 +3053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], selectedChange: [{
                 type: Output
+            }], appearanceMap: [{
+                type: Input
             }] } });
 
 class EzUINumberInput {
@@ -3069,6 +3178,7 @@ class EzUISelect {
     disabled = false;
     selected = undefined;
     selectedChange = new EventEmitter();
+    appearanceMap = {};
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -3090,21 +3200,27 @@ class EzUISelect {
         return item[this.optionValue];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield tuiChevron [content]="selected && content" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != ''){
 				<label tuiLabel>{{label}}</label>
 			}
 			<input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-data-list *tuiDropdown >
 				@for (item of options; track getOptionValue(item)) {
-					<button tuiOption [value]="getOptionValue(item)">
-						{{ getOptionLabel(item) }}
+					@let value = getOptionValue(item);
+					@let label = getOptionLabel(item);
+					<button tuiOption [value]="value" >
+						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
 					</button>
 				}
 			</tui-data-list>
 		</tui-textfield>
-    `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: i4$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { 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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+
+		<ng-template #content>
+			<span tuiChip [size]="size == 's' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+		</ng-template>
+    `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: i4$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { 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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, decorators: [{
             type: Component,
@@ -3116,21 +3232,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiTextfield,
                         TuiDropdown,
                         TuiChevron,
-                        TuiInput
+                        TuiInput,
+                        TuiChip
                     ], template: `
-		<tui-textfield tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield tuiChevron [content]="selected && content" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != ''){
 				<label tuiLabel>{{label}}</label>
 			}
 			<input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-data-list *tuiDropdown >
 				@for (item of options; track getOptionValue(item)) {
-					<button tuiOption [value]="getOptionValue(item)">
-						{{ getOptionLabel(item) }}
+					@let value = getOptionValue(item);
+					@let label = getOptionLabel(item);
+					<button tuiOption [value]="value" >
+						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
 					</button>
 				}
 			</tui-data-list>
 		</tui-textfield>
+
+		<ng-template #content>
+			<span tuiChip [size]="size == 's' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+		</ng-template>
     ` }]
         }], propDecorators: { icon: [{
                 type: Input
@@ -3150,6 +3273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], selectedChange: [{
                 type: Output
+            }], appearanceMap: [{
+                type: Input
             }] } });
 
 class EzUIShowMoreText {
@@ -5715,5 +5840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map