@kris701/ez-ui 0.0.9 → 1.0.0

package/src/components/markdowneditor.ts

@@ -1,340 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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;
-        }
-    }
-}

package/src/components/passwordinput.ts

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

package/src/components/textinput.ts

@@ -1,40 +0,0 @@
-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';
-
-@Component({
-    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>
-    `,
-    styles: `
-    `
-})
-export class EzUITextInput implements OnChanges {
-    @Input() icon: string = '';
-    @Input() label: string = '';
-
-	@Input() size: "l" | "m" | "s" = 'm';
-
-    @Input() disabled: boolean = false;
-
-    @Input() value: string = "";
-    @Output() valueChange = new EventEmitter<string>();
-
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
-            this.value = changes['value'].currentValue;
-        }
-    }
-}