aril 0.0.45 → 0.0.46

package/ui/toggle-button/src/toggle-button.component.ts

@@ -0,0 +1,22 @@
+import { NgClass, NgStyle } from '@angular/common';
+import { Component, Input, Output, EventEmitter, input } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+@Component({  
+  standalone: true,
+  selector: 'aril-toggle-button',
+  templateUrl: './toggle-button.component.html',
+  styleUrls: ['./toggle-button.component.scss'],
+  imports: [ButtonModule, NgClass,NgStyle]
+})
+export class ToggleButtonComponent {
+   buttonLabels = input.required<string[]>();
+  @Output() selectionChange: EventEmitter<number> = new EventEmitter<number>();
+
+  selectedIndex = 0;
+
+  toggleButton(index: number) {
+    this.selectedIndex = index;
+    this.selectionChange.emit(this.selectedIndex);
+  }
+}

package/ui/tree/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/tree.component';
+export * from './src/tree.component';

package/ui/tree/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/tree/src/tree.component.html

@@ -0,0 +1,16 @@
+<!-- <div class="mb-3">
+	<aril-button [label]="isExpended ? 'Daralt' : 'Genişlet'" size="sm" [color]="isExpended ? 'primary' :'warning'" (clickEvent)="toggleTree()"></aril-button>
+</div> -->
+<p-tree
+	[value]="data()"
+	[selectionMode]="selectionMode()"
+	[(selection)]="selectionNodes"
+	[contextMenu]="contextMenuRef"
+	[filter]="filter()"
+	filterMode="lenient"
+	filterBy="label"
+	[filterPlaceholder]="filterPlaceholder()"
+	(onNodeExpand)="expandEvent.emit($event.node)"
+	(selectionChange)="selectionEvent.emit(selectionNodes)">
+</p-tree>
+<p-contextMenu #contextMenuRef [model]="contextMenu()"></p-contextMenu>

