aril 1.1.73 → 1.1.75

package/ui/relativeDateSelector/src/relative-date-selector.component.ts

@@ -1,291 +0,0 @@
-import { Component, signal, ViewChild, OnInit, AfterViewInit } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-
-import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
-import { TabViewModule } from 'primeng/tabview';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { format, parse } from 'date-fns';
-
-import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
-import { CalendarComponent } from 'aril/ui/calendar';
-import { ButtonComponent } from 'aril/ui/button';
-import { NumberComponent } from 'aril/ui/number';
-import { SelectBoxComponent } from 'aril/ui/selectBox';
-import 'aril/util/primitive-extensions';
-
-import { RelativeDateUnit, RelativeDateDirection, RelativeDateUnitName, RelativeDateUnitSuffix } from './enum';
-
-interface QuickSelectOption {
-	label: string;
-	value: string;
-}
-
-@Component({
-	standalone: true,
-	selector:
-		'aril-relative-date-picker[ngModel], aril-relative-date-picker[formControl], aril-relative-date-picker[formControlName]',
-	templateUrl: './relative-date-selector.component.html',
-	styleUrls: ['./relative-date-selector.component.scss'],
-	imports: [
-		CommonModule,
-		ReactiveFormsModule,
-		FormsModule,
-		OverlayPanelModule,
-		TabViewModule,
-		TooltipModule,
-		TranslocoModule,
-		CalendarComponent,
-		ButtonComponent,
-		NumberComponent,
-		SelectBoxComponent,
-		InputErrorMessagePipe
-	],
-	hostDirectives: [ValueAccessorDirective]
-})
-export class RelativeDateSelectorComponent extends BaseInputComponent implements OnInit, AfterViewInit {
-	@ViewChild('op') overlayPanel!: OverlayPanel;
-
-	activeTabIndex = signal<number>(0);
-	showQuickSelect = signal<boolean>(false);
-	showOverlayPanel = signal<boolean>(false);
-
-	// Absolute mode
-	absoluteDate: number | null = null;
-
-	// Relative mode
-	relativeValue: number | null = null;
-	relativeUnit: string | null = null;
-	relativeDirection = RelativeDateDirection.Past;
-
-	relativeUnits: any[] = [];
-	quickSelectDirections: Array<{ label: string; value: string }> = [];
-	quickSelectUnits: Array<{ label: string; value: string }> = [];
-	commonlyUsedOptions: QuickSelectOption[] = [];
-
-	// Quick select inputs
-	quickSelectDirection = RelativeDateDirection.Past;
-	quickSelectValue: number | null = null;
-	quickSelectUnit = RelativeDateUnit.Minutes;
-
-	constructor(public readonly translocoService: TranslocoService) {
-		super();
-
-		this.initializeOptions();
-	}
-
-	ngOnInit(): void {
-		this.ngControl.control?.valueChanges.subscribe((value) => {
-			this.onValueChange(value);
-		});
-	}
-
-	ngAfterViewInit(): void {
-		if (this.ngControl.control?.value != null) {
-			this.onValueChange(this.ngControl.control?.value);
-		}
-	}
-
-	private initializeOptions(): void {
-		const units = Object.values(RelativeDateUnit);
-		const unitNames = Object.values(RelativeDateUnitName);
-		const directions = Object.values(RelativeDateDirection);
-		const directionSuffixes = Object.values(RelativeDateUnitSuffix);
-
-		// Relative units
-		this.relativeUnits = units.flatMap((code, index) =>
-			directions.map((dir, dirIndex) => ({
-				label: this.translocoService.translate(
-					`relativeDateSelector.units.${unitNames[index]}${directionSuffixes[dirIndex]}`
-				),
-				value: `${code}${dir}`
-			}))
-		);
-
-		// Quick Select - Last/Next options
-		this.quickSelectDirections = [
-			{ label: this.translocoService.translate('relativeDateSelector.last'), value: RelativeDateDirection.Past },
-			{ label: this.translocoService.translate('relativeDateSelector.next'), value: RelativeDateDirection.Future }
-		];
-
-		this.quickSelectUnits = units.map((code, index) => ({
-			label: this.translocoService.translate(`relativeDateSelector.units.${unitNames[index]}`),
-			value: code
-		}));
-
-		// Commonly used quick selects
-		const quickOptions = [
-			{ key: 'today', value: `now/${RelativeDateUnit.Days}` },
-			{ key: 'thisWeek', value: `now/${RelativeDateUnit.Weeks}` },
-			{ key: 'last1Minute', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Minutes}` },
-			{ key: 'last15Minutes', value: `now${RelativeDateDirection.Past}15${RelativeDateUnit.Minutes}` },
-			{ key: 'last30Minutes', value: `now${RelativeDateDirection.Past}30${RelativeDateUnit.Minutes}` },
-			{ key: 'last1Hour', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Hours}` },
-			{ key: 'last24Hours', value: `now${RelativeDateDirection.Past}24${RelativeDateUnit.Hours}` },
-			{ key: 'last7Days', value: `now${RelativeDateDirection.Past}7${RelativeDateUnit.Days}` },
-			{ key: 'last30Days', value: `now${RelativeDateDirection.Past}30${RelativeDateUnit.Days}` },
-			{ key: 'last90Days', value: `now${RelativeDateDirection.Past}90${RelativeDateUnit.Days}` },
-			{ key: 'last1Year', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Years}` }
-		];
-
-		this.commonlyUsedOptions = quickOptions.map((opt) => ({
-			label: this.translocoService.translate(`relativeDateSelector.quickOptions.${opt.key}`),
-			value: opt.value
-		}));
-	}
-
-	onValueChange(value: number | string | null | undefined): void {
-		if (value != null) {
-			if (typeof value === 'number') {
-				this.activeTabIndex.set(0);
-				this.absoluteDate = value;
-			} else if (typeof value === 'string') {
-				this.activeTabIndex.set(1);
-				this.parseRelativeValue(value);
-			}
-		} else {
-			this.absoluteDate = null;
-			this.relativeValue = null;
-			this.relativeUnit = null;
-		}
-	}
-
-	parseRelativeValue(value: string): void {
-		const match = value.match(/^now\s*(?:([+-])\s*(\d+)([smhdwMy]))?\s*(?:\/([smhdwMy]))?$/);
-
-		if (match) {
-			const [, direction, amount, unit] = match;
-			if (direction && amount && unit) {
-				this.relativeDirection = direction as RelativeDateDirection;
-				this.relativeValue = parseInt(amount, 10);
-				this.relativeUnit = unit + direction;
-			}
-		}
-	}
-
-	onAbsoluteDateChange(date: number | null): void {
-		this.absoluteDate = date;
-		this.updateValue();
-	}
-
-	onRelativeChange(): void {
-		this.updateValue();
-	}
-
-	onTabChange(event: { index: number }): void {
-		this.activeTabIndex.set(event.index);
-	}
-
-	updateValue(): void {
-		if (this.activeTabIndex() === 0 && this.absoluteDate != null) {
-			this.ngControl.control?.setValue(this.absoluteDate);
-		} else if (this.activeTabIndex() === 1 && this.relativeValue != null && this.relativeUnit) {
-			const unit = this.relativeUnit.charAt(0);
-			const direction = this.relativeUnit.charAt(1);
-			this.ngControl.control?.setValue(`now${direction}${this.relativeValue}${unit}`);
-		}
-	}
-
-	applyQuickSelect(option: QuickSelectOption): void {
-		this.applyRelativeValue(option.value);
-	}
-
-	applyQuickSelectCustom(): void {
-		if (this.quickSelectValue != null && this.quickSelectUnit) {
-			const relativeString = `now${this.quickSelectDirection}${this.quickSelectValue}${this.quickSelectUnit}`;
-			this.applyRelativeValue(relativeString);
-		}
-	}
-
-	private applyRelativeValue(value: string): void {
-		this.activeTabIndex.set(1);
-		this.parseRelativeValue(value);
-		this.ngControl.control?.setValue(value);
-		this.closeQuickSelectPanels();
-	}
-
-	private closeQuickSelectPanels(): void {
-		this.showQuickSelect.set(false);
-		this.showOverlayPanel.set(false);
-	}
-
-	toggleQuickSelect(event: Event): void {
-		event.stopPropagation();
-		this.showQuickSelect.update((value) => !value);
-		if (this.showQuickSelect()) {
-			this.showOverlayPanel.set(false);
-			this.overlayPanel?.hide();
-		}
-	}
-
-	onInputClick(event: Event): void {
-		this.showQuickSelect.set(false);
-		this.overlayPanel?.toggle(event);
-	}
-
-	getDisplayValue(): string {
-		const value = this.ngControl.control?.value;
-
-		if (value == null) return '';
-
-		if (typeof value === 'number') {
-			return this.formatAbsoluteDate(value);
-		}
-
-		if (typeof value === 'string') {
-			return this.formatRelativeDate(value);
-		}
-
-		return '';
-	}
-
-	private formatAbsoluteDate(value: number): string {
-		const dateStr = value.toString();
-		if (dateStr.length === 14) {
-			try {
-				const date = parse(dateStr, 'yyyyMMddHHmmss', new Date());
-				return format(date, 'dd.MM.yyyy HH:mm:ss');
-			} catch (error) {
-				return dateStr;
-			}
-		}
-		return dateStr;
-	}
-
-	private formatRelativeDate(value: string): string {
-		const quickOption = this.commonlyUsedOptions.find((opt: QuickSelectOption) => opt.value === value);
-		if (quickOption) {
-			return quickOption.label;
-		}
-
-		const match = value.match(/^now\s*([+-])\s*(\d+)([smhdwMy])$/);
-		if (match) {
-			const [, direction, amount, unit] = match;
-			const directionText = this.translocoService.translate(
-				direction === RelativeDateDirection.Past ? 'relativeDateSelector.last' : 'relativeDateSelector.next'
-			);
-			const unitText = this.translocoService.translate(this.getUnitTranslationKey(unit, direction));
-			return `${directionText} ${amount} ${unitText}`;
-		}
-
-		return value;
-	}
-
-	private getUnitTranslationKey(unit: string, direction: string): string {
-		const unitNameMap: Record<string, RelativeDateUnitName> = {
-			[RelativeDateUnit.Seconds]: RelativeDateUnitName.Seconds,
-			[RelativeDateUnit.Minutes]: RelativeDateUnitName.Minutes,
-			[RelativeDateUnit.Hours]: RelativeDateUnitName.Hours,
-			[RelativeDateUnit.Days]: RelativeDateUnitName.Days,
-			[RelativeDateUnit.Weeks]: RelativeDateUnitName.Weeks,
-			[RelativeDateUnit.Months]: RelativeDateUnitName.Months,
-			[RelativeDateUnit.Years]: RelativeDateUnitName.Years
-		};
-
-		const suffix =
-			direction === RelativeDateDirection.Past ? RelativeDateUnitSuffix.Ago : RelativeDateUnitSuffix.FromNow;
-		return `relativeDateSelector.units.${unitNameMap[unit]}${suffix}`;
-	}
-}

package/ui/selectBox/ng-package.json

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

package/ui/selectBox/src/interfaces.ts

@@ -1,41 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<dx-select-box
-	[items]="selectionItems() || items()"
-	[valueExpr]="itemKey()"
-	[displayExpr]="itemText()"
-	[searchEnabled]="true"
-	[searchExpr]="searchExpr()"
-	[tabIndex]="tabindex()"
-	[grouped]="grouped()"
-	[placeholder]="placeholder()"
-	[showClearButton]="showClearButton()"
-	[isValid]="ngControl?.control?.valid || ngControl?.control?.pristine || ngControl?.control?.disabled || false"
-	[validationError]="ngControl?.control?.errors | dxInputErrorMessage: ngControl?.control"
-	validationMessagePosition="top"
-	[noDataText]="translocoService.translate('messages.noDataToDisplay')"
-	[formControl]="ngControl.control"
-	(ngModelChange)="ngControl.viewToModelUpdate($event)"
-	(onSelectionChanged)="onSelectionChanged.emit($event.selectedItem);setTitle($event.selectedItem)"
-	[inputAttr]="{ 'title': selectedItemText }">
-</dx-select-box>

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

@@ -1,79 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, EventEmitter, Output, effect, input, signal } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-
-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[ngModel], aril-select-box[formControl], aril-select-box[formControlName]',
-	templateUrl: './select-box.component.html',
-	imports: [ReactiveFormsModule, DxSelectBoxModule, DXInputErrorMessagePipe, TranslocoModule],
-	providers: [InputErrorMessagePipe],
-	hostDirectives: [ValueAccessorDirective]
-})
-export class SelectBoxComponent extends BaseInputComponent {
-	itemKey = input('key');
-	itemText = input('text');
-	groupName = input('');
-	parentSelectionKey = input(null);
-	tabindex = input<number>(0);
-	items = input.required<SelectBoxItem[]>();
-	selectedItemText: string = '';
-
-	selectionItems = signal<SelectBoxItem[] | null>(null);
-
-	/** * @description when grouped = true, option item structure { key:string, items:[] } */
-	grouped = input(false);
-	showClearButton = input<boolean>(true);
-	placeholder = input<string>('');
-	searchExpr = input<string | string[]>('');
-
-	@Output() onSelectionChanged = new EventEmitter<SelectBoxItem>();
-
-	constructor(private http: HttpClient, public translocoService: TranslocoService) {
-		super();
-		effect(() => {
-			if (this.groupName() || this.parentSelectionKey()) this.getSelectionItems();
-		});
-	}
-
-	setTitle(event?: any) {
-		this.selectedItemText = '';
-		if (event && event[this.itemText()].length > 25) {
-			this.selectedItemText = event ? event[this.itemText()] : '';
-		}
-		this.onSelectionChanged.emit(event);
-	}
-
-	async getSelectionItems() {
-		const payload: SelectionRequestDTO = {
-			groupName: this.groupName(),
-			parentSelectionKey: this.parentSelectionKey()
-		};
-		const hostApi = API_CONFIGS.api.replace(/\/[^\/]+\/v1$/, `/host/v1`);
-		const selectionGroup = await firstValueFrom(
-			this.http.post<SelectionGroupDTO>(hostApi + '/selection-group/load', payload)
-		);
-
-		this.selectionItems.set(
-			selectionGroup?.selectionItems.map((item) => ({
-				key: item.selectionKey,
-				text: item.selectionDisplay,
-				parentSelectionKey: item.parentSelectionKey
-			}))
-		);
-	}
-}

package/ui/styles/ui.common.scss

@@ -1,42 +0,0 @@
-.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: 32px !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;
-}
-
-.dx-texteditor.dx-editor-outlined{
-	height:2.25em !important;
-}
-
-.dx-field-label {
-    color: var(--card-foreground) !important;
-    font-size: 12px !important;
-    font-family: var(--font-family) !important;
-}
-
-
-.dx-field input, .dx-field textarea{
-    /* font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; */
-    /* line-height: 1.428571; */
-    font-family: var(--font-family) !important;
-	font-size: 12px !important;
-}

package/ui/switch/ng-package.json

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

package/ui/switch/src/switch.component.html

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

package/ui/switch/src/switch.component.ts

@@ -1,18 +0,0 @@
-import { Component, input } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
-
-@Component({
-	standalone: true,
-	selector: 'aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]',
-	templateUrl: './switch.component.html',
-	imports: [ReactiveFormsModule, InputSwitchModule, TooltipModule, InputErrorMessagePipe],
-	hostDirectives: [ValueAccessorDirective]
-})
-export class SwitchComponent extends BaseInputComponent {
-	tabindex = input<number>();
-}

package/ui/table/index.ts

@@ -1,76 +0,0 @@
-import { JsonPipe, KeyValuePipe, NgFor, NgForOf, NgStyle, NgTemplateOutlet, SlicePipe } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { ButtonModule } from 'primeng/button';
-import { DropdownModule } from 'primeng/dropdown';
-import { CheckIcon } from 'primeng/icons/check';
-import { MenuModule } from 'primeng/menu';
-import { OrderListModule } from 'primeng/orderlist';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
-import { SidebarModule } from 'primeng/sidebar';
-import { TableModule } from 'primeng/table';
-import { ToastModule } from 'primeng/toast';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { ButtonComponent } from 'aril/ui/button';
-import { CalendarComponent } from 'aril/ui/calendar';
-import { CheckboxComponent } from 'aril/ui/checkbox';
-import { FieldComponent } from 'aril/ui/field';
-import { ARiLFormModule } from 'aril/ui/form';
-import { NumberComponent } from 'aril/ui/number';
-import { RadioButtonComponent } from 'aril/ui/radioButton';
-import { TextComponent } from 'aril/ui/text';
-import { ValueComponent } from 'aril/ui/value';
-import { GetColumnByFieldPipe, ParsePipe, SafePipe } from 'aril/util/pipes';
-
-import { ExportOverlayPanelComponent } from './src/export-overlay-panel.component';
-import { TableColumnComponent } from './src/table-column.component';
-import { TableComponent } from './src/table.component';
-
-export * from './src/interfaces';
-export * from './src/table-column.component';
-export * from './src/table.component';
-export * from './src/export-overlay-panel.component';
-
-const components = [TableComponent, TableColumnComponent];
-
-@NgModule({
-	imports: [
-		ARiLFormModule,
-		ButtonComponent,
-		ButtonModule,
-		CalendarComponent,
-		CheckboxComponent,
-		CheckIcon,
-		DropdownModule,
-		FieldComponent,
-		FormsModule,
-		GetColumnByFieldPipe,
-		JsonPipe,
-		KeyValuePipe,
-		MenuModule,
-		NgFor,
-		NgForOf,
-		NgStyle,
-		NgTemplateOutlet,
-		NumberComponent,
-		OrderListModule,
-		OverlayPanelModule,
-		ParsePipe,
-		RadioButtonComponent,
-		ReactiveFormsModule,
-		SafePipe,
-		SidebarModule,
-		TableModule,
-		TextComponent,
-		ToastModule,
-		TooltipModule,
-		ValueComponent,
-		ExportOverlayPanelComponent,
-		SlicePipe
-	],
-	exports: [components],
-	declarations: [components]
-})
-export class ARiLTableModule {}

package/ui/table/ng-package.json

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