@kris701/ez-ui 1.1.12 → 1.1.13

package/fesm2022/kris701-ez-ui.mjs

@@ -3059,6 +3059,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }] } });
 
+class EzUISelect {
+    icon = '';
+    label = '';
+    size = 'm';
+    optionLabel = undefined;
+    optionValue = undefined;
+    options = [];
+    disabled = false;
+    selected = undefined;
+    selectedChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
+            this.selected = changes['selected'].currentValue;
+        }
+    }
+    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];
+    }
+    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">
+			@if(label != ''){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput tuiSelectLike [(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) }}
+					</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: 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: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-select', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiInputNumber,
+                        TuiDataList,
+                        TuiTextfield,
+                        TuiSelectLike,
+                        TuiDropdown,
+                        TuiChevron,
+                        TuiInput
+                    ], template: `
+		<tui-textfield tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label != ''){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput tuiSelectLike [(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) }}
+					</button>
+				}
+			</tui-data-list>
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
 class EzUITablePresets {
     table;
     storageKey = null;
@@ -5295,5 +5389,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, 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, EzUISelect, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map