cerxos-ui 0.0.15 → 0.0.17

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';
@@ -655,6 +655,12 @@ const SIZE_CLASSES$5 = {
     lg: 'h-6 w-6'
 };
 const ICONS = {
+    banknotes: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
+        ]
+    },
     bell: {
         viewBox: '0 0 24 24',
         paths: [
@@ -662,6 +668,12 @@ const ICONS = {
             'M10.3 20a2 2 0 0 0 3.4 0'
         ]
     },
+    calendar: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'
+        ]
+    },
     'chevron-down': {
         viewBox: '0 0 24 24',
         paths: ['m6 9 6 6 6-6']
@@ -678,6 +690,38 @@ const ICONS = {
         viewBox: '0 0 24 24',
         paths: ['m18 15-6-6-6 6']
     },
+    eye: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+            'M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7Z'
+        ]
+    },
+    'eye-off': {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M13.875 18.825A10.05 10.05 0 0 1 12 19c-4.478 0-8.268-2.943-9.542-7a10.05 10.05 0 0 1 4.167-4.827M6.633 6.633A10.081 10.081 0 0 1 12 5c4.478 0 8.268 2.943 9.542 7a10.081 10.081 0 0 1-4.167 4.827M6.633 6.633L3 3m3.633 3L9.75 9m3.617-3L21 3m-33L17.25 9M3 3l18 18'
+        ]
+    },
+    filter: {
+        viewBox: '0 0 24 24',
+        paths: ['M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-.293.707L14.414 12l6.293 6.293A1 1 0 0 1 21 19V21a1 1 0 0 1-1-1H4a1 1 0 0 1-1-1V4Z']
+    },
+    folder: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M3 6h5l2 2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z',
+            'M10 6V4a2 2 0 0 1 2-2h4'
+        ]
+    },
+    home: {
+        viewBox: '0 0 24 24',
+        paths: ['M3 12l9-9 9 9M4 10v10a1 1 0 001 1h3m10-11v10a1 1 0 001 1h3m-13 0h8']
+    },
+    pencil: {
+        viewBox: '0 0 24 24',
+        paths: ['M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z', 'm15 5 4 4']
+    },
     plus: {
         viewBox: '0 0 24 24',
         paths: ['M12 5v14', 'M5 12h14']
@@ -693,6 +737,16 @@ const ICONS = {
             'M10 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8'
         ]
     },
+    trash: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M3 6h18',
+            'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6',
+            'M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2',
+            'M10 11v6',
+            'M14 11v6'
+        ]
+    },
     x: {
         viewBox: '0 0 24 24',
         paths: ['M18 6 6 18', 'M6 6l12 12']
@@ -4384,6 +4438,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 +4620,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