aril 1.1.71 → 1.1.73

package/ui/lib/src/input/input-error-message.pipe.ts

@@ -0,0 +1,71 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { TranslocoService } from '@ngneat/transloco';
+
+@Pipe({
+	standalone: true,
+	name: 'inputErrorMessage'
+})
+export class InputErrorMessagePipe implements PipeTransform {
+	constructor(private translocoService: TranslocoService) {}
+
+	transform(value: any, ...args: any[]): string {
+		const control = args[0];
+		const errorKeys = Object.keys(control.errors || {});
+
+		if (errorKeys.length) {
+			const errorKey = errorKeys[0];
+			const errorValue = control.errors![errorKey];
+
+			switch (errorKey) {
+				case 'required':
+					return this.translocoService.translate('validations.required');
+
+				case 'min':
+					return `Minimum value is ${errorValue.min}`;
+
+				case 'max':
+					return `Maximum value is ${errorValue.max}`;
+
+				case 'minlength':
+					return `Minimum length is ${errorValue.requiredLength}`;
+
+				case 'maxlength':
+					return `Maximum length is ${errorValue.requiredLength}`;
+
+				case 'email':
+					return 'Invalid email';
+
+				case 'pattern':
+					return 'Invalid format';
+
+				case 'invalidIBAN':
+					if (control.errors['error'].invalidCodeLength)
+						return this.translocoService.translate('validations.invalidIBANLength');
+					else if (control.errors['error'].unsupportedCountry)
+						return this.translocoService.translate('validations.unsupportedCountry');
+					return this.translocoService.translate('validations.invalidIBAN');
+
+				case 'invalidTCKN':
+					return this.translocoService.translate('validations.invalidTCKN');
+
+				case 'minArrayLength':
+					return this.translocoService.translate('validations.minArrayLength', {
+						min: errorValue.requiredLength,
+						actual: errorValue.actualLength
+					});
+
+				case 'maxArrayLength':
+					return this.translocoService.translate('validations.maxArrayLength', {
+						max: errorValue.requiredLength,
+						actual: errorValue.actualLength
+					});
+
+				default:
+					return errorValue;
+			}
+		}
+
+		return '';
+	}
+}

package/ui/lib/src/input/input-transforms.ts

@@ -0,0 +1,11 @@
+import { PrimeIcons } from 'primeng/api';
+
+export type PrimeIcon = Exclude<keyof typeof PrimeIcons, 'prototype'>;
+export function iconTransform(icon: PrimeIcon): string {
+	return PrimeIcons[icon];
+}
+
+export type IconPosTypes = 'right' | 'left';
+export function iconPosTransform(pos: IconPosTypes): string {
+	return 'p-input-icon-' + pos;
+}

package/ui/lib/src/input/value-accessor.directive.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Directive} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+	standalone: true,
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			multi: true,
+			useExisting: ValueAccessorDirective
+		}
+	]
+})
+export class ValueAccessorDirective implements ControlValueAccessor {
+
+	writeValue(obj: any): void {
+		return
+	}
+
+	registerOnChange(fn: any): void {
+		return;
+	}
+
+	registerOnTouched(fn: any): void {
+		return;
+	}
+
+}

package/ui/loader/ng-package.json

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

package/ui/loader/src/loader.component.html

@@ -0,0 +1,7 @@
+  <div class="loader-container">
+    <p-progressSpinner
+    styleClass="w-5rem h-5rem" 
+    strokeWidth="3" 
+    animationDuration=".5s">
+  </p-progressSpinner>
+</div>

package/ui/loader/src/loader.component.scss

@@ -0,0 +1,6 @@
+.loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100% !important;
+}

package/ui/loader/src/loader.component.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component } from '@angular/core';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
+@Component({
+  standalone: true,
+  selector: 'aril-loader',
+  templateUrl: 'loader.component.html',
+  styleUrls: ['loader.component.scss'],
+  imports: [ProgressSpinnerModule],
+})
+
+export class LoaderComponent{
+}

package/ui/mask/ng-package.json

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

package/ui/mask/src/mask.component.css

@@ -0,0 +1,23 @@
+.custom-tooltip {
+	position: absolute;
+	background-color: crimson;
+	color: white;
+	padding: 0.75rem 0.75rem;
+	border-radius: 6px;
+	z-index: 1001;
+	top: -107%;
+	left: 50%;
+	transform: translateX(-50%);
+	white-space: nowrap;
+}
+
+.custom-tooltip:before {
+	content: '';
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 3px;
+	border-style: solid;
+	border-color: var(--primary-color) transparent transparent transparent;
+}

