@kris701/ez-ui 0.0.9 → 1.0.0

package/fesm2022/kris701-ez-ui.mjs

@@ -0,0 +1,2536 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, ViewChild, ContentChild, Directive } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TuiDay, TuiTime } from '@taiga-ui/cdk/date-time';
+import * as i3$1 from '@taiga-ui/core';
+import { TuiInput, TuiOption, TuiDropdown, TuiGroup, TuiButton, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiIcon, TuiHint, TuiLoader } from '@taiga-ui/core';
+import * as i4$1 from '@taiga-ui/kit';
+import { TuiInputDate, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiBadge, TuiStatus, TuiDataListWrapper, TuiButtonSelect, TuiBadgeNotification, TuiStringifyContentPipe, TuiBadgedContent, TuiInputDateTime, TUI_CONFIRM } from '@taiga-ui/kit';
+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 i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { marked } from 'marked';
+import Compressor from 'compressorjs';
+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';
+import * as i4$2 from '@taiga-ui/layout';
+import { TuiBlockStatus } from '@taiga-ui/layout';
+import { v4 } from 'uuid';
+import { firstValueFrom, switchMap } from 'rxjs';
+import * as i1$1 from '@angular/common/http';
+import * as i3$3 from '@taiga-ui/addon-mobile';
+
+class EzUIDateInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    min = null;
+    max = null;
+    TuiDay = TuiDay;
+    value = new Date;
+    valueChange = new EventEmitter();
+    internalValue = null;
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+            this.value = new Date(this.value);
+            this.internalValue = TuiDay.fromUtcNativeDate(this.value);
+        }
+    }
+    updateValue() {
+        if (this.internalValue) {
+            this.value = this.internalValue?.toUtcNativeDate();
+            this.valueChange.emit(this.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIDateInput, isStandalone: true, selector: "ezui-dateinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="min ? TuiDay.fromLocalNativeDate(min) : null" [max]="max ? TuiDay.fromLocalNativeDate(max) : null"/>
+			<tui-calendar *tuiDropdown />
+		</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: "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: "directive", type: i4$1.TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-dateinput', imports: [
+                        FormsModule,
+                        TuiInput,
+                        TuiInputDate
+                    ], template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="min ? TuiDay.fromLocalNativeDate(min) : null" [max]="max ? TuiDay.fromLocalNativeDate(max) : null"/>
+			<tui-calendar *tuiDropdown />
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EzUIFileInput {
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    clear() {
+        this.files.set([]);
+    }
+    onChange(files) {
+        if (files instanceof File)
+            this.files.set([files]);
+        else
+            this.files.set(files);
+    }
+    removeFile(file) {
+        var files = this.files();
+        var index = files.indexOf(file);
+        if (index != -1) {
+            files.splice(index, 1);
+            this.files.set(files);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIFileInput, isStandalone: true, selector: "ezui-fileinput", ngImport: i0, template: `
+		<label tuiInputFiles>
+			<input
+				#validator="tuiInputFilesValidator"
+				accept="*/*"
+				tuiInputFiles
+				[ngModel]="files()"
+				(ngModelChange)="onChange($event)"
+			/>
+		</label>
+
+		<tui-files>
+			@for(file of files(); track file){
+				<tui-file
+					state="normal"
+					[file]="file"
+					(remove)="removeFile(file)"
+				/>
+			}
+		</tui-files>
+	`, isInline: true, 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: "component", type: i4$1.TuiFile, selector: "tui-file,a[tuiFile],button[tuiFile]", inputs: ["file", "state", "size", "showDelete", "showSize", "leftContent"], outputs: ["remove"] }, { kind: "component", type: i4$1.TuiInputFiles, selector: "label[tuiInputFiles]", inputs: ["tuiInputFiles"] }, { kind: "component", type: i4$1.TuiFilesComponent, selector: "tui-files", inputs: ["max", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i4$1.TuiInputFilesDirective, selector: "input[tuiInputFiles]", outputs: ["reject"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIFileInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ezui-fileinput',
+                    imports: [FormsModule, TuiFiles],
+                    template: `
+		<label tuiInputFiles>
+			<input
+				#validator="tuiInputFilesValidator"
+				accept="*/*"
+				tuiInputFiles
+				[ngModel]="files()"
+				(ngModelChange)="onChange($event)"
+			/>
+		</label>
+
+		<tui-files>
+			@for(file of files(); track file){
+				<tui-file
+					state="normal"
+					[file]="file"
+					(remove)="removeFile(file)"
+				/>
+			}
+		</tui-files>
+	`
+                }]
+        }] });
+
+const compressImage = async (file, quality, maxHeight, maxWidth, convertSize) => {
+    return await new Promise((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxHeight,
+            maxWidth,
+            convertSize,
+            success: resolve,
+            error: reject,
+        });
+    });
+};
+
+class EzUIMenuBarSubDataList {
+    subdatalist = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMenuBarSubDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIMenuBarSubDataList, isStandalone: true, selector: "tui-data-list[subdatalist]", inputs: { subdatalist: "subdatalist" }, ngImport: i0, template: `
+		@for(item of subdatalist; track $index){
+			@if(item.items){
+				<button
+					tuiOption
+					tuiChevron
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					[tuiDropdown]="dropdownContent"
+					[(tuiDropdownOpen)]="item.expanded"
+					tuiDropdownLimitWidth="fixed"
+					tuiDropdownSided="true"
+				>
+				{{item.label}}
+				</button>
+
+				<ng-template #dropdownContent>
+					<tui-data-list
+						class="subdatalist"
+						[subdatalist]="item.items">
+					</tui-data-list>
+				</ng-template>
+			}
+			@else {
+				<button
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+				>
+					{{item.label}}
+				</button>
+			}
+		}
+    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }, { 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.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
+                        TuiDropdown,
+                        TuiOption,
+                        TuiChevron
+                    ], template: `
+		@for(item of subdatalist; track $index){
+			@if(item.items){
+				<button
+					tuiOption
+					tuiChevron
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					[tuiDropdown]="dropdownContent"
+					[(tuiDropdownOpen)]="item.expanded"
+					tuiDropdownLimitWidth="fixed"
+					tuiDropdownSided="true"
+				>
+				{{item.label}}
+				</button>
+
+				<ng-template #dropdownContent>
+					<tui-data-list
+						class="subdatalist"
+						[subdatalist]="item.items">
+					</tui-data-list>
+				</ng-template>
+			}
+			@else {
+				<button
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+				>
+					{{item.label}}
+				</button>
+			}
+		}
+    `, styles: [".subdatalist{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { subdatalist: [{
+                type: Input
+            }] } });
+class EzUIMenuBar {
+    items = [];
+    ngOnChanges(changes) {
+        if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
+            this.items = changes['items'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIMenuBar, isStandalone: true, selector: "ezui-menubar", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: `
+		<div tuiGroup class="group" [collapsed]="true">
+			@for(item of items; track $index){
+				@if(item.items){
+					<button
+						tuiButton
+						tuiChevron
+						size="s"
+						appearance="outline"
+						type="button"
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						[tuiDropdown]="dropdownContent"
+						[(tuiDropdownOpen)]="item.expanded"
+						tuiDropdownLimitWidth="fixed"
+					>
+						{{item.label}}
+					</button>
+
+					<ng-template #dropdownContent>
+						<tui-data-list
+							class="subdatalist"
+							[subdatalist]="item.items">
+						</tui-data-list>
+					</ng-template>
+				}
+				@else {
+					<button
+						appearance="outline"
+						size="s"
+						tuiButton
+						type="button"
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						(click)="item.command()"
+					>
+						{{item.label}}
+					</button>
+				}
+			}
+		</div>
+    `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { 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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMenuBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-menubar', standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiGroup,
+                        TuiButton,
+                        TuiDropdown,
+                        TuiChevron,
+                        EzUIMenuBarSubDataList
+                    ], template: `
+		<div tuiGroup class="group" [collapsed]="true">
+			@for(item of items; track $index){
+				@if(item.items){
+					<button
+						tuiButton
+						tuiChevron
+						size="s"
+						appearance="outline"
+						type="button"
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						[tuiDropdown]="dropdownContent"
+						[(tuiDropdownOpen)]="item.expanded"
+						tuiDropdownLimitWidth="fixed"
+					>
+						{{item.label}}
+					</button>
+
+					<ng-template #dropdownContent>
+						<tui-data-list
+							class="subdatalist"
+							[subdatalist]="item.items">
+						</tui-data-list>
+					</ng-template>
+				}
+				@else {
+					<button
+						appearance="outline"
+						size="s"
+						tuiButton
+						type="button"
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						(click)="item.command()"
+					>
+						{{item.label}}
+					</button>
+				}
+			}
+		</div>
+    `, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class EzUIMarkdownEditor {
+    preview;
+    editor;
+    fileUpload;
+    disabled = false;
+    value = null;
+    valueChange = new EventEmitter();
+    unsavedValue = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unsavedValue" }] : /* istanbul ignore next */ []));
+    isFirst = true;
+    isEditing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+    items = signal([
+        {
+            icon: 'save',
+            command: async () => await this.toggleEdit(true)
+        },
+        {
+            icon: 'x',
+            command: async () => await this.toggleEdit(false)
+        },
+        {
+            label: 'B',
+            command: async () => {
+                if (this.editor) {
+                    var editor = this.editor.nativeElement;
+                    var start = editor.selectionStart;
+                    var finish = editor.selectionEnd;
+                    var sel = editor.value.substring(start, finish);
+                    var newStr = "**" + sel + "**";
+                    await this.replaceSection(newStr, start + 2, finish + 2);
+                }
+            }
+        },
+        {
+            label: 'I',
+            command: async () => {
+                if (this.editor) {
+                    var editor = this.editor.nativeElement;
+                    var start = editor.selectionStart;
+                    var finish = editor.selectionEnd;
+                    var sel = editor.value.substring(start, finish);
+                    var newStr = "*" + sel + "*";
+                    await this.replaceSection(newStr, start + 1, finish + 1);
+                }
+            }
+        },
+        {
+            label: 'H',
+            items: [
+                {
+                    label: 'H1',
+                    command: async () => {
+                        if (this.editor) {
+                            var editor = this.editor.nativeElement;
+                            var start = editor.selectionStart;
+                            var finish = editor.selectionEnd;
+                            var sel = editor.value.substring(start, finish);
+                            var newStr = "# " + sel;
+                            await this.replaceSection(newStr, start + 2, finish + 2);
+                        }
+                    }
+                },
+                {
+                    label: 'H2',
+                    command: async () => {
+                        if (this.editor) {
+                            var editor = this.editor.nativeElement;
+                            var start = editor.selectionStart;
+                            var finish = editor.selectionEnd;
+                            var sel = editor.value.substring(start, finish);
+                            var newStr = "## " + sel;
+                            await this.replaceSection(newStr, start + 3, finish + 3);
+                        }
+                    }
+                },
+                {
+                    label: 'H3',
+                    command: async () => {
+                        if (this.editor) {
+                            var editor = this.editor.nativeElement;
+                            var start = editor.selectionStart;
+                            var finish = editor.selectionEnd;
+                            var sel = editor.value.substring(start, finish);
+                            var newStr = "### " + sel;
+                            await this.replaceSection(newStr, start + 4, finish + 4);
+                        }
+                    }
+                },
+            ]
+        },
+        {
+            icon: 'link',
+            command: async () => {
+                if (this.editor) {
+                    var editor = this.editor.nativeElement;
+                    var start = editor.selectionStart;
+                    var finish = editor.selectionEnd;
+                    var sel = editor.value.substring(start, finish);
+                    var newStr = "[" + sel + "](link)";
+                    await this.replaceSection(newStr, start + 1, finish + 1);
+                }
+            }
+        },
+        {
+            icon: 'image',
+            command: async () => {
+                if (this.editor) {
+                    this.fileUpload?.nativeElement.click();
+                }
+            }
+        },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    async onFileSelected(event) {
+        var files = Array.from(event.target.files);
+        if (files && files.length > 0) {
+            var file = files[0];
+            await this.insertImageInEditor(file);
+            this.fileUpload.nativeElement.value = '';
+        }
+    }
+    toBase65(file) {
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+        });
+    }
+    async onPaste(event) {
+        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+        let blob = null;
+        for (const item of items) {
+            if (item.type.indexOf('image') === 0) {
+                blob = item.getAsFile();
+                await this.insertImageInEditor(blob);
+            }
+        }
+    }
+    async insertImageInEditor(file) {
+        var compressed = await compressImage(file, 0.5, 300, 300);
+        var asBase64 = await this.toBase65(compressed);
+        if (asBase64 && this.editor) {
+            var editor = this.editor.nativeElement;
+            var start = editor.selectionStart;
+            var finish = editor.selectionEnd;
+            var sel = editor.value.substring(start, finish);
+            var newStr = "![" + sel + "](" + asBase64 + ")";
+            await this.replaceSection(newStr, start + newStr.length, finish + newStr.length);
+        }
+    }
+    async replaceSection(newStr, finalStart, finalFinish) {
+        var editor = this.editor.nativeElement;
+        editor.focus();
+        document.execCommand("insertText", false, newStr);
+        await this.formatPreview();
+        editor.focus();
+        editor.setSelectionRange(finalStart, finalFinish);
+    }
+    async ngOnChanges(changes) {
+        if (changes['value']) {
+            if (changes['value'].currentValue != changes['value'].previousValue) {
+                this.value = changes['value'].currentValue;
+                await this.formatPreview();
+                if (this.isFirst) {
+                    setTimeout(async () => await this.formatPreview(), 500);
+                    this.isFirst = false;
+                }
+            }
+        }
+    }
+    async formatPreview() {
+        if (this.preview) {
+            if (this.isEditing())
+                this.preview.nativeElement.innerHTML = await marked(this.unsavedValue());
+            else if (this.value)
+                this.preview.nativeElement.innerHTML = await marked(this.value);
+        }
+    }
+    async toggleEdit(save) {
+        if (!this.isEditing() && this.value) {
+            this.unsavedValue.set(this.value);
+        }
+        if (save && this.isEditing()) {
+            this.value = this.unsavedValue();
+            this.valueChange.emit(this.value);
+        }
+        this.isEditing.set(!this.isEditing());
+        setTimeout(async () => await this.formatPreview(), 500);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMarkdownEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex h-full w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+		@if(isEditing() && !disabled){
+			<div class="editor-container">
+				<div class="editor">
+					<ezui-menubar [items]="items()"/>
+
+					<tui-textfield class="editor-field">
+						<textarea
+							#editor
+							placeholder="Markdown Content"
+							tuiTextarea
+							[(ngModel)]="unsavedValue"
+							(input)="formatPreview()"
+						></textarea>
+					</tui-textfield>
+				</div>
+
+				<div class="preview-container">
+					<tui-scrollbar>
+						<div class="preview" #preview>Rendering...</div>
+					</tui-scrollbar>
+				</div>
+
+				<input type="file" (change)="onFileSelected($event)" #fileUpload [style]="{ display: 'none' }" accept="image/png, image/jpeg" />
+			</div>
+		}
+		@else {
+			<div class="preview-readonly-container">
+				@if(!disabled){
+					<button tuiButton class="edit-button" iconStart="edit" appearance="flat" size="s"(click)="toggleEdit(false)"></button>
+				}
+				<tui-scrollbar>
+					<div class="preview" #preview>Rendering...</div>
+				</tui-scrollbar>
+			</div>
+		}
+    `, isInline: true, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\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: i4$1.TuiTextareaComponent, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: EzUIMenuBar, selector: "ezui-menubar", inputs: ["items"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMarkdownEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-markdowneditor', imports: [FormsModule, CommonModule, TuiTextarea, TuiButton, TuiScrollbar, EzUIMenuBar], template: `
+		@if(isEditing() && !disabled){
+			<div class="editor-container">
+				<div class="editor">
+					<ezui-menubar [items]="items()"/>
+
+					<tui-textfield class="editor-field">
+						<textarea
+							#editor
+							placeholder="Markdown Content"
+							tuiTextarea
+							[(ngModel)]="unsavedValue"
+							(input)="formatPreview()"
+						></textarea>
+					</tui-textfield>
+				</div>
+
+				<div class="preview-container">
+					<tui-scrollbar>
+						<div class="preview" #preview>Rendering...</div>
+					</tui-scrollbar>
+				</div>
+
+				<input type="file" (change)="onFileSelected($event)" #fileUpload [style]="{ display: 'none' }" accept="image/png, image/jpeg" />
+			</div>
+		}
+		@else {
+			<div class="preview-readonly-container">
+				@if(!disabled){
+					<button tuiButton class="edit-button" iconStart="edit" appearance="flat" size="s"(click)="toggleEdit(false)"></button>
+				}
+				<tui-scrollbar>
+					<div class="preview" #preview>Rendering...</div>
+				</tui-scrollbar>
+			</div>
+		}
+    `, host: {
+                        class: 'flex h-full w-full'
+                    }, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\n"] }]
+        }], propDecorators: { preview: [{
+                type: ViewChild,
+                args: ['preview']
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor']
+            }], fileUpload: [{
+                type: ViewChild,
+                args: ['fileUpload']
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EzUIMultiSelect {
+    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.0.7", ngImport: i0, type: EzUIMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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: `
+		<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-data-list *tuiDropdown tuiMultiSelectGroup >
+				@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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-multiselect', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiMultiSelect,
+                        TuiInputNumber,
+                        TuiDataList,
+                        TuiTextfield,
+                        TuiInputChip,
+                        TuiSelectLike,
+                        TuiMultiSelect,
+                        TuiDropdown,
+                        TuiChevron
+                    ], 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-data-list *tuiDropdown tuiMultiSelectGroup >
+				@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 EzUINumberInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    min = null;
+    max = null;
+    value = "";
+    valueChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUINumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUINumberInput, isStandalone: true, selector: "ezui-numberinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInputNumber [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled" [min]="min" [max]="max"/>
+		</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$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUINumberInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-numberinput', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiInput,
+                        TuiInputNumber
+                    ], template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInputNumber [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled" [min]="min" [max]="max"/>
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EzUIPasswordInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    value = "";
+    valueChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIPasswordInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIPasswordInput, isStandalone: true, selector: "ezui-passwordinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput type="password" [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+			<tui-icon tuiPassword />
+		</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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiPassword, selector: "tui-icon[tuiPassword]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIPasswordInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-passwordinput', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiInput,
+                        TuiIcon,
+                        TuiPassword
+                    ], template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput type="password" [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+			<tui-icon tuiPassword />
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EzUITablePresets {
+    table;
+    storageKey = null;
+    currentPreset = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPreset" }] : /* istanbul ignore next */ []));
+    presets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    constructor(table) {
+        this.table = table;
+    }
+    async ngOnChanges(changes) {
+        if (changes['storageKey'] && changes['storageKey'].previousValue != changes['storageKey'].currentValue) {
+            this.storageKey = changes['storageKey'].currentValue;
+            if (this.storageKey) {
+                var item = localStorage.getItem(this.storageKey);
+                if (item) {
+                    var parsed = JSON.parse(item);
+                    if (parsed) {
+                        this.presets.set(parsed.presets);
+                        if (parsed.current) {
+                            var target = (parsed.presets).find(x => x.id == parsed.current);
+                            if (target)
+                                this.selectPreset(target.id);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            var current = this.currentPreset();
+            if (current)
+                this.onPresetChange.emit(current);
+        }, 500);
+    }
+    onPresetChange = new EventEmitter();
+    saveCurrentPreset() {
+        var currentPreset = this.currentPreset();
+        if (currentPreset) {
+            currentPreset.sorts = [...this.table.sorts()];
+            currentPreset.filters = [...this.table.filters()];
+            this.currentPreset.set(currentPreset);
+            var presets = this.presets();
+            var target = this.presets().findIndex(x => x.id == currentPreset?.id);
+            if (target != -1)
+                presets[target] = currentPreset;
+            this.presets.set(presets);
+            this.savePresets();
+        }
+    }
+    selectPreset(id) {
+        var presets = this.presets();
+        var target = presets.findIndex(x => x.id == id);
+        if (target != -1) {
+            var preset = presets[target];
+            this.currentPreset.set(preset);
+            this.table.sorts.set(preset.sorts);
+            this.table.filters.set(preset.filters);
+            this.onPresetChange.emit(preset);
+            this.table.applyFilter();
+        }
+        this.savePresets();
+    }
+    createPreset() {
+        this.saveCurrentPreset();
+        var preset = {
+            id: v4(),
+            name: 'New Preset',
+            sorts: [...this.table.sorts()],
+            filters: [...this.table.filters()]
+        };
+        this.currentPreset.set(preset);
+        var presets = this.presets();
+        presets.push(preset);
+        this.presets.set(presets);
+        this.savePresets();
+    }
+    removePreset(id) {
+        var presets = this.presets();
+        var target = presets.findIndex(x => x.id == id);
+        if (target != -1)
+            presets.splice(target, 1);
+        this.presets.set(presets);
+        var current = this.currentPreset();
+        if (current?.id == id) {
+            if (presets.length > 0) {
+                this.currentPreset.set(presets[0]);
+                this.onPresetChange.emit(presets[0]);
+            }
+            else {
+                this.currentPreset.set(null);
+                this.onPresetChange.emit(null);
+            }
+        }
+        this.savePresets();
+    }
+    savePresets() {
+        if (this.storageKey) {
+            var saveBody = {
+                current: this.currentPreset()?.id,
+                presets: [...this.presets()]
+            };
+            localStorage.setItem(this.storageKey, JSON.stringify(saveBody));
+        }
+    }
+    clearFilters() {
+        this.currentPreset.set(null);
+        this.onPresetChange.emit(null);
+        this.table.sorts.set([]);
+        this.table.filters.set([]);
+        this.savePresets();
+        this.table.applyFilter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITablePresets, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITablePresets, isStandalone: true, selector: "ezui-table-presets", inputs: { storageKey: "storageKey" }, outputs: { onPresetChange: "onPresetChange" }, host: { styleAttribute: "display:flex;flex-direction: row;gap:10px;padding:5px;padding-top:0px;" }, 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>
+					}
+					@else {
+						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</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],a[tuiIconButton],button[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"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["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.0.7", ngImport: i0, type: EzUITablePresets, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table-presets', imports: [FormsModule, CommonModule, TuiScrollbar, 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>
+					}
+					@else {
+						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+					}
+				</div>
+			}
+		</tui-scrollbar>
+    `, host: {
+                        style: 'display:flex;flex-direction: row;gap:10px;padding:5px;padding-top:0px;'
+                    }, styles: ["tui-scrollbar{width:100%!important}tui-scrollbar ::ng-deep>.t-content{display:flex;gap:10px;width:0px}\n"] }]
+        }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { storageKey: [{
+                type: Input
+            }], onPresetChange: [{
+                type: Output
+            }] } });
+
+class EzUIFilterHelpers {
+    static textFilter(values, fn, column) {
+        var filtered = [];
+        for (let value of values) {
+            var asStr = value[column];
+            if (fn(asStr))
+                filtered.push(value);
+        }
+        return filtered;
+    }
+    static dateFilter(values, fn, column) {
+        var filtered = [];
+        for (let value of values) {
+            var asDate = new Date(value[column]);
+            if (fn(asDate))
+                filtered.push(value);
+        }
+        return filtered;
+    }
+}
+
+class EzUITableFilterService {
+    sortMethods = [
+        {
+            state: 'asc',
+            sort: (a, b, column) => {
+                if (a[column] < b[column])
+                    return 1;
+                if (a[column] > b[column])
+                    return -1;
+                return 0;
+            }
+        },
+        {
+            state: 'desc',
+            sort: (a, b, column) => {
+                if (a[column] < b[column])
+                    return -1;
+                if (a[column] > b[column])
+                    return 1;
+                return 0;
+            }
+        }
+    ];
+    filterMethods = [
+        // Text filters
+        {
+            key: 'str',
+            action: 'con',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.includes(value), column)
+        },
+        {
+            key: 'str',
+            action: 'ncon',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => !i.includes(value), column)
+        },
+        {
+            key: 'str',
+            action: 'sta',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.startsWith(value), column)
+        },
+        {
+            key: 'str',
+            action: 'end',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => i.endsWith(value), column)
+        },
+        // Select filters
+        {
+            key: 'sel',
+            action: 'con',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => value.includes(i), column)
+        },
+        {
+            key: 'sel',
+            action: 'ncon',
+            filter: (values, column, value) => EzUIFilterHelpers.textFilter(values, (i) => !value.includes(i), column)
+        },
+        // Date filters
+        {
+            key: 'dat',
+            action: 'bef',
+            filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
+                var normal = value[0].toLocalNativeDate();
+                normal.setMilliseconds(value[1].toAbsoluteMilliseconds());
+                return i.getTime() < normal.getTime();
+            }, column)
+        },
+        {
+            key: 'dat',
+            action: 'aft',
+            filter: (values, column, value) => EzUIFilterHelpers.dateFilter(values, (i) => {
+                var normal = value[0].toLocalNativeDate();
+                normal.setMilliseconds(value[1].toAbsoluteMilliseconds());
+                return i.getTime() > normal.getTime();
+            }, column)
+        },
+    ];
+    sort(values, sort) {
+        var target = this.sortMethods.find(x => x.state == sort.state);
+        if (target)
+            return values.sort((a, b) => target.sort(a, b, sort.column));
+        return values;
+    }
+    filter(values, filter) {
+        var split = filter.expression.split(';');
+        var target = this.filterMethods.find(x => split[0] == x.key && split[1] == x.action);
+        if (target)
+            return target.filter(values, filter.column, filter.value);
+        return values;
+    }
+}
+
+class EzUITable {
+    filterService;
+    tableHeader;
+    tableRows;
+    tableExpandedrow;
+    presetHeader;
+    disabled = false;
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    showAdd = false;
+    showRefresh = false;
+    showClearFilters = false;
+    expandable = false;
+    values = [];
+    internalValues = [];
+    displayValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValues" }] : /* istanbul ignore next */ []));
+    sorts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sorts" }] : /* istanbul ignore next */ []));
+    filters = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    storageKey = null;
+    allowPresets = false;
+    constructor(filterService) {
+        this.filterService = filterService;
+    }
+    async ngOnChanges(changes) {
+        if (changes['values'] && changes['values'].previousValue != changes['values'].currentValue) {
+            this.values = changes['values'].currentValue;
+            this.applyFilter();
+        }
+    }
+    onAddItem = new EventEmitter();
+    onLoadItems = new EventEmitter();
+    onRowExpanded = new EventEmitter();
+    onPresetChange = new EventEmitter();
+    pageSize = signal(25, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    page = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pages = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    pageSizes = [10, 25, 50, 100, 1000];
+    processPage() {
+        var fromIndex = this.pageSize() * this.page();
+        var toIndex = fromIndex + this.pageSize();
+        this.displayValues.set(this.internalValues.slice(fromIndex, toIndex));
+    }
+    applySorts() {
+        var sorted = [...this.internalValues];
+        for (var sort of this.sorts())
+            sorted = this.filterService.sort(sorted, sort);
+        this.internalValues = sorted;
+    }
+    applyFilter() {
+        var filtered = [...this.values];
+        for (var filter of this.filters())
+            filtered = this.filterService.filter(filtered, filter);
+        this.internalValues = filtered;
+        this.applySorts();
+        this.state = [];
+        this.page.set(0);
+        this.pages.set(Math.floor(this.internalValues.length / this.pageSize()) + 1);
+        this.processPage();
+        this.presetHeader?.saveCurrentPreset();
+    }
+    state = {};
+    setSort(sort) {
+        var sorts = this.sorts();
+        var target = sorts.findIndex(x => x.column == sort.column);
+        if (target != -1)
+            sorts[target] = sort;
+        else
+            sorts.push(sort);
+        this.sorts.set(sorts);
+        this.applyFilter();
+    }
+    clearSort(column) {
+        var sorts = this.sorts();
+        var target = sorts.findIndex(x => x.column == column);
+        if (target != -1)
+            sorts.splice(target, 1);
+        this.sorts.set(sorts);
+        this.applyFilter();
+    }
+    setFilter(filter) {
+        var filters = this.filters();
+        var target = filters.findIndex(x => x.column == filter.column);
+        if (target != -1) {
+            filters[target] = filter;
+        }
+        else
+            filters.push(filter);
+        this.filters.set(filters);
+        this.applyFilter();
+    }
+    clearFilter(column) {
+        var filters = this.filters();
+        var target = filters.findIndex(x => x.column == column);
+        if (target != -1)
+            filters.splice(target, 1);
+        this.filters.set(filters);
+        this.applyFilter();
+    }
+    clearFilters() {
+        this.presetHeader?.currentPreset.set(null);
+        this.onPresetChange.emit(null);
+        this.sorts.set([]);
+        this.filters.set([]);
+        this.presetHeader?.savePresets();
+        this.applyFilter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITable, deps: [{ token: EzUITableFilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full h-full" }, queries: [{ propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "tableRows", first: true, predicate: ["tableRows"], descendants: true }, { propertyName: "tableExpandedrow", first: true, predicate: ["tableExpandedrow"], descendants: true }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+		<div class="ezui-table">
+			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
+				@if(values.length == 0){
+					<tui-block-status>
+						<tui-icon tuiSlot="top" icon="grid-2x2-x" />
+
+						<h3>No Data</h3>
+
+						No data to display.
+					</tui-block-status>
+				}
+				@else {
+					@if(showAdd || showRefresh || showClearFilters){
+						<div class="ezui-table-header">
+							@if(showRefresh){
+								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
+							}
+							@if(showAdd){
+								<button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
+							}
+							@if(showClearFilters){
+								<button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
+							}
+						</div>
+					}
+					@if(allowPresets){
+						<ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
+						</ezui-table-presets>
+					}
+					<tui-scrollbar class="forcefullsize">
+						<table tuiTable class="forcefullsize">
+							<thead>
+								<tr>
+									@if(expandable){
+										<th tuiTh></th>
+									}
+									<ng-container [ngTemplateOutlet]="tableHeader"></ng-container>
+								</tr>
+							</thead>
+							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
+								@let fullIndex = page() * pageSize() + i;
+								<tbody tuiTbody>
+									<tr>
+										@if(expandable){
+											<td tuiTd class="ezui-table-expander">
+												<button
+													appearance="flat-grayscale"
+													size="xs"
+													tuiIconButton
+													type="button"
+													[tuiChevron]="state[fullIndex] ?? false"
+													(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+												>
+													Toggle
+												</button>
+											</td>
+										}
+										<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+									</tr>
+								</tbody>
+
+								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
+									@if(state[fullIndex] ?? false){
+										<tr>
+											<ng-container [ngTemplateOutlet]="tableExpandedrow" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+										</tr>
+									}
+								</tbody>
+							}
+						</table>
+					</tui-scrollbar>
+					@if(internalValues.length > pageSize() || pageSize() != 25){
+						<div class="ezui-table-footer">
+							<tui-table-pagination
+								[(size)]="pageSize"
+								[(page)]="page"
+								[total]="internalValues.length"
+								[items]="pageSizes"
+								(pageChange)="processPage()"
+								(sizeChange)="processPage()"
+							/>
+						</div>
+					}
+				}
+			</tui-loader>
+		</div>
+    `, isInline: true, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{display:flex;height:100%;width:100%;flex-direction:column}.ezui-table .ezui-table-header{display:flex;flex-direction:row;gap:10px;padding:5px 5px 0}.ezui-table .ezui-table-footer{display:flex;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}\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: i3$2.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange", "sortChange"] }, { kind: "component", type: i3$2.TuiTableTbody, selector: "tbody[tuiTbody]", inputs: ["heading", "open"], outputs: ["openChange"] }, { kind: "component", type: i3$2.TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"], outputs: ["sorterChange"] }, { kind: "component", type: i3$2.TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }, { kind: "component", type: i3$2.TuiTableExpand, selector: "tui-table-expand, tbody[tuiTableExpand]", inputs: ["expanded"], outputs: ["expandedChange"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiTablePagination, selector: "tui-table-pagination", inputs: ["items", "total", "page", "size"], outputs: ["pageChange", "sizeChange", "paginationChange"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: i4$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: EzUITablePresets, selector: "ezui-table-presets", inputs: ["storageKey"], outputs: ["onPresetChange"] }, { 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.0.7", ngImport: i0, type: EzUITable, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table', imports: [FormsModule, CommonModule, TuiTable, TuiScrollbar, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, EzUITablePresets, TuiHint], template: `
+		<div class="ezui-table">
+			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
+				@if(values.length == 0){
+					<tui-block-status>
+						<tui-icon tuiSlot="top" icon="grid-2x2-x" />
+
+						<h3>No Data</h3>
+
+						No data to display.
+					</tui-block-status>
+				}
+				@else {
+					@if(showAdd || showRefresh || showClearFilters){
+						<div class="ezui-table-header">
+							@if(showRefresh){
+								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
+							}
+							@if(showAdd){
+								<button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
+							}
+							@if(showClearFilters){
+								<button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
+							}
+						</div>
+					}
+					@if(allowPresets){
+						<ezui-table-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
+						</ezui-table-presets>
+					}
+					<tui-scrollbar class="forcefullsize">
+						<table tuiTable class="forcefullsize">
+							<thead>
+								<tr>
+									@if(expandable){
+										<th tuiTh></th>
+									}
+									<ng-container [ngTemplateOutlet]="tableHeader"></ng-container>
+								</tr>
+							</thead>
+							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
+								@let fullIndex = page() * pageSize() + i;
+								<tbody tuiTbody>
+									<tr>
+										@if(expandable){
+											<td tuiTd class="ezui-table-expander">
+												<button
+													appearance="flat-grayscale"
+													size="xs"
+													tuiIconButton
+													type="button"
+													[tuiChevron]="state[fullIndex] ?? false"
+													(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+												>
+													Toggle
+												</button>
+											</td>
+										}
+										<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+									</tr>
+								</tbody>
+
+								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
+									@if(state[fullIndex] ?? false){
+										<tr>
+											<ng-container [ngTemplateOutlet]="tableExpandedrow" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+										</tr>
+									}
+								</tbody>
+							}
+						</table>
+					</tui-scrollbar>
+					@if(internalValues.length > pageSize() || pageSize() != 25){
+						<div class="ezui-table-footer">
+							<tui-table-pagination
+								[(size)]="pageSize"
+								[(page)]="page"
+								[total]="internalValues.length"
+								[items]="pageSizes"
+								(pageChange)="processPage()"
+								(sizeChange)="processPage()"
+							/>
+						</div>
+					}
+				}
+			</tui-loader>
+		</div>
+    `, host: {
+                        class: 'w-full h-full'
+                    }, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{display:flex;height:100%;width:100%;flex-direction:column}.ezui-table .ezui-table-header{display:flex;flex-direction:row;gap:10px;padding:5px 5px 0}.ezui-table .ezui-table-footer{display:flex;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}\n"] }]
+        }], ctorParameters: () => [{ type: EzUITableFilterService }], propDecorators: { tableHeader: [{
+                type: ContentChild,
+                args: ['tableHeader', { static: false }]
+            }], tableRows: [{
+                type: ContentChild,
+                args: ['tableRows', { static: false }]
+            }], tableExpandedrow: [{
+                type: ContentChild,
+                args: ['tableExpandedrow', { static: false }]
+            }], presetHeader: [{
+                type: ViewChild,
+                args: ['presetHeader', { static: false }]
+            }], disabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], showAdd: [{
+                type: Input
+            }], showRefresh: [{
+                type: Input
+            }], showClearFilters: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], storageKey: [{
+                type: Input
+            }], allowPresets: [{
+                type: Input
+            }], onAddItem: [{
+                type: Output
+            }], onLoadItems: [{
+                type: Output
+            }], onRowExpanded: [{
+                type: Output
+            }], onPresetChange: [{
+                type: Output
+            }], pageSize: [{
+                type: Input
+            }] } });
+
+class EzUITableDateFilter {
+    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;
+    filterTypes;
+    stringify = (item) => `${item.label}`;
+    constructor(table) {
+        this.table = table;
+        this.filterTypes = [
+            {
+                label: 'After',
+                expression: 'dat;aft'
+            },
+            {
+                label: 'Before',
+                expression: 'dat;bef'
+            }
+        ];
+        this.filterType = this.filterTypes[0];
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.filterType = this.filterTypes[0];
+                this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+                this.filterApplied.set(false);
+                return;
+            }
+            var filter = x.filters.find(x => x.column == this.column);
+            if (!filter) {
+                this.filterType = this.filterTypes[0];
+                this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+                this.filterApplied.set(false);
+                return;
+            }
+            var type = this.filterTypes.find(x => x.expression == filter.expression);
+            if (!type) {
+                this.filterType = this.filterTypes[0];
+                this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+                this.filterApplied.set(false);
+                return;
+            }
+            this.filterType = type;
+            this.value = filter.value;
+            this.filterApplied.set(true);
+        });
+    }
+    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.0.7", ngImport: i0, type: EzUITableDateFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield (keydown.enter)="applyFilter(filterType.expression)">
+						<label tuiLabel>Choose a date</label>
+						<input
+							tuiInputDateTime
+							[(ngModel)]="value"
+						/>
+						<tui-calendar *tuiDropdown />
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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],a[tuiIconButton],button[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"] }, { kind: "directive", type: i4$1.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITableDateFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table-datefilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime], 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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield (keydown.enter)="applyFilter(filterType.expression)">
+						<label tuiLabel>Choose a date</label>
+						<input
+							tuiInputDateTime
+							[(ngModel)]="value"
+						/>
+						<tui-calendar *tuiDropdown />
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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 EzUITableSelectFilter {
+    column;
+    filterApplied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterApplied" }] : /* istanbul ignore next */ []));
+    filterVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
+    table;
+    options = [];
+    selected = [];
+    filterType;
+    filterTypes;
+    stringify = (item) => `${item.label}`;
+    constructor(table) {
+        this.table = table;
+        this.filterTypes = [
+            {
+                label: 'Contains',
+                expression: 'sel;con'
+            },
+            {
+                label: 'Not Contains',
+                expression: 'sel;ncon'
+            }
+        ];
+        this.filterType = this.filterTypes[0];
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.filterType = this.filterTypes[0];
+                this.selected = [];
+                this.filterApplied.set(false);
+                return;
+            }
+            var filter = x.filters.find(x => x.column == this.column);
+            if (!filter) {
+                this.filterType = this.filterTypes[0];
+                this.selected = [];
+                this.filterApplied.set(false);
+                return;
+            }
+            var type = this.filterTypes.find(x => x.expression == filter.expression);
+            if (!type) {
+                this.filterType = this.filterTypes[0];
+                this.selected = [];
+                this.filterApplied.set(false);
+                return;
+            }
+            this.filterType = type;
+            this.selected = filter.value;
+            this.filterApplied.set(true);
+        });
+    }
+    applyFilter(expression) {
+        this.table.setFilter({
+            column: this.column,
+            value: this.selected,
+            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.0.7", ngImport: i0, type: EzUITableSelectFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITableSelectFilter, isStandalone: true, selector: "ezui-table-selectfilter", inputs: { column: "column", options: "options" }, 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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+					<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<button
+						appearance="secondary-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="selected"
+					>
+						{{selected.length === 1 ? selected[0] : 'Selected ' + selected.length}}
+
+						<tui-data-list *tuiDropdown>
+							<tui-opt-group
+								label="Options"
+								tuiMultiSelectGroup
+							>
+								@for (option of options; track option) {
+									<button
+										tuiOption
+										type="button"
+										[value]="option"
+									>
+										{{ option }}
+									</button>
+								}
+							</tui-opt-group>
+						</tui-data-list>
+					</button>
+
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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.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],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i4$1.TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITableSelectFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table-selectfilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiMultiSelect, TuiDataList], template: `
+		@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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+					<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<button
+						appearance="secondary-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="selected"
+					>
+						{{selected.length === 1 ? selected[0] : 'Selected ' + selected.length}}
+
+						<tui-data-list *tuiDropdown>
+							<tui-opt-group
+								label="Options"
+								tuiMultiSelectGroup
+							>
+								@for (option of options; track option) {
+									<button
+										tuiOption
+										type="button"
+										[value]="option"
+									>
+										{{ option }}
+									</button>
+								}
+							</tui-opt-group>
+						</tui-data-list>
+					</button>
+
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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
+            }], options: [{
+                type: Input
+            }] } });
+
+class EzUITableTextFilter {
+    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 = '';
+    filterType;
+    filterTypes;
+    stringify = (item) => `${item.label}`;
+    constructor(table) {
+        this.table = table;
+        this.filterTypes = [
+            {
+                label: 'Contains',
+                expression: 'str;con'
+            },
+            {
+                label: 'Not Contains',
+                expression: 'str;ncon'
+            },
+            {
+                label: 'Starts With',
+                expression: 'str;sta'
+            },
+            {
+                label: 'Ends With',
+                expression: 'str;end'
+            }
+        ];
+        this.filterType = this.filterTypes[0];
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.filterType = this.filterTypes[0];
+                this.value = "";
+                this.filterApplied.set(false);
+                return;
+            }
+            var filter = x.filters.find(x => x.column == this.column);
+            if (!filter) {
+                this.filterType = this.filterTypes[0];
+                this.value = "";
+                this.filterApplied.set(false);
+                return;
+            }
+            var type = this.filterTypes.find(x => x.expression == filter.expression);
+            if (!type) {
+                this.filterType = this.filterTypes[0];
+                this.value = "";
+                this.filterApplied.set(false);
+                return;
+            }
+            this.filterType = type;
+            this.value = filter.value;
+            this.filterApplied.set(true);
+        });
+    }
+    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.0.7", ngImport: i0, type: EzUITableTextFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITableTextFilter, isStandalone: true, selector: "ezui-table-textfilter", 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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield tuiTextfieldSize="s" (keydown.enter)="applyFilter(filterType.expression)">
+						<input tuiInput [(ngModel)]="value"/>
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITableTextFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table-textfilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput], 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">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield tuiTextfieldSize="s" (keydown.enter)="applyFilter(filterType.expression)">
+						<input tuiInput [(ngModel)]="value"/>
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							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 EzUITTableSortableColumn {
+    column;
+    table;
+    state = 'none';
+    icon = signal("text-align-justify", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    constructor(table) {
+        this.table = table;
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.state = 'none';
+                this.icon.set('text-align-justify');
+                return;
+            }
+            var sort = x.sorts.find(x => x.column == this.column);
+            if (!sort) {
+                this.state = 'none';
+                this.icon.set('text-align-justify');
+                return;
+            }
+            this.state = sort.state;
+            switch (sort.state) {
+                case 'none':
+                    this.icon.set('text-align-justify');
+                    break;
+                case 'asc':
+                    this.icon.set('arrow-up-wide-narrow');
+                    break;
+                case 'desc':
+                    this.icon.set('arrow-down-wide-narrow');
+                    break;
+            }
+        });
+    }
+    sort() {
+        switch (this.state) {
+            case 'none':
+                this.state = 'asc';
+                this.table.setSort({ column: this.column, state: this.state });
+                this.icon.set('arrow-up-wide-narrow');
+                break;
+            case 'asc':
+                this.state = 'desc';
+                this.table.setSort({ column: this.column, state: this.state });
+                this.icon.set('arrow-down-wide-narrow');
+                break;
+            case 'desc':
+                this.state = 'none';
+                this.table.clearSort(this.column);
+                this.icon.set('text-align-justify');
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITTableSortableColumn, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITTableSortableColumn, isStandalone: true, selector: "ezui-table-sortable", inputs: { column: "column" }, ngImport: i0, template: `
+		@if(column){
+			<button tuiButton style="opacity:0.72" [iconStart]="icon()" size="s" appearance="flat-grayscale" (click)="sort()"></button>
+		}
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITTableSortableColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ezui-table-sortable',
+                    imports: [CommonModule, TuiButton],
+                    template: `
+		@if(column){
+			<button tuiButton style="opacity:0.72" [iconStart]="icon()" size="s" appearance="flat-grayscale" (click)="sort()"></button>
+		}
+    `
+                }]
+        }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { column: [{
+                type: Input
+            }] } });
+
+class EzUITextInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    value = "";
+    valueChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITextInput, isStandalone: true, selector: "ezui-textinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+		</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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-textinput', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiInput
+                    ], template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class BaseCRUDInterface {
+    http;
+    messageService;
+    confirmationService;
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    allItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+    currentItem = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
+    newItemTemplate() {
+        return {};
+    }
+    getAllEndpoint = '';
+    getEndpoint = '';
+    patchEndpoint = '';
+    postEndpoint = '';
+    deleteEndpoint = '';
+    canRead = true;
+    canWrite = true;
+    showDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDialog" }] : /* istanbul ignore next */ []));
+    loadOnInit = true;
+    showDeleteDialog = true;
+    deleteDialogMessage = "Are you sure you want to delete this item?";
+    showSaveDialog = false;
+    savewDialogMessage = "Are you sure you want to save this item?";
+    constructor(http, messageService, confirmationService) {
+        this.http = http;
+        this.messageService = messageService;
+        this.confirmationService = confirmationService;
+    }
+    async ngOnInit() {
+        if (this.canRead && this.loadOnInit)
+            await this.loadItems();
+    }
+    async loadItems() {
+        if (!this.canRead)
+            throw new Error('You do not have read permissions!');
+        this.isLoading.set(true);
+        try {
+            this.allItems.set(await firstValueFrom(this.http.get(this.getAllEndpoint)));
+        }
+        catch {
+            this.messageService.open("Failed to load all items!", {
+                label: "Load Error",
+                appearance: 'negative',
+                icon: 'circle-x',
+                autoClose: 10000
+            }).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+    async saveItem() {
+        if (!this.canWrite)
+            throw new Error('You do not have write permissions!');
+        if (this.showSaveDialog) {
+            this.confirmationService.open(TUI_CONFIRM, {
+                label: this.savewDialogMessage,
+                size: 's'
+            })
+                .pipe(switchMap(async (response) => {
+                if (response === true)
+                    await this.saveItemInner();
+            }))
+                .subscribe();
+        }
+        else
+            await this.saveItemInner();
+    }
+    async saveItemInner() {
+        this.isLoading.set(true);
+        try {
+            var current = this.currentItem();
+            if (current.id != '') {
+                await firstValueFrom(this.http.patch(this.patchEndpoint, current));
+                this.messageService.open("The item was updated with the new values", {
+                    label: "Item Updated",
+                    appearance: 'positive',
+                    icon: 'circle-x',
+                    autoClose: 1000
+                }).subscribe();
+            }
+            else {
+                await firstValueFrom(this.http.post(this.postEndpoint, current));
+                this.messageService.open("A new items was created", {
+                    label: "Item Created",
+                    appearance: 'positive',
+                    icon: 'circle-x',
+                    autoClose: 1000
+                }).subscribe();
+            }
+            this.showDialog.set(false);
+            await this.loadItems();
+        }
+        catch {
+            this.messageService.open("Save failed!", {
+                label: "Save Error",
+                appearance: 'negative',
+                icon: 'circle-x',
+                autoClose: 10000
+            }).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+    async deleteItem() {
+        if (!this.canWrite)
+            throw new Error('You do not have write permissions!');
+        if (this.showDeleteDialog) {
+            this.confirmationService.open(TUI_CONFIRM, {
+                label: this.deleteDialogMessage,
+                size: 's'
+            })
+                .pipe(switchMap(async (response) => {
+                if (response === true)
+                    await this.deleteItemInner();
+            }))
+                .subscribe();
+        }
+        else
+            await this.deleteItemInner();
+    }
+    async deleteItemInner() {
+        this.isLoading.set(true);
+        try {
+            await firstValueFrom(this.http.delete(this.deleteEndpoint + '?ID=' + this.currentItem().id));
+            this.messageService.open("The item was successfully deleted", {
+                label: "Item Deleted",
+                appearance: 'positive',
+                icon: 'circle-x',
+                autoClose: 1000
+            }).subscribe();
+            this.showDialog.set(false);
+            await this.loadItems();
+        }
+        catch {
+            this.messageService.open("Delete failed!", {
+                label: "Delete Error",
+                appearance: 'negative',
+                icon: 'circle-x',
+                autoClose: 10000
+            }).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+    async showEditItem(id) {
+        if (!this.canRead)
+            throw new Error('You do not have read permissions!');
+        this.isLoading.set(true);
+        try {
+            var fetched = await firstValueFrom(this.http.get(this.getEndpoint + '?ID=' + id));
+            this.currentItem.set(fetched);
+            this.showDialog.set(true);
+        }
+        catch {
+            this.messageService.open("Loading failed!", {
+                label: "Load Error",
+                appearance: 'negative',
+                icon: 'circle-x',
+                autoClose: 10000
+            }).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+    async showAddItem() {
+        this.currentItem.set(this.newItemTemplate());
+        this.showDialog.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseCRUDInterface, deps: [{ token: i1$1.HttpClient }, { token: i3$1.TuiNotificationService }, { token: i3$3.TuiResponsiveDialogService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: BaseCRUDInterface, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseCRUDInterface, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i3$1.TuiNotificationService }, { type: i3$3.TuiResponsiveDialogService }] });
+
+class BaseListService {
+    http;
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    getAllEndpoint = '';
+    getEndpoint = '';
+    isLoaded = false;
+    isLoading = false;
+    onUpdated = new EventEmitter();
+    constructor(http) {
+        this.http = http;
+    }
+    async Load() {
+        if (!this.isLoading) {
+            this.isLoaded = false;
+            this.isLoading = true;
+            var value = await firstValueFrom(this.http.get(this.getAllEndpoint));
+            this.items.set(value);
+            this.isLoading = false;
+            this.isLoaded = true;
+            this.onUpdated.emit();
+        }
+    }
+    async List() {
+        if (!this.isLoaded)
+            await this.waitForValue(() => this.isLoaded === true);
+        return this.items();
+    }
+    async ListGet(id) {
+        if (!this.isLoaded)
+            await this.waitForValue(() => this.isLoaded === true);
+        var target = this.items().find(x => x.id == id);
+        if (target)
+            return target;
+        return null;
+    }
+    async Get(id) {
+        var item = await firstValueFrom(this.http.get(this.getEndpoint + "?ID=" + id));
+        return item;
+    }
+    async waitForValue(test) {
+        const delayMs = 500;
+        while (!test())
+            await new Promise(resolve => setTimeout(resolve, delayMs));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseListService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: BaseListService, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseListService, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseCRUDInterface, BaseListService, EzUIDateInput, EzUIFileInput, EzUIFilterHelpers, EzUIMarkdownEditor, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITTableSortableColumn, EzUITable, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+//# sourceMappingURL=kris701-ez-ui.mjs.map