@kris701/ez-ui 0.0.1

package/src/components/floattable/sorts/tuiThSortable.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, signal } from "@angular/core";
+import { TuiButton } from "@taiga-ui/core";
+import { FloatTable } from "../floattable";
+import { FloatTableSort } from "../models/FloatTableSort";
+
+@Component({
+    selector: 'tuiThSortable',
+    imports: [CommonModule, TuiButton],
+    template: `
+		@if(tuiThSortable){
+			<button tuiButton style="opacity:0.72" [iconStart]="icon()" size="s" appearance="flat-grayscale" (click)="sort()"></button>
+		}
+    `
+})
+export class TableSortableColumn {
+    @Input() tuiThSortable!: string;
+
+	table : FloatTable;
+	state : 'asc' | 'desc' | 'none' = 'none';
+	icon = signal<string | null | undefined>("text-align-justify");
+
+	constructor(table : FloatTable){
+		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.tuiThSortable);
+			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.tuiThSortable, state: this.state } as FloatTableSort)
+				this.icon.set('arrow-up-wide-narrow');
+				break;
+			case 'asc':
+				this.state = 'desc';
+				this.table.setSort({ column: this.tuiThSortable, state: this.state } as FloatTableSort)
+				this.icon.set('arrow-down-wide-narrow');
+				break;
+			case 'desc':
+				this.state = 'none';
+				this.table.clearSort(this.tuiThSortable);
+				this.icon.set('text-align-justify');
+				break;
+		}
+	}
+}

package/src/components/markdowneditor.ts

