@kris701/ez-ui 1.2.13 → 1.2.15

package/fesm2022/kris701-ez-ui.mjs

@@ -7,7 +7,7 @@ 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, 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, TuiInputDateDirective, 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';
@@ -3449,71 +3449,67 @@ class EzUITablePresets {
         this.table.applyFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITablePresets, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITablePresets, isStandalone: true, selector: "ezui-table-presets", inputs: { storageKey: "storageKey" }, outputs: { onPresetChange: "onPresetChange" }, host: { styleAttribute: "display:flex;flex-direction: row;gap:10px;width:100%" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITablePresets, isStandalone: true, selector: "ezui-table-presets", inputs: { storageKey: "storageKey" }, outputs: { onPresetChange: "onPresetChange" }, host: { styleAttribute: "display:flex;flex-direction: row;gap:10px;width:100%;flex-wrap:wrap;" }, usesOnChanges: true, ngImport: i0, template: `
 		<button tuiButton iconStart="plus" size="s" appearance="secondary" (click)="createPreset()" tuiHint="Create new preset from current filters"></button>
 
-		<tui-scrollbar>
-			@let current = currentPreset();
-			@for(preset of presets(); track preset.id){
-				<div tuiGroup [collapsed]="true" [rounded]="true">
-					@let isActive = current?.id == preset.id;
-					@if(isActive){
-						@if(preset.edit){
-							<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
-								<input tuiInput [(ngModel)]="preset.name"/>
-							</tui-textfield>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
-						}
-						@else {
-							<div style="height:100%" appearance="positive" tuiBadge tuiStatus>
-								{{preset.name}}
-							</div>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
-						}
-					<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
+		@let current = currentPreset();
+		@for(preset of presets(); track preset.id){
+			<div tuiGroup class="preset-group" [collapsed]="true" [rounded]="true">
+				@let isActive = current?.id == preset.id;
+				@if(isActive){
+					@if(preset.edit){
+						<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
+							<input tuiInput [(ngModel)]="preset.name"/>
+						</tui-textfield>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
 					}
 					@else {
-						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
+						<div class="preset-name" appearance="positive" tuiBadge tuiStatus>
+							{{preset.name}}
+						</div>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
 					}
-				</div>
-			}
-		</tui-scrollbar>
-    `, isInline: true, styles: ["tui-scrollbar{width:100%!important}tui-scrollbar ::ng-deep>.t-content{display:flex;gap:10px;width:0px}\n"], 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: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiStatus, selector: "[tuiStatus]", inputs: ["tuiStatus"] }, { 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
+				}
+				@else {
+					<button style="flex: 0 0 auto;" class="preset-name" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+				}
+			</div>
+		}
+    `, isInline: true, styles: [".preset-group{max-width:25vw}.preset-group .preset-name{height:100%;display:inline;text-overflow:ellipsis;align-content:center}\n"], 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: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiStatus, selector: "[tuiStatus]", inputs: ["tuiStatus"] }, { 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITablePresets, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table-presets', imports: [FormsModule, CommonModule, TuiScrollbar, TuiButton, TuiGroup, TuiBadge, TuiStatus, TuiInput, TuiHint], template: `
+            args: [{ selector: 'ezui-table-presets', imports: [FormsModule, CommonModule, TuiButton, TuiGroup, TuiBadge, TuiStatus, TuiInput, TuiHint], template: `
 		<button tuiButton iconStart="plus" size="s" appearance="secondary" (click)="createPreset()" tuiHint="Create new preset from current filters"></button>
 
-		<tui-scrollbar>
-			@let current = currentPreset();
-			@for(preset of presets(); track preset.id){
-				<div tuiGroup [collapsed]="true" [rounded]="true">
-					@let isActive = current?.id == preset.id;
-					@if(isActive){
-						@if(preset.edit){
-							<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
-								<input tuiInput [(ngModel)]="preset.name"/>
-							</tui-textfield>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
-						}
-						@else {
-							<div style="height:100%" appearance="positive" tuiBadge tuiStatus>
-								{{preset.name}}
-							</div>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
-						}
-					<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
+		@let current = currentPreset();
+		@for(preset of presets(); track preset.id){
+			<div tuiGroup class="preset-group" [collapsed]="true" [rounded]="true">
+				@let isActive = current?.id == preset.id;
+				@if(isActive){
+					@if(preset.edit){
+						<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
+							<input tuiInput [(ngModel)]="preset.name"/>
+						</tui-textfield>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
 					}
 					@else {
-						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
+						<div class="preset-name" appearance="positive" tuiBadge tuiStatus>
+							{{preset.name}}
+						</div>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
 					}
-				</div>
-			}
-		</tui-scrollbar>
+				}
+				@else {
+					<button style="flex: 0 0 auto;" class="preset-name" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+				}
+			</div>
+		}
     `, host: {
-                        style: 'display:flex;flex-direction: row;gap:10px;width:100%'
-                    }, styles: ["tui-scrollbar{width:100%!important}tui-scrollbar ::ng-deep>.t-content{display:flex;gap:10px;width:0px}\n"] }]
+                        style: 'display:flex;flex-direction: row;gap:10px;width:100%;flex-wrap:wrap;'
+                    }, styles: [".preset-group{max-width:25vw}.preset-group .preset-name{height:100%;display:inline;text-overflow:ellipsis;align-content:center}\n"] }]
         }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { storageKey: [{
                 type: Input
             }], onPresetChange: [{
@@ -3621,9 +3617,9 @@ class EzUITableFilterService {
             action: 'ncon',
             filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => !value.includes(i), column)
         },
-        // Date filters
+        // Date Time filters
         {
-            key: 'dat',
+            key: 'datt',
             action: 'bef',
             filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
                 var normal = value[0].toLocalNativeDate();
@@ -3632,7 +3628,7 @@ class EzUITableFilterService {
             }, column)
         },
         {
-            key: 'dat',
+            key: 'datt',
             action: 'aft',
             filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
                 var normal = value[0].toLocalNativeDate();
@@ -3640,6 +3636,23 @@ class EzUITableFilterService {
                 return i.getTime() > normal.getTime();
             }, column)
         },
