aril 0.0.46 → 0.0.48

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

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

@@ -1,99 +0,0 @@
-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/ng-package.json

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

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

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

@@ -1,53 +0,0 @@
-/* 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/ng-package.json

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

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

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

@@ -1,47 +0,0 @@
-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/ng-package.json

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

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

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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-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/ng-package.json

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

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

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

@@ -1,52 +0,0 @@
-/* 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/ng-package.json

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