aril 0.0.45 → 0.0.46

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

@@ -0,0 +1,27 @@
+/* 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/mask/{index.d.ts → index.ts}

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

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/ng-package.json

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

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

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

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,25 @@
+<p-inputNumber
+	[min]="min()"
+	[max]="max()"
+	mode="decimal"
+	locale="en-US"
+	[prefix]="prefix()"
+	[suffix]="suffix()"
+	[maxlength]="maxlength()"
+	[showClear]="showClear()"
+	[style]="_style()"
+	[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,34 @@
+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>();
+	suffix = input<string>();
+	maxlength = input<any>();
+	showClear = input(false);
+	useGrouping = input(true);
+	maxDigits = input<number>();
+	minDigits = input<number>();
+	tabindex = input<number>();
+	buttonLayout = input<ButtonLayouts>('stacked');
+
+	_style = computed(() => (this.buttonLayout() == 'vertical' ? { width: '3rem' } : {}));
+}

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

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

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/{index.d.ts → index.ts}

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

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,25 @@
+.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;
+}
+
+.header-icon {
+	cursor: pointer;
+	width: 1.5rem;
+}

package/ui/panel/src/panel.component.html

@@ -0,0 +1,38 @@
+<div [ngClass]="{ 'full-screen': isFullScreen && canFullScreen }">
+	<p-panel  [toggleable]="toggleable()" [collapseIcon]="'pi pi-chevron-up'" [expandIcon]="'pi pi-chevron-down'">
+		<!-- header -->
+		<ng-template pTemplate="header">
+			<div class="panel-header" style="width: fit-content">
+				<ng-content select="[header]"></ng-content>
+			</div>
+		</ng-template>
+
+		<!-- header-tools -->
+		<ng-template class="flex"  pTemplate="icons">
+			<ng-content class="flex" select="[tools]"></ng-content>
+
+			@if (canFullScreen()) {
+				<div class="panel-icons" style="display: flex">
+					<i
+						[attr.role]="'none'"
+						class="pi mr-1 header-icon"
+						[ngClass]="{
+							'pi-window-maximize': !isFullScreen,
+							'pi-window-minimize': isFullScreen
+						}"
+						(click)="toggleFullScreen()"></i>
+				</div>
+			}
+		</ng-template>
+
+		<!-- body -->
+		<ng-content select="[body]"></ng-content>
+
+		<!-- footer -->
+		@if (showFooter()) {
+			<ng-template pTemplate="footer">
+				<ng-content select="[footer]"></ng-content>
+			</ng-template>
+		}
+	</p-panel>
+</div>

package/ui/panel/src/panel.component.ts

@@ -0,0 +1,24 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { PanelModule } from 'primeng/panel';
+
+@Component({
+	standalone: true,
+	selector: 'aril-panel',
+	templateUrl: './panel.component.html',
+	styleUrl: './panel.component.css',
+	imports: [PanelModule, NgClass],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PanelComponent {
+	toggleable = input<boolean>(true);
+	canFullScreen = input<boolean>(true);
+	showFooter = input<boolean>(false);
+
+	isFullScreen = false;
+
+	toggleFullScreen() {
+		this.isFullScreen = !this.isFullScreen;
+	}
+}

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

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

package/ui/password/ng-package.json

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

package/ui/password/src/password.component.html

@@ -0,0 +1,24 @@
+<p-password
+	[feedback]="feedback()"
+	[toggleMask]="true"
+	[placeholder]="placeholder()"
+	[tabindex]="tabindex"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+	@if (passwordCriterias()?.length) {
+		<ng-template pTemplate="header">
+			<h6>Şifre Oluştur</h6>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<p-divider></p-divider>
+			<p class="mt-2">Şartlar</p>
+			<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+				@for (criteria of passwordCriterias(); track criteria) {
+					<li>{{ criteria }}</li>
+				}
+			</ul>
+		</ng-template>
+	}
+</p-password>

package/ui/password/src/password.component.ts

@@ -0,0 +1,22 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { DividerModule } from 'primeng/divider';
+import { PasswordModule } from 'primeng/password';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-password[ngModel], aril-password[formControl], aril-password[formControlName]',
+	templateUrl: './password.component.html',
+	imports: [ReactiveFormsModule, PasswordModule, DividerModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class PasswordComponent extends BaseInputComponent {
+	feedback = input(false);
+	passwordCriterias = input<string[]>();
+	placeholder = input<string>('');
+	tabindex = input<number>();
+}

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

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

package/ui/radioButton/ng-package.json

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

package/ui/radioButton/src/radio-button.component.html

@@ -0,0 +1,17 @@
+<div [class]="_pAlign()">
+	@for (item of options(); track item) {
+		<div [class]="_cAlign()">
+			<p-radioButton
+				[value]="item.key"
+				[inputId]="item.key"
+				[tabindex]="tabindex()"
+				[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+				[tooltipOptions]="tooltipOptions"
+				[formControl]="ngControl.control"
+				(ngModelChange)="ngControl.viewToModelUpdate($event)">
+			</p-radioButton
+			>&nbsp;
+			<span class="ml-2">{{ item.label }}</span>
+		</div>
+	}
+</div>

package/ui/radioButton/src/radio-button.component.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Signal, computed, input, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+type Aligns = 'horizontal' | 'vertical';
+interface RadioButtonOption {
+	key: any;
+	label: string;
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-radio-button[ngModel], aril-radio-button[formControl], aril-radio-button[formControlName]',
+	templateUrl: './radio-button.component.html',
+	imports: [ReactiveFormsModule, RadioButtonModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class RadioButtonComponent extends BaseInputComponent {
+	constructor() {
+		super();
+		this._pAlign = computed(() => (this.align() == 'horizontal' ? 'flex flex-wrap gap-3' : 'flex flex-column'));
+		this._cAlign = computed(() => (this.align() == 'horizontal' ? 'flex align-items-center' : 'field-checkbox'));
+	}
+
+	options = input.required<RadioButtonOption[]>();
+	tabindex = input<number>();
+	align = input<Aligns>('horizontal');
+
+	_pAlign: Signal<string> = signal('flex flex-wrap gap-3');
+	_cAlign: Signal<string> = signal('flex align-items-center');
+}

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

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

package/ui/selectBox/ng-package.json

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

package/ui/selectBox/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/selectBox/src/select-box.component.html

@@ -0,0 +1,17 @@
+<dx-select-box
+	[items]="selectionItems() || items()"
+	[valueExpr]="itemKey()"
+	[displayExpr]="itemText()"
+	[searchEnabled]="true"
+	[searchExpr]="searchExpr()"
+	[tabIndex]="tabindex()"
+	[grouped]="grouped()"
+	[placeholder]="placeholder()"
+	[showClearButton]="true"
+	[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)"
+	(onSelectionChanged)="onSelectionChanged.emit($event.selectedItem)">
+</dx-select-box>

package/ui/selectBox/src/select-box.component.ts

@@ -0,0 +1,69 @@
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, effect, input, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
+import { firstValueFrom } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import {
+	BaseInputComponent,
+	DXInputErrorMessagePipe,
+	InputErrorMessagePipe,
+	ValueAccessorDirective
+} from 'aril/ui/lib';
+
+import { SelectBoxItem, SelectionGroupDTO, SelectionRequestDTO } from './interfaces';
+
+@Component({
+	standalone: true,
+	selector: 'aril-select-box[formControl], aril-select-box[formControlName]',
+	templateUrl: './select-box.component.html',
+	imports: [ReactiveFormsModule, DxSelectBoxModule, DXInputErrorMessagePipe],
+	providers: [InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SelectBoxComponent extends BaseInputComponent {
+	itemKey = input('key');
+	itemText = input('text');
+	groupName = input('');
+	parentSelectionKey = input(null);
+	tabindex = input<number>(0);
+	items = input.required<SelectBoxItem[]>();
+
+	selectionItems = signal<SelectBoxItem[] | null>(null);
+
+	/** * @description when grouped = true, option item structure { key:string, items:[] } */
+	grouped = input(false);
+	placeholder = input<string>('');
+	searchExpr = input<string | string[]>('');
+
+	@Output() onSelectionChanged = new EventEmitter<SelectBoxItem>();
+
+	constructor(private http: HttpClient) {
+		super();
+		effect(() => {
+			if (this.groupName() || this.parentSelectionKey()) this.getSelectionItems();
+		});
+	}
+
+	async getSelectionItems() {
+		const payload: SelectionRequestDTO = {
+			groupName: this.groupName(),
+			parentSelectionKey: this.parentSelectionKey()
+		};
+
+		const selectionGroup = await firstValueFrom(
+			this.http.post<SelectionGroupDTO>(API_CONFIGS.api + '/selection-group/load', payload)
+		);
+
+		this.selectionItems.set(
+			selectionGroup?.selectionItems.map((item) => ({
+				key: item.selectionKey,
+				text: item.selectionDisplay,
+				parentSelectionKey: item.parentSelectionKey
+			}))
+		);
+	}
+}