+        // Date filters
+        {
+            key: 'dat',
+            action: 'bef',
+            filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
+                var normal = value.toLocalNativeDate();
+                return i.getTime() < normal.getTime();
+            }, column)
+        },
+        {
+            key: 'dat',
+            action: 'aft',
+            filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
+                var normal = value.toLocalNativeDate();
+                return i.getTime() > normal.getTime();
+            }, column)
+        },
         // Boolean filters
         {
             key: 'bol',
@@ -4253,7 +4266,7 @@ class EzUITableDateFilter {
     filterVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
     table;
-    value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+    value = TuiDay.currentLocal();
     filterType = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
     filterTypes;
@@ -4271,6 +4284,234 @@ class EzUITableDateFilter {
             }
         ];
         this.filterType.set(this.filterTypes[0]);
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.filterType.set(this.filterTypes[0]);
+                this.value = TuiDay.currentLocal();
+                this.filterApplied.set(false);
+                return;
+            }
+            const filter = x.filters.find(x => x.column == this.column);
+            if (!filter) {
+                this.filterType.set(this.filterTypes[0]);
+                this.value = TuiDay.currentLocal();
+                this.filterApplied.set(false);
+                return;
+            }
+            const type = this.filterTypes.find(x => x.expression == filter.expression);
+            if (!type) {
+                this.filterType.set(this.filterTypes[0]);
+                this.value = TuiDay.currentLocal();
+                this.filterApplied.set(false);
+                return;
+            }
+            this.filterType.set(type);
+            let forceReapply = false;
+            if (typeof filter.value[0] == 'string') {
+                this.value = TuiDay.jsonParse(filter.value[0]);
+                forceReapply = true;
+            }
+            else {
+                this.value = filter.value;
+            }
+            this.filterApplied.set(true);
+            if (forceReapply) {
+                // Force reapply filter, to fix local storage parsing issue
+                this.applyFilter(type.expression);
+            }
+        });
+    }
+    applyFilter(expression) {
+        this.table.setFilter({
+            column: this.column,
+            value: this.value,
+            expression: expression,
+        });
+        this.filterVisible.set(false);
+        this.filterApplied.set(true);
+    }
+    clearFilter() {
+        this.table.clearFilter(this.column);
+        this.filterVisible.set(false);
+        this.filterApplied.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableDateFilter, isStandalone: true, selector: "ezui-table-datefilter", inputs: { column: "column" }, ngImport: i0, template: `
+		@if(column){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="filterPopContainer">
+					@let filter = filterType();
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filter.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<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"
+						tuiButton
+						(click)="applyFilter(filter.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							appearance="secondary"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</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" }] });
+}
+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: `
+		@if(column){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="filterPopContainer">
+					@let filter = filterType();
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filter.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<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"
+						tuiButton
+						(click)="applyFilter(filter.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							appearance="secondary"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"] }]
+        }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { column: [{
+                type: Input
+            }] } });
+
+class EzUITableDateTimeFilter {
+    column;
+    filterApplied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterApplied" }] : /* istanbul ignore next */ []));
+    filterVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
+    table;
+    value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+    filterType = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
+    filterTypes;
+    stringify = (item) => `${item.label}`;
+    constructor(table) {
+        this.table = table;
+        this.filterTypes = [
+            {
+                label: 'After',
+                expression: 'datt;aft'
+            },
+            {
+                label: 'Before',
+                expression: 'datt;bef'
+            }
+        ];
+        this.filterType.set(this.filterTypes[0]);
         this.table.onPresetChange.subscribe(x => {
             if (!x) {
                 this.filterType.set(this.filterTypes[0]);
@@ -4322,8 +4563,8 @@ class EzUITableDateFilter {
         this.filterVisible.set(false);
         this.filterApplied.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableDateFilter, isStandalone: true, selector: "ezui-table-datefilter", inputs: { column: "column" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateTimeFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableDateTimeFilter, isStandalone: true, selector: "ezui-table-datetimefilter", inputs: { column: "column" }, ngImport: i0, template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -4364,7 +4605,7 @@ class EzUITableDateFilter {
 					</button>
 
 					<tui-textfield (keydown.enter)="applyFilter(filter.expression)">
-						<label tuiLabel>Choose a date</label>
+						<label tuiLabel>Choose a date and time</label>
 						<input
 							tuiInputDateTime
 							[(ngModel)]="value"
@@ -4396,9 +4637,9 @@ class EzUITableDateFilter {
 		}
     `, 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: "directive", type: i4$1.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateTimeFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table-datefilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime], template: `
+            args: [{ selector: 'ezui-table-datetimefilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime], template: `
 		@if(column){
 			<tui-badged-content>
 				@if(filterApplied()){
@@ -4439,7 +4680,7 @@ 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>
+						<label tuiLabel>Choose a date and time</label>
 						<input
 							tuiInputDateTime
 							[(ngModel)]="value"
@@ -5923,5 +6164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map