package/ui/mask/src/mask.component.html

@@ -0,0 +1,17 @@
+<div style="position: relative" [ngStyle]="!usageInGrid ? { display: 'inline-block' } : {}">
+	<p-inputMask
+		[mask]="mask()"
+		[slotChar]="slotChar()"
+		[placeholder]="placeholder()"
+		[maxlength]="maxlength()"
+		[formControl]="ngControl.control"
+		(ngModelChange)="ngControl.viewToModelUpdate($event)"
+		(onFocus)="showTooltip = true"
+		(onBlur)="showTooltip = false">
+	</p-inputMask>
+	@if (ngControl.invalid && showTooltip) {
+		<div class="custom-tooltip tooltipErrorMessage">
+			{{ ngControl.control.value | inputErrorMessage: ngControl }}
+		</div>
+	}
+</div>

package/ui/mask/src/mask.component.ts

@@ -0,0 +1,34 @@
+import { NgStyle } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { InputMaskModule } from 'primeng/inputmask';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+/**
+ * a - alphabetic characters
+ * 9 - numeric characters
+ * * - alphanumeric characters
+ * ? - optional characters
+ * formatting characters -> (), -
+ */
+
+@Component({
+	standalone: true,
+	selector: 'aril-mask[ngModel], aril-mask[formControl], aril-mask[formControlName]',
+	templateUrl: './mask.component.html',
+	styleUrl: './mask.component.css',
+	imports: [ReactiveFormsModule, NgStyle, InputMaskModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class MaskComponent extends BaseInputComponent {
+	mask = input.required<string>();
+	slotChar = input<string>('_');
+	placeholder = input<string>('');
+	maxlength = input<number>(100);
+	usageInGrid = input<boolean>(true);
+	tabindex = input<number>();
+
+	showTooltip = false;
+}

package/ui/multiSelect/ng-package.json

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

package/ui/multiSelect/src/interfaces.ts

@@ -0,0 +1,41 @@
+import { Interfaces } from 'aril/util/lib';
+
+export type SelectBoxItem =
+	| Interfaces.MapStringString
+	| Interfaces.MapStringNumber
+	| Interfaces.MapNumberString
+	| Interfaces.MapNumberNumber;
+
+export interface SelectionRequestDTO {
+	groupName: string;
+	parameters?: Parameters;
+	parentSelectionKey: string | null;
+}
+
+export interface Parameters {
+	additionalProp1: AdditionalProp;
+	additionalProp2: AdditionalProp;
+	additionalProp3: AdditionalProp;
+}
+
+export interface AdditionalProp {}
+
+export interface SelectionGroupDTO {
+	id: number;
+	groupName: string;
+	groupDescription: string;
+	groupComment: string;
+	loadStrategy: string;
+	dynamicQuery: string;
+	parentGroupId: number;
+	selectionItems: SelectionItem[];
+}
+
+export interface SelectionItem {
+	id: number;
+	groupId: number;
+	selectionKey: string;
+	selectionDisplay: string;
+	showOrder: number;
+	parentSelectionKey: string;
+}

package/ui/multiSelect/src/multi-select.component.html

@@ -0,0 +1,14 @@
+<p-multiSelect
+	[options]="selectionItems() || options()"
+	[optionLabel]="optionLabel()"
+	[optionValue]="optionValue()"
+	[defaultLabel]="defaultLabel()"
+	[selectedItemsLabel]="selectedItemsLabel()"
+	[style]="style()"
+	[styleClass]="styleClass()"
+	[tooltip]="tooltip()"
+	[tooltipPosition]="tooltipPosition()"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)"
+	[appendTo]="appendTo()"
+	[showClear]="showClear()" />

package/ui/multiSelect/src/multi-select.component.ts

@@ -0,0 +1,66 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, effect, input, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MultiSelectModule } from 'primeng/multiselect';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { firstValueFrom } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { BaseInputComponent, ValueAccessorDirective } from 'aril/ui/lib';
+
+import { SelectBoxItem, SelectionGroupDTO, SelectionRequestDTO } from './interfaces';
+
+@Component({
+	standalone: true,
+	selector: 'aril-multi-select[ngModel], aril-multi-select[formControl], aril-multi-select[formControlName]',
+	templateUrl: './multi-select.component.html',
+	imports: [ReactiveFormsModule, MultiSelectModule],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class MultiSelectComponent extends BaseInputComponent {
+	options = input<[]>([]);
+	optionLabel = input<string>('text');
+	optionValue = input<string>('key');
+	defaultLabel = input<string>('Seçiniz');
+	selectedItemsLabel = input<string>(''); // default value -> ({0} items selected
+	appendTo = input<string>('body');
+	style = input<object>({});
+	styleClass = input<string>('');
+	tooltip = input<string>('');
+	tooltipPosition = input<any>('top');
+	groupName = input('');
+	parentSelectionKey = input(null);
+	selectionItems = signal<SelectBoxItem[] | null>(null);
+	showClear = input<boolean>(false);
+
+	constructor(
+		private http: HttpClient,
+		public translocoService: TranslocoService
+	) {
+		super();
+		effect(() => {
+			if (this.groupName() || this.parentSelectionKey()) this.getSelectionItems();
+		});
+	}
+
+	async getSelectionItems() {
+		const payload: SelectionRequestDTO = {
+			groupName: this.groupName(),
+			parentSelectionKey: this.parentSelectionKey()
+		};
+		const hostApi = API_CONFIGS.api.replace(/\/[^\/]+\/v1$/, `/host/v1`);
+		const selectionGroup = await firstValueFrom(
+			this.http.post<SelectionGroupDTO>(hostApi + '/selection-group/load', payload)
+		);
+
+		this.selectionItems.set(
+			selectionGroup?.selectionItems.map((item) => ({
+				key: item.selectionKey,
+				text: item.selectionDisplay,
+				parentSelectionKey: item.parentSelectionKey
+			}))
+		);
+	}
+}

package/ui/ng-package.json

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

package/ui/number/ng-package.json

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

package/ui/number/src/number.component.html

@@ -0,0 +1,26 @@
+<p-inputNumber
+	[min]="min()"
+	[max]="max()"
+	mode="decimal"
+	[locale]="locale()"
+	[prefix]="prefix()"
+	[suffix]="suffix()"
+	[maxlength]="maxlength()"
+	[showClear]="showClear()"
+	[style]="_style()"
+	[inputStyle]='inputStyle()'
+	[tabindex]="tabindex()"
+	spinnerMode="vertical"
+	[useGrouping]="useGrouping()"
+	[placeholder]="placeholder()"
+	[showButtons]="showButtons()"
+	[maxFractionDigits]="maxDigits()"
+	[minFractionDigits]="minDigits()"
+	[buttonLayout]="buttonLayout()"
+	incrementButtonClass="p-button-info"
+	decrementButtonClass="p-button-danger"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</p-inputNumber>

package/ui/number/src/number.component.ts

@@ -0,0 +1,36 @@
+import { Component, computed, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { InputNumberModule } from 'primeng/inputnumber';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+type ButtonLayouts = 'stacked' | 'horizontal' | 'vertical';
+
+@Component({
+	standalone: true,
+	selector: 'aril-number[ngModel], aril-number[formControl], aril-number[formControlName]',
+	templateUrl: './number.component.html',
+	imports: [ReactiveFormsModule, InputNumberModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class NumberComponent extends BaseInputComponent {
+	min = input<number>();
+	max = input<number>();
+	showButtons = input(false);
+	placeholder = input<string>('');
+	prefix = input<string>();
+	locale = input<string>('tr-TR');
+	suffix = input<string>();
+	maxlength = input<any>();
+	showClear = input(false);
+	useGrouping = input(true);
+	maxDigits = input<number>();
+	minDigits = input<number>();
+	tabindex = input<number>();
+	inputStyle = input<object>();
+	buttonLayout = input<ButtonLayouts>('stacked');
+
+	_style = computed(() => (this.buttonLayout() == 'vertical' ? { width: '3rem' } : {}));
+}

package/ui/operation-types-dialog/ng-package.json

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

package/ui/operation-types-dialog/src/operation-types-dialog.component.ts

@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { TableComponent } from 'aril/ui/table';
+import { RadioButtonComponent } from 'aril/ui/radioButton';
+
+export enum OperationType {
+	ApplyOnlySelected = 'APPLY_ONLY_SELECTED',
+	ApplyExceptSelected = 'APPLY_EXCEPT_SELECTED',
+	ApplyAll = 'APPLY_ALL'
+}
+
+export type OperationTypeResult = { searchApplyType: OperationType; totalElements: number };
+interface RadioButtonOption {
+	key: any;
+	label: string;
+	disabled?: boolean;
+	ngControl?: any;
+}
+@Component({
+	standalone: true,
+	template: `
+		<div class="flex flex-column gap-4 px-3">
+			<aril-radio-button [(ngModel)]="selectedOption" [options]="options" />
+			<aril-button class="align-self-end" color="success" label="Devam" (clickEvent)="submit()" />
+		</div>
+	`,
+	imports: [FormsModule, RadioButtonComponent, ButtonComponent]
+})
+export class OperationTypesComponent {
+	selectedOption = '';
+	options: RadioButtonOption[] = [];
+
+	constructor(
+		private ref: DynamicDialogRef,
+		private dialogConfig: DynamicDialogConfig
+	) {
+		this.dialogConfig.draggable = true;
+		this.dialogConfig.header = 'İşlem Hangi Satırlara Uygulansın?';
+		this.dialogConfig.contentStyle = { overflow: 'auto', 'max-width': '350px' };
+		setTimeout(() => {
+			this.buildOptions();
+		});
+	}
+
+	get tableRef(): TableComponent {
+		return this.dialogConfig.data.tableRef;
+	}
+
+	get totalRecords(): number {
+		return this.tableRef.tableRef._totalRecords;
+	}
+
+	get selectedRowsLength(): number {
+		return this.tableRef.selectedRows.length;
+	}
+
+	buildOptions() {
+		this.options = [
+			{
+				key: OperationType.ApplyOnlySelected,
+				label: `Yalnızca Seçilenlere Uygula (${this.selectedRowsLength}) Adet`,
+				disabled: this.selectedRowsLength === 0
+			},
+			{
+				key: OperationType.ApplyExceptSelected,
+				label: `Seçilenlere Hariç Tümüne Uygula (${this.totalRecords - this.selectedRowsLength}) Adet`,
+				disabled: this.totalRecords - this.selectedRowsLength === 0
+			},
+			{
+				key: OperationType.ApplyAll,
+				label: `Tüm Arama Sonuçlarına Uygula (${this.totalRecords}) Adet`,
+				disabled: this.totalRecords === 0
+			}
+		];
+	}
+
+	submit(): void {
+		let totalElements = this.selectedRowsLength;
+
+		switch (this.selectedOption) {
+			case OperationType.ApplyOnlySelected:
+				totalElements = this.selectedRowsLength;
+				break;
+			case OperationType.ApplyExceptSelected:
+				totalElements = this.totalRecords - this.selectedRowsLength;
+				break;
+			case OperationType.ApplyAll:
+				totalElements = this.totalRecords;
+				break;
+		}
+
+		this.ref.close({ searchApplyType: this.selectedOption, totalElements } as OperationTypeResult);
+	}
+}

package/ui/overlayPanel/ng-package.json

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

package/ui/overlayPanel/src/overlay-panel.component.html

@@ -0,0 +1,5 @@
+<p-overlayPanel #ref [dismissable]="dismissable()">
+	<ng-template pTemplate="content">
+		<ng-content></ng-content>
+	</ng-template>
+</p-overlayPanel>

package/ui/overlayPanel/src/overlay-panel.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, ViewChild, input } from '@angular/core';
+
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+
+@Component({
+	standalone: true,
+	selector: 'aril-overlay-panel',
+	templateUrl: './overlay-panel.component.html',
+	imports: [OverlayPanelModule],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OverlayPanelComponent {
+	dismissable = input<boolean>(true);
+
+	@ViewChild('ref') ref!: OverlayPanel;
+}

package/ui/panel/ng-package.json

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

package/ui/panel/src/panel.component.css

@@ -0,0 +1,38 @@
+.full-screen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 99999999;
+	overflow-y: auto;
+	box-sizing: border-box;
+	width: 100%;
+	height: 100vh;
+	background: #fff;
+}
+
+.panel-header {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: var(--card-foreground);
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: normal;
+}
+
+::ng-deep .panel-icons i {
+	cursor: pointer;
+	width: 2rem;
+}
+
+.panel-ng-content {
+	padding: 0px !important;
+}
+
+::ng-deep .no-padding .p-panel-content {
+	padding: 0;
+}