@@ -0,0 +1,340 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, signal, SimpleChanges, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiButton, TuiScrollbar } from '@taiga-ui/core';
+import { TuiTextarea } from '@taiga-ui/kit';
+import { marked } from 'marked';
+import { compressImage } from '../helpers/compressImage';
+import { EzUIMenuBar, MenuBarItem } from "./menubar";
+
+@Component({
+    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: 0.125rem solid var(--tui-background-accent-1);
+			border-radius: var(--tui-radius-l);
+
+			.editor {
+				display:flex;
+				flex-direction: column;
+				width: 100%;
+
+				.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 0.125rem 0.1875rem rgba(0, 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%;
+
+			::ng-deep tui-scrollbar {
+				height:100%;
+			}
+
+			::ng-deep .t-content {
+				display:flex;
+				block-size:auto !important;
+			}
+
+			.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 0.125rem 0.1875rem rgba(0, 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%;
+
+			.edit-button {
+				position:absolute;
+				z-index: 999;
+			}
+
+			::ng-deep tui-scrollbar {
+				height:100%;
+			}
+
+			::ng-deep .t-content {
+				display:flex;
+				block-size:auto !important;
+			}
+
+			.preview {
+				padding:10px;
+			}
+		}
+    `
+})
+export class EzUIMarkdownEditor implements OnChanges {
+    @ViewChild('preview') preview: ElementRef<HTMLDivElement> | undefined;
+    @ViewChild('editor') editor: ElementRef<HTMLTextAreaElement> | undefined;
+    @ViewChild('fileUpload') fileUpload: ElementRef<HTMLInputElement> | undefined;
+
+    @Input() disabled: boolean = false;
+
+    @Input() value: string | null = null;
+    @Output() valueChange = new EventEmitter<string | null>();
+
+	unsavedValue = signal<string>("");
+
+    isFirst : boolean = true;
+    isEditing = signal<boolean>(false);
+
+    items = signal<MenuBarItem[]>([
+		{
+			icon: 'save',
+			command: async () => await this.toggleEdit(true)
+		} as MenuBarItem,
+		{
+			icon: 'x',
+			command: async () => await this.toggleEdit(false)
+		} as MenuBarItem,
+        {
+            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);
+                }
+            }
+        } as MenuBarItem,
+        {
+            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);
+                }
+            }
+        } as MenuBarItem,
+        {
+            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);
+                        }
+                    }
+                } as MenuBarItem,
+                {
+                    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);
+                        }
+                    }
+                } as MenuBarItem,
+                {
+                    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);
+                        }
+                    }
+                } as MenuBarItem,
+            ]
+        } as MenuBarItem,
+
+        {
+            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);
+                }
+            }
+        } as MenuBarItem,
+
+        {
+            icon: 'image',
+            command: async () => {
+                if (this.editor){
+                    this.fileUpload?.nativeElement.click();
+                }
+            }
+        } as MenuBarItem,
+    ])
+
+    async onFileSelected(event: any) {
+        var files: File[] = Array.from(event.target.files);
+        if (files && files.length > 0) {
+            var file = files[0];
+            await this.insertImageInEditor(file);
+            this.fileUpload!.nativeElement.value = '';
+        }
+    }
+
+    toBase65(file : File){
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+        })
+    }
+
+    async onPaste(event : any){
+        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 : File){
+        var compressed = await compressImage(file, 0.5, 300, 300);
+        var asBase64 = await this.toBase65(compressed as File);
+        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 : string, finalStart : number, finalFinish : number){
+        var editor = this.editor!.nativeElement;
+        editor.focus();
+        document.execCommand("insertText", false, newStr);
+        await this.formatPreview();
+        editor.focus();
+        editor.setSelectionRange(finalStart, finalFinish);
+    }
+
+    async ngOnChanges(changes: SimpleChanges) {
+        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 : boolean){
+		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);
+	}
+}

package/src/components/menubar.ts

@@ -0,0 +1,144 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiButton, TuiDropdown, TuiGroup, TuiOption } from '@taiga-ui/core';
+import { TuiChevron } from '@taiga-ui/kit';
+
+export interface MenuBarItem {
+	label: string | null;
+	icon: string | null;
+	items : MenuBarItem[];
+	disabled: boolean;
+	expanded: boolean;
+	command() : Promise<any>;
+}
+
+@Component({
+    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;
+		}
+	`
+})
+export class EzUIMenuBarSubDataList {
+    @Input() subdatalist: MenuBarItem[] = [];
+}
+
+@Component({
+    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;
+		}
+    `
+})
+export class EzUIMenuBar implements OnChanges {
+    @Input() items: MenuBarItem[] = [];
+
+	ngOnChanges(changes: SimpleChanges) {
+        if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
+            this.items = changes['items'].currentValue;
+        }
+    }
+}

package/src/components/multiselect.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiDataList, TuiDropdown, TuiSelectLike, TuiTextfield } from '@taiga-ui/core';
+import { TuiChevron, TuiInputChip, TuiInputNumber, TuiMultiSelect } from '@taiga-ui/kit';
+
+@Component({
+    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>
+    `,
+    styles: `
+    `
+})
+export class EzUIMultiSelect implements OnChanges {
+    @Input() icon: string = '';
+    @Input() label: string = '';
+
+	@Input() size: "l" | "m" | "s" = 'm';
+
+    @Input() optionLabel: string | undefined = undefined;
+    @Input() optionValue: string | undefined = undefined;
+
+    @Input() options: any[] = [];
+    @Input() disabled: boolean = false;
+
+    @Input() selected: any[] | null | undefined = undefined;
+    @Output() selectedChange = new EventEmitter<any[] | null | undefined>();
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
+            this.selected = changes['selected'].currentValue;
+        }
+    }
+
+	stringify = (value: string): string => this.getOptionLabel(this.options.find((item) => this.getOptionValue(item) === value));
+
+    getOptionLabel(item: any) {
+		if (!item)
+			return "";
+        if (this.optionLabel == undefined || this.optionLabel == '') return item;
+        return item[this.optionLabel];
+    }
+
+    getOptionValue(item: any) {
+		if (!item)
+			return "";
+        if (this.optionValue == undefined || this.optionValue == '') return item;
+        return item[this.optionValue];
+    }
+}

package/src/components/numberinput.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiInput } from '@taiga-ui/core';
+import { TuiInputNumber } from '@taiga-ui/kit';
+
+@Component({
+    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>
+    `,
+    styles: `
+    `
+})
+export class EzUINumberInput implements OnChanges {
+    @Input() icon: string = '';
+    @Input() label: string = '';
+
+	@Input() size: "l" | "m" | "s" = 'm';
+
+    @Input() disabled: boolean = false;
+
+	@Input() min : number | null = null;
+	@Input() max : number | null = null;
+
+    @Input() value: number | string = "";
+    @Output() valueChange = new EventEmitter<number | string>();
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+}