aril 0.0.44 → 0.0.46

package/ui/switch/ng-package.json

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

package/ui/switch/src/switch.component.html

@@ -0,0 +1,7 @@
+<p-inputSwitch
+	[tabindex]="tabindex()"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</p-inputSwitch>

package/ui/switch/src/switch.component.ts

@@ -0,0 +1,18 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]',
+	templateUrl: './switch.component.html',
+	imports: [ReactiveFormsModule, InputSwitchModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class SwitchComponent extends BaseInputComponent {
+	tabindex = input<number>();
+}

package/ui/table/index.ts

@@ -0,0 +1,34 @@
+import { NgFor, NgForOf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { TableModule } from 'primeng/table';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { TextComponent } from 'aril/ui/text';
+
+import { TableColumnComponent } from './src/table-column.component';
+import { TableComponent } from './src/table.component';
+
+export * from './src/table.component';
+export * from './src/table-column.component';
+
+const components = [TableComponent, TableColumnComponent];
+
+@NgModule({
+	imports: [
+		TableModule,
+		TooltipModule,
+		ButtonComponent,
+		TextComponent,
+		FormsModule,
+		NgFor,
+		NgForOf,
+		NgStyle,
+		NgTemplateOutlet
+	],
+	exports: [components],
+	declarations: [components]
+})
+export class ARiLTableModule {}

package/ui/table/ng-package.json

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

package/ui/table/src/i18n.ts

@@ -0,0 +1,55 @@
+export const tranlations = {
+	matchAll: 'Tümü',
+	matchAny: 'Herhangi biri',
+	startsWith: 'İle başlar',
+	contains: 'İçerir',
+	notContains: 'İçermez',
+	notEquals: 'Eşit değildir',
+	endsWith: 'İle biter',
+	equals: 'Eşittir',
+	lt: 'Eşit değildir',
+	lte: 'Küçük eşittir',
+	gt: 'Büyüktür',
+	gte: 'Büyük eşittir',
+	is: 'Eşittir',
+	isNot: 'Eşit değildir',
+	before: 'Önce',
+	after: 'Sonra',
+	clear: 'Temizle',
+	apply: 'Uygula',
+	addRule: 'Kural Ekle',
+	removeRule: 'Kural Kaldır',
+	accept: 'Kabul',
+	reject: 'Reddet',
+	choose: 'Seç',
+	upload: 'Yükle',
+	cancel: 'İptal',
+	dayNames: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+	dayNamesShort: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+	dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
+	monthNames: [
+		'Ocak',
+		'Şubat',
+		'Mart',
+		'Nisan',
+		'Mayıs',
+		'Haziran',
+		'Temmuz',
+		'Ağustos',
+		'Eylül',
+		'Ekim',
+		'Kasım',
+		'Aralık'
+	],
+	monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+	dateFormat: 'dd.mm.yy',
+	firstDayOfWeek: 1,
+	today: 'Bugün',
+	weekHeader: 'Hf',
+	weak: 'Zayıf',
+	medium: 'Orta',
+	strong: 'Güçlü',
+	passwordPrompt: 'Şifre',
+	emptyMessage: 'Kayıt bulunamadı',
+	emptyFilterMessage: 'Eşleşen kayıt bulunamadı'
+};

package/ui/table/src/table-column.component.ts

@@ -0,0 +1,28 @@
+import { Component, ContentChild, TemplateRef, input } from '@angular/core';
+
+type ValueTypes = 'text' | 'numeric' | 'date' | 'boolean' | 'custom' | 'operations';
+export type AlignTypes = 'left' | 'right' | 'center';
+
+export interface TableColumns {
+	_results: Array<TableColumn>;
+}
+interface TableColumn {
+	field: string;
+	header: string;
+	type: ValueTypes;
+	isOperation?: boolean;
+	template: TemplateRef<any>;
+}
+
+@Component({
+	selector: 'aril-table-column',
+	template: ` <ng-content></ng-content> `
+})
+export class TableColumnComponent {
+	type = input<ValueTypes>('text');
+	field = input.required<string>();
+	header = input.required<string>();
+	tAlign = input<AlignTypes>();
+
+	@ContentChild(TemplateRef) template: any;
+}

package/ui/table/src/table.component.html

@@ -0,0 +1,136 @@
+<p-table
+	#ref
+	[value]="data()"
+	[columns]="columns._results"
+	[rows]="pageSize()"
+	[rowHover]="true"
+	[paginator]="true"
+	[rowsPerPageOptions]="[10, 20, 50, 100]"
+	[filterDelay]="0"
+	sortMode="multiple"
+	[(selection)]="selectedRows"
+	(onPage)="onPageEvent.emit($event)"
+	(selectionChange)="selectionEvent.emit(selectedRows)"
+	[showCurrentPageReport]="true"
+	[selectionMode]="selectionMode()"
+	currentPageReportTemplate="Toplam : {totalRecords} kayıt | Sayfa : {currentPage} / {totalPages}"
+	styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm">
+	@if (tableHeader() || showSearchTool() || showExportTool()) {
+		<ng-template pTemplate="caption">
+			<div class="flex space-between">
+				<div style="flex: auto">
+					@if (tableHeader().length) {
+						<div class="table-header">
+							{{ tableHeader() }}
+						</div>
+					}
+				</div>
+				<div style="flex: auto">
+					<div class="flex justify-content-end align-items-center">
+						@if (showSearchTool()) {
+							<aril-text
+								icon="SEARCH"
+								iconPos="left"
+								placeholder="Arama"
+								[ngModel]="filterText"
+								class="mr-1"
+								(ngModelChange)="ref.filterGlobal($event.target.value, 'contains')">
+							</aril-text>
+						}
+						@if (showExportTool()) {
+							<aril-button
+								size="sm"
+								icon="FILE_EXCEL"
+								color="primary"
+								pTooltip="XLS"
+								tooltipPosition="top"
+								(clickEvent)="excelExport()"
+								class="mr-1">
+							</aril-button>
+							<aril-button
+								size="sm"
+								icon="FILE_PDF"
+								color="primary"
+								pTooltip="PDF"
+								tooltipPosition="top"
+								(clickEvent)="exportPdf()">
+							</aril-button>
+						}
+					</div>
+				</div>
+			</div>
+		</ng-template>
+	}
+	<ng-template pTemplate="header" let-columns>
+		<tr>
+			@if (checkboxSelection()) {
+				<th>
+					<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+				</th>
+			}
+			@for (column of columns; track $index) {
+				@if (column.type() == 'operations') {
+					<th>
+						<div class="flex justify-content-center">İşlemler</div>
+					</th>
+				} @else {
+					<th [pSortableColumn]="column.field()">
+						<div class="flex justify-content-between align-items-center">
+							{{ column.header() }}
+							<div class="flex">
+								<p-sortIcon [field]="column.field()"></p-sortIcon>
+								<p-columnFilter
+									display="menu"
+									[type]="column.type()"
+									[field]="column.field()"
+									[showMatchModes]="true"
+									[showOperator]="false"
+									[showAddButton]="true">
+								</p-columnFilter>
+							</div>
+							<!-- custom filter for (date etc.)-->
+							<!-- <p-columnFilter type="text" [field]="col.field" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-equals'"></p-columnFilter> -->
+						</div>
+					</th>
+				}
+			}
+		</tr>
+	</ng-template>
+	<ng-template pTemplate="body" let-item let-columns="columns">
+		@if (selectionMode()) {
+			<tr [pSelectableRow]="item">
+				@for (column of columns; track $index) {
+					<td [ngStyle]="{ 'text-align': column.type() == 'operations' ? 'center' : column.tAlign() || tAlign() }">
+						<ng-template ngFor [ngForOf]="[item]" [ngForTemplate]="column.template"></ng-template>
+					</td>
+				}
+			</tr>
+		} @else {
+			<tr>
+				@if (checkboxSelection()) {
+					<td>
+						<p-tableCheckbox [value]="item"></p-tableCheckbox>
+					</td>
+				}
+
+				@for (column of columns; track $index) {
+					<td [ngStyle]="{ 'text-align': column.type() == 'operations' ? 'center' : column.tAlign() || tAlign() }">
+						<ng-template ngFor [ngForOf]="[item]" [ngForTemplate]="column.template"></ng-template>
+					</td>
+				}
+			</tr>
+		}
+	</ng-template>
+
+	@if (showFooter()) {
+		<ng-template pTemplate="summary">
+			<ng-content select="[footer]"></ng-content>
+		</ng-template>
+	}
+
+	<ng-template pTemplate="emptymessage">
+		<tr>
+			<td [attr.colspan]="columns._results.length">{{ noDataFoundLabel() }}</td>
+		</tr>
+	</ng-template>
+</p-table>

package/ui/table/src/table.component.ts

@@ -0,0 +1,99 @@
+import { AfterViewInit, Component, ContentChildren, EventEmitter, Output, input } from '@angular/core';
+
+import { PrimeNGConfig } from 'primeng/api';
+
+import * as FileSaver from 'file-saver';
+
+import { ProxyTypes } from 'aril/http';
+
+import { tranlations } from './i18n';
+import { AlignTypes, TableColumnComponent, TableColumns } from './table-column.component';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+
+/* TODO :
+ * server-side-proxy (ProxyTypes.ServerSide)
+ * search & colum filter & sort
+ * export
+ * pagination operation
+ * Query Signals
+ */
+const pageOptions = [10, 20, 50, 100] as const;
+
+type SelectionTypes = 'single' | 'multiple';
+
+@Component({
+	selector: 'aril-table',
+	templateUrl: './table.component.html'
+})
+export class TableComponent implements AfterViewInit {
+	constructor(private primengConfig: PrimeNGConfig) {
+		this.primengConfig.setTranslation(tranlations);
+	}
+
+	data = input.required<any[]>();
+	checkboxSelection = input<boolean>();
+	pageSize = input<(typeof pageOptions)[number]>(10);
+	proxy = input<ProxyTypes>(ProxyTypes.Native);
+	showFooter = input<boolean>(false);
+	tAlign = input<AlignTypes>('left');
+	selectionMode = input<SelectionTypes>();
+	showSearchTool = input<boolean>(true);
+	showExportTool = input<boolean>(true);
+
+	exportFileName = input<string>('');
+	noDataFoundLabel = input<string>('No Data Found');
+
+	tableHeader = input<string>('');
+	showTableHeader = input<boolean>(false);
+
+	isFirstRowSelected = input<boolean>(false);
+
+	@Output() onPageEvent: EventEmitter<any> = new EventEmitter<any>();
+	@Output() selectionEvent: EventEmitter<any> = new EventEmitter<any>();
+
+	@ContentChildren(TableColumnComponent) columns!: TableColumns;
+
+	filterText!: string;
+	selectedRows: any;
+	pageOptions = pageOptions;
+
+	exportColumns: Array<{ title: string; dataKey: string }> = [];
+
+	ngAfterViewInit(): void {
+		if (this.isFirstRowSelected() && this.data().length) {
+			this.selectedRows = this.data()[0];
+			this.selectionEvent.emit(this.selectedRows)
+		}
+		if (this.columns) {
+			this.exportColumns = this.columns._results.map((col) => ({ title: col.header, dataKey: col.field }));
+		}
+	}
+
+	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, !this.exportFileName ? this.exportFileName : '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);
+	}
+
+	async exportPdf() {
+		const doc = new jsPDF('portrait', 'px', 'a4');
+		autoTable(doc, {
+			columns: this.exportColumns,
+			body: this.data()
+		});
+		doc.save(`${this.exportFileName}_export_${new Date().getTime()}.pdf`);
+	}
+}

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

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

package/ui/tagBox/ng-package.json

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

package/ui/tagBox/src/tag-box.component.html

@@ -0,0 +1,21 @@
+<dx-tag-box
+	[items]="items()"
+	[valueExpr]="valueExpr()"
+	[displayExpr]="displayExpr()"
+	[showSelectionControls]="!acceptCustomValue()"
+	[applyValueMode]="acceptCustomValue() ? 'instantly' : 'useButtons'"
+	[placeholder]="placeholder()"
+	[multiline]="false"
+	[tabIndex]="tabindex()"
+	[acceptCustomValue]="acceptCustomValue()"
+	[searchEnabled]="true"
+	[maxDisplayedTags]="maxDisplayedTags()"
+	[showMultiTagOnly]="false"
+	[showClearButton]="true"
+	(onCustomItemCreating)="onCustomItemCreating($event)"
+	[isValid]="ngControl?.control?.valid || ngControl?.control?.pristine || ngControl?.control?.disabled || false"
+	[validationError]="ngControl?.control?.errors | dxInputErrorMessage: ngControl?.control"
+	validationMessagePosition="top"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</dx-tag-box>

package/ui/tagBox/src/tag-box.component.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { DxTagBoxModule } from 'devextreme-angular/ui/tag-box';
+
+import {
+	BaseInputComponent,
+	DXInputErrorMessagePipe,
+	InputErrorMessagePipe,
+	ValueAccessorDirective
+} from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-tag-box',
+	templateUrl: './tag-box.component.html',
+	imports: [ReactiveFormsModule, DxTagBoxModule, DXInputErrorMessagePipe],
+	providers: [InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class TagBoxComponent extends BaseInputComponent {
+	placeholder = input<string>('');
+	valueExpr = input.required<string>();
+	displayExpr = input.required<string>();
+	maxDisplayedTags = input(5);
+	tabindex = input<number>(0);
+	acceptCustomValue = input(true);
+	items = input.required<Array<string | number>>();
+
+	onCustomItemCreating(e: any) {
+		let newValues = [];
+
+		const items = e.component.option('items');
+		const selectedItems = e.component.option('selectedItems');
+
+		if (e.text.indexOf(',') != -1) newValues = e.text.replace(/ /g, '').split(',');
+		else if (e.text.indexOf('|') != -1) newValues = e.text.replace(/ /g, '').split('|');
+		else if (e.text.indexOf(' ') != -1) newValues = e.text.split(' ');
+		else newValues.push(e.text);
+
+		newValues.forEach((value: string) => {
+			if (selectedItems.indexOf(value) == -1) {
+				selectedItems.push(value);
+				items.unshift(value);
+			}
+		});
+
+		e.component.option('items', items);
+		e.component.option('value', selectedItems);
+		e.text = '';
+	}
+}

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

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

package/ui/text/ng-package.json

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

package/ui/text/src/text.component.html

@@ -0,0 +1,21 @@
+<ng-template #input>
+	<input
+		pInputText
+		type="text"
+		[class]="_sizeClass()"
+		[placeholder]="placeholder()"
+		[tabindex]="tabindex()"
+		[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+		[tooltipOptions]="tooltipOptions"
+		[formControl]="ngControl.control"
+		(ngModelChange)="ngControl.viewToModelUpdate($event)" />
+</ng-template>
+
+@if (_icon()) {
+	<span [class]="_iconPosClass()">
+		<i [class]="_icon()"></i>
+		<ng-container *ngTemplateOutlet="input"></ng-container>
+	</span>
+} @else {
+	<ng-container *ngTemplateOutlet="input"></ng-container>
+}

package/ui/text/src/text.component.ts

@@ -0,0 +1,47 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { InputTextModule } from 'primeng/inputtext';
+import { TooltipModule } from 'primeng/tooltip';
+
+import {
+	BaseInputComponent,
+	IconPosTypes,
+	InputErrorMessagePipe,
+	PrimeIcon,
+	ValueAccessorDirective,
+	iconPosTransform,
+	iconTransform
+} from 'aril/ui/lib';
+
+type Size = 'sm' | 'md' | 'lg';
+
+@Component({
+	standalone: true,
+	selector: 'aril-text[ngModel], aril-text[formControl], aril-text[formControlName]',
+	templateUrl: './text.component.html',
+	imports: [ReactiveFormsModule, InputTextModule, TooltipModule, InputErrorMessagePipe, NgTemplateOutlet],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class TextComponent extends BaseInputComponent {
+	placeholder = input<string>('');
+	tabindex = input<number>();
+	icon = input<PrimeIcon>();
+	iconPos = input<IconPosTypes>('left');
+	size = input<Size>('sm');
+
+	_icon = computed(() => iconTransform(this.icon()!));
+	_iconPosClass = computed(() => iconPosTransform(this.iconPos()!));
+
+	_sizeClass = computed(() => {
+		switch (this.size()) {
+			case 'sm':
+				return 'p-inputtext-sm';
+			case 'md':
+				return '';
+			case 'lg':
+				return 'p-inputtext-lg';
+		}
+	});
+}

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

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

package/ui/textArea/ng-package.json

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

package/ui/textArea/src/text-area.component.html

@@ -0,0 +1,11 @@
+<textarea
+	pInputTextarea
+	[rows]="rows()"
+	[cols]="cols()"
+	[autoResize]="true"
+	[placeholder]="placeholder()"
+	[tabindex]="tabindex()"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)"></textarea>

package/ui/textArea/src/text-area.component.ts

@@ -0,0 +1,21 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-text-area[ngModel], aril-text-area[formControl], aril-text-area[formControlName]',
+	templateUrl: './text-area.component.html',
+	imports: [ReactiveFormsModule, InputTextareaModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class TextAreaComponent extends BaseInputComponent {
+	rows = input<number>();
+	cols = input<number>();
+	tabindex = input<number>();
+	placeholder = input<string>('');
+}

package/ui/toggle-button/index.ts

@@ -0,0 +1 @@
+export * from './src/toggle-button.component';

package/ui/toggle-button/ng-package.json

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

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

@@ -0,0 +1,13 @@
+<div class="toggle-button-container">
+  <div>
+    @for(label of buttonLabels();track label; let i = $index){
+      <button
+        pButton
+        (click)="toggleButton(i)"
+        [ngClass]="{'p-button-success': selectedIndex === i, 'p-button-secondary p-button-outlined': selectedIndex !== i}"
+        [ngStyle]="{'border-color': selectedIndex !== i ? '#E6E8EB' : null}"
+      >
+    {{label}}</button>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+.toggle-button-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+button {
+  margin: 0 !important;
+  border-radius: 0 !important;
+}
+
+button:first-child {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}
+
+button:last-child {
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
+}