mn-angular-lib 0.0.53 → 0.0.55

package/fesm2022/mn-angular-lib.mjs

@@ -173,11 +173,11 @@ const mnAlertVariants = tv({
     base: 'flex items-start gap-3 p-4 border rounded-xl shadow-sm transition-all duration-300',
     variants: {
         kind: {
-            success: 'bg-green-50 border-green-200 text-green-800',
-            info: 'bg-blue-50 border-blue-200 text-blue-800',
-            warning: 'bg-amber-50 border-amber-200 text-amber-800',
-            error: 'bg-red-50 border-red-200 text-red-800',
-            default: 'bg-white border-gray-200 text-gray-800',
+            success: 'bg-success/10 border-success/30 text-success',
+            info: 'bg-info/10 border-info/30 text-info',
+            warning: 'bg-warning/10 border-warning/30 text-warning',
+            error: 'bg-error/10 border-error/30 text-error',
+            default: 'bg-base-100 border-base-300 text-base-content',
         },
         variant: {
             fill: '',
@@ -189,22 +189,22 @@ const mnAlertVariants = tv({
         {
             kind: 'success',
             variant: 'fill',
-            class: 'bg-green-600 border-green-700 text-white'
+            class: 'bg-success border-success text-success-content'
         },
         {
             kind: 'info',
             variant: 'fill',
-            class: 'bg-blue-600 border-blue-700 text-white'
+            class: 'bg-info border-info text-info-content'
         },
         {
             kind: 'warning',
             variant: 'fill',
-            class: 'bg-amber-500 border-amber-600 text-white'
+            class: 'bg-warning border-warning text-warning-content'
         },
         {
             kind: 'error',
             variant: 'fill',
-            class: 'bg-red-600 border-red-700 text-white'
+            class: 'bg-error border-error text-error-content'
         }
     ],
     defaultVariants: {
@@ -289,23 +289,23 @@ const mnButtonVariants = tv({
     },
     compoundVariants: [
         // Fill
-        { variant: 'fill', color: 'primary', class: 'bg-brand-500 text-black hover:bg-brand-700' },
-        { variant: 'fill', color: 'secondary', class: 'bg-gray-600 text-white hover:bg-gray-700' },
-        { variant: 'fill', color: 'danger', class: 'bg-red-600 text-white hover:bg-red-700' },
-        { variant: 'fill', color: 'warning', class: 'bg-amber-500 text-black hover:bg-amber-600' },
-        { variant: 'fill', color: 'success', class: 'bg-green-600 text-white hover:bg-green-700' },
+        { variant: 'fill', color: 'primary', class: 'bg-primary text-primary-content hover:bg-primary/80' },
+        { variant: 'fill', color: 'secondary', class: 'bg-neutral text-neutral-content hover:bg-neutral/80' },
+        { variant: 'fill', color: 'danger', class: 'bg-error text-error-content hover:bg-error/80' },
+        { variant: 'fill', color: 'warning', class: 'bg-warning text-warning-content hover:bg-warning/80' },
+        { variant: 'fill', color: 'success', class: 'bg-success text-success-content hover:bg-success/80' },
         // Outline
-        { variant: 'outline', color: 'primary', class: 'border-brand-500 text-brand-500 hover:bg-brand-100' },
-        { variant: 'outline', color: 'secondary', class: 'border-gray-600 text-gray-700 hover:bg-gray-100' },
-        { variant: 'outline', color: 'danger', class: 'border-red-600 text-red-600 hover:bg-red-100' },
-        { variant: 'outline', color: 'warning', class: 'border-amber-500 text-amber-600 hover:bg-amber-100' },
-        { variant: 'outline', color: 'success', class: 'border-green-600 text-green-600 hover:bg-green-100' },
+        { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary/10' },
+        { variant: 'outline', color: 'secondary', class: 'border-neutral text-neutral hover:bg-neutral/10' },
+        { variant: 'outline', color: 'danger', class: 'border-error text-error hover:bg-error/10' },
+        { variant: 'outline', color: 'warning', class: 'border-warning text-warning hover:bg-warning/10' },
+        { variant: 'outline', color: 'success', class: 'border-success text-success hover:bg-success/10' },
         // Text
-        { variant: 'text', color: 'primary', class: 'text-brand-500 hover:bg-brand-100' },
-        { variant: 'text', color: 'secondary', class: 'text-gray-700 hover:bg-gray-100' },
-        { variant: 'text', color: 'danger', class: 'text-red-600 hover:bg-red-100' },
-        { variant: 'text', color: 'warning', class: 'text-amber-600 hover:bg-amber-100' },
-        { variant: 'text', color: 'success', class: 'text-green-600 hover:bg-green-100' },
+        { variant: 'text', color: 'primary', class: 'text-primary hover:bg-primary/10' },
+        { variant: 'text', color: 'secondary', class: 'text-neutral hover:bg-neutral/10' },
+        { variant: 'text', color: 'danger', class: 'text-error hover:bg-error/10' },
+        { variant: 'text', color: 'warning', class: 'text-warning hover:bg-warning/10' },
+        { variant: 'text', color: 'success', class: 'text-success hover:bg-success/10' },
     ],
     defaultVariants: {
         size: 'md',
@@ -553,7 +553,7 @@ function pickAdapter(type) {
 }
 
 const mnInputFieldVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -606,6 +606,7 @@ class MnLanguageService {
     _translations = {};
     _locale$ = new BehaviorSubject('en');
     _urlPattern = null;
+    _debug = false;
     /** Observable of the current active locale. */
     locale$ = this._locale$.asObservable();
     constructor(http) {
@@ -615,11 +616,23 @@ class MnLanguageService {
     get locale() {
         return this._locale$.value;
     }
+    /**
+     * Enable or disable debug logging.
+     */
+    setDebug(enabled) {
+        this._debug = enabled;
+        if (enabled) {
+            console.log(`[MnLanguage] Debug mode enabled`);
+        }
+    }
     /**
      * Configure the URL pattern used to fetch translation files.
      * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
      */
     configure(urlPattern) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Configured urlPattern: ${urlPattern}`);
+        }
         this._urlPattern = urlPattern;
     }
     /**
@@ -634,9 +647,15 @@ class MnLanguageService {
             return;
         }
         const url = this._urlPattern.replace('{locale}', locale);
+        if (this._debug) {
+            console.log(`[MnLanguage] Loading locale "${locale}" from ${url}`);
+        }
         try {
             const map = await firstValueFrom(this.http.get(url));
             this._translations[locale] = map ?? {};
+            if (this._debug) {
+                console.log(`[MnLanguage] Loaded locale "${locale}"`, this._translations[locale]);
+            }
         }
         catch (err) {
             console.warn(`[MnLanguage] Failed to load translations from ${url}`, err);
@@ -647,6 +666,9 @@ class MnLanguageService {
      * Switch the active locale. Loads translations if not yet loaded.
      */
     async setLocale(locale) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Setting locale to "${locale}"`);
+        }
         await this.loadLocale(locale);
         this._locale$.next(locale);
     }
@@ -667,8 +689,11 @@ class MnLanguageService {
      */
     translate(key, params) {
         const map = this._translations[this.locale] ?? {};
-        let value = map[key];
+        let value = this.getValueFromMap(map, key);
         if (value === undefined) {
+            if (this._debug) {
+                console.warn(`[MnLanguage] Missing translation for key: "${key}" in locale: "${this.locale}"`);
+            }
             return key;
         }
         if (params) {
@@ -678,6 +703,21 @@ class MnLanguageService {
         }
         return value;
     }
+    /**
+     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
+     */
+    getValueFromMap(map, key) {
+        if (map[key] !== undefined)
+            return map[key];
+        const parts = key.split('.');
+        let current = map;
+        for (const part of parts) {
+            if (current === null || typeof current !== 'object')
+                return undefined;
+            current = current[part];
+        }
+        return typeof current === 'string' ? current : undefined;
+    }
     /**
      * Shorthand alias for `translate`.
      */
@@ -739,6 +779,7 @@ class MnConfigService {
      */
     async load(url, debugMode = false) {
         this._debugMode = debugMode;
+        this.lang.setDebug(debugMode);
         let text;
         try {
             text = await firstValueFrom(this.http.get(url, { responseType: 'text' }));
@@ -768,9 +809,12 @@ class MnConfigService {
         const langCfg = cfg.language;
         if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
             const lc = langCfg;
+            if (this._debugMode) {
+                console.log(`[MnConfig] Applying language config from file`, lc);
+            }
             this.lang.configure(lc.urlPattern);
             const effectiveLocale = this.lang.resolveLocaleForDomain(lc.domainLocaleMap, lc.defaultLocale);
-            const localesToLoad = lc.preload ?? [effectiveLocale];
+            const localesToLoad = Array.from(new Set([...(lc.preload ?? []), effectiveLocale]));
             await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
             await this.lang.setLocale(effectiveLocale);
         }
@@ -791,9 +835,12 @@ class MnConfigService {
             const langCfg = config['language'];
             if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
                 const lc = langCfg;
+                if (this._debugMode) {
+                    console.log(`[MnConfig] Applying language config from object`, lc);
+                }
                 this.lang.configure(lc.urlPattern);
                 const effectiveLocale = this.lang.resolveLocaleForDomain(lc.domainLocaleMap, lc.defaultLocale);
-                const localesToLoad = lc.preload ?? [effectiveLocale];
+                const localesToLoad = Array.from(new Set([...(lc.preload ?? []), effectiveLocale]));
                 await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
                 await this.lang.setLocale(effectiveLocale);
             }
@@ -1278,7 +1325,7 @@ function provideMnComponentConfig(token, componentName, initial) {
             const cfg = resolveConfig();
             // Re-resolve translatable values whenever the locale changes.
             // skip(1) because the current locale was already used for the initial resolve.
-            const sub = lang.locale$.pipe(skip(1)).subscribe(() => {
+            const sub = lang.locale$.subscribe(() => {
                 const updated = resolveConfig();
                 // Mutate the existing object in place so all template bindings pick up the new values.
                 for (const key of Object.keys(updated)) {
@@ -1405,7 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnTextareaVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -1869,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnDatetimeVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -2045,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnMultiSelectVariants = tv({
-    base: 'bg-white border-1 border-gray-500 text-sm cursor-pointer',
+    base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -6578,6 +6625,9 @@ function provideMnLanguage(config) {
             provide: APP_INITIALIZER,
             multi: true,
             useFactory: (svc) => async () => {
+                if (config.debug) {
+                    svc.setDebug(true);
+                }
                 svc.configure(config.urlPattern);
                 const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
                 const localesToLoad = config.preload ?? [effectiveLocale];