@kris701/ez-ui 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# EzUI
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build EzUI
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ez-ui
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ez-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@kris701/ez-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@taiga-ui/addon-mobile": "^5.15.0",
+    "@taiga-ui/core": "^5.15.0",
+    "@taiga-ui/kit": "^5.15.0",
+	"@taiga-ui/icons": "^5.15.0",
+    "compressorjs": "^1.3.0",
+	"marked": "^18.0.6"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/components/dateinput.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiDay } from '@taiga-ui/cdk/date-time';
+import { TuiInput } from '@taiga-ui/core';
+import { TuiInputDate } from '@taiga-ui/kit';
+
+@Component({
+    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>
+    `,
+    styles: `
+    `
+})
+export class EzUIDateInput implements OnChanges {
+    @Input() icon: string = '';
+    @Input() label: string = '';
+
+	@Input() size: "l" | "m" | "s" = 'm';
+
+    @Input() disabled: boolean = false;
+
+	@Input() min : Date | null = null;
+	@Input() max : Date | null = null;
+
+	TuiDay = TuiDay;
+
+    @Input() value: Date | string = new Date;
+    @Output() valueChange = new EventEmitter<Date | string>();
+
+	internalValue : TuiDay | null = null;
+
+    ngOnChanges(changes: SimpleChanges) {
+        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);
+		}
+	}
+}

package/src/components/floatfileupload.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiFiles } from '@taiga-ui/kit';
+
+@Component({
+	selector: 'app-floatfileupload',
+    imports: [FormsModule, TuiFiles],
+	template:`
+		<label tuiInputFiles>
+			<input
+				#validator="tuiInputFilesValidator"
+				accept="*/*"
+				tuiInputFiles
+				[ngModel]="files()"
+				(ngModelChange)="onChange($event)"
+			/>
+		</label>
+
+		<tui-files>
+			@for(file of files(); track file){
+				<tui-file
+					state="normal"
+					[file]="file"
+					(remove)="removeFile(file)"
+				/>
+			}
+		</tui-files>
+	`
+})
+export default class FloatFileUpload {
+	public files = signal<File[]>([]);
+
+	public clear(){
+		this.files.set([]);
+	}
+
+	protected onChange(files: File[] | File): void {
+		if (files instanceof File)
+			this.files.set([files]);
+		else
+			this.files.set(files);
+	}
+
+	removeFile(file : File){
+		var files = this.files();
+		var index = files.indexOf(file);
+		if (index != -1){
+			files.splice(index, 1);
+			this.files.set(files);
+		}
+	}
+}

package/src/components/floattable/filters/tuiThDateFilter.ts

@@ -0,0 +1,159 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, signal } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { TuiDay, TuiTime } from "@taiga-ui/cdk/date-time";
+import { TuiButton, TuiDropdown, TuiInput } from "@taiga-ui/core";
+import { TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiDataListWrapper, TuiInputDateTime, TuiStringifyContentPipe } from "@taiga-ui/kit";
+import { FloatTable } from "../floattable";
+import { FloatTableFilter } from "../models/FloatTableFilter";
+
+@Component({
+    selector: 'tuiThDateFilter',
+    imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiInputDateTime],
+    template: `
+		@if(tuiThDateFilter){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="flex flex-col gap-2 p-4" style="min-width:20rem">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield (keydown.enter)="applyFilter(filterType.expression)">
+						<label tuiLabel>Choose a date</label>
+						<input
+							tuiInputDateTime
+							[(ngModel)]="value"
+						/>
+						<tui-calendar *tuiDropdown />
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `
+})
+export class TableDateFilter {
+    @Input() tuiThDateFilter!: string;
+
+	filterApplied = signal<boolean>(false);
+	filterVisible = signal<boolean>(false);
+
+	table : FloatTable;
+
+	value : [TuiDay, TuiTime] = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+	filterType : any;
+	filterTypes : any[];
+
+	protected readonly stringify = (item: any): string => `${item.label}`;
+
+	constructor(table : FloatTable){
+		this.table = table;
+
+		this.filterTypes = [
+			{
+				label: 'After',
+				expression: 'dat;aft'
+			},
+			{
+				label: 'Before',
+				expression: 'dat;bef'
+			}
+		];
+		this.filterType = this.filterTypes[0];
+
+		this.table.onPresetChange.subscribe(x => {
+			if (!x)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+				this.filterApplied.set(false);
+				return;
+			}
+			var filter = x.filters.find(x => x.column == this.tuiThDateFilter);
+			if (!filter)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+				this.filterApplied.set(false);
+				return;
+			}
+			var type = this.filterTypes.find(x => x.expression == filter!.expression);
+			if (!type)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = [TuiDay.currentLocal(), TuiTime.currentLocal()];
+				this.filterApplied.set(false);
+				return;
+			}
+
+			this.filterType = type;
+			this.value = filter.value;
+			this.filterApplied.set(true);
+		})
+	}
+
+	applyFilter(expression : string){
+		this.table.setFilter({
+			column: this.tuiThDateFilter,
+			value: this.value,
+			expression: expression,
+		} as FloatTableFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(true);
+	}
+
+	clearFilter(){
+		this.table.clearFilter(this.tuiThDateFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(false);
+	}
+}

package/src/components/floattable/filters/tuiThSelectFilter.ts

@@ -0,0 +1,178 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, signal } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { TuiButton, TuiDataList, TuiDropdown, TuiInput } from "@taiga-ui/core";
+import { TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiDataListWrapper, TuiMultiSelect, TuiStringifyContentPipe } from "@taiga-ui/kit";
+import { FloatTable } from "../floattable";
+import { FloatTableFilter } from "../models/FloatTableFilter";
+
+@Component({
+    selector: 'tuiThSelectFilter',
+    imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput, TuiMultiSelect, TuiDataList],
+    template: `
+		@if(tuiThSelectFilter){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="flex flex-col gap-2 p-4" style="min-width:20rem">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+					<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<button
+						appearance="secondary-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="selected"
+					>
+						{{selected.length === 1 ? selected[0] : 'Selected ' + selected.length}}
+
+						<tui-data-list *tuiDropdown>
+							<tui-opt-group
+								label="Options"
+								tuiMultiSelectGroup
+							>
+								@for (option of options; track option) {
+									<button
+										tuiOption
+										type="button"
+										[value]="option"
+									>
+										{{ option }}
+									</button>
+								}
+							</tui-opt-group>
+						</tui-data-list>
+					</button>
+
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `
+})
+export class TableSelectFilter {
+    @Input() tuiThSelectFilter!: string;
+
+	filterApplied = signal<boolean>(false);
+	filterVisible = signal<boolean>(false);
+
+	table : FloatTable;
+
+	@Input() options : string[] = [];
+	selected : string[] = [];
+	filterType : any;
+	filterTypes : any[];
+
+	protected readonly stringify = (item: any): string => `${item.label}`;
+
+	constructor(table : FloatTable){
+		this.table = table;
+
+		this.filterTypes = [
+			{
+				label: 'Contains',
+				expression: 'sel;con'
+			},
+			{
+				label: 'Not Contains',
+				expression: 'sel;ncon'
+			}
+		];
+		this.filterType = this.filterTypes[0];
+
+		this.table.onPresetChange.subscribe(x => {
+			if (!x)
+			{
+				this.filterType = this.filterTypes[0];
+				this.selected = [];
+				this.filterApplied.set(false);
+				return;
+			}
+			var filter = x.filters.find(x => x.column == this.tuiThSelectFilter);
+			if (!filter)
+			{
+				this.filterType = this.filterTypes[0];
+				this.selected = [];
+				this.filterApplied.set(false);
+				return;
+			}
+			var type = this.filterTypes.find(x => x.expression == filter!.expression);
+			if (!type)
+			{
+				this.filterType = this.filterTypes[0];
+				this.selected = [];
+				this.filterApplied.set(false);
+				return;
+			}
+
+			this.filterType = type;
+			this.selected = filter.value;
+			this.filterApplied.set(true);
+		})
+	}
+
+	applyFilter(expression : string){
+		this.table.setFilter({
+			column: this.tuiThSelectFilter,
+			value: this.selected,
+			expression: expression,
+		} as FloatTableFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(true);
+	}
+
+	clearFilter(){
+		this.table.clearFilter(this.tuiThSelectFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(false);
+	}
+}

package/src/components/floattable/filters/tuiThTextFilter.ts

@@ -0,0 +1,161 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, signal } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { TuiButton, TuiDropdown, TuiInput } from "@taiga-ui/core";
+import { TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiDataListWrapper, TuiStringifyContentPipe } from "@taiga-ui/kit";
+import { FloatTable } from "../floattable";
+import { FloatTableFilter } from "../models/FloatTableFilter";
+
+@Component({
+    selector: 'tuiThTextFilter',
+    imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInput],
+    template: `
+		@if(tuiThTextFilter){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="flex flex-col gap-2 p-4" style="min-width:20rem">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield tuiTextfieldSize="s" (keydown.enter)="applyFilter(filterType.expression)">
+						<input tuiInput [(ngModel)]="value"/>
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `
+})
+export class TableTextFilter {
+    @Input() tuiThTextFilter!: string;
+
+	filterApplied = signal<boolean>(false);
+	filterVisible = signal<boolean>(false);
+
+	table : FloatTable;
+
+	value : string = '';
+	filterType : any;
+	filterTypes : any[];
+
+	protected readonly stringify = (item: any): string => `${item.label}`;
+
+	constructor(table : FloatTable){
+		this.table = table;
+
+		this.filterTypes = [
+			{
+				label: 'Contains',
+				expression: 'str;con'
+			},
+			{
+				label: 'Not Contains',
+				expression: 'str;ncon'
+			},
+			{
+				label: 'Starts With',
+				expression: 'str;sta'
+			},
+			{
+				label: 'Ends With',
+				expression: 'str;end'
+			}
+		];
+		this.filterType = this.filterTypes[0];
+
+		this.table.onPresetChange.subscribe(x => {
+			if (!x)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = "";
+				this.filterApplied.set(false);
+				return;
+			}
+			var filter = x.filters.find(x => x.column == this.tuiThTextFilter);
+			if (!filter)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = "";
+				this.filterApplied.set(false);
+				return;
+			}
+			var type = this.filterTypes.find(x => x.expression == filter!.expression);
+			if (!type)
+			{
+				this.filterType = this.filterTypes[0];
+				this.value = "";
+				this.filterApplied.set(false);
+				return;
+			}
+
+			this.filterType = type;
+			this.value = filter.value;
+			this.filterApplied.set(true);
+		})
+	}
+
+	applyFilter(expression : string){
+		this.table.setFilter({
+			column: this.tuiThTextFilter,
+			value: this.value,
+			expression: expression,
+		} as FloatTableFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(true);
+	}
+
+	clearFilter(){
+		this.table.clearFilter(this.tuiThTextFilter);
+		this.filterVisible.set(false);
+		this.filterApplied.set(false);
+	}
+}