aril 1.1.71 → 1.1.73

package/ui/charts/src/highCharts/line/line-chart-series.component.ts

@@ -0,0 +1,92 @@
+import { Component, ElementRef, ViewChild, OnInit, input } from "@angular/core";
+import { HighchartsChartModule } from "highcharts-angular";
+import * as Highcharts from 'highcharts';
+
+type TimeSeriesDataPoint = [number, number]; // [timestamp, value]
+
+interface SeriesData {
+	name: string;
+	data: TimeSeriesDataPoint[];
+	color?: string;
+}
+
+@Component({    
+	standalone: true,
+	selector: 'aril-lineseries-chart',
+	template: `
+		<div #chartContainer style="width: 100%; height: 100%;"></div>
+	`,
+	imports: [HighchartsChartModule]
+})
+export class LineSeriesChartComponent implements OnInit {
+	@ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;
+	
+	seriesData = input<SeriesData[]>([]);
+	title = input('Time Series Chart');
+	yAxisTitle = input('Value');
+	xAxisTitle = input('Time');
+
+	private chart: Highcharts.Chart | undefined;
+
+	ngOnInit() {
+		this.initChart();
+	}
+
+	private initChart() {
+		const options: Highcharts.Options = {
+			chart: {
+				type: 'line',
+				zoomType: 'x'
+			} as Highcharts.ChartOptions,
+			title: {
+				text: this.title()
+			},
+			xAxis: {
+				type: 'datetime',
+				title: {
+					text: this.xAxisTitle()
+				}
+			},
+			yAxis: {
+				title: {
+					text: this.yAxisTitle()
+				}
+			},
+			series: this.seriesData().map(series => ({
+				type: 'line',
+				name: series.name,
+				data: series.data,
+				color: series.color
+			})),
+			tooltip: {
+				xDateFormat: '%Y-%m-%d %H:%M:%S',
+				shared: true
+			},
+			legend: {
+				enabled: true
+			},
+			plotOptions: {
+				series: {
+					marker: {
+						enabled: false
+					}
+				}
+			},
+			noData: {
+				style: {
+					fontWeight: 'bold',
+					fontSize: '16px',
+					color: '#303030'
+				},
+				position: {
+					align: 'center',
+					verticalAlign: 'middle'
+				},
+				useHTML: true
+			},
+			
+		};
+
+		this.chart = Highcharts.chart(this.chartContainer.nativeElement, options);
+	}
+}

package/ui/charts/src/highCharts/line/line-chart.component.ts

@@ -0,0 +1,85 @@
+import { Component, ElementRef, ViewChild, OnInit, input } from '@angular/core';
+import { HighchartsChartModule } from 'highcharts-angular';
+import * as Highcharts from 'highcharts';
+
+type DataPoint = [number, number]; // [x, y]
+
+interface SeriesData {
+	name: string;
+	data: DataPoint[];
+	color?: string;
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-line-chart',
+	template: ` <div #chartContainer style="width: 100%; height: 100%;"></div> `,
+	imports: [HighchartsChartModule]
+})
+export class LineChartComponent implements OnInit {
+	@ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;
+
+	seriesData = input<SeriesData[]>([]);
+	title = input('Line Chart');
+	yAxisTitle = input('Value');
+	xAxisTitle = input('Category');
+	private chart: Highcharts.Chart | undefined;
+
+	ngOnInit() {
+		this.initChart();
+	}
+
+	private initChart() {
+		const options: Highcharts.Options = {
+			chart: {
+				type: 'line'
+			} as Highcharts.ChartOptions,
+			title: {
+				text: this.title()
+			},
+			xAxis: {
+				title: {
+					text: this.xAxisTitle()
+				}
+			},
+			yAxis: {
+				title: {
+					text: this.yAxisTitle()
+				}
+			},
+			series: this.seriesData().map((series) => ({
+				type: 'line',
+				name: series.name,
+				data: series.data,
+				color: series.color
+			})),
+			tooltip: {
+				shared: true
+			},
+			legend: {
+				enabled: true
+			},
+			plotOptions: {
+				series: {
+					marker: {
+						enabled: true
+					}
+				}
+			},
+			noData: {
+				style: {
+					fontWeight: 'bold',
+					fontSize: '16px',
+					color: '#303030'
+				},
+				position: {
+					align: 'center',
+					verticalAlign: 'middle'
+				},
+				useHTML: true
+			},
+		};
+
+		this.chart = Highcharts.chart(this.chartContainer.nativeElement, options);
+	}
+}