package/ui/tree/src/tree.component.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, effect, input } from '@angular/core';
+
+import { MenuItem, TreeNode } from 'primeng/api';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { TreeModule } from 'primeng/tree';
+
+import { ButtonComponent } from 'aril/ui/button';
+
+type SelectionModes = 'multiple' | 'checkbox' | 'single';
+
+@Component({
+	standalone: true,
+	selector: 'aril-tree',
+	templateUrl: './tree.component.html',
+	imports: [TreeModule, ContextMenuModule, ButtonComponent],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TreeComponent {
+	constructor() {
+		effect(() => {
+			this.selectionNodes = this.selectedNode();
+		});
+	}
+
+	data = input.required<TreeNode[]>();
+	contextMenu = input<MenuItem[]>();
+	filterPlaceholder = input<string>('Arama');
+	filter = input<boolean>(true);
+	selectionMode = input<SelectionModes>();
+	selectedNode = input<TreeNode | TreeNode[] | null>(null);
+
+	@Output() expandEvent: EventEmitter<unknown> = new EventEmitter();
+	@Output() selectionEvent: EventEmitter<any> = new EventEmitter<any>();
+
+	selectionNodes!: TreeNode | TreeNode[] | null;
+
+	// isExpended = false;
+	// toggleTree() {
+	// 	this.isExpended = !this.isExpended;
+	// 	this.expandRecursive(this.data());
+	// }
+
+	// expandRecursive(node: TreeNode[]) {
+	// 	node.forEach((node) => {
+	// 		if (node.children) {
+	// 			node.expanded = this.isExpended;
+	// 			this.expandRecursive(node.children);
+	// 		}
+	// 	});
+	// }
+}

package/ui/treeTable/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/tree-table.component';
+export * from './src/tree-table.component';

package/ui/treeTable/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/treeTable/src/tree-table.component.html

@@ -0,0 +1,88 @@
+<p-treeTable
+	#ref
+	[value]="data()"
+	[columns]="columns._results"
+	[rows]="pageSize()"
+	[rowHover]="true"
+	[paginator]="true"
+	[rowsPerPageOptions]="pageOptions"
+	[filterDelay]="0"
+	sortMode="multiple"
+	[scrollable]="scrollable()"
+	[scrollHeight]="scrollHeight()"
+	[(selection)]="selectedNodes"
+	(onNodeExpand)="expandEvent.emit($event.node)"
+	(selectionChange)="selectionEvent.emit(selectedNodes)"
+	[showCurrentPageReport]="true"
+	currentPageReportTemplate="Toplam : {totalRecords} kayıt | Sayfa : {currentPage} / {totalPages}"
+	styleClass="p-treetable-gridlines p-treetable-striped p-treetable-sm">
+	<ng-template pTemplate="caption">
+		<div class="flex">
+			<aril-button
+				size="sm"
+				icon="FILE_EXCEL"
+				color="primary"
+				pTooltip="XLS"
+				tooltipPosition="top"
+				(clickEvent)="excelExport()">
+			</aril-button>
+			<!-- <span class="p-input-icon-left ml-auto">
+				<aril-text
+					icon="SEARCH"
+					iconPos="left"
+					placeholder="Arama"
+					[ngModel]="filterText"
+					(ngModelChange)="ref.filterGlobal($event, 'contains')">
+				</aril-text>
+			</span> -->
+		</div>
+	</ng-template>
+	<ng-template pTemplate="header" let-columns>
+		<tr>
+			@if (checkboxSelection()) {
+				<th>
+					<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
+				</th>
+			}
+			@for (column of columns; track $index) {
+				@if (column.isOperation) {
+					<th>
+						<div class="flex justify-content-center">Operations</div>
+					</th>
+				} @else {
+					<th [ttSortableColumn]="column.field">
+						<div class="flex justify-content-between align-items-center">
+							{{ column.header }}
+							<!-- <p-treeTableSortIcon [field]="column.field"></p-treeTableSortIcon> -->
+						</div>
+					</th>
+				}
+			}
+		</tr>
+	</ng-template>
+	<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+		<tr [ttRow]="rowNode">
+			@if (checkboxSelection()) {
+				<td>
+					<p-treeTableCheckbox [value]="rowNode"></p-treeTableCheckbox>
+				</td>
+			}
+			@for (column of columns; track $index) {
+				<td>
+					@if ($first) {
+						<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+					}
+					<ng-template ngFor [ngForOf]="[rowNode.node]" [ngForTemplate]="column.template"> </ng-template>
+				</td>
+			}
+		</tr>
+	</ng-template>
+	<ng-template pTemplate="summary">
+		<ng-content select="[footer]"></ng-content>
+	</ng-template>
+	<ng-template pTemplate="emptymessage">
+		<tr>
+			<td [attr.colspan]="columns._results.length">No Data Found</td>
+		</tr>
+	</ng-template>
+</p-treeTable>

package/ui/treeTable/src/tree-table.component.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NgFor, NgForOf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Output, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { TreeNode, TreeTableNode } from 'primeng/api';
+import { TreeTableModule } from 'primeng/treetable';
+
+import * as FileSaver from 'file-saver';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { TableColumnComponent, TableColumns } from 'aril/ui/table';
+import { TextComponent } from 'aril/ui/text';
+
+const pageOptions = [10, 20, 50, 100];
+
+@Component({
+	standalone: true,
+	selector: 'aril-tree-table',
+	templateUrl: './tree-table.component.html',
+	imports: [TreeTableModule, ButtonComponent, TextComponent, FormsModule, NgFor, NgForOf, NgTemplateOutlet],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TreeTableComponent {
+	data = input.required<TreeNode[]>();
+	checkboxSelection = input<boolean>();
+	pageSize = input<(typeof pageOptions)[number]>(10);
+	scrollable = input<boolean>(false);
+	scrollHeight = input<string>();
+
+	@Output() expandEvent: EventEmitter<unknown> = new EventEmitter();
+	@Output() selectionEvent: EventEmitter<any> = new EventEmitter<any>();
+
+	@ContentChildren(TableColumnComponent) columns!: TableColumns;
+
+	filterText!: string;
+	pageOptions = pageOptions;
+	selectedNodes!: TreeTableNode<any> | TreeTableNode<any>[] | null;
+
+	excelExport() {
+		import('xlsx').then((xlsx) => {
+			const worksheet = xlsx.utils.json_to_sheet(this.data());
+			const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+			const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
+			this.saveAsExcelFile(excelBuffer, 'excel_worksheet');
+		});
+	}
+
+	saveAsExcelFile(buffer: any, fileName: string): void {
+		const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+		const EXCEL_EXTENSION = '.xlsx';
+		const data: Blob = new Blob([buffer], {
+			type: EXCEL_TYPE
+		});
+		FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+	}
+}

package/ui/value/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/value.component';
+export * from './src/value.component';

package/ui/value/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/value/src/value.component.html

@@ -0,0 +1,19 @@
+@if (model() == undefined || model() == null) {
+	<i class="pi pi-minus" style="color: red" pTooltip="No item to show"></i>
+} @else {
+	@if (type() == 'bool') {
+		@if (!!model()) {
+			<i class="pi pi-check" style="color: green"></i>
+		} @else {
+			<i class="pi pi-times" style="color: crimson"></i>
+		}
+	} @else {
+		@if (display() == undefined) {
+			<i class="pi pi-exclamation-circle" style="color: red" pTooltip="Invalid Data"> </i>
+		} @else {
+			<span [style.color]="color">
+				{{ display() }}
+			</span>
+		}
+	}
+}

package/ui/value/src/value.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+import 'aril/util/primitive-extensions';
+
+/* number-format.js */
+declare const format: Function;
+
+type ValueTypes = 'text' | 'number' | 'bool' | 'decimal' | 'date' | 'password';
+
+@Component({
+	standalone: true,
+	selector: 'aril-value',
+	templateUrl: './value.component.html',
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ValueComponent {
+	model = input.required<string | number | boolean | undefined>();
+	type = input<ValueTypes>('text');
+	format = input<string>();
+	color = input<string>('#333');
+
+	display = computed(() => {
+		switch (this.type()) {
+			case 'text':
+				return this.model();
+			case 'number':
+				return format(this.format() ?? '0.###', this.model());
+			case 'decimal':
+				return format(this.format() ?? '#.##0,###', this.model());
+			case 'date':
+				return (<number>this.model()).longToString(this.format() ?? 'time');
+			case 'password':
+				return (<string>this.model()).replace(/./g, '*');
+			default:
+				console.error("Invalid type: '" + this.type() + "'");
+				return '';
+		}
+	});
+}

package/util/block/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/block';
+export * from './src/block';

package/util/block/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/util/block/src/block.ts

@@ -0,0 +1,65 @@
+import { AfterViewInit, Directive, ElementRef, effect, input, signal } from '@angular/core';
+
+declare const KTBlockUI: any;
+
+interface BlockOptions {
+	zIndex?: number;
+	overlayClass?: string;
+	message?: string;
+}
+
+@Directive({
+	standalone: true,
+	selector: '[arilBlock]'
+})
+export class Block implements AfterViewInit {
+	constructor(private element: ElementRef) {
+		effect(() => {
+			if (this.target()) {
+				if (this.arilBlock()) {
+					this.blockUI.block();
+				} else {
+					this.blockUI.release();
+				}
+			}
+		});
+	}
+
+	arilBlock = input.required<boolean>();
+	blockOptions = input<BlockOptions>({});
+
+	blockUI: typeof KTBlockUI;
+	target = signal<HTMLElement>(this.element.nativeElement);
+
+	ngAfterViewInit() {
+		this.target.set(this.getTarget(this.element));
+		this.blockUI = new KTBlockUI(this.target(), this.blockOptions());
+	}
+
+	getTarget(element: ElementRef): HTMLElement {
+		let nativeElement = element.nativeElement;
+		while (nativeElement && !nativeElement.clientWidth) nativeElement = nativeElement.children[0];
+		return nativeElement;
+	}
+}
+
+@Directive({
+	standalone: true,
+	selector: '[arilBlockPage]'
+})
+export class BlockPage {
+	constructor() {
+		const blockUI = new KTBlockUI(document.body, this.blockOptions());
+
+		effect(() => {
+			if (this.arilBlockPage()) {
+				blockUI.block();
+			} else {
+				blockUI.release();
+			}
+		});
+	}
+
+	arilBlockPage = input.required<boolean>();
+	blockOptions = input<BlockOptions>({});
+}

package/util/custom_pages/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/notFound.component';
+export * from './src/notFound.component';

package/util/custom_pages/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/util/custom_pages/src/notFound.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+	standalone: true,
+	imports: [ButtonModule, RouterModule],
+	template: `
+		<svg
+			viewBox="0 0 960 540"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+			version="1.1"
+			class="min-h-screen min-w-screen fixed left-0"
+			style="bottom:-10rem"
+			preserveAspectRatio="none">
+			<rect x="0" y="0" width="960" height="540" fill="var(--surface-ground)"></rect>
+			<path
+				d="M0 331L26.7 321C53.3 311 106.7 291 160 291C213.3 291 266.7 311 320 329.5C373.3 348 426.7 365 480 373.2C533.3 381.3 586.7 380.7 640 373.8C693.3 367 746.7 354 800 341.2C853.3 328.3 906.7 315.7 933.3 309.3L960 303L960 541L933.3 541C906.7 541 853.3 541 800 541C746.7 541 693.3 541 640 541C586.7 541 533.3 541 480 541C426.7 541 373.3 541 320 541C266.7 541 213.3 541 160 541C106.7 541 53.3 541 26.7 541L0 541Z"
+				fill="var(--primary-color)"
+				stroke-linecap="round"
+				stroke-linejoin="miter"></path>
+		</svg>
+		<div class="px-5 min-h-screen flex justify-content-center align-items-center">
+			<div class="z-1 text-center">
+				<div class="text-900 font-bold text-8xl mb-4">Oops!</div>
+				<p class="line-height-3 mt-0 mb-5 text-700 text-xl font-medium">Sayfa Bulunamadı</p>
+				<p-button routerLink="/" styleClass="p-button-dark font-medium p-button-raised">Anasayfaya Git</p-button>
+			</div>
+		</div>
+	`
+})
+export class NotFoundComponent {}

package/util/index.ts

@@ -0,0 +1 @@
+export const aril_util = 'ARiL-UTIL';

package/util/init-event/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/init-event.directive';
+export * from './src/init-event.directive';

package/util/init-event/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/util/init-event/src/init-event.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Directive({
+	standalone: true,
+	selector: '[arilInit]'
+})
+export class InitEventDirective implements OnInit {
+	@Output() arilInit: EventEmitter<never> = new EventEmitter<never>();
+
+	ngOnInit() {
+		this.arilInit.emit();
+	}
+}

package/util/lib/{index.d.ts → index.ts}

@@ -1,3 +1,3 @@
-export * from './src/types';
-export * from './src/interfaces';
-export * from './src/module-router';
+export * from './src/types';
+export * from './src/interfaces';
+export * from './src/module-router';

package/util/lib/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/util/lib/src/interfaces.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-namespace */
+
+export namespace Interfaces {
+	export interface MapStringString {
+		[key: string]: string;
+	}
+	export interface MapStringNumber {
+		[key: string]: number;
+	}
+	export interface MapStringBoolean {
+		[key: string]: boolean;
+	}
+	export interface MapStringObject<T> {
+		[key: string]: T;
+	}
+	export interface MapStringAny {
+		[key: string]: any;
+	}
+	export interface MapNumberString {
+		[key: number]: string;
+	}
+	export interface MapNumberNumber {
+		[key: number]: number;
+	}
+	export interface MapNumberBoolean {
+		[key: number]: boolean;
+	}
+	export interface MapNumberObject<T> {
+		[key: number]: T;
+	}
+	export interface MapNumberArray<T> {
+		[key: number]: Array<T>;
+	}
+	export interface MapStringArray<T> {
+		[key: string]: Array<T>;
+	}
+	export interface MapNumberAny {
+		[key: number]: any;
+	}
+	export interface MapEnums {
+		[key: number]: MapStringString;
+	}
+}

package/util/lib/src/module-router.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+	standalone: true,
+	selector: 'aril-module-router-outlet',
+	template: ` <router-outlet /> `,
+	imports: [RouterOutlet]
+})
+export class ModuleRouterOutlet {}

package/util/lib/src/types.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/ban-types */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+import { InputSignal } from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+
+export namespace Types {
+	type MarkComponentProps<Component> = {
+		[Key in keyof Component]: Component[Key] extends Function ? never : Key;
+	};
+	type KeyOfComponentProps<T> = MarkComponentProps<T>[keyof T];
+	type ComponentProps<T> = Pick<T, KeyOfComponentProps<T>>;
+	export type NgChanges<Component, Props = ComponentProps<Component>> = {
+		[Key in keyof Props]: {
+			previousValue: Props[Key];
+			currentValue: Props[Key];
+			firstChange: boolean;
+			isFirstChange(): boolean;
+		};
+	};
+
+	export type IsArray<T> = T extends (infer U)[] ? U : never;
+
+	export type ControlsOf<T extends Record<string, any>> = {
+		[K in keyof T]: T[K] extends Record<any, any> ?
+			T[K] extends any[] ?
+				FormArray | FormControl<T[K] | null>
+			:	FormGroup<ControlsOf<T[K]>>
+		:	FormControl<T[K] | null>;
+	};
+
+	type Enumerate<N extends number, Acc extends number[] = []> =
+		Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+
+	export type NumberRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+
+	export type ComponentInputs<C> = {
+		[K in keyof Pick<
+			C,
+			{
+				[K in keyof C]: C[K] extends InputSignal<any> ? K : never;
+			}[keyof C]
+		>]: C[K] extends InputSignal<infer _, infer Write> ? Write : never;
+	};
+}

package/util/loaders/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './style/style.loader.service';
-export * from './script/script.loader.service';
+export * from './style/style.loader.service';
+export * from './script/script.loader.service';

package/util/loaders/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}