aril 0.0.45 → 0.0.47

package/theme/styles/theme/light/blue/theme.scss

@@ -1,14 +1,14 @@
-$primaryColor: #3b82f6 !default;
-$primaryLightColor: #bfdbfe !default;
-$primaryDarkColor: #2563eb !default;
-$primaryDarkerColor: #1d4ed8 !default;
-$primaryTextColor: #ffffff !default;
-$primary500: #3b82f6 !default;
-
-$highlightBg: #eff6ff !default;
-$highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, 0.24) !default;
-
-@import '../_variables';
-@import '../../base/_components';
-@import '../_extensions';
+$primaryColor: #3b82f6 !default;
+$primaryLightColor: #bfdbfe !default;
+$primaryDarkColor: #2563eb !default;
+$primaryDarkerColor: #1d4ed8 !default;
+$primaryTextColor: #ffffff !default;
+$primary500: #3b82f6 !default;
+
+$highlightBg: #eff6ff !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: #eef2ff !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: #eef2ff !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/{index.d.ts → index.ts}

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

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,11 @@
+<p-autoComplete
+	[optionLabel]="optionLabel()"
+	[optionValue]="optionValue()!"
+	[placeholder]="placeholder()"
+	[forceSelection]="forceSelection()"
+	[delay]="400"
+	[suggestions]="filteredSelectionItems"
+	(completeMethod)="search($event)"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</p-autoComplete>

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

@@ -0,0 +1,92 @@
+import { JsonPipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, ViewChild, effect, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
+
+import { firstValueFrom } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+import { SelectionItemRequestDTO, SuggestionsDTO } from './interfaces';
+
+@Component({
+	standalone: true,
+	selector: 'aril-auto-complete[formControl], aril-auto-complete[formControlName]',
+	templateUrl: './auto-complete.component.html',
+	imports: [ReactiveFormsModule, InputErrorMessagePipe, AutoCompleteModule, JsonPipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class AutoCompleteComponent extends BaseInputComponent {
+	@ViewChild(AutoComplete) autoCompleteRef!: AutoComplete;
+
+	items = input<SuggestionsDTO[]>([]);
+	referenceAsset: any = input({});
+	placeholder = input<string>('Arama...');
+	forceSelection = input<boolean>(false);
+
+	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();
+		});
+	}
+
+	search(event: any) {
+		const query = event.query;
+		if (this.referenceAsset()) {
+			this.filteredSelectionItems = this.filterSelection(query, this.selectionItems);
+		}
+	}
+
+	filterSelection(query: string, selectionItems: SuggestionsDTO[]): SuggestionsDTO[] {
+		let filtered: SuggestionsDTO[] = [];
+		filtered = selectionItems.filter((selectionItem) => {
+			return selectionItem.text.toLowerCase().indexOf(query.toLowerCase()) == 0;
+		});
+		return filtered;
+	}
+
+	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)
+		}));
+
+		const optionLabel = this.optionLabel();
+		const optionValue = this.optionValue();
+
+		const selectedItem = this.selectionItems?.find((item) => item.key === this.ngControl.value);
+
+		if (selectedItem) this.autoCompleteRef.writeValue(optionValue ? selectedItem[optionLabel] : selectedItem);
+	}
+}

