aril 1.1.73 → 1.1.75

package/fesm2022/aril-ui-relativeDateSelector.mjs

@@ -0,0 +1,285 @@
+import * as i0 from '@angular/core';
+import { signal, Component, ViewChild } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import * as i4 from 'primeng/overlaypanel';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import * as i5 from 'primeng/tabview';
+import { TabViewModule } from 'primeng/tabview';
+import * as i6 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i1 from '@ngneat/transloco';
+import { TranslocoModule } from '@ngneat/transloco';
+import { parse, format } from 'date-fns';
+import * as i2 from 'aril/ui/lib';
+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';
+
+var RelativeDateUnit;
+(function (RelativeDateUnit) {
+    RelativeDateUnit["Seconds"] = "s";
+    RelativeDateUnit["Minutes"] = "m";
+    RelativeDateUnit["Hours"] = "h";
+    RelativeDateUnit["Days"] = "d";
+    RelativeDateUnit["Weeks"] = "w";
+    RelativeDateUnit["Months"] = "M";
+    RelativeDateUnit["Years"] = "y";
+})(RelativeDateUnit || (RelativeDateUnit = {}));
+var RelativeDateDirection;
+(function (RelativeDateDirection) {
+    RelativeDateDirection["Past"] = "-";
+    RelativeDateDirection["Future"] = "+";
+})(RelativeDateDirection || (RelativeDateDirection = {}));
+var RelativeDateUnitName;
+(function (RelativeDateUnitName) {
+    RelativeDateUnitName["Seconds"] = "seconds";
+    RelativeDateUnitName["Minutes"] = "minutes";
+    RelativeDateUnitName["Hours"] = "hours";
+    RelativeDateUnitName["Days"] = "days";
+    RelativeDateUnitName["Weeks"] = "weeks";
+    RelativeDateUnitName["Months"] = "months";
+    RelativeDateUnitName["Years"] = "years";
+})(RelativeDateUnitName || (RelativeDateUnitName = {}));
+var RelativeDateUnitSuffix;
+(function (RelativeDateUnitSuffix) {
+    RelativeDateUnitSuffix["Ago"] = "Ago";
+    RelativeDateUnitSuffix["FromNow"] = "FromNow";
+})(RelativeDateUnitSuffix || (RelativeDateUnitSuffix = {}));
+
+class RelativeDateSelectorComponent extends BaseInputComponent {
+    constructor(translocoService) {
+        super();
+        this.translocoService = translocoService;
+        this.activeTabIndex = signal(0);
+        this.showQuickSelect = signal(false);
+        this.showOverlayPanel = signal(false);
+        // Absolute mode
+        this.absoluteDate = null;
+        // Relative mode
+        this.relativeValue = null;
+        this.relativeUnit = null;
+        this.relativeDirection = RelativeDateDirection.Past;
+        this.relativeUnits = [];
+        this.quickSelectDirections = [];
+        this.quickSelectUnits = [];
+        this.commonlyUsedOptions = [];
+        // Quick select inputs
+        this.quickSelectDirection = RelativeDateDirection.Past;
+        this.quickSelectValue = null;
+        this.quickSelectUnit = RelativeDateUnit.Minutes;
+        this.initializeOptions();
+    }
+    ngOnInit() {
+        this.ngControl.control?.valueChanges.subscribe((value) => {
+            this.onValueChange(value);
+        });
+    }
+    ngAfterViewInit() {
+        if (this.ngControl.control?.value != null) {
+            this.onValueChange(this.ngControl.control?.value);
+        }
+    }
+    initializeOptions() {
+        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) {
+        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) {
+        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;
+                this.relativeValue = parseInt(amount, 10);
+                this.relativeUnit = unit + direction;
+            }
+        }
+    }
+    onAbsoluteDateChange(date) {
+        this.absoluteDate = date;
+        this.updateValue();
+    }
+    onRelativeChange() {
+        this.updateValue();
+    }
+    onTabChange(event) {
+        this.activeTabIndex.set(event.index);
+    }
+    updateValue() {
+        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) {
+        this.applyRelativeValue(option.value);
+    }
+    applyQuickSelectCustom() {
+        if (this.quickSelectValue != null && this.quickSelectUnit) {
+            const relativeString = `now${this.quickSelectDirection}${this.quickSelectValue}${this.quickSelectUnit}`;
+            this.applyRelativeValue(relativeString);
+        }
+    }
+    applyRelativeValue(value) {
+        this.activeTabIndex.set(1);
+        this.parseRelativeValue(value);
+        this.ngControl.control?.setValue(value);
+        this.closeQuickSelectPanels();
+    }
+    closeQuickSelectPanels() {
+        this.showQuickSelect.set(false);
+        this.showOverlayPanel.set(false);
+    }
+    toggleQuickSelect(event) {
+        event.stopPropagation();
+        this.showQuickSelect.update((value) => !value);
+        if (this.showQuickSelect()) {
+            this.showOverlayPanel.set(false);
+            this.overlayPanel?.hide();
+        }
+    }
+    onInputClick(event) {
+        this.showQuickSelect.set(false);
+        this.overlayPanel?.toggle(event);
+    }
+    getDisplayValue() {
+        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 '';
+    }
+    formatAbsoluteDate(value) {
+        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;
+    }
+    formatRelativeDate(value) {
+        const quickOption = this.commonlyUsedOptions.find((opt) => 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;
+    }
+    getUnitTranslationKey(unit, direction) {
+        const unitNameMap = {
+            [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}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RelativeDateSelectorComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: RelativeDateSelectorComponent, isStandalone: true, selector: "aril-relative-date-picker[ngModel], aril-relative-date-picker[formControl], aril-relative-date-picker[formControlName]", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["op"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.ValueAccessorDirective }], ngImport: i0, template: "<div class=\"relative-date-selector\">\r\n\t<div class=\"input-wrapper flex align-items-center\" (click)=\"onInputClick($event)\">\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\treadonly\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\tclass=\"p-inputtext p-component\"\r\n\t\t\t[class.p-invalid]=\"ngControl.invalid && ngControl.touched\"\r\n\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.placeholder')\"\r\n\t\t\t[pTooltip]=\"ngControl.invalid && ngControl.touched ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t\t\t[tooltipOptions]=\"tooltipOptions\" />\r\n\t\t<div class=\"calendar-icon-wrapper flex align-items-center justify-content-center\" (click)=\"toggleQuickSelect($event)\">\r\n\t\t\t<i class=\"pi pi-calendar calendar-icon\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<p-overlayPanel\r\n\t\t#op\r\n\t\t[style]=\"{ minWidth: '350px', maxHeight: '600px', overflow: 'visible' }\"\r\n\t\t[dismissable]=\"true\"\r\n\t\t(onHide)=\"showOverlayPanel.set(false)\">\r\n\t\t<p-tabView (onChange)=\"onTabChange($event)\" [activeIndex]=\"activeTabIndex()\">\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.absolute')\">\r\n\t\t\t\t<div class=\"flex justify-content-center\">\r\n\t\t\t\t\t<aril-calendar\r\n\t\t\t\t\t\t[(ngModel)]=\"absoluteDate\"\r\n\t\t\t\t\t\t(ngModelChange)=\"onAbsoluteDateChange($event)\"\r\n\t\t\t\t\t\t[inline]=\"true\"\r\n\t\t\t\t\t\t[showTime]=\"true\"\r\n\t\t\t\t\t\t[showSeconds]=\"true\">\r\n\t\t\t\t\t</aril-calendar>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.relative')\">\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class=\"flex flex-column gap-2 m-2\">\r\n\t\t\t\t\t\t<aril-number\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeValue\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[min]=\"1\"\r\n\t\t\t\t\t\t\t[showButtons]=\"true\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.valuePlaceholder')\">\r\n\t\t\t\t\t\t</aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeUnit\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[items]=\"relativeUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.selectUnit')\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"m-2\">\r\n\t\t\t\t\t\t<small class=\"text-muted\">\r\n\t\t\t\t\t\t\t<strong>{{ translocoService.translate('relativeDateSelector.examples') }}:</strong> {{ translocoService.translate('relativeDateSelector.examplesText') }}\r\n\t\t\t\t\t\t</small>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\t\t</p-tabView>\r\n\t</p-overlayPanel>\r\n\r\n\t<!-- Quick Select Panel -->\r\n\t@if (showQuickSelect()) {\r\n\t\t<div class=\"quick-select-panel mt-2\">\r\n\t\t\t<div class=\"quick-select-header flex justify-content-between align-items-center p-3\">\r\n\t\t\t\t<span class=\"title\">{{ translocoService.translate('relativeDateSelector.quickSelect') }}</span>\r\n\t\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t\t<i class=\"pi pi-times cursor-pointer\" (click)=\"showQuickSelect.set(false)\"></i>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"quick-select-body p-3\">\r\n\t\t\t\t<!-- Custom Quick Select Inputs -->\r\n\t\t\t\t<div class=\"quick-select-custom mb-3 pb-3\">\r\n\t\t\t\t\t<div class=\"flex gap-2 align-items-center mb-3\">\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectDirection\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectDirections\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-number [(ngModel)]=\"quickSelectValue\" [min]=\"1\" [showButtons]=\"true\"> </aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectUnit\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t[label]=\"translocoService.translate('relativeDateSelector.apply')\"\r\n\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t(clickEvent)=\"applyQuickSelectCustom()\"\r\n\t\t\t\t\t\t\t[style]=\"{ 'min-width': '80px' }\">\r\n\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- Commonly Used Options -->\r\n\t\t\t\t<div class=\"quick-select-section\">\r\n\t\t\t\t\t<span class=\"title-section mb-2\">{{ translocoService.translate('relativeDateSelector.commonlyUsed') }}</span>\r\n\t\t\t\t\t<div class=\"quick-select-options\">\r\n\t\t\t\t\t\t@for (option of commonlyUsedOptions; track option.value) {\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"quick-select-option\" (click)=\"applyQuickSelect(option)\">\r\n\t\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t}\r\n</div>\r\n", styles: [".relative-date-selector{position:relative}.relative-date-selector .input-wrapper{position:relative;cursor:pointer}.relative-date-selector .input-wrapper input{width:100%;padding-right:3rem;cursor:pointer;transition:all var(--transition-duration) ease}.relative-date-selector .input-wrapper input:hover{border-color:var(--focus-border-color)}.relative-date-selector .input-wrapper input:focus{box-shadow:var(--focus-ring);border-color:var(--focus-border-color)}.relative-date-selector .input-wrapper input.p-invalid{border-color:var(--error-300)}.relative-date-selector .input-wrapper .calendar-icon-wrapper{position:absolute;right:.5rem;width:2rem;height:2rem;background:var(--surface-100);border:1px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-duration) ease;z-index:2}.relative-date-selector .input-wrapper .calendar-icon-wrapper:hover{background:var(--surface-200);border-color:var(--primary-color);transform:scale(1.05)}.relative-date-selector .input-wrapper .calendar-icon-wrapper:hover .calendar-icon{color:var(--primary-color)}.relative-date-selector .input-wrapper .calendar-icon-wrapper:active{transform:scale(.98)}.relative-date-selector .input-wrapper .calendar-icon-wrapper .calendar-icon{font-size:.9375rem;color:var(--text-color-secondary);transition:color var(--transition-duration) ease}.relative-date-selector .quick-select-panel{position:absolute;top:100%;right:0;background:var(--surface-0);border:1px solid var(--surface-border);border-radius:8px;box-shadow:0 4px 20px #00000014;z-index:1000;width:460px;max-height:520px;overflow:hidden;animation:slideDown var(--transition-duration) ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.relative-date-selector .quick-select-panel .quick-select-header{border-bottom:1px solid var(--surface-200);background:var(--surface-100)}.relative-date-selector .quick-select-panel .quick-select-header .title{margin:0;font-size:13px;font-weight:700;color:var(--surface-600)}.relative-date-selector .quick-select-panel .quick-select-header i{cursor:pointer;color:var(--text-color-secondary);font-size:.875rem;transition:all var(--transition-duration) ease}.relative-date-selector .quick-select-panel .quick-select-header i:hover{color:var(--text-color);transform:scale(1.1)}.relative-date-selector .quick-select-panel .quick-select-body{max-height:440px;overflow-y:auto}.relative-date-selector .quick-select-panel .quick-select-custom{border-bottom:1px solid var(--surface-200)}.relative-date-selector .quick-select-panel .quick-select-section .title-section{display:inline-block;font-size:.8rem;font-weight:600;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.relative-date-selector .quick-select-panel .quick-select-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.relative-date-selector .quick-select-panel .quick-select-options .quick-select-option{padding:.625rem 1rem;background:var(--surface-100);border:1px solid var(--surface-200);text-align:left;cursor:pointer;border-radius:var(--border-radius);transition:all var(--transition-duration) ease;color:var(--text-color);font-size:.875rem;font-weight:500}.relative-date-selector .quick-select-panel .quick-select-options .quick-select-option:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TabViewModule }, { kind: "component", type: i5.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: CalendarComponent, selector: "aril-calendar[ngModel], aril-calendar[formControl], aril-calendar[formControlName]", inputs: ["minDate", "maxDate", "inputStyle", "inputStyleClass", "autoZIndex", "inline", "showIcon", "showTime", "showWeek", "showSeconds", "disabledDates", "numberOfMonthToShow", "appendTo", "dataType", "placeholder", "view", "selectionMode", "rangeConfig", "tabindex", "showOnFocus", "timeOnly", "keepInvalid"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }, { kind: "component", type: NumberComponent, selector: "aril-number[ngModel], aril-number[formControl], aril-number[formControlName]", inputs: ["min", "max", "showButtons", "placeholder", "prefix", "locale", "suffix", "maxlength", "showClear", "useGrouping", "maxDigits", "minDigits", "tabindex", "inputStyle", "buttonLayout"] }, { kind: "component", type: SelectBoxComponent, selector: "aril-select-box[ngModel], aril-select-box[formControl], aril-select-box[formControlName]", inputs: ["itemKey", "itemText", "groupName", "parentSelectionKey", "tabindex", "items", "grouped", "showClearButton", "placeholder", "searchExpr"], outputs: ["onSelectionChanged"] }, { kind: "pipe", type: InputErrorMessagePipe, name: "inputErrorMessage" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RelativeDateSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'aril-relative-date-picker[ngModel], aril-relative-date-picker[formControl], aril-relative-date-picker[formControlName]', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        OverlayPanelModule,
+                        TabViewModule,
+                        TooltipModule,
+                        TranslocoModule,
+                        CalendarComponent,
+                        ButtonComponent,
+                        NumberComponent,
+                        SelectBoxComponent,
+                        InputErrorMessagePipe
+                    ], hostDirectives: [ValueAccessorDirective], template: "<div class=\"relative-date-selector\">\r\n\t<div class=\"input-wrapper flex align-items-center\" (click)=\"onInputClick($event)\">\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\treadonly\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\tclass=\"p-inputtext p-component\"\r\n\t\t\t[class.p-invalid]=\"ngControl.invalid && ngControl.touched\"\r\n\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.placeholder')\"\r\n\t\t\t[pTooltip]=\"ngControl.invalid && ngControl.touched ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t\t\t[tooltipOptions]=\"tooltipOptions\" />\r\n\t\t<div class=\"calendar-icon-wrapper flex align-items-center justify-content-center\" (click)=\"toggleQuickSelect($event)\">\r\n\t\t\t<i class=\"pi pi-calendar calendar-icon\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<p-overlayPanel\r\n\t\t#op\r\n\t\t[style]=\"{ minWidth: '350px', maxHeight: '600px', overflow: 'visible' }\"\r\n\t\t[dismissable]=\"true\"\r\n\t\t(onHide)=\"showOverlayPanel.set(false)\">\r\n\t\t<p-tabView (onChange)=\"onTabChange($event)\" [activeIndex]=\"activeTabIndex()\">\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.absolute')\">\r\n\t\t\t\t<div class=\"flex justify-content-center\">\r\n\t\t\t\t\t<aril-calendar\r\n\t\t\t\t\t\t[(ngModel)]=\"absoluteDate\"\r\n\t\t\t\t\t\t(ngModelChange)=\"onAbsoluteDateChange($event)\"\r\n\t\t\t\t\t\t[inline]=\"true\"\r\n\t\t\t\t\t\t[showTime]=\"true\"\r\n\t\t\t\t\t\t[showSeconds]=\"true\">\r\n\t\t\t\t\t</aril-calendar>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.relative')\">\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class=\"flex flex-column gap-2 m-2\">\r\n\t\t\t\t\t\t<aril-number\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeValue\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[min]=\"1\"\r\n\t\t\t\t\t\t\t[showButtons]=\"true\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.valuePlaceholder')\">\r\n\t\t\t\t\t\t</aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeUnit\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[items]=\"relativeUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.selectUnit')\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"m-2\">\r\n\t\t\t\t\t\t<small class=\"text-muted\">\r\n\t\t\t\t\t\t\t<strong>{{ translocoService.translate('relativeDateSelector.examples') }}:</strong> {{ translocoService.translate('relativeDateSelector.examplesText') }}\r\n\t\t\t\t\t\t</small>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\t\t</p-tabView>\r\n\t</p-overlayPanel>\r\n\r\n\t<!-- Quick Select Panel -->\r\n\t@if (showQuickSelect()) {\r\n\t\t<div class=\"quick-select-panel mt-2\">\r\n\t\t\t<div class=\"quick-select-header flex justify-content-between align-items-center p-3\">\r\n\t\t\t\t<span class=\"title\">{{ translocoService.translate('relativeDateSelector.quickSelect') }}</span>\r\n\t\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t\t<i class=\"pi pi-times cursor-pointer\" (click)=\"showQuickSelect.set(false)\"></i>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"quick-select-body p-3\">\r\n\t\t\t\t<!-- Custom Quick Select Inputs -->\r\n\t\t\t\t<div class=\"quick-select-custom mb-3 pb-3\">\r\n\t\t\t\t\t<div class=\"flex gap-2 align-items-center mb-3\">\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectDirection\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectDirections\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-number [(ngModel)]=\"quickSelectValue\" [min]=\"1\" [showButtons]=\"true\"> </aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectUnit\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t[label]=\"translocoService.translate('relativeDateSelector.apply')\"\r\n\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t(clickEvent)=\"applyQuickSelectCustom()\"\r\n\t\t\t\t\t\t\t[style]=\"{ 'min-width': '80px' }\">\r\n\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- Commonly Used Options -->\r\n\t\t\t\t<div class=\"quick-select-section\">\r\n\t\t\t\t\t<span class=\"title-section mb-2\">{{ translocoService.translate('relativeDateSelector.commonlyUsed') }}</span>\r\n\t\t\t\t\t<div class=\"quick-select-options\">\r\n\t\t\t\t\t\t@for (option of commonlyUsedOptions; track option.value) {\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"quick-select-option\" (click)=\"applyQuickSelect(option)\">\r\n\t\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t}\r\n</div>\r\n", styles: [".relative-date-selector{position:relative}.relative-date-selector .input-wrapper{position:relative;cursor:pointer}.relative-date-selector .input-wrapper input{width:100%;padding-right:3rem;cursor:pointer;transition:all var(--transition-duration) ease}.relative-date-selector .input-wrapper input:hover{border-color:var(--focus-border-color)}.relative-date-selector .input-wrapper input:focus{box-shadow:var(--focus-ring);border-color:var(--focus-border-color)}.relative-date-selector .input-wrapper input.p-invalid{border-color:var(--error-300)}.relative-date-selector .input-wrapper .calendar-icon-wrapper{position:absolute;right:.5rem;width:2rem;height:2rem;background:var(--surface-100);border:1px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-duration) ease;z-index:2}.relative-date-selector .input-wrapper .calendar-icon-wrapper:hover{background:var(--surface-200);border-color:var(--primary-color);transform:scale(1.05)}.relative-date-selector .input-wrapper .calendar-icon-wrapper:hover .calendar-icon{color:var(--primary-color)}.relative-date-selector .input-wrapper .calendar-icon-wrapper:active{transform:scale(.98)}.relative-date-selector .input-wrapper .calendar-icon-wrapper .calendar-icon{font-size:.9375rem;color:var(--text-color-secondary);transition:color var(--transition-duration) ease}.relative-date-selector .quick-select-panel{position:absolute;top:100%;right:0;background:var(--surface-0);border:1px solid var(--surface-border);border-radius:8px;box-shadow:0 4px 20px #00000014;z-index:1000;width:460px;max-height:520px;overflow:hidden;animation:slideDown var(--transition-duration) ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.relative-date-selector .quick-select-panel .quick-select-header{border-bottom:1px solid var(--surface-200);background:var(--surface-100)}.relative-date-selector .quick-select-panel .quick-select-header .title{margin:0;font-size:13px;font-weight:700;color:var(--surface-600)}.relative-date-selector .quick-select-panel .quick-select-header i{cursor:pointer;color:var(--text-color-secondary);font-size:.875rem;transition:all var(--transition-duration) ease}.relative-date-selector .quick-select-panel .quick-select-header i:hover{color:var(--text-color);transform:scale(1.1)}.relative-date-selector .quick-select-panel .quick-select-body{max-height:440px;overflow-y:auto}.relative-date-selector .quick-select-panel .quick-select-custom{border-bottom:1px solid var(--surface-200)}.relative-date-selector .quick-select-panel .quick-select-section .title-section{display:inline-block;font-size:.8rem;font-weight:600;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.relative-date-selector .quick-select-panel .quick-select-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.relative-date-selector .quick-select-panel .quick-select-options .quick-select-option{padding:.625rem 1rem;background:var(--surface-100);border:1px solid var(--surface-200);text-align:left;cursor:pointer;border-radius:var(--border-radius);transition:all var(--transition-duration) ease;color:var(--text-color);font-size:.875rem;font-weight:500}.relative-date-selector .quick-select-panel .quick-select-options .quick-select-option:hover{transform:translateY(-1px)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { overlayPanel: [{
+                type: ViewChild,
+                args: ['op']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RelativeDateSelectorComponent };
+//# sourceMappingURL=aril-ui-relativeDateSelector.mjs.map

package/fesm2022/aril-ui-relativeDateSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aril-ui-relativeDateSelector.mjs","sources":["../../projects/aril/ui/relativeDateSelector/src/enum.ts","../../projects/aril/ui/relativeDateSelector/src/relative-date-selector.component.ts","../../projects/aril/ui/relativeDateSelector/src/relative-date-selector.component.html","../../projects/aril/ui/relativeDateSelector/aril-ui-relativeDateSelector.ts"],"sourcesContent":["export enum RelativeDateUnit {\r\n\tSeconds = 's',\r\n\tMinutes = 'm',\r\n\tHours = 'h',\r\n\tDays = 'd',\r\n\tWeeks = 'w',\r\n\tMonths = 'M',\r\n\tYears = 'y'\r\n}\r\n\r\nexport enum RelativeDateDirection {\r\n\tPast = '-',\r\n\tFuture = '+'\r\n}\r\n\r\nexport enum RelativeDateUnitName {\r\n\tSeconds = 'seconds',\r\n\tMinutes = 'minutes',\r\n\tHours = 'hours',\r\n\tDays = 'days',\r\n\tWeeks = 'weeks',\r\n\tMonths = 'months',\r\n\tYears = 'years'\r\n}\r\n\r\nexport enum RelativeDateUnitSuffix {\r\n\tAgo = 'Ago',\r\n\tFromNow = 'FromNow'\r\n}\r\n","import { Component, signal, ViewChild, OnInit, AfterViewInit } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';\r\nimport { TabViewModule } from 'primeng/tabview';\r\nimport { TooltipModule } from 'primeng/tooltip';\r\n\r\nimport { TranslocoModule, TranslocoService } from '@ngneat/transloco';\r\nimport { format, parse } from 'date-fns';\r\n\r\nimport { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';\r\nimport { CalendarComponent } from 'aril/ui/calendar';\r\nimport { ButtonComponent } from 'aril/ui/button';\r\nimport { NumberComponent } from 'aril/ui/number';\r\nimport { SelectBoxComponent } from 'aril/ui/selectBox';\r\nimport 'aril/util/primitive-extensions';\r\n\r\nimport { RelativeDateUnit, RelativeDateDirection, RelativeDateUnitName, RelativeDateUnitSuffix } from './enum';\r\n\r\ninterface QuickSelectOption {\r\n\tlabel: string;\r\n\tvalue: string;\r\n}\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector:\r\n\t\t'aril-relative-date-picker[ngModel], aril-relative-date-picker[formControl], aril-relative-date-picker[formControlName]',\r\n\ttemplateUrl: './relative-date-selector.component.html',\r\n\tstyleUrls: ['./relative-date-selector.component.scss'],\r\n\timports: [\r\n\t\tCommonModule,\r\n\t\tReactiveFormsModule,\r\n\t\tFormsModule,\r\n\t\tOverlayPanelModule,\r\n\t\tTabViewModule,\r\n\t\tTooltipModule,\r\n\t\tTranslocoModule,\r\n\t\tCalendarComponent,\r\n\t\tButtonComponent,\r\n\t\tNumberComponent,\r\n\t\tSelectBoxComponent,\r\n\t\tInputErrorMessagePipe\r\n\t],\r\n\thostDirectives: [ValueAccessorDirective]\r\n})\r\nexport class RelativeDateSelectorComponent extends BaseInputComponent implements OnInit, AfterViewInit {\r\n\t@ViewChild('op') overlayPanel!: OverlayPanel;\r\n\r\n\tactiveTabIndex = signal<number>(0);\r\n\tshowQuickSelect = signal<boolean>(false);\r\n\tshowOverlayPanel = signal<boolean>(false);\r\n\r\n\t// Absolute mode\r\n\tabsoluteDate: number | null = null;\r\n\r\n\t// Relative mode\r\n\trelativeValue: number | null = null;\r\n\trelativeUnit: string | null = null;\r\n\trelativeDirection = RelativeDateDirection.Past;\r\n\r\n\trelativeUnits: any[] = [];\r\n\tquickSelectDirections: Array<{ label: string; value: string }> = [];\r\n\tquickSelectUnits: Array<{ label: string; value: string }> = [];\r\n\tcommonlyUsedOptions: QuickSelectOption[] = [];\r\n\r\n\t// Quick select inputs\r\n\tquickSelectDirection = RelativeDateDirection.Past;\r\n\tquickSelectValue: number | null = null;\r\n\tquickSelectUnit = RelativeDateUnit.Minutes;\r\n\r\n\tconstructor(public readonly translocoService: TranslocoService) {\r\n\t\tsuper();\r\n\r\n\t\tthis.initializeOptions();\r\n\t}\r\n\r\n\tngOnInit(): void {\r\n\t\tthis.ngControl.control?.valueChanges.subscribe((value) => {\r\n\t\t\tthis.onValueChange(value);\r\n\t\t});\r\n\t}\r\n\r\n\tngAfterViewInit(): void {\r\n\t\tif (this.ngControl.control?.value != null) {\r\n\t\t\tthis.onValueChange(this.ngControl.control?.value);\r\n\t\t}\r\n\t}\r\n\r\n\tprivate initializeOptions(): void {\r\n\t\tconst units = Object.values(RelativeDateUnit);\r\n\t\tconst unitNames = Object.values(RelativeDateUnitName);\r\n\t\tconst directions = Object.values(RelativeDateDirection);\r\n\t\tconst directionSuffixes = Object.values(RelativeDateUnitSuffix);\r\n\r\n\t\t// Relative units\r\n\t\tthis.relativeUnits = units.flatMap((code, index) =>\r\n\t\t\tdirections.map((dir, dirIndex) => ({\r\n\t\t\t\tlabel: this.translocoService.translate(\r\n\t\t\t\t\t`relativeDateSelector.units.${unitNames[index]}${directionSuffixes[dirIndex]}`\r\n\t\t\t\t),\r\n\t\t\t\tvalue: `${code}${dir}`\r\n\t\t\t}))\r\n\t\t);\r\n\r\n\t\t// Quick Select - Last/Next options\r\n\t\tthis.quickSelectDirections = [\r\n\t\t\t{ label: this.translocoService.translate('relativeDateSelector.last'), value: RelativeDateDirection.Past },\r\n\t\t\t{ label: this.translocoService.translate('relativeDateSelector.next'), value: RelativeDateDirection.Future }\r\n\t\t];\r\n\r\n\t\tthis.quickSelectUnits = units.map((code, index) => ({\r\n\t\t\tlabel: this.translocoService.translate(`relativeDateSelector.units.${unitNames[index]}`),\r\n\t\t\tvalue: code\r\n\t\t}));\r\n\r\n\t\t// Commonly used quick selects\r\n\t\tconst quickOptions = [\r\n\t\t\t{ key: 'today', value: `now/${RelativeDateUnit.Days}` },\r\n\t\t\t{ key: 'thisWeek', value: `now/${RelativeDateUnit.Weeks}` },\r\n\t\t\t{ key: 'last1Minute', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Minutes}` },\r\n\t\t\t{ key: 'last15Minutes', value: `now${RelativeDateDirection.Past}15${RelativeDateUnit.Minutes}` },\r\n\t\t\t{ key: 'last30Minutes', value: `now${RelativeDateDirection.Past}30${RelativeDateUnit.Minutes}` },\r\n\t\t\t{ key: 'last1Hour', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Hours}` },\r\n\t\t\t{ key: 'last24Hours', value: `now${RelativeDateDirection.Past}24${RelativeDateUnit.Hours}` },\r\n\t\t\t{ key: 'last7Days', value: `now${RelativeDateDirection.Past}7${RelativeDateUnit.Days}` },\r\n\t\t\t{ key: 'last30Days', value: `now${RelativeDateDirection.Past}30${RelativeDateUnit.Days}` },\r\n\t\t\t{ key: 'last90Days', value: `now${RelativeDateDirection.Past}90${RelativeDateUnit.Days}` },\r\n\t\t\t{ key: 'last1Year', value: `now${RelativeDateDirection.Past}1${RelativeDateUnit.Years}` }\r\n\t\t];\r\n\r\n\t\tthis.commonlyUsedOptions = quickOptions.map((opt) => ({\r\n\t\t\tlabel: this.translocoService.translate(`relativeDateSelector.quickOptions.${opt.key}`),\r\n\t\t\tvalue: opt.value\r\n\t\t}));\r\n\t}\r\n\r\n\tonValueChange(value: number | string | null | undefined): void {\r\n\t\tif (value != null) {\r\n\t\t\tif (typeof value === 'number') {\r\n\t\t\t\tthis.activeTabIndex.set(0);\r\n\t\t\t\tthis.absoluteDate = value;\r\n\t\t\t} else if (typeof value === 'string') {\r\n\t\t\t\tthis.activeTabIndex.set(1);\r\n\t\t\t\tthis.parseRelativeValue(value);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tthis.absoluteDate = null;\r\n\t\t\tthis.relativeValue = null;\r\n\t\t\tthis.relativeUnit = null;\r\n\t\t}\r\n\t}\r\n\r\n\tparseRelativeValue(value: string): void {\r\n\t\tconst match = value.match(/^now\\s*(?:([+-])\\s*(\\d+)([smhdwMy]))?\\s*(?:\\/([smhdwMy]))?$/);\r\n\r\n\t\tif (match) {\r\n\t\t\tconst [, direction, amount, unit] = match;\r\n\t\t\tif (direction && amount && unit) {\r\n\t\t\t\tthis.relativeDirection = direction as RelativeDateDirection;\r\n\t\t\t\tthis.relativeValue = parseInt(amount, 10);\r\n\t\t\t\tthis.relativeUnit = unit + direction;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tonAbsoluteDateChange(date: number | null): void {\r\n\t\tthis.absoluteDate = date;\r\n\t\tthis.updateValue();\r\n\t}\r\n\r\n\tonRelativeChange(): void {\r\n\t\tthis.updateValue();\r\n\t}\r\n\r\n\tonTabChange(event: { index: number }): void {\r\n\t\tthis.activeTabIndex.set(event.index);\r\n\t}\r\n\r\n\tupdateValue(): void {\r\n\t\tif (this.activeTabIndex() === 0 && this.absoluteDate != null) {\r\n\t\t\tthis.ngControl.control?.setValue(this.absoluteDate);\r\n\t\t} else if (this.activeTabIndex() === 1 && this.relativeValue != null && this.relativeUnit) {\r\n\t\t\tconst unit = this.relativeUnit.charAt(0);\r\n\t\t\tconst direction = this.relativeUnit.charAt(1);\r\n\t\t\tthis.ngControl.control?.setValue(`now${direction}${this.relativeValue}${unit}`);\r\n\t\t}\r\n\t}\r\n\r\n\tapplyQuickSelect(option: QuickSelectOption): void {\r\n\t\tthis.applyRelativeValue(option.value);\r\n\t}\r\n\r\n\tapplyQuickSelectCustom(): void {\r\n\t\tif (this.quickSelectValue != null && this.quickSelectUnit) {\r\n\t\t\tconst relativeString = `now${this.quickSelectDirection}${this.quickSelectValue}${this.quickSelectUnit}`;\r\n\t\t\tthis.applyRelativeValue(relativeString);\r\n\t\t}\r\n\t}\r\n\r\n\tprivate applyRelativeValue(value: string): void {\r\n\t\tthis.activeTabIndex.set(1);\r\n\t\tthis.parseRelativeValue(value);\r\n\t\tthis.ngControl.control?.setValue(value);\r\n\t\tthis.closeQuickSelectPanels();\r\n\t}\r\n\r\n\tprivate closeQuickSelectPanels(): void {\r\n\t\tthis.showQuickSelect.set(false);\r\n\t\tthis.showOverlayPanel.set(false);\r\n\t}\r\n\r\n\ttoggleQuickSelect(event: Event): void {\r\n\t\tevent.stopPropagation();\r\n\t\tthis.showQuickSelect.update((value) => !value);\r\n\t\tif (this.showQuickSelect()) {\r\n\t\t\tthis.showOverlayPanel.set(false);\r\n\t\t\tthis.overlayPanel?.hide();\r\n\t\t}\r\n\t}\r\n\r\n\tonInputClick(event: Event): void {\r\n\t\tthis.showQuickSelect.set(false);\r\n\t\tthis.overlayPanel?.toggle(event);\r\n\t}\r\n\r\n\tgetDisplayValue(): string {\r\n\t\tconst value = this.ngControl.control?.value;\r\n\r\n\t\tif (value == null) return '';\r\n\r\n\t\tif (typeof value === 'number') {\r\n\t\t\treturn this.formatAbsoluteDate(value);\r\n\t\t}\r\n\r\n\t\tif (typeof value === 'string') {\r\n\t\t\treturn this.formatRelativeDate(value);\r\n\t\t}\r\n\r\n\t\treturn '';\r\n\t}\r\n\r\n\tprivate formatAbsoluteDate(value: number): string {\r\n\t\tconst dateStr = value.toString();\r\n\t\tif (dateStr.length === 14) {\r\n\t\t\ttry {\r\n\t\t\t\tconst date = parse(dateStr, 'yyyyMMddHHmmss', new Date());\r\n\t\t\t\treturn format(date, 'dd.MM.yyyy HH:mm:ss');\r\n\t\t\t} catch (error) {\r\n\t\t\t\treturn dateStr;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn dateStr;\r\n\t}\r\n\r\n\tprivate formatRelativeDate(value: string): string {\r\n\t\tconst quickOption = this.commonlyUsedOptions.find((opt: QuickSelectOption) => opt.value === value);\r\n\t\tif (quickOption) {\r\n\t\t\treturn quickOption.label;\r\n\t\t}\r\n\r\n\t\tconst match = value.match(/^now\\s*([+-])\\s*(\\d+)([smhdwMy])$/);\r\n\t\tif (match) {\r\n\t\t\tconst [, direction, amount, unit] = match;\r\n\t\t\tconst directionText = this.translocoService.translate(\r\n\t\t\t\tdirection === RelativeDateDirection.Past ? 'relativeDateSelector.last' : 'relativeDateSelector.next'\r\n\t\t\t);\r\n\t\t\tconst unitText = this.translocoService.translate(this.getUnitTranslationKey(unit, direction));\r\n\t\t\treturn `${directionText} ${amount} ${unitText}`;\r\n\t\t}\r\n\r\n\t\treturn value;\r\n\t}\r\n\r\n\tprivate getUnitTranslationKey(unit: string, direction: string): string {\r\n\t\tconst unitNameMap: Record<string, RelativeDateUnitName> = {\r\n\t\t\t[RelativeDateUnit.Seconds]: RelativeDateUnitName.Seconds,\r\n\t\t\t[RelativeDateUnit.Minutes]: RelativeDateUnitName.Minutes,\r\n\t\t\t[RelativeDateUnit.Hours]: RelativeDateUnitName.Hours,\r\n\t\t\t[RelativeDateUnit.Days]: RelativeDateUnitName.Days,\r\n\t\t\t[RelativeDateUnit.Weeks]: RelativeDateUnitName.Weeks,\r\n\t\t\t[RelativeDateUnit.Months]: RelativeDateUnitName.Months,\r\n\t\t\t[RelativeDateUnit.Years]: RelativeDateUnitName.Years\r\n\t\t};\r\n\r\n\t\tconst suffix =\r\n\t\t\tdirection === RelativeDateDirection.Past ? RelativeDateUnitSuffix.Ago : RelativeDateUnitSuffix.FromNow;\r\n\t\treturn `relativeDateSelector.units.${unitNameMap[unit]}${suffix}`;\r\n\t}\r\n}\r\n","<div class=\"relative-date-selector\">\r\n\t<div class=\"input-wrapper flex align-items-center\" (click)=\"onInputClick($event)\">\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\treadonly\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\tclass=\"p-inputtext p-component\"\r\n\t\t\t[class.p-invalid]=\"ngControl.invalid && ngControl.touched\"\r\n\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.placeholder')\"\r\n\t\t\t[pTooltip]=\"ngControl.invalid && ngControl.touched ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t\t\t[tooltipOptions]=\"tooltipOptions\" />\r\n\t\t<div class=\"calendar-icon-wrapper flex align-items-center justify-content-center\" (click)=\"toggleQuickSelect($event)\">\r\n\t\t\t<i class=\"pi pi-calendar calendar-icon\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<p-overlayPanel\r\n\t\t#op\r\n\t\t[style]=\"{ minWidth: '350px', maxHeight: '600px', overflow: 'visible' }\"\r\n\t\t[dismissable]=\"true\"\r\n\t\t(onHide)=\"showOverlayPanel.set(false)\">\r\n\t\t<p-tabView (onChange)=\"onTabChange($event)\" [activeIndex]=\"activeTabIndex()\">\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.absolute')\">\r\n\t\t\t\t<div class=\"flex justify-content-center\">\r\n\t\t\t\t\t<aril-calendar\r\n\t\t\t\t\t\t[(ngModel)]=\"absoluteDate\"\r\n\t\t\t\t\t\t(ngModelChange)=\"onAbsoluteDateChange($event)\"\r\n\t\t\t\t\t\t[inline]=\"true\"\r\n\t\t\t\t\t\t[showTime]=\"true\"\r\n\t\t\t\t\t\t[showSeconds]=\"true\">\r\n\t\t\t\t\t</aril-calendar>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\r\n\t\t\t<p-tabPanel [header]=\"translocoService.translate('relativeDateSelector.relative')\">\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div class=\"flex flex-column gap-2 m-2\">\r\n\t\t\t\t\t\t<aril-number\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeValue\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[min]=\"1\"\r\n\t\t\t\t\t\t\t[showButtons]=\"true\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.valuePlaceholder')\">\r\n\t\t\t\t\t\t</aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"relativeUnit\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"onRelativeChange()\"\r\n\t\t\t\t\t\t\t[items]=\"relativeUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\"\r\n\t\t\t\t\t\t\t[placeholder]=\"translocoService.translate('relativeDateSelector.selectUnit')\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"m-2\">\r\n\t\t\t\t\t\t<small class=\"text-muted\">\r\n\t\t\t\t\t\t\t<strong>{{ translocoService.translate('relativeDateSelector.examples') }}:</strong> {{ translocoService.translate('relativeDateSelector.examplesText') }}\r\n\t\t\t\t\t\t</small>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</p-tabPanel>\r\n\t\t</p-tabView>\r\n\t</p-overlayPanel>\r\n\r\n\t<!-- Quick Select Panel -->\r\n\t@if (showQuickSelect()) {\r\n\t\t<div class=\"quick-select-panel mt-2\">\r\n\t\t\t<div class=\"quick-select-header flex justify-content-between align-items-center p-3\">\r\n\t\t\t\t<span class=\"title\">{{ translocoService.translate('relativeDateSelector.quickSelect') }}</span>\r\n\t\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t\t<i class=\"pi pi-times cursor-pointer\" (click)=\"showQuickSelect.set(false)\"></i>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"quick-select-body p-3\">\r\n\t\t\t\t<!-- Custom Quick Select Inputs -->\r\n\t\t\t\t<div class=\"quick-select-custom mb-3 pb-3\">\r\n\t\t\t\t\t<div class=\"flex gap-2 align-items-center mb-3\">\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectDirection\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectDirections\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-number [(ngModel)]=\"quickSelectValue\" [min]=\"1\" [showButtons]=\"true\"> </aril-number>\r\n\r\n\t\t\t\t\t\t<aril-select-box\r\n\t\t\t\t\t\t\t[(ngModel)]=\"quickSelectUnit\"\r\n\t\t\t\t\t\t\t[items]=\"quickSelectUnits\"\r\n\t\t\t\t\t\t\t[itemKey]=\"'value'\"\r\n\t\t\t\t\t\t\t[itemText]=\"'label'\">\r\n\t\t\t\t\t\t</aril-select-box>\r\n\r\n\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t[label]=\"translocoService.translate('relativeDateSelector.apply')\"\r\n\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t(clickEvent)=\"applyQuickSelectCustom()\"\r\n\t\t\t\t\t\t\t[style]=\"{ 'min-width': '80px' }\">\r\n\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- Commonly Used Options -->\r\n\t\t\t\t<div class=\"quick-select-section\">\r\n\t\t\t\t\t<span class=\"title-section mb-2\">{{ translocoService.translate('relativeDateSelector.commonlyUsed') }}</span>\r\n\t\t\t\t\t<div class=\"quick-select-options\">\r\n\t\t\t\t\t\t@for (option of commonlyUsedOptions; track option.value) {\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"quick-select-option\" (click)=\"applyQuickSelect(option)\">\r\n\t\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t}\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/aril-ui-selectBox.mjs

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { input, signal, EventEmitter, effect, Component, Output } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@ngneat/transloco';
+import { TranslocoModule } from '@ngneat/transloco';
+import * as i5 from 'devextreme-angular/ui/select-box';
+import { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
+import { firstValueFrom } from 'rxjs';
+import { API_CONFIGS } from 'aril/boot/config/api';
+import * as i3 from 'aril/ui/lib';
+import { BaseInputComponent, InputErrorMessagePipe, DXInputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+import * as i1 from '@angular/common/http';
+
+class SelectBoxComponent extends BaseInputComponent {
+    constructor(http, translocoService) {
+        super();
+        this.http = http;
+        this.translocoService = translocoService;
+        this.itemKey = input('key');
+        this.itemText = input('text');
+        this.groupName = input('');
+        this.parentSelectionKey = input(null);
+        this.tabindex = input(0);
+        this.items = input.required();
+        this.selectedItemText = '';
+        this.selectionItems = signal(null);
+        /** * @description when grouped = true, option item structure { key:string, items:[] } */
+        this.grouped = input(false);
+        this.showClearButton = input(true);
+        this.placeholder = input('');
+        this.searchExpr = input('');
+        this.onSelectionChanged = new EventEmitter();
+        effect(() => {
+            if (this.groupName() || this.parentSelectionKey())
+                this.getSelectionItems();
+        });
+    }
+    setTitle(event) {
+        this.selectedItemText = '';
+        if (event && event[this.itemText()].length > 25) {
+            this.selectedItemText = event ? event[this.itemText()] : '';
+        }
+        this.onSelectionChanged.emit(event);
+    }
+    async getSelectionItems() {
+        const payload = {
+            groupName: this.groupName(),
+            parentSelectionKey: this.parentSelectionKey()
+        };
+        const hostApi = API_CONFIGS.api.replace(/\/[^\/]+\/v1$/, `/host/v1`);
+        const selectionGroup = await firstValueFrom(this.http.post(hostApi + '/selection-group/load', payload));
+        this.selectionItems.set(selectionGroup?.selectionItems.map((item) => ({
+            key: item.selectionKey,
+            text: item.selectionDisplay,
+            parentSelectionKey: item.parentSelectionKey
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SelectBoxComponent, deps: [{ token: i1.HttpClient }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: SelectBoxComponent, isStandalone: true, selector: "aril-select-box[ngModel], aril-select-box[formControl], aril-select-box[formControlName]", inputs: { itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemText: { classPropertyName: "itemText", publicName: "itemText", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, parentSelectionKey: { classPropertyName: "parentSelectionKey", publicName: "parentSelectionKey", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchExpr: { classPropertyName: "searchExpr", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged" }, providers: [InputErrorMessagePipe], usesInheritance: true, hostDirectives: [{ directive: i3.ValueAccessorDirective }], ngImport: i0, template: "<dx-select-box\r\n\t[items]=\"selectionItems() || items()\"\r\n\t[valueExpr]=\"itemKey()\"\r\n\t[displayExpr]=\"itemText()\"\r\n\t[searchEnabled]=\"true\"\r\n\t[searchExpr]=\"searchExpr()\"\r\n\t[tabIndex]=\"tabindex()\"\r\n\t[grouped]=\"grouped()\"\r\n\t[placeholder]=\"placeholder()\"\r\n\t[showClearButton]=\"showClearButton()\"\r\n\t[isValid]=\"ngControl?.control?.valid || ngControl?.control?.pristine || ngControl?.control?.disabled || false\"\r\n\t[validationError]=\"ngControl?.control?.errors | dxInputErrorMessage: ngControl?.control\"\r\n\tvalidationMessagePosition=\"top\"\r\n\t[noDataText]=\"translocoService.translate('messages.noDataToDisplay')\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\"\r\n\t(onSelectionChanged)=\"onSelectionChanged.emit($event.selectedItem);setTitle($event.selectedItem)\"\r\n\t[inputAttr]=\"{ 'title': selectedItemText }\">\r\n</dx-select-box>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DxSelectBoxModule }, { kind: "component", type: i5.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "pipe", type: DXInputErrorMessagePipe, name: "dxInputErrorMessage" }, { kind: "ngmodule", type: TranslocoModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'aril-select-box[ngModel], aril-select-box[formControl], aril-select-box[formControlName]', imports: [ReactiveFormsModule, DxSelectBoxModule, DXInputErrorMessagePipe, TranslocoModule], providers: [InputErrorMessagePipe], hostDirectives: [ValueAccessorDirective], template: "<dx-select-box\r\n\t[items]=\"selectionItems() || items()\"\r\n\t[valueExpr]=\"itemKey()\"\r\n\t[displayExpr]=\"itemText()\"\r\n\t[searchEnabled]=\"true\"\r\n\t[searchExpr]=\"searchExpr()\"\r\n\t[tabIndex]=\"tabindex()\"\r\n\t[grouped]=\"grouped()\"\r\n\t[placeholder]=\"placeholder()\"\r\n\t[showClearButton]=\"showClearButton()\"\r\n\t[isValid]=\"ngControl?.control?.valid || ngControl?.control?.pristine || ngControl?.control?.disabled || false\"\r\n\t[validationError]=\"ngControl?.control?.errors | dxInputErrorMessage: ngControl?.control\"\r\n\tvalidationMessagePosition=\"top\"\r\n\t[noDataText]=\"translocoService.translate('messages.noDataToDisplay')\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\"\r\n\t(onSelectionChanged)=\"onSelectionChanged.emit($event.selectedItem);setTitle($event.selectedItem)\"\r\n\t[inputAttr]=\"{ 'title': selectedItemText }\">\r\n</dx-select-box>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.TranslocoService }], propDecorators: { onSelectionChanged: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SelectBoxComponent };
+//# sourceMappingURL=aril-ui-selectBox.mjs.map

package/fesm2022/aril-ui-selectBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aril-ui-selectBox.mjs","sources":["../../projects/aril/ui/selectBox/src/select-box.component.ts","../../projects/aril/ui/selectBox/src/select-box.component.html","../../projects/aril/ui/selectBox/aril-ui-selectBox.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\r\nimport { Component, EventEmitter, Output, effect, input, signal } from '@angular/core';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\nimport { TranslocoModule, TranslocoService } from '@ngneat/transloco';\r\n\r\nimport { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';\r\nimport { firstValueFrom } from 'rxjs';\r\n\r\nimport { API_CONFIGS } from 'aril/boot/config/api';\r\nimport {\r\n\tBaseInputComponent,\r\n\tDXInputErrorMessagePipe,\r\n\tInputErrorMessagePipe,\r\n\tValueAccessorDirective\r\n} from 'aril/ui/lib';\r\n\r\nimport { SelectBoxItem, SelectionGroupDTO, SelectionRequestDTO } from './interfaces';\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-select-box[ngModel], aril-select-box[formControl], aril-select-box[formControlName]',\r\n\ttemplateUrl: './select-box.component.html',\r\n\timports: [ReactiveFormsModule, DxSelectBoxModule, DXInputErrorMessagePipe, TranslocoModule],\r\n\tproviders: [InputErrorMessagePipe],\r\n\thostDirectives: [ValueAccessorDirective]\r\n})\r\nexport class SelectBoxComponent extends BaseInputComponent {\r\n\titemKey = input('key');\r\n\titemText = input('text');\r\n\tgroupName = input('');\r\n\tparentSelectionKey = input(null);\r\n\ttabindex = input<number>(0);\r\n\titems = input.required<SelectBoxItem[]>();\r\n\tselectedItemText: string = '';\r\n\r\n\tselectionItems = signal<SelectBoxItem[] | null>(null);\r\n\r\n\t/** * @description when grouped = true, option item structure { key:string, items:[] } */\r\n\tgrouped = input(false);\r\n\tshowClearButton = input<boolean>(true);\r\n\tplaceholder = input<string>('');\r\n\tsearchExpr = input<string | string[]>('');\r\n\r\n\t@Output() onSelectionChanged = new EventEmitter<SelectBoxItem>();\r\n\r\n\tconstructor(private http: HttpClient, public translocoService: TranslocoService) {\r\n\t\tsuper();\r\n\t\teffect(() => {\r\n\t\t\tif (this.groupName() || this.parentSelectionKey()) this.getSelectionItems();\r\n\t\t});\r\n\t}\r\n\r\n\tsetTitle(event?: any) {\r\n\t\tthis.selectedItemText = '';\r\n\t\tif (event && event[this.itemText()].length > 25) {\r\n\t\t\tthis.selectedItemText = event ? event[this.itemText()] : '';\r\n\t\t}\r\n\t\tthis.onSelectionChanged.emit(event);\r\n\t}\r\n\r\n\tasync getSelectionItems() {\r\n\t\tconst payload: SelectionRequestDTO = {\r\n\t\t\tgroupName: this.groupName(),\r\n\t\t\tparentSelectionKey: this.parentSelectionKey()\r\n\t\t};\r\n\t\tconst hostApi = API_CONFIGS.api.replace(/\\/[^\\/]+\\/v1$/, `/host/v1`);\r\n\t\tconst selectionGroup = await firstValueFrom(\r\n\t\t\tthis.http.post<SelectionGroupDTO>(hostApi + '/selection-group/load', payload)\r\n\t\t);\r\n\r\n\t\tthis.selectionItems.set(\r\n\t\t\tselectionGroup?.selectionItems.map((item) => ({\r\n\t\t\t\tkey: item.selectionKey,\r\n\t\t\t\ttext: item.selectionDisplay,\r\n\t\t\t\tparentSelectionKey: item.parentSelectionKey\r\n\t\t\t}))\r\n\t\t);\r\n\t}\r\n}\r\n","<dx-select-box\r\n\t[items]=\"selectionItems() || items()\"\r\n\t[valueExpr]=\"itemKey()\"\r\n\t[displayExpr]=\"itemText()\"\r\n\t[searchEnabled]=\"true\"\r\n\t[searchExpr]=\"searchExpr()\"\r\n\t[tabIndex]=\"tabindex()\"\r\n\t[grouped]=\"grouped()\"\r\n\t[placeholder]=\"placeholder()\"\r\n\t[showClearButton]=\"showClearButton()\"\r\n\t[isValid]=\"ngControl?.control?.valid || ngControl?.control?.pristine || ngControl?.control?.disabled || false\"\r\n\t[validationError]=\"ngControl?.control?.errors | dxInputErrorMessage: ngControl?.control\"\r\n\tvalidationMessagePosition=\"top\"\r\n\t[noDataText]=\"translocoService.translate('messages.noDataToDisplay')\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\"\r\n\t(onSelectionChanged)=\"onSelectionChanged.emit($event.selectedItem);setTitle($event.selectedItem)\"\r\n\t[inputAttr]=\"{ 'title': selectedItemText }\">\r\n</dx-select-box>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BM,MAAO,kBAAmB,SAAQ,kBAAkB,CAAA;IAmBzD,WAAoB,CAAA,IAAgB,EAAS,gBAAkC,EAAA;AAC9E,QAAA,KAAK,EAAE,CAAC;QADW,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAY;QAAS,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;AAlB/E,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;AACtB,QAAA,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,CAAC,CAAC,CAAC;AAC5B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAmB,CAAC;QAC1C,IAAgB,CAAA,gBAAA,GAAW,EAAE,CAAC;AAE9B,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;;AAGtD,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAU,IAAI,CAAC,CAAC;AACvC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAoB,EAAE,CAAC,CAAC;AAEhC,QAAA,IAAA,CAAA,kBAAkB,GAAG,IAAI,YAAY,EAAiB,CAAC;QAIhE,MAAM,CAAC,MAAK;YACX,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAC7E,SAAC,CAAC,CAAC;KACH;AAED,IAAA,QAAQ,CAAC,KAAW,EAAA;AACnB,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;AAC3B,QAAA,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE,EAAE;AAChD,YAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;SAC5D;AACD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;AAED,IAAA,MAAM,iBAAiB,GAAA;AACtB,QAAA,MAAM,OAAO,GAAwB;AACpC,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;AAC3B,YAAA,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAE;SAC7C,CAAC;AACF,QAAA,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,eAAe,EAAE,CAAU,QAAA,CAAA,CAAC,CAAC;AACrE,QAAA,MAAM,cAAc,GAAG,MAAM,cAAc,CAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAoB,OAAO,GAAG,uBAAuB,EAAE,OAAO,CAAC,CAC7E,CAAC;AAEF,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CACtB,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;YAC7C,GAAG,EAAE,IAAI,CAAC,YAAY;YACtB,IAAI,EAAE,IAAI,CAAC,gBAAgB;YAC3B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;SAC3C,CAAC,CAAC,CACH,CAAC;KACF;8GAnDW,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAHnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,SAAA,EAAA,CAAC,qBAAqB,CAAC,ECvBnC,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,k7BAmBA,EDGW,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAiB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,QAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,SAAA,EAAA,OAAA,EAAA,cAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,YAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,eAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,aAAA,EAAA,UAAA,EAAA,MAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,2BAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,aAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,aAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,gBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,eAAA,EAAA,6BAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,8BAAA,EAAA,uBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,eAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,6BAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,0BAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,6BAAA,EAAA,iCAAA,EAAA,wBAAA,EAAA,aAAA,EAAA,wBAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,uBAAuB,2DAAE,eAAe,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAI9E,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;AACG,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,0FAA0F,EAAA,OAAA,EAE3F,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,eAAe,CAAC,aAChF,CAAC,qBAAqB,CAAC,EAClB,cAAA,EAAA,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,k7BAAA,EAAA,CAAA;8GAmB9B,kBAAkB,EAAA,CAAA;sBAA3B,MAAM;;;AE3CR;;AAEG;;;;"}

package/fesm2022/aril-ui-switch.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i3 from 'primeng/inputswitch';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import * as i4 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i1 from 'aril/ui/lib';
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+class SwitchComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.tabindex = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: SwitchComponent, isStandalone: true, selector: "aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: i1.ValueAccessorDirective }], ngImport: i0, template: "<p-inputSwitch\r\n\t[tabindex]=\"tabindex()\"\r\n\t[pTooltip]=\"ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t[tooltipOptions]=\"tooltipOptions\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\">\r\n</p-inputSwitch>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: InputErrorMessagePipe, name: "inputErrorMessage" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]', imports: [ReactiveFormsModule, InputSwitchModule, TooltipModule, InputErrorMessagePipe], hostDirectives: [ValueAccessorDirective], template: "<p-inputSwitch\r\n\t[tabindex]=\"tabindex()\"\r\n\t[pTooltip]=\"ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t[tooltipOptions]=\"tooltipOptions\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\">\r\n</p-inputSwitch>\r\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SwitchComponent };
+//# sourceMappingURL=aril-ui-switch.mjs.map

package/fesm2022/aril-ui-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aril-ui-switch.mjs","sources":["../../projects/aril/ui/switch/src/switch.component.ts","../../projects/aril/ui/switch/src/switch.component.html","../../projects/aril/ui/switch/aril-ui-switch.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { InputSwitchModule } from 'primeng/inputswitch';\r\nimport { TooltipModule } from 'primeng/tooltip';\r\n\r\nimport { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]',\r\n\ttemplateUrl: './switch.component.html',\r\n\timports: [ReactiveFormsModule, InputSwitchModule, TooltipModule, InputErrorMessagePipe],\r\n\thostDirectives: [ValueAccessorDirective]\r\n})\r\nexport class SwitchComponent extends BaseInputComponent {\r\n\ttabindex = input<number>();\r\n}\r\n","<p-inputSwitch\r\n\t[tabindex]=\"tabindex()\"\r\n\t[pTooltip]=\"ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''\"\r\n\t[tooltipOptions]=\"tooltipOptions\"\r\n\t[formControl]=\"ngControl.control\"\r\n\t(ngModelChange)=\"ngControl.viewToModelUpdate($event)\">\r\n</p-inputSwitch>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAeM,MAAO,eAAgB,SAAQ,kBAAkB,CAAA;AAPvD,IAAA,WAAA,GAAA;;QAQC,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU,CAAC;AAC3B,KAAA;8GAFY,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8EAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf5B,6TAOA,EDKW,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,yTAAE,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,IAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAG1E,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACG,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,8EAA8E,EAE/E,OAAA,EAAA,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAE,qBAAqB,CAAC,EACvE,cAAA,EAAA,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,6TAAA,EAAA,CAAA;;;AEbzC;;AAEG;;;;"}