cerxos-ui 0.0.15 → 0.0.16

package/fesm2022/cerxos-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild, HostBinding } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild, HostBinding, signal, Injectable, inject, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -4384,6 +4384,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
+const CXS_USER_SESSION_STORAGE_KEY = 'user_session';
+const CXS_USER_PREFERENCE_CHANGED_EVENT = 'cxs:user-preference-changed';
+const DATE_FORMAT_PREFERENCE_KEY = 'ui.dateFormat';
+const CURRENCY_FORMAT_PREFERENCE_KEY = 'ui.currencyFormat';
+const DATE_FORMAT_ALIASES = ['dateFormat', 'date_format'];
+const CURRENCY_FORMAT_ALIASES = ['currencyFormat', 'currency_format', 'currency'];
+const DEFAULT_DATE_FORMAT = 'mdy';
+const DEFAULT_CURRENCY_FORMAT = 'usd';
+const CURRENCY_FORMATS = {
+    usd: { currency: 'USD', locale: 'en-US' },
+    myr: { currency: 'MYR', locale: 'en-MY' },
+    eur: { currency: 'EUR', locale: 'en-IE' },
+    gbp: { currency: 'GBP', locale: 'en-GB' },
+    jpy: { currency: 'JPY', locale: 'ja-JP' }
+};
+class CxsPreferenceFormattingService {
+    preferenceVersionSignal = signal(0, ...(ngDevMode ? [{ debugName: "preferenceVersionSignal" }] : /* istanbul ignore next */ []));
+    preferenceVersion = this.preferenceVersionSignal.asReadonly();
+    constructor() {
+        this.addPreferenceListeners();
+    }
+    formatDate(value) {
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        const date = value instanceof Date ? value : this.parseDateString(value);
+        if (!date) {
+            return String(value);
+        }
+        const format = this.dateFormatPreference();
+        const year = date.getFullYear();
+        const month = this.padDatePart(date.getMonth() + 1);
+        const day = this.padDatePart(date.getDate());
+        if (format === 'dmy') {
+            return `${day}/${month}/${year}`;
+        }
+        if (format === 'ymd') {
+            return `${year}-${month}-${day}`;
+        }
+        return `${month}/${day}/${year}`;
+    }
+    formatCurrency(value) {
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        const amount = typeof value === 'number' ? value : Number(value);
+        if (!Number.isFinite(amount)) {
+            return String(value);
+        }
+        const config = CURRENCY_FORMATS[this.currencyFormatPreference()];
+        return new Intl.NumberFormat(config.locale, {
+            currency: config.currency,
+            style: 'currency'
+        }).format(amount);
+    }
+    dateFormatPreference() {
+        const value = this.getPreference(DATE_FORMAT_PREFERENCE_KEY, DATE_FORMAT_ALIASES);
+        return this.isDateFormatPreference(value) ? value : DEFAULT_DATE_FORMAT;
+    }
+    currencyFormatPreference() {
+        const value = this.getPreference(CURRENCY_FORMAT_PREFERENCE_KEY, CURRENCY_FORMAT_ALIASES);
+        return this.isCurrencyFormatPreference(value) ? value : DEFAULT_CURRENCY_FORMAT;
+    }
+    getPreference(key, aliases) {
+        const preferences = this.readSession()?.preferences ?? [];
+        const keys = [key, ...aliases];
+        const preference = keys
+            .map((preferenceKey) => preferences.find((item) => item.key === preferenceKey))
+            .find(Boolean);
+        return preference?.value?.trim().toLowerCase();
+    }
+    readSession() {
+        const storage = this.getLocalStorage();
+        if (!storage) {
+            return null;
+        }
+        const raw = storage.getItem(CXS_USER_SESSION_STORAGE_KEY);
+        if (!raw) {
+            return null;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    parseDateString(value) {
+        const apiDateMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+        if (apiDateMatch) {
+            const [, year, month, day] = apiDateMatch;
+            return new Date(Number(year), Number(month) - 1, Number(day));
+        }
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }
+    padDatePart(value) {
+        return String(value).padStart(2, '0');
+    }
+    isDateFormatPreference(value) {
+        return value === 'mdy' || value === 'dmy' || value === 'ymd';
+    }
+    isCurrencyFormatPreference(value) {
+        return (value === 'usd' ||
+            value === 'myr' ||
+            value === 'eur' ||
+            value === 'gbp' ||
+            value === 'jpy');
+    }
+    addPreferenceListeners() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.addEventListener('storage', (event) => {
+            if (event.key === CXS_USER_SESSION_STORAGE_KEY) {
+                this.bumpPreferenceVersion();
+            }
+        });
+        window.addEventListener(CXS_USER_PREFERENCE_CHANGED_EVENT, () => {
+            this.bumpPreferenceVersion();
+        });
+    }
+    bumpPreferenceVersion() {
+        this.preferenceVersionSignal.update((version) => version + 1);
+    }
+    getLocalStorage() {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsPreferenceFormattingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsPreferenceFormattingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsPreferenceFormattingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CxsCurrencyPipe {
+    formatter = inject(CxsPreferenceFormattingService);
+    transform(value) {
+        this.formatter.preferenceVersion();
+        return this.formatter.formatCurrency(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: CxsCurrencyPipe, isStandalone: true, name: "cxsCurrency", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cxsCurrency',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class CxsDatePipe {
+    formatter = inject(CxsPreferenceFormattingService);
+    transform(value) {
+        this.formatter.preferenceVersion();
+        return this.formatter.formatDate(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: CxsDatePipe, isStandalone: true, name: "cxsDate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cxsDate',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
 /*
  * Public API Surface of cerxos-ui
  */
@@ -4392,5 +4566,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map