package/ui/autoComplete/src/interfaces.ts

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

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

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

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,3 @@
+<p-tag [icon]="icon()" [value]="value()" [severity]="severity()" [rounded]="rounded()">
+	<ng-content></ng-content>
+</p-tag>

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { TagModule } from 'primeng/tag';
+
+type Severity = 'success' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
+
+@Component({
+	standalone: true,
+	selector: 'aril-badge',
+	templateUrl: './badge.component.html',
+	imports: [TagModule],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BadgeComponent {
+	icon = input<string>();
+	value = input<string>();
+	severity = input.required<Severity>();
+	rounded = input<boolean>();
+}

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

@@ -1,2 +1,2 @@
-export * from './src/button.component';
-export * from './src/split-button.component';
+export * from './src/button.component';
+export * from './src/split-button.component';

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,10 @@
+<p-button
+	[label]="label()"
+	[badge]="badge()"
+	[icon]="_icon()"
+	iconPos="left"
+	[disabled]="disabled()"
+	[styleClass]="_styleClass()"
+	[loading]="loading()"
+	(onClick)="clickEvnt($event)">
+</p-button>

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

@@ -0,0 +1,43 @@
+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';
+
+@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);
+	outlined = input<boolean>(false);
+	badge = input<string>();
+	size = input<Size>('sm');
+	icon = input<PrimeIcon>();
+	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/{index.d.ts → index.ts}

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

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,31 @@
+<div [ngClass]="{ invalidCalendar: ngControl.dirty && ngControl.invalid }">
+	<p-calendar
+		[showIcon]="true"
+		[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()"
+		[firstDayOfWeek]="1"
+		[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+		[tooltipOptions]="tooltipOptions"
+		[(ngModel)]="model"
+		(ngModelChange)="ngControl.viewToModelUpdate($event); setFormCtrl($event)"
+		appendTo="body">
+		<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>

package/ui/calendar/src/calendar.component.ts

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* TODO
+    1. Adjust different color or background for weekends
+*/
+import { NgClass } from '@angular/common';
+import { OnInit, runInInjectionContext } from '@angular/core';
+import { AfterViewInit, Component, Injector, computed, inject, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { PrimeNGConfig } from 'primeng/api';
+import { CalendarModule } from 'primeng/calendar';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+import 'aril/util/primitive-extensions';
+
+type View = 'date' | 'month' | 'year';
+type SelectionMode = 'single' | 'multiple' | 'range';
+
+@Component({
+	standalone: true,
+	selector: 'aril-calendar[ngModel], aril-calendar[formControl], aril-calendar[formControlName]',
+	templateUrl: './calendar.component.html',
+	imports: [ReactiveFormsModule, FormsModule, NgClass, CalendarModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective],
+	styles: '.invalidCalendar { border:1px solid #e24c4c;border-radius: 6px; }'
+})
+export class CalendarComponent extends BaseInputComponent implements OnInit, AfterViewInit {
+	constructor(private primeNgConfig: PrimeNGConfig) {
+		super();
+		this.setLocale();
+	}
+
+	private readonly injector = inject(Injector);
+
+	ngOnInit(): void {
+		if (typeof this.ngControl?.control?.value === 'number') 
+			this.model = this.ngControl?.control?.value?.longToDate();
+	}
+
+	ngAfterViewInit(): void {
+		runInInjectionContext(this.injector, () => {
+			this.ngControl?.control?.valueChanges?.pipe(takeUntilDestroyed()).subscribe((value: number) => {
+				if (Number(value)) {
+					const currentDate = this.model || new Date();
+					currentDate.setTime(value);
+					this.model = currentDate;
+				}
+			});
+		});
+	}
+
+	setFormCtrl(value: Date) {
+		this.ngControl?.control?.setValue(value?.getTime());
+	}
+
+	model!: Date | undefined;
+
+	minDate = input<number>();
+	maxDate = input<number>();
+	inline = input<boolean>(false);
+	showIcon = input<boolean>(false);
+	showTime = input<boolean>(false);
+	showWeek = input<boolean>(false);
+	showSeconds = input<boolean>(false);
+	disabledDates = input<number[]>([]);
+	view = input<View>('date');
+	selectionMode = input<SelectionMode>('single');
+	tabindex = input<number>();
+
+	showOnFocus= input<boolean>(false);
+
+	_minJSDate = computed(() => {
+		return this.minDate()?.longToDate() as Date;
+	});
+
+	_maxJSDate = computed(() => {
+		return this.maxDate()?.longToDate() as Date;
+	});
+
+	_selectedDisabledDates = computed(() => {
+		return this.disabledDates()?.map((value: number) => value.longToDate() as Date);
+	});
+
+	_dateFormat = computed(() => {
+		switch (this.view()) {
+			case 'month':
+				return 'MM/yy';
+			case 'year':
+				return 'yy';
+			default:
+				return 'dd/MM/yy';
+		}
+	});
+
+	// isWeekend(date: any): boolean {
+	//   if (!date) {
+	//     return false;
+	//   }
+
+	//   if (this.view == 'date') {
+	//     const dayOfWeek = date.getDay();
+	//     return dayOfWeek === 5 || dayOfWeek === 6;
+	//   }
+	// }
+
+	setLocale() {
+		this.primeNgConfig.setTranslation({
+			firstDayOfWeek: 0,
+			dayNames: ['Pazar','Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+			dayNamesMin: ['Pzr','Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+			dayNamesShort: ['Pzr', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+			monthNames: [
+				'Ocak',
+				'Şubat',
+				'Mart',
+				'Nisan',
+				'Mayıs',
+				'Haziran',
+				'Temmuz',
+				'Ağustos',
+				'Eylül',
+				'Ekim',
+				'Kasım',
+				'Aralık'
+			],
+			monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+			today: 'Bugün',
+			clear: 'Temizle',
+			dateFormat: 'dd/mm/yy',
+			weekHeader: 'Hafta'
+		});
+	}
+}

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

@@ -1,2 +1,2 @@
-export * from './src/check-box.component';
-export * from './src/tri-state-checkbox.component';
+export * from './src/check-box.component';
+export * from './src/tri-state-checkbox.component';

package/ui/checkbox/ng-package.json

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

package/ui/checkbox/src/check-box.component.html

@@ -0,0 +1,9 @@
+<p-checkbox
+	[label]="label()"
+	[tabindex]="tabindex()"
+	[binary]="true"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</p-checkbox>

package/ui/checkbox/src/check-box.component.ts

@@ -0,0 +1,19 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { CheckboxModule } from 'primeng/checkbox';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-checkbox[ngModel], aril-checkbox[formControl], aril-checkbox[formControlName]',
+	templateUrl: './check-box.component.html',
+	imports: [ReactiveFormsModule, CheckboxModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class CheckboxComponent extends BaseInputComponent {
+	label = input.required<string>();
+	tabindex = input<number>();
+}

package/ui/checkbox/src/tri-state-checkbox.component.html

@@ -0,0 +1,7 @@
+<p-triStateCheckbox
+	[label]="label()"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+</p-triStateCheckbox>

package/ui/checkbox/src/tri-state-checkbox.component.ts

@@ -0,0 +1,20 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { TooltipModule } from 'primeng/tooltip';
+import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector:
+		'aril-tri-state-checkbox[ngModel], aril-tri-state-checkbox[formControl], aril-tri-state-checkbox[formControlName]',
+	templateUrl: './tri-state-checkbox.component.html',
+	imports: [ReactiveFormsModule, TriStateCheckboxModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class TriStateCheckboxComponent extends BaseInputComponent {
+	label = input.required<string>();
+	tabindex = input<number>();
+}

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

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

package/ui/dxField/ng-package.json

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

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

@@ -0,0 +1,8 @@
+<div class="dx-field">
+	<div class="dx-field-label font-bold" [ngStyle]="{ color: color(), width: labelWidth() + '%' }">
+		{{ label() }}
+	</div>
+	<div class="dx-field-value" [ngStyle]="{ width: valueWidth() + '%' }">
+		<ng-content></ng-content>
+	</div>
+</div>