@kris701/ez-ui 1.2.16 → 1.2.18

package/fesm2022/kris701-ez-ui.mjs

@@ -7,10 +7,10 @@ import { FormsModule } from '@angular/forms';
 import * as i3$1 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, TuiChip, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiInputDateDirective, 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, tuiCreateDefaultDayRangePeriods, TuiButtonSelect, TuiInputDateDirective, TuiCalendarRange, 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 { TuiDay, TuiTime, TuiDayRange } from '@taiga-ui/cdk/date-time';
 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';
@@ -19,6 +19,7 @@ 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 { TuiAutoFocus } from '@taiga-ui/cdk';
 import * as i7 from '@taiga-ui/cdk/directives/item';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
@@ -2957,9 +2958,9 @@ class EzUIMultiSelect {
     disabled = false;
     selected = undefined;
     selectedChange = new EventEmitter();
-    appearanceMap = {
-        "b": "negative"
-    };
+    appearanceMap = {};
+    enableSearch = false;
+    searchValue = "";
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -2981,26 +2982,33 @@ 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", appearanceMap: "appearanceMap" }, 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", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label != ''){
+			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-input-chip
 				*tuiItem="let context"
 				[appearance]="appearanceMap[context.item] ? appearanceMap[context.item] : 'neutral'"/>
 			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search" (click)="field.focus()">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue"/>
+					</tui-textfield>
+				}
 				@for (item of options; track getOptionValue(item)) {
-					@let value = getOptionValue(item);
 					@let label = getOptionLabel(item);
-					<button tuiOption [value]="value" >
-						<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
-					</button>
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+						@let value = getOptionValue(item);
+						<button tuiOption [value]="value" >
+							<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{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"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }] });
+    `, 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: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { 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"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, decorators: [{
             type: Component,
@@ -3016,23 +3024,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiMultiSelect,
                         TuiDropdown,
                         TuiChevron,
-                        TuiChip
+                        TuiChip,
+                        TuiAutoFocus,
+                        TuiInput
                     ], template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label != ''){
+			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-input-chip
 				*tuiItem="let context"
 				[appearance]="appearanceMap[context.item] ? appearanceMap[context.item] : 'neutral'"/>
 			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search" (click)="field.focus()">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue"/>
+					</tui-textfield>
+				}
 				@for (item of options; track getOptionValue(item)) {
-					@let value = getOptionValue(item);
 					@let label = getOptionLabel(item);
-					<button tuiOption [value]="value" >
-						<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
-					</button>
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+						@let value = getOptionValue(item);
+						<button tuiOption [value]="value" >
+							<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
+						</button>
+					}
 				}
 			</tui-data-list>
 		</tui-textfield>
@@ -3057,6 +3074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], appearanceMap: [{
                 type: Input
+            }], enableSearch: [{
+                type: Input
             }] } });
 
 class EzUINumberInput {
@@ -3181,6 +3200,8 @@ class EzUISelect {
     selected = undefined;
     selectedChange = new EventEmitter();
     appearanceMap = {};
+    enableSearch = false;
+    searchValue = "";
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -3202,19 +3223,26 @@ 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", appearanceMap: "appearanceMap" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+    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", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label != ''){
+			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input tuiSelect [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-data-list *tuiDropdown >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()"/>
+					</tui-textfield>
+				}
 				@for (item of options; track getOptionValue(item)) {
-					@let value = getOptionValue(item);
 					@let label = getOptionLabel(item);
-					<button tuiOption [value]="value" >
-						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
-					</button>
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+						@let value = getOptionValue(item);
+						<button tuiOption [value]="value" >
+							<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
+						</button>
+					}
 				}
 			</tui-data-list>
 		</tui-textfield>
@@ -3222,7 +3250,7 @@ class EzUISelect {
 		<ng-template #content>
 			<span tuiChip [size]="label != '' ? '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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { 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"] }] });
+    `, 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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, decorators: [{
             type: Component,
@@ -3235,20 +3263,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiDropdown,
                         TuiChevron,
                         TuiInput,
-                        TuiChip
+                        TuiChip,
+                        TuiAutoFocus
                     ], template: `
 		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label != ''){
+			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input tuiSelect [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
 			<tui-data-list *tuiDropdown >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()"/>
+					</tui-textfield>
+				}
 				@for (item of options; track getOptionValue(item)) {
-					@let value = getOptionValue(item);
 					@let label = getOptionLabel(item);
-					<button tuiOption [value]="value" >
-						<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
-					</button>
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+						@let value = getOptionValue(item);
+						<button tuiOption [value]="value" >
+							<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
+						</button>
+					}
 				}
 			</tui-data-list>
 		</tui-textfield>
@@ -3277,6 +3313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], appearanceMap: [{
                 type: Input
+            }], enableSearch: [{
+                type: Input
             }] } });
 
 class EzUIShowMoreText {
@@ -3654,6 +3692,15 @@ class EzUITableFilterService {
                 return i.getTime() > normal.getTime();
             }, column)
         },
+        {
+            key: 'dat',
+            action: 'wit',
+            filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
+                let from = value.from.toLocalNativeDate();
+                let to = value.to.toLocalNativeDate();
+                return i.getTime() >= from.getTime() && i.getTime() < to.getTime();
+            }, column)
+        },
         // Boolean filters
         {
             key: 'bol',
@@ -4271,6 +4318,7 @@ class EzUITableDateFilter {
     filterType = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
     filterTypes;
+    rangeItems = tuiCreateDefaultDayRangePeriods();
     stringify = (item) => `${item.label}`;
     constructor(table) {
         this.table = table;
@@ -4282,6 +4330,10 @@ class EzUITableDateFilter {
             {
                 label: 'Before',
                 expression: 'dat;bef'
+            },
+            {
+                label: 'Within',
+                expression: 'dat;wit'
             }
         ];
         this.filterType.set(this.filterTypes[0]);
@@ -4308,12 +4360,21 @@ class EzUITableDateFilter {
             }
             this.filterType.set(type);
             let forceReapply = false;
-            if (typeof filter.value == 'string') {
-                this.value = TuiDay.jsonParse(filter.value);
-                forceReapply = true;
+            if (type.expression == "dat;wit") {
+                if (typeof filter.value.from == 'string') {
+                    this.value = new TuiDayRange(TuiDay.jsonParse(filter.value.from), TuiDay.jsonParse(filter.value.to));
+                    forceReapply = true;
+                }
+                else
+                    this.value = filter.value;
             }
             else {
-                this.value = filter.value;
+                if (typeof filter.value == 'string') {
+                    this.value = TuiDay.jsonParse(filter.value);
+                    forceReapply = true;
+                }
+                else
+                    this.value = filter.value;
             }
             this.filterApplied.set(true);
             if (forceReapply) {
@@ -4355,6 +4416,7 @@ class EzUITableDateFilter {
 					style="opacity:0.72"
 					[tuiDropdown]="filterPop"
 					[(tuiDropdownOpen)]="filterVisible"
+					[tuiDropdownMaxHeight]="500"
 					(click)="filterVisible.set(true)"
 				></button>
 			</tui-badged-content>
@@ -4377,14 +4439,20 @@ class EzUITableDateFilter {
 						/>
 					</button>
 
-					<tui-textfield (keydown.enter)="applyFilter(filter.expression)">
-						<label tuiLabel>Choose a date</label>
-						<input
-							tuiInputDate
-							[(ngModel)]="value"
-						/>
-						<tui-calendar *tuiDropdown />
-					</tui-textfield>
+					@if(filter.expression == 'dat;wit'){
+						<tui-calendar-range [items]="rangeItems" [(value)]="value" />
+					}
+					@else {
+						<tui-textfield (keydown.enter)="applyFilter(filter.expression)">
+							<label tuiLabel>Choose a date</label>
+							<input
+								tuiInputDate
+								[(ngModel)]="value"
+							/>
+							<tui-calendar *tuiDropdown />
+						</tui-textfield>
+					}
+
 					<button
 						tuiButton size="s"
 						iconStart="funnel"
@@ -4408,11 +4476,11 @@ class EzUITableDateFilter {
 				</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.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: "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: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { 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.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: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { 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: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: TuiCalendarRange, selector: "tui-calendar-range", inputs: ["minLength", "maxLength", "items", "listSize", "defaultViewedMonth", "markerHandler", "item"], outputs: ["itemChange"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table-datefilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime, TuiInputDateDirective], template: `
+            args: [{ selector: 'ezui-table-datefilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime, TuiInputDateDirective, TuiCalendarRange], template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -4430,6 +4498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					style="opacity:0.72"
 					[tuiDropdown]="filterPop"
 					[(tuiDropdownOpen)]="filterVisible"
+					[tuiDropdownMaxHeight]="500"
 					(click)="filterVisible.set(true)"
 				></button>
 			</tui-badged-content>
@@ -4452,14 +4521,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						/>
 					</button>
 
-					<tui-textfield (keydown.enter)="applyFilter(filter.expression)">
-						<label tuiLabel>Choose a date</label>
-						<input
-							tuiInputDate
-							[(ngModel)]="value"
-						/>
-						<tui-calendar *tuiDropdown />
-					</tui-textfield>
+					@if(filter.expression == 'dat;wit'){
+						<tui-calendar-range [items]="rangeItems" [(value)]="value" />
+					}
+					@else {
+						<tui-textfield (keydown.enter)="applyFilter(filter.expression)">
+							<label tuiLabel>Choose a date</label>
+							<input
+								tuiInputDate
+								[(ngModel)]="value"
+							/>
+							<tui-calendar *tuiDropdown />
+						</tui-textfield>
+					}
+
 					<button
 						tuiButton size="s"
 						iconStart="funnel"