package/ui/charts/src/highCharts/pie/pie-chart.component.ts

@@ -0,0 +1,139 @@
+import { Component, EventEmitter, Output, effect, input } from '@angular/core';
+
+import * as Highcharts from 'highcharts';
+import { HighchartsChartModule } from 'highcharts-angular';
+
+interface dataItems {
+	name: string;
+	y: number;
+	color?: string;
+	tooltip?: string;
+	selected?: boolean;
+}
+
+// Example Data
+// data = [
+// 	{ name: 'Kategori A', y: 200 },
+// 	{ name: 'Kategori B', y: 100 },
+// 	{ name: 'Kategori C', y: 500 },
+// 	{ name: 'Kategori D', y: 250 },
+// 	{ name: 'Kategori E', y: 400 },
+// ]
+
+@Component({
+	standalone: true,
+	selector: 'aril-pie-highchart',
+	template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[oneToOne]="true"
+		[runOutsideAngular]="true"
+		[options]="chartOptions">
+	</highcharts-chart>`,
+
+	imports: [HighchartsChartModule]
+})
+export class PieHighChartComponent {
+	constructor() {
+		effect(() => {
+			if (this.data()) {
+				this.setChartOptions();
+			}
+		});
+	}
+
+	data = input.required<dataItems[]>();
+	title = input<string>('');
+	size = input<string>('70%');
+	width = input<string>('460');
+	height = input<string>('380');
+	showLegend = input<boolean>(false);
+	dataLabelsFormat = input<string>(
+		'<span style="font-size: 1.2em"><b>{point.name}:</b> <span style="opacity: 0.6">' +
+			'{point.percentage:.1f}%</span><br>'
+	);
+
+	@Output() selected: EventEmitter<unknown> = new EventEmitter();
+
+	Highcharts: typeof Highcharts = Highcharts;
+	chartOptions: Highcharts.Options = {};
+
+	setChartOptions() {
+		this.chartOptions = {
+			chart: {
+				type: 'pie',
+				plotShadow: false,
+				width: this.width(),
+				height: this.height()
+			},
+			title: {
+				text: this.title()
+			},
+			tooltip: {
+				pointFormat: '<b>{point.percentage:.1f}%</b>'
+			},
+			accessibility: {
+				point: {
+					valueSuffix: '%'
+				}
+			},
+			plotOptions: {
+				pie: {
+					size: this.size(),
+					allowPointSelect: true,
+					cursor: 'pointer',
+					showInLegend: this.showLegend(),
+					dataLabels: {
+						formatter: function (this: any) {
+							const percentage = this.point.percentage.toFixed(1);
+							const value = this.point.y.toLocaleString('tr-TR', {
+								minimumFractionDigits: 2,
+								maximumFractionDigits: 2
+							});
+							return `
+								<span style="font-size: 1.2em"><b>${this.point.name}:</b></span>
+								<span style="opacity: 0.6">${percentage}%</span>
+								<br>
+								<span style="font-weight: bold;">${value} TL</span>`;
+						},
+						enabled: true,
+						style: {
+							fontWeight: 'normal'
+						}
+					},
+					events: {
+						click: (event: any) => {
+							this.selected.emit(event.point.options);
+						}
+					}
+				}
+			},
+			series: [
+				{
+					type: 'pie',
+					name: 'Data',
+					data: this.data()
+				}
+			],
+			credits: {
+				enabled: false
+			},
+			responsive: {
+				rules: [
+					{
+						condition: {
+							maxWidth: 500
+						},
+						chartOptions: {
+							legend: {
+								layout: 'vertical',
+								align: 'right',
+								verticalAlign: 'middle'
+							}
+						}
+					}
+				]
+			}
+		};
+	}
+}

package/ui/charts/src/theme/theme.ts

@@ -0,0 +1,55 @@
+export class ChartThemes {
+	static getThorAppColors() {
+		return [
+			'#e7625f',
+			'#c85250',
+			'#f7bec0',
+			'#e9eae0',
+			'#aa1945',
+			'#f1ced4',
+			'#391306',
+			'#821d30',
+			'#fb4570',
+			'#fb4570',
+			'#fb4570',
+			'#5f093d',
+			'#b21368',
+			'#d67ba8'
+		];
+	}
+
+	static getYeapAppColors() {
+		return [
+			'#525252',
+			'#9A9A9A',
+			'#767676',
+			'#828282',
+			'#BEBEBE',
+			'#8E8E8E',
+			'#6A6A6A',
+			'#A6A6A6',
+			'#5E5E5E',
+			'#B2B2B2',
+			'#CACACA'
+		];
+	}
+
+	static getLenaAppColors() {
+		return [
+			'#abea7c',
+			'#fede00',
+			'#c8df52',
+			'#0a7029',
+			'#dbe8d8',
+			'#65463e',
+			'#aad6a0',
+			'#013a20',
+			'#bacc81',
+			'#cdd193',
+			'#fad02c',
+			'#282120',
+			'#333652',
+			'#b2d7da'
+		];
+	}
+}

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,15 @@
+<p-checkbox
+	[label]="
+		labelAsYesNo() ?
+			ngControl.control.value ?
+				translocoService.translate('yes')
+			:	translocoService.translate('no')
+		:	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,24 @@
+import { Component, inject, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { CheckboxModule } from 'primeng/checkbox';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoService } from '@ngneat/transloco';
+
+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<string>();
+	labelAsYesNo = input<boolean>();
+	tabindex = input<number>();
+
+	translocoService = inject(TranslocoService);
+}

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/chip/index.ts

@@ -0,0 +1 @@
+export * from './src/chip.component';

package/ui/chip/ng-package.json

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

package/ui/chip/src/chip.component.html

@@ -0,0 +1,33 @@
+<p-chips
+	[class]="_sizeClass()"
+	[placeholder]="placeholder()"
+	[tabindex]="tabindex()"
+	[addOnBlur]="addOnBlur()"
+	[addOnTab]="addOnTab()"
+	[separator]="separator"
+	[allowDuplicate]="false"
+	[formControl]="ngControl.control"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	tooltipPosition="top"
+	tooltipStyleClass="tooltipErrorMessage"
+	(onAdd)="onAdd($event)">
+	<ng-template let-item pTemplate="item">
+		<ng-container *ngIf="editable() && editingIndex() === ngControl.control.value.indexOf(item); else displayChip">
+			<input
+				pInputText
+				[ngClass]="_sizeClass()"
+				[ngModel]="editValue()"
+				(ngModelChange)="editValue.set($event)"
+				(keydown)="onEditKeydown($event)"
+				(click)="$event.stopPropagation()"
+				(blur)="resetEditing()"
+				#editInput
+				class="m-0 p-1" />
+		</ng-container>
+		<ng-template #displayChip>
+			<div (dblclick)="startEditing(ngControl.control.value.indexOf(item), item)">
+				{{ item }}
+			</div>
+		</ng-template>
+	</ng-template>
+</p-chips>

package/ui/chip/src/chip.component.ts

@@ -0,0 +1,144 @@
+import { CommonModule } from '@angular/common';
+import {
+	AfterViewChecked,
+	Component,
+	DestroyRef,
+	ElementRef,
+	NgZone,
+	ViewChild,
+	computed,
+	inject,
+	input,
+	signal
+} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ChipsAddEvent, ChipsModule } from 'primeng/chips';
+import { InputTextModule } from 'primeng/inputtext';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+type Size = 'sm' | 'md' | 'lg';
+type DataType = 'string' | 'number';
+
+@Component({
+	standalone: true,
+	selector: 'aril-chip[ngModel], aril-chip[formControl], aril-chip[formControlName]',
+	templateUrl: './chip.component.html',
+	imports: [
+		ReactiveFormsModule,
+		ChipsModule,
+		TooltipModule,
+		InputTextModule,
+		CommonModule,
+		FormsModule,
+		InputErrorMessagePipe
+	],
+	hostDirectives: [ValueAccessorDirective],
+	providers: [InputErrorMessagePipe]
+})
+export class ChipComponent extends BaseInputComponent implements AfterViewChecked {
+	placeholder = input<string>('');
+	tabindex = input<number>();
+	size = input<Size>('md');
+	editable = input<boolean>(false);
+	addOnBlur = input<boolean>(false);
+	addOnTab = input<boolean>(false);
+	dataType = input<DataType>('string');
+
+	@ViewChild('editInput') editInput: ElementRef | null = null;
+	editingIndex = signal<number>(-1);
+	editValue = signal<string>('');
+
+	separator = /[,\n\r]/;
+	private focusSet = false;
+	destroyRef = inject(DestroyRef);
+
+	constructor(private ngZone: NgZone) {
+		super();
+	}
+
+	ngAfterViewChecked(): void {
+		// Focus the input element after view is checked and element is available
+		if (this.editingIndex() !== -1 && this.editInput && !this.focusSet) {
+			this.focusSet = true;
+			// Use NgZone.runOutsideAngular to avoid triggering change detection
+			this.ngZone.runOutsideAngular(() => {
+				setTimeout(() => {
+					const inputEl = this.editInput?.nativeElement;
+					inputEl.focus();
+				});
+			});
+		}
+	}
+
+	_sizeClass = computed(() => {
+		switch (this.size()) {
+			case 'sm':
+				return 'p-inputtext-sm';
+			case 'md':
+				return '';
+			case 'lg':
+				return 'p-inputtext-lg';
+		}
+	});
+
+	startEditing(index: number, value: string): void {
+		if (!this.editable()) return;
+		this.editingIndex.set(index);
+		this.editValue.set(value);
+		this.focusSet = false;
+	}
+
+	saveChanges(): void {
+		if (this.editingIndex() === -1) return;
+		const currentValues = [...(this.ngControl.control.value || [])];
+		let newValue: string | number = this.editValue();
+
+		if (this.dataType() === 'number') {
+			const numValue = Number(newValue);
+			if (isNaN(numValue)) {
+				this.resetEditing();
+				return;
+			}
+			newValue = numValue;
+		}
+
+		currentValues[this.editingIndex()] = newValue;
+		this.ngControl.control.setValue(currentValues);
+		this.resetEditing();
+	}
+
+	onEditKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter') {
+			this.saveChanges();
+		} else if (event.key === 'Escape') {
+			this.resetEditing();
+		}
+		// Prevent event propagation for all keydown events to avoid interference
+		event.stopPropagation();
+	}
+
+	resetEditing(): void {
+		this.editingIndex.set(-1);
+		this.editValue.set('');
+		this.focusSet = false;
+	}
+
+	onAdd(event: ChipsAddEvent) {
+		if (this.dataType() === 'number') {
+			const currentValues = [...(this.ngControl.value || [])];
+			const newValue = event.value;
+			const numValue = Number(newValue);
+
+			if (isNaN(numValue)) {
+				const filteredValues = currentValues.filter((v) => v !== newValue);
+				this.ngControl.control.setValue(filteredValues);
+			} else {
+				const numericValues = currentValues.map((v) => (typeof v === 'string' ? Number(v) : v));
+				this.ngControl.control.setValue(numericValues);
+			}
+		}
+	}
+}

package/ui/collapse-reorder-list/index.ts

@@ -0,0 +1 @@
+export * from './src/collapse-reorder-list.component';

package/ui/collapse-reorder-list/ng-package.json

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

package/ui/collapse-reorder-list/src/collapse-reorder-list.component.html

@@ -0,0 +1,42 @@
+<div class="collapse-reorder-list">
+	<div class="collapse-reorder-list-item mb-2">
+		<div class="flex align-items-center justify-content-between p-2 header-bg font-medium border-round-lg">
+			<div class="flex align-items-center gap-2">
+				<i
+					class="pi cursor-pointer p-2"
+					[class.pi-angle-down]="!isCollapsed"
+					[class.pi-angle-right]="isCollapsed"
+					(click)="isCollapsed = !isCollapsed"></i>
+
+				<div>{{ title() }}</div>
+			</div>
+		</div>
+
+		@if (!isCollapsed) {
+			<div class="flex flex-column mt-2">
+				<div cdkDropList class="collapse-reorder-list" (cdkDropListDropped)="drop($event)">
+					@for (fg of formArray.controls; track fg) {
+						<form cdkDrag class="collapse-reorder-list-item mb-2">
+							<div class="flex align-items-start px-2 surface-50 border-round-lg">
+								<i class="pi pi-bars cursor-move p-2 mt-2" cdkDragHandle></i>
+
+								<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: fg }" />
+
+								<div class="flex gap-1 mt-2">
+									<i class="pi pi-trash cursor-pointer p-2 text-red-500" (click)="removeField(fg)"></i>
+								</div>
+							</div>
+						</form>
+					}
+				</div>
+
+				<aril-button
+					class="w-max mb-2"
+					[label]="addFieldButtonLabel()"
+					color="secondary"
+					[outlined]="true"
+					(clickEvent)="addField.emit()" />
+			</div>
+		}
+	</div>
+</div>