@kris701/ez-ui 0.0.8 → 0.0.10

package/fesm2022/kris701-ez-ui.mjs

@@ -0,0 +1,1074 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, ViewChild, Directive } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TuiDay } from '@taiga-ui/cdk/date-time';
+import * as i1$1 from '@taiga-ui/core';
+import { TuiInput, TuiOption, TuiDropdown, TuiGroup, TuiButton, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiIcon } from '@taiga-ui/core';
+import * as i2$1 from '@taiga-ui/kit';
+import { TuiInputDate, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, 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 { CommonModule } from '@angular/common';
+import { marked } from 'marked';
+import Compressor from 'compressorjs';
+import * as i7 from '@taiga-ui/cdk/directives/item';
+import { firstValueFrom, switchMap } from 'rxjs';
+import * as i1$2 from '@angular/common/http';
+import * as i3$1 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: i2$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
+            }] } });
+
+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: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i1$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: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$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: i2$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: i2$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: i1$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i1$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i1$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: i1$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i2$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i2$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: i2$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: i1$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 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: i1$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$2.HttpClient }, { token: i1$1.TuiNotificationService }, { token: i3$1.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$2.HttpClient }, { type: i1$1.TuiNotificationService }, { type: i3$1.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$2.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$2.HttpClient }] });
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseCRUDInterface, BaseListService, EzUIDateInput, EzUIMarkdownEditor, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITextInput, compressImage };
+//# sourceMappingURL=kris701-ez-ui.mjs.map