aril 0.0.45 → 0.0.46

package/ui/dxField/src/dx-field.component.ts

@@ -0,0 +1,16 @@
+import { NgStyle } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+	standalone: true,
+	selector: 'aril-dx-field',
+	templateUrl: './dx-field.component.html',
+	imports: [NgStyle],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DxFieldComponent {
+	label = input<string>();
+	color = input<string>('#333');
+	labelWidth = input<number>(30);
+	valueWidth = input<number>(70);
+}

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

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

package/ui/field/ng-package.json

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

package/ui/field/src/field.component.html

@@ -0,0 +1,22 @@
+<ng-template #content>
+	@if (label() && labelPos() === 'top') {
+		<div class="mb-1">
+			<span class="font-bold">
+				@if (markAsRequired()) {
+					*
+				}
+				{{ label() }}
+			</span>
+		</div>
+	}
+	<ng-content></ng-content>
+</ng-template>
+
+<aril-dx-field
+	*ngIf="labelPos() === 'left'; else content"
+	[label]="label()"
+	[color]="color()"
+	[labelWidth]="labelWidth()"
+	[valueWidth]="valueWidth()">
+	<ng-container *ngTemplateOutlet="content"></ng-container>
+</aril-dx-field>

package/ui/field/src/field.component.ts

@@ -0,0 +1,46 @@
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, HostBinding, effect, input } from '@angular/core';
+
+import { DxFieldComponent } from 'aril/ui/dxField';
+import { Types } from 'aril/util/lib';
+
+type LabelPositions = 'top' | 'left';
+
+interface ColumnSizeTypes {
+	xl?: Types.NumberRange<1, 13>;
+	lg?: Types.NumberRange<1, 13>;
+	md?: Types.NumberRange<1, 13>;
+	sm?: Types.NumberRange<1, 13>;
+	default?: Types.NumberRange<1, 13>;
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-field',
+	templateUrl: './field.component.html',
+	imports: [DxFieldComponent, NgIf, NgTemplateOutlet],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FieldComponent {
+	constructor() {
+		effect(() => {
+			if (this.cols()) {
+				this.hostClass = Object.entries(this.cols()).reduce((acc, [key, value]) => {
+					if (key === 'default') return `${acc} col-${value}`;
+					return `${acc} ${key}:col-${value}`;
+				}, '');
+			}
+		});
+	}
+
+	label = input<string>();
+	color = input<string>('#333');
+	labelWidth = input<number>(30);
+	valueWidth = input<number>(70);
+	labelPos = input<LabelPositions>('top');
+	markAsRequired = input<boolean>(false);
+	cols = input.required<ColumnSizeTypes>({});
+
+	@HostBinding('class') hostClass = '';
+	@HostBinding('style.padding') padding = '.5rem';
+}

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

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

package/ui/fileUpload/ng-package.json

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

package/ui/fileUpload/src/file-upload.component.html

@@ -0,0 +1,38 @@
+<p-fileUpload
+	[name]="name()"
+	[url]="url()"
+	method="post"
+	[multiple]="multiple()"
+	[accept]="accept()"
+	[disabled]="disabled()"
+	[auto]="auto()"
+	[maxFileSize]="maxFileSize()"
+	[tabindex]="tabindex"
+	[withCredentials]="withCredentials()"
+	[showUploadButton]="showUploadButton()"
+	[showCancelButton]="showCancelButton()"
+	[chooseLabel]="chooseLabel()"
+	[cancelLabel]="cancelLabel()"
+	[uploadLabel]="uploadLabel()"
+	[invalidFileTypeMessageSummary]="invalidFileTypeMessageSummary()"
+	[invalidFileTypeMessageDetail]="invalidFileTypeMessageDetail()"
+	[invalidFileSizeMessageSummary]="invalidFileSizeMessageSummary()"
+	[invalidFileSizeMessageDetail]="invalidFileSizeMessageDetail()"
+	(onBeforeSend)="beforeSend.emit($event)"
+	(onUpload)="onUpload($event)"
+	(onError)="onError($event)"
+	(onSelect)="selects.emit($event)"
+	(onClear)="clear.emit($event)">
+	<ng-template pTemplate="content">
+		@if (uploadedFiles.length) {
+			<div class="flex flex-column">
+				@for (file of uploadedFiles; track file) {
+					<div class="mt-2">
+						<i class="pi pi-file-excel" style="color: slateblue; font-size: 1.4rem"></i>
+						{{ file.name }} - {{ file.size }} bytes
+					</div>
+				}
+			</div>
+		}
+	</ng-template>
+</p-fileUpload>

package/ui/fileUpload/src/file-upload.component.ts

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { HttpEvent } from '@angular/common/http';
+import { Component, EventEmitter, Output, input } from '@angular/core';
+
+import { MessageService } from 'primeng/api';
+import { FileUploadModule } from 'primeng/fileupload';
+
+interface UploadEvent {
+	originalEvent: HttpEvent<any>;
+	files: File[];
+}
+
+interface UploadFile {
+	name: string;
+	size: number;
+	type: string;
+	objectURL?: string;
+}
+
+interface FileUploadErrorEvent {
+	files: File[];
+	error: ErrorEvent;
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-file-upload',
+	templateUrl: './file-upload.component.html',
+	imports: [FileUploadModule],
+	providers: [MessageService]
+})
+export class FileUploadComponent {
+	constructor(private messageService: MessageService) {}
+
+	name = input<string>();
+	url = input.required<string>();
+	multiple = input(false);
+	accept = input<string>('.xlsx');
+	disabled = input(false);
+	auto = input(false);
+	maxFileSize = input<number>();
+	tabindex = input<number>();
+	withCredentials = input(false);
+	showUploadButton = input(true);
+	showCancelButton = input(true);
+	cancelLabel = input('Temizle');
+	chooseLabel = input('Dosya Seç');
+	uploadLabel = input('Dosya Yükle');
+	invalidFileTypeMessageSummary = input('Geçersiz dosya türü');
+	invalidFileTypeMessageDetail = input('Seçilen dosya türü desteklenmiyor.');
+	invalidFileSizeMessageSummary = input('Dosya boyutu çok büyük');
+	invalidFileSizeMessageDetail = input('Dosya boyutu izin verilen maksimum boyuttan daha büyük.');
+
+	@Output() beforeSend: EventEmitter<unknown> = new EventEmitter();
+	@Output() upload: EventEmitter<unknown> = new EventEmitter();
+	@Output() errors: EventEmitter<unknown> = new EventEmitter();
+	@Output() selects: EventEmitter<unknown> = new EventEmitter();
+	@Output() clear: EventEmitter<unknown> = new EventEmitter();
+
+	uploadedFiles: UploadFile[] = [];
+
+	onUpload(event: UploadEvent) {
+		this.upload.emit(event);
+		this.uploadedFiles = event.files;
+		this.messageService.add({ key: 'toast-root', severity: 'success', summary: 'Dosya başarıyla yüklendi.' });
+	}
+
+	onError(event: any) {
+		this.errors.emit(event);
+		this.messageService.add({ key: 'toast-root', severity: 'error', summary: 'Dosya yüklenemedi.' });
+	}
+}

package/ui/form/index.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { ButtonComponent } from 'aril/ui/button';
+
+import { FormSubmitButtonComponent } from './src/form-submit-button.component';
+import { FormComponent } from './src/form.component';
+
+export * from './src/form.component';
+export * from './src/form-submit-button.component';
+
+const components = [FormComponent, FormSubmitButtonComponent];
+
+@NgModule({
+	imports: [ButtonComponent],
+	exports: [components],
+	declarations: [components]
+})
+export class ARiLFormModule {}

package/ui/form/ng-package.json

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

package/ui/form/src/form-submit-button.component.html

@@ -0,0 +1,12 @@
+<aril-button
+	[label]="label()"
+	[loading]="formGroup().pending"
+	[disabled]="disabled()"
+	[raised]="raised()"
+	[outlined]="outlined()"
+	[badge]="badge()"
+	[size]="size()"
+	[icon]="icon()"
+	[color]="color()"
+	(clickEvent)="submit()">
+</aril-button>

package/ui/form/src/form-submit-button.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, inject, input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { MessageService } from 'primeng/api';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { checkValidInputs } from 'aril/ui/lib';
+
+@Component({
+	selector: 'aril-form-submit:not([click])',
+	templateUrl: './form-submit-button.component.html',
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormSubmitButtonComponent extends ButtonComponent {
+	formGroup = input.required<FormGroup>();
+
+	@Output() validEvent: EventEmitter<never> = new EventEmitter<never>();
+	@Output() inValidEvent: EventEmitter<never> = new EventEmitter<never>();
+
+	messageService = inject(MessageService);
+
+	submit() {
+		checkValidInputs(this.formGroup());
+
+		if (this.formGroup().valid) this.validEvent.emit();
+		else {
+			this.messageService.add({
+				key: 'toast-root',
+				severity: 'warn ',
+				summary: 'Form Hatası',
+				detail: 'Lütfen formdaki eksikleri gideriniz'
+			});
+			this.inValidEvent.emit();
+		}
+	}
+}

package/ui/form/src/form.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FlexGridDirective, FormErrorMessageDirective } from 'aril/ui/lib';
+
+@Component({
+	selector: 'aril-form',
+	template: ` <ng-content></ng-content> `,
+	hostDirectives: [
+		FlexGridDirective,
+		{
+			directive: FormErrorMessageDirective,
+			inputs: ['formErrorMessage: formGroup']
+		}
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormComponent {
+	formGroup = input.required<FormGroup>();
+}

package/ui/index.ts

@@ -0,0 +1 @@
+export const aril_ui = 'ARiL-UI';

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

@@ -1,11 +1,16 @@
-export * from './src/form/form-error-message.directive';
-export * from './src/form/form-validation';
-export * from './src/form/form-field-builder';
-export * from './src/grid/flex-grid.directive';
-export * from './src/input/baseInput';
-export * from './src/input/common-input-validators.service';
-export * from './src/input/dx-input-error-message.pipe';
-export * from './src/input/input-disabled.directive';
-export * from './src/input/input-error-message.pipe';
-export * from './src/input/input-transforms';
-export * from './src/input/value-accessor.directive';
+/* form */
+export * from './src/form/form-error-message.directive';
+export * from './src/form/form-validation';
+export * from './src/form/form-field-builder';
+
+/* grid */
+export * from './src/grid/flex-grid.directive';
+
+/* input */
+export * from './src/input/baseInput';
+export * from './src/input/common-input-validators.service';
+export * from './src/input/dx-input-error-message.pipe';
+export * from './src/input/input-disabled.directive';
+export * from './src/input/input-error-message.pipe';
+export * from './src/input/input-transforms';
+export * from './src/input/value-accessor.directive';

package/ui/lib/ng-package.json

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

package/ui/lib/src/form/form-error-message.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+
+import { Message } from 'primeng/api';
+import { MessagesModule } from 'primeng/messages';
+
+@Component({
+	standalone: true,
+	imports: [MessagesModule],
+	template: `
+		<div class="flex gap-2 formErrorMessage">
+			<p-messages [(value)]="_pMessages" [enableService]="false" [closable]="false"></p-messages>
+		</div>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormErrorMessagesComponent {
+	_pMessages!: Message[];
+
+	@Input() set messages(messages: ValidationErrors | null) {
+		this._pMessages = Object.values(messages!).map((msg) => {
+			return { severity: 'error', summary: '', detail: msg };
+		});
+	}
+}

package/ui/lib/src/form/form-error-message.directive.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { ComponentRef, Directive, OnInit, ViewContainerRef, input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FormErrorMessagesComponent } from './form-error-message.component';
+
+@Directive({
+	standalone: true,
+	selector: '[formErrorMessage]'
+})
+export class FormErrorMessageDirective implements OnInit {
+	constructor(private viewContainerRef: ViewContainerRef) {}
+
+	formErrorMessage = input.required<FormGroup>();
+
+	errorKeys: string[] = [];
+	componentRef!: ComponentRef<FormErrorMessagesComponent>;
+
+	ngOnInit(): void {
+		this.formErrorMessage().statusChanges.subscribe((status) => {
+			if (this.componentRef) this.viewContainerRef.remove();
+
+			if (status === 'INVALID') {
+				if (this.formErrorMessage().errors) {
+					this.componentRef = this.viewContainerRef.createComponent(FormErrorMessagesComponent);
+					this.componentRef.instance.messages = this.formErrorMessage().errors;
+					this.viewContainerRef.insert(this.componentRef.hostView);
+				}
+			}
+		});
+	}
+}

package/ui/lib/src/form/form-field-builder.ts

@@ -0,0 +1,31 @@
+import { FormControl, FormGroup, ValidatorFn } from '@angular/forms';
+
+export const addControlsWithValidation = (
+	form: FormGroup,
+	controls: { name: string; validator?: ValidatorFn; disabled?: boolean }[]
+) => {
+	controls.forEach((control) => {
+		if (!form.contains(control.name)) {
+			form.addControl(
+				control.name,
+				new FormControl({ value: null, disabled: control?.disabled || false }, control.validator)
+			);
+		}
+	});
+};
+
+export const removeControls = (form: FormGroup, controlNames: string[]) => {
+	controlNames.forEach((controlName) => {
+		if (form.contains(controlName)) {
+			form.removeControl(controlName);
+		}
+	});
+};
+
+export const updateValueAndValidities = (form: FormGroup, controlNames: string[]) => {
+	controlNames.forEach((controlName) => {
+		if (form.contains(controlName)) {
+			form.get(controlName)?.updateValueAndValidity();
+		}
+	});
+};

package/ui/lib/src/form/form-validation.ts

@@ -0,0 +1,14 @@
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+
+export const checkValidInputs = (formGroup: FormGroup | FormArray) => {
+	Object.keys(formGroup.controls).forEach((field) => {
+		const control = formGroup.get(field);
+
+		if (control instanceof FormControl) {
+			control.markAsTouched({ onlySelf: true });
+			control.markAsDirty({ onlySelf: true });
+		} else if (control instanceof FormGroup || control instanceof FormArray) {
+			checkValidInputs(control);
+		}
+	});
+};

package/ui/lib/src/grid/flex-grid.directive.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+	standalone: true,
+	selector: '[flexGrid]'
+})
+export class FlexGridDirective {
+	@HostBinding('class') hostClass = 'grid p-fluid m-0 p-0';
+}

package/ui/lib/src/input/baseInput.ts

@@ -0,0 +1,30 @@
+import { inject } from '@angular/core';
+import { FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms';
+
+import { TooltipOptions } from 'primeng/api';
+
+export abstract class BaseInputComponent {
+	ngControl = injectNgControl();
+
+	tooltipOptions: TooltipOptions = {
+		tooltipPosition: 'top',
+		tooltipEvent: 'focus',
+		tooltipStyleClass: 'tooltipErrorMessage'
+	};
+}
+
+export function injectNgControl() {
+	const ngControl = inject(NgControl, { self: true, optional: true });
+
+	if (!ngControl) throw new Error('NgModel or FormControlName or FormControlDirective is required');
+
+	if (
+		ngControl instanceof NgModel ||
+		ngControl instanceof FormControlName ||
+		ngControl instanceof FormControlDirective
+	) {
+		return ngControl;
+	}
+
+	throw new Error('Something went wrong in InjectNgControl');
+}

package/ui/lib/src/input/common-input-validators.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+import 'aril/util/primitive-extensions';
+
+type DateRangeFormat = 'minute' | 'hour' | 'day' | 'month' | 'year';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class CommonInputValidatorsService {
+	/**
+	 * @param sdCtrlName - name of the start date form control
+	 * @param edCtrlName - name of the end date form control
+	 * @param rangeValue - range between start and end date. Default value is 1
+	 * @param rangeFormat - format of the range. Default value is "day"
+	 */
+	dateRange(sdCtrlName: string, edCtrlName: string, rangeValue = 0, rangeFormat: DateRangeFormat = 'day'): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			const start: number = control.get(sdCtrlName)?.value;
+			const end: number = control.get(edCtrlName)?.value;
+
+			const startJSDate = start.longToDate();
+			const endJSDate = end.longToDate();
+
+			if (startJSDate && endJSDate) {
+				const isRangeValid = endJSDate.getTime() - startJSDate.getTime() > rangeValue;
+
+				return isRangeValid ? null : (
+						{ dateRange: `The end date must be at least ${rangeValue} ${rangeFormat} bigger than the start date` }
+					);
+			}
+
+			return null;
+		};
+	}
+
+	/**
+	 * @description - pasword match vs.
+	 */
+	strictMatch(controlName: string, matchingControlName: string): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			const firstField = control.get(controlName);
+			const secondField = control.get(matchingControlName);
+
+			if (!firstField || !secondField) {
+				return null;
+			}
+
+			if (firstField.value !== secondField.value) {
+				return { strictMatch: `${controlName} and ${matchingControlName} do not match` };
+			}
+
+			return null;
+		};
+	}
+}

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

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Pipe, PipeTransform, inject } from '@angular/core';
+
+import { InputErrorMessagePipe } from './input-error-message.pipe';
+
+@Pipe({
+	standalone: true,
+	name: 'dxInputErrorMessage'
+})
+export class DXInputErrorMessagePipe implements PipeTransform {
+	errorMsgPipe = inject(InputErrorMessagePipe);
+
+	transform(value: any, ...args: any[]): { message: string } {
+		return { message: this.errorMsgPipe.transform(value, ...args) };
+	}
+}

package/ui/lib/src/input/input-disabled.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+	standalone: true,
+	selector: '[arilDisabled]'
+})
+export class InputDisabledDirective {
+	constructor(private ngControl: NgControl) {}
+
+	@Input() set arilDisabled(condition: boolean) {
+		const action = condition ? 'disable' : 'enable';
+		if (this.ngControl.control) this.ngControl.control[action]();
+	}
+}

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

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+	standalone: true,
+	name: 'inputErrorMessage'
+})
+export class InputErrorMessagePipe implements PipeTransform {
+	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 field is 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';
+				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;
+}