package/{styles/ui → ui/styles}/ui.common.scss

@@ -1,24 +1,24 @@
-.tooltipErrorMessage.p-tooltip .p-tooltip-text {
-	background-color: crimson !important;
-	color: rgb(255, 255, 255) !important;
-}
-.formErrorMessage .p-message .p-message-wrapper {
-	padding: 0.7rem;
-	color: crimson;
-}
-
-/** DevExtreme Elements */
-.dx-texteditor .dx-texteditor-input {
-	min-height: 34px !important;
-}
-.dx-texteditor-input-container {
-	display: block !important;
-}
-.dx-tagbox .dx-tag-container {
-	padding-top: 0px !important;
-	padding-bottom: 0px !important;
-}
-// SelectBox z-index
-.dx-selectbox-popup-wrapper {
-	z-index: 9999999999 !important;
-}
+.tooltipErrorMessage.p-tooltip .p-tooltip-text {
+	background-color: crimson !important;
+	color: rgb(255, 255, 255) !important;
+}
+.formErrorMessage .p-message .p-message-wrapper {
+	padding: 0.7rem;
+	color: crimson;
+}
+
+/** DevExtreme Elements */
+.dx-texteditor .dx-texteditor-input {
+	min-height: 34px !important;
+}
+.dx-texteditor-input-container {
+	display: block !important;
+}
+.dx-tagbox .dx-tag-container {
+	padding-top: 0px !important;
+	padding-bottom: 0px !important;
+}
+// SelectBox z-index
+.dx-selectbox-popup-wrapper {
+	z-index: 9999999999 !important;
+}

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

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