aril 1.1.71 → 1.1.73

package/theme/styles/theme/light/custom/theme.scss

@@ -1,16 +1,16 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
-$primaryColor: #1e293b !default;
-$primaryLightColor: #2c3e59 !default;
-$primaryDarkColor: #1f2a3c !default;
-$primaryDarkerColor: #151f2e !default;
-$primaryTextColor: #ffffff !default;
-$primary500: #1e293b !default;
-
-$highlightBg:#eff3ff !default;
-$highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, 0.24) !default;
-
-@import '../_variables';
-@import '../../base/_components';
-@import '../_extensions';
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+$primaryColor: #1e293b !default;
+$primaryLightColor: #2c3e59 !default;
+$primaryDarkColor: #1f2a3c !default;
+$primaryDarkerColor: #151f2e !default;
+$primaryTextColor: #ffffff !default;
+$primary500: #1e293b !default;
+
+$highlightBg:#eff3ff !default;
+$highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: rgba($primaryColor, 0.24) !default;
+
+@import '../_variables';
+@import '../../base/_components';
+@import '../_extensions';

package/theme/styles/theme/light/indigo/theme.scss

@@ -1,14 +1,14 @@
-$primaryColor: #6366f1 !default;
-$primaryLightColor: #c7d2fe !default;
-$primaryDarkColor: #4f46e5 !default;
-$primaryDarkerColor: #4338ca !default;
-$primaryTextColor: #ffffff !default;
-$primary500: #6366f1 !default;
-
-$highlightBg: #eff3ff !default;
-$highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, 0.24) !default;
-
-@import '../_variables';
-@import '../../base/_components';
-@import '../_extensions';
+$primaryColor: #6366f1 !default;
+$primaryLightColor: #c7d2fe !default;
+$primaryDarkColor: #4f46e5 !default;
+$primaryDarkerColor: #4338ca !default;
+$primaryTextColor: #ffffff !default;
+$primary500: #6366f1 !default;
+
+$highlightBg: #eff3ff !default;
+$highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: rgba($primaryColor, 0.24) !default;
+
+@import '../_variables';
+@import '../../base/_components';
+@import '../_extensions';

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/lib",
+		"declaration": true,
+		"declarationMap": true,
+		"inlineSources": true,
+		"types": []
+	},
+	"exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "./tsconfig.lib.json",
+	"compilerOptions": {
+		"declarationMap": false
+	},
+	"angularCompilerOptions": {
+		"compilationMode": "partial"
+	}
+}

package/tsconfig.spec.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/spec",
+		"types": ["jasmine"]
+	},
+	"include": ["**/*.spec.ts", "**/*.d.ts"]
+}

package/ui/autoComplete/ng-package.json

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

package/ui/autoComplete/src/auto-complete.component.html

@@ -0,0 +1,14 @@
+<p-autoComplete
+	[optionLabel]="optionLabel()"
+	[optionValue]="optionValue()!"
+	[placeholder]="placeholder()"
+	[multiple]="multiple()"
+	[forceSelection]="forceSelection()"
+	[delay]="400"
+	[suggestions]="filteredSelectionItems"
+	(completeMethod)="search($event)"
+	[formControl]="ngControl.control"
+	[minLength]="minLength()"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)"
+	appendTo="body">
+</p-autoComplete>

package/ui/autoComplete/src/auto-complete.component.ts

@@ -0,0 +1,130 @@
+import { HttpClient } from '@angular/common/http';
+import { AfterViewInit, Component, ViewChild, effect, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
+import { ObjectUtils } from 'primeng/utils';
+
+import { firstValueFrom } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+import { ReferenceAsset, SelectionItemRequestDTO, SuggestionsDTO } from './interfaces';
+
+@Component({
+	standalone: true,
+	selector: 'aril-auto-complete[ngModel], aril-auto-complete[formControl], aril-auto-complete[formControlName]',
+	templateUrl: './auto-complete.component.html',
+	imports: [ReactiveFormsModule, InputErrorMessagePipe, AutoCompleteModule],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class AutoCompleteComponent extends BaseInputComponent implements AfterViewInit {
+	@ViewChild(AutoComplete) autoCompleteRef!: AutoComplete;
+
+	items = input<SuggestionsDTO[]>([]);
+	referenceAsset = input<ReferenceAsset | null>(null);
+	placeholder = input<string>('Arama...');
+	forceSelection = input<boolean>(false);
+	multiple = input<boolean>(false);
+	minLength = input<number>(1);
+
+	optionValue = input<keyof SuggestionsDTO | null>(null);
+	optionLabel = input<keyof SuggestionsDTO>('text');
+
+	selectionItems!: SuggestionsDTO[];
+	filteredSelectionItems!: SuggestionsDTO[];
+
+	constructor(private http: HttpClient) {
+		super();
+		effect(() => {
+			if (this.referenceAsset()) this.getSelectionItems();
+
+			if (this.items()?.length) this.setSelectionItems();
+		});
+	}
+
+	ngAfterViewInit(): void {
+		this.autoCompleteRef.getOptionValue = this.getOptionValue.bind(this);
+	}
+
+	getOptionValue(option: any) {
+		return (
+			this.optionValue() ?
+				typeof option === 'object' ?
+					ObjectUtils.resolveFieldData(option, this.optionValue())
+				:	option
+			:	option
+		);
+	}
+
+	search(event: any) {
+		const query = event.query;
+
+		this.filteredSelectionItems = this.filterSelection(query, this.selectionItems);
+	}
+
+	filterSelection(query: string, selectionItems: SuggestionsDTO[]): SuggestionsDTO[] {
+		let filtered: SuggestionsDTO[] =
+			this.multiple() ?
+				selectionItems.filter((t) => this.ngControl.value?.some((v: unknown) => v === t.key)) ?? []
+			:	[];
+
+		return [
+			...new Set([
+				...filtered,
+				...selectionItems.filter((selectionItem) => {
+					return selectionItem.text.toLowerCase().indexOf(query.toLowerCase()) == 0;
+				})
+			])
+		];
+	}
+
+	async getSelectionItems() {
+		const payload: SelectionItemRequestDTO = {
+			pager: {
+				pageSize: 100,
+				pageNumber: 1
+			},
+			asset: {
+				alias: 'cp',
+				assetDefinitionCode: this.referenceAsset()!.referringAssetCode
+			},
+			attributes: [
+				{
+					attribute: {
+						alias: 'cp',
+						attributeCode: this.referenceAsset()!.referringAttributeCode
+					}
+				}
+			]
+		};
+
+		const selectionGroup = await firstValueFrom(this.http.post<any>(API_CONFIGS.api + '/md/search', payload));
+
+		this.selectionItems = selectionGroup?.result.map((item: any) => ({
+			key: item.id,
+			text: String(item.attributes[0].value)
+		}));
+
+		this.writeValue();
+	}
+
+	setSelectionItems() {
+		this.selectionItems = this.items();
+
+		this.writeValue();
+	}
+
+	private writeValue() {
+		if (this.multiple()) {
+			// BUG issue https://github.com/primefaces/primeng/issues/15495
+			this.autoCompleteRef.completeMethod.emit({ originalEvent: null as any, query: '' });
+			return;
+		}
+
+		const selectedItem = this.selectionItems?.find((item) => item.key === this.ngControl.value);
+
+		if (selectedItem) this.autoCompleteRef.writeValue(this.autoCompleteRef.getOptionLabel(selectedItem));
+	}
+}

package/ui/autoComplete/src/interfaces.ts

@@ -0,0 +1,35 @@
+
+export interface SuggestionsDTO {
+	key: number | string | null;
+	text: string;
+}
+
+export interface SelectionItemRequestDTO {
+	pager:      Pager;
+	asset:      Asset;
+	attributes: AttributeElement[];
+}
+
+export interface Asset {
+	alias:               string;
+	assetDefinitionCode: string;
+}
+
+export interface AttributeElement {
+	attribute: AttributeAttribute;
+}
+
+export interface AttributeAttribute {
+	alias:         string;
+	attributeCode: string;
+}
+
+export interface Pager {
+	pageSize:   number;
+	pageNumber: number;
+}
+
+export interface ReferenceAsset {
+	referringAssetCode: string;
+	referringAttributeCode: string;
+}

package/ui/badge/ng-package.json

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

package/ui/badge/src/badge.component.html

@@ -0,0 +1,11 @@
+<p-tag
+	[icon]="icon()"
+	[value]="value() && value().length > 50 ? value().slice(0, 50) + '...' : value()"
+	[severity]="severity()"
+	[rounded]="rounded()"
+	[styleClass]="styleClass()"
+	[style]="badgeStyle()"
+	[pTooltip]="value() && value().length > 50 ? value() : undefined"
+	tooltipPosition="top">
+	<ng-content></ng-content>
+</p-tag>

package/ui/badge/src/badge.component.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { TagModule } from 'primeng/tag';
+import { TooltipModule } from 'primeng/tooltip';
+
+type Severity = 'success' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
+
+@Component({
+	standalone: true,
+	selector: 'aril-badge',
+	templateUrl: './badge.component.html',
+	imports: [TagModule, TooltipModule],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BadgeComponent {
+	icon = input<string>();
+	value = input.required<string>();
+	severity = input<Severity>();
+	rounded = input<boolean>();
+	background = input<string>();
+	styleClass = input<string>();
+	textColor = input<string>();
+	borderColor = input<string>();
+
+	badgeStyle() {
+		const mainColor = this.background() ?? '#1890FF';
+		const lightBg = this.lightenColor(mainColor, 92);
+		const textColor = this.textColor() ?? mainColor;
+		const border = this.borderColor() ?? this.lightenColor(mainColor, 60);
+		return {
+			backgroundColor: lightBg,
+			color: textColor,
+			textAlign: 'center',
+			fontSize: '1rem',
+			fontWeight: '500',
+			padding: '2px 8px',
+			borderRadius: '12px',
+			border: `0.5px solid ${border}`,
+			display: 'inline-block',
+			lineHeight: '1.2',
+			whiteSpace: 'nowrap',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			maxWidth: '100%'
+		};
+	}
+
+	private lightenColor(hex: string, percent: number): string {
+		const sanitized = hex.replace('#', '');
+		const r = parseInt(sanitized.substring(0, 2), 16);
+		const g = parseInt(sanitized.substring(2, 4), 16);
+		const b = parseInt(sanitized.substring(4, 6), 16);
+		
+		// Mix with white to lighten
+		const factor = percent / 100;
+		const nr = Math.round(r + (255 - r) * factor);
+		const ng = Math.round(g + (255 - g) * factor);
+		const nb = Math.round(b + (255 - b) * factor);
+		
+		return `#${nr.toString(16).padStart(2, '0')}${ng.toString(16).padStart(2, '0')}${nb.toString(16).padStart(2, '0')}`;
+	}
+	
+}

package/ui/button/ng-package.json

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

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

@@ -0,0 +1,12 @@
+<p-button
+	[label]="label()"
+	[badge]="badge()"
+	[icon]="_icon()"
+	[text]="text()"
+	[rounded]="rounded()"
+	[iconPos]="iconPos()"
+	[disabled]="disabled()"
+	[styleClass]="_styleClass()"
+	[loading]="loading()"
+	(onClick)="clickEvnt($event)">
+</p-button>

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+
+import { PrimeIcon, iconTransform } from 'aril/ui/lib';
+
+type Size = 'sm' | 'md' | 'lg';
+type Colors = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger';
+type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
+
+@Component({
+	standalone: true,
+	selector: 'aril-button:not([click])',
+	templateUrl: './button.component.html',
+	host: { id: Math.random().toString(36).substring(2) },
+	imports: [ButtonModule],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ButtonComponent {
+	label = input<string>();
+	loading = input<boolean>(false);
+	disabled = input<boolean>(false);
+	raised = input<boolean>(true);
+	rounded = input<boolean>(false);
+	text = input<boolean>(false);
+	outlined = input<boolean>(false);
+	badge = input<string>();
+	size = input<Size>('sm');
+	icon = input<PrimeIcon>();
+	iconPos = input<ButtonIconPosition>('left');
+	color = input.required<Colors>();
+
+	@Output() clickEvent: EventEmitter<Event> = new EventEmitter<Event>();
+
+	_icon = computed(() => iconTransform(this.icon()!));
+
+	_color = computed(() => `p-button-${this.color()}`);
+
+	_styleClass = computed(() => {
+		return `${this.raised() ? `p-button-raised` : ''} ${this.outlined() ? `p-button-outlined` : ''} ${this.size() ? `p-button-${this.size()}` : ''} ${this._color()}`;
+	});
+
+	clickEvnt(e: Event) {
+		e.stopPropagation();
+		this.clickEvent.emit(e);
+	}
+}

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

@@ -0,0 +1,2 @@
+<p-splitButton [label]="label()" [icon]="_icon()" [styleClass]="_styleClass()" [model]="menu()" [disabled]="disabled()">
+</p-splitButton>

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

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+import { SplitButtonModule } from 'primeng/splitbutton';
+
+import { ButtonComponent } from './button.component';
+
+@Component({
+	standalone: true,
+	selector: 'aril-split-button',
+	templateUrl: './split-button.component.html',
+	imports: [SplitButtonModule],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SplitButtonComponent extends ButtonComponent {
+	menu = input.required<MenuItem[]>();
+}

package/ui/calendar/ng-package.json

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

package/ui/calendar/src/calendar.component.html

@@ -0,0 +1,48 @@
+<div 
+	class="relative inline-block w-full"
+	[pTooltip]="selectionMode() === 'range' ? translocoService.translate('validations.dateRangeInputFormat') : ''"
+	tooltipPosition="bottom">
+	<p-calendar
+		[showIcon]="true"
+		[iconDisplay]="'input'"
+		[dateFormat]="_dateFormat()"
+		[showButtonBar]="true"
+		[minDate]="_minJSDate()"
+		[maxDate]="_maxJSDate()"
+		[tabindex]="tabindex()"
+		[disabledDates]="_selectedDisabledDates()"
+		[selectionMode]="selectionMode()"
+		[disabled]="ngControl.control.disabled"
+		[readonlyInput]="false"
+		[showTime]="showTime()"
+		[showSeconds]="showSeconds()"
+		[inline]="inline()"
+		[showWeek]="showWeek()"
+		[showOnFocus]="showOnFocus()"
+		[timeOnly]="timeOnly()"
+		[keepInvalid]="_keepInvalid()"
+		[view]="_view()"
+		[inputStyle]="inputStyle()"
+		[inputStyleClass]="inputStyleClass()"
+		[firstDayOfWeek]="1"
+		[autoZIndex]="autoZIndex()"
+		[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+		[ngClass]="{ 'ng-invalid ng-dirty': ngControl.invalid && ngControl.dirty }"
+		[tooltipOptions]="tooltipOptions"
+		[numberOfMonths]="numberOfMonthToShow()"
+		[(ngModel)]="model"
+		(ngModelChange)="ngControl.viewToModelUpdate($event); setFormCtrl($event)"
+		(onFocus)="onInputFocus()"
+		(onBlur)="onInputBlur()"
+		[dataType]="dataType()"
+		[panelStyleClass]="ngControl.control.disabled ? 'hidden' : ''"
+		[placeholder]="_placeholder()"
+		[appendTo]="appendTo()">
+		<ng-template pTemplate="header">
+			<ng-content select="[header]"></ng-content>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<ng-content select="[footer]"></ng-content>
+		</ng-template>
+	</p-calendar>
+</div>