@tilde-nlp/ngx-common 8.1.43 → 8.1.45

package/fesm2022/tilde-nlp-ngx-common.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, ViewChild, Output, NgModule, Optional, Inject, Pipe, inject, Directive, HostListener, HostBinding, ViewChildren, input, effect, ElementRef, ContentChild, ContentChildren, InjectionToken, signal, output, computed, makeEnvironmentProviders } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, ViewChild, Output, NgModule, Optional, Inject, Pipe, inject, Directive, HostListener, HostBinding, ViewChildren, input, effect, ElementRef, ContentChild, ContentChildren, InjectionToken, signal, output, computed, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2$1 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
-import { Subject, map, Observable, of, take, BehaviorSubject, tap, forkJoin, takeUntil, finalize, catchError, fromEvent, debounceTime } from 'rxjs';
+import { Subject, map, Observable, of, take, BehaviorSubject, tap, forkJoin, takeUntil, finalize, catchError, fromEvent, debounceTime, ReplaySubject, filter, first } from 'rxjs';
 import * as i1$1 from '@angular/common';
 import { CommonModule, TitleCasePipe, AsyncPipe, DatePipe } from '@angular/common';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
@@ -4417,7 +4417,7 @@ class MultiFunctionalTableComponent {
         }], tableElementRef: [{
             type: ViewChild,
             args: [MatTable, { read: ElementRef }]
-        }] }); })();
+        }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MultiFunctionalTableComponent, { className: "MultiFunctionalTableComponent", filePath: "lib/multi-functional-table/multi-functional-table.component.ts", lineNumber: 27 }); })();
 
 class StatusDisplayModule {
@@ -8520,7 +8520,7 @@ class SubscriptionComponent {
                     CommonModule,
                     MatButtonModule
                 ], template: "@if(token()){\r\n  <!-- narrow type to non null property -->\r\n  @let userToken = token()!;\r\n\r\n    <h3 class=\"subscription-section-title text-l-semi-bold\">{{ \"SUBSCRIPTION.USER_INFO\" | translate }}</h3>\r\n\r\n    <div class=\"subscription-data-row\">\r\n      <div class=\"subscription-label\">\r\n        <span class=\"label\">{{ \"SUBSCRIPTION.LABEL_NAME\" | translate }}</span>\r\n      </div>\r\n\r\n      <div class=\"subscription-data\">\r\n        <span>{{ userToken.name }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"subscription-data-row\">\r\n      <div class=\"subscription-label\">\r\n        <span class=\"label\">{{ \"SUBSCRIPTION.LABEL_EMAIL\" | translate }}</span>\r\n      </div>\r\n\r\n      <div class=\"subscription-data\">\r\n        <span>{{ userToken.email }}</span>\r\n      </div>\r\n    </div>\r\n}\r\n\r\n@if(subscription()){\r\n  @let currentSubscription = subscription()!;\r\n\r\n  <div fxLayout=\"row\" class=\"subscription-data-row\">\r\n    <div class=\"subscription-label\">\r\n      <span class=\"label\">{{ \"SUBSCRIPTION.LABEL_SUBSCRIPTION_PLAN_ID\" | translate }}</span>\r\n    </div>\r\n\r\n    <div class=\"subscription-data\">\r\n      <ng-container>\r\n        <span>\r\n          {{ currentSubscription.Label ? currentSubscription.Label : currentSubscription.PlanId }}\r\n\r\n          @switch (subscriptionState()) {\r\n            @case(subscriptionStates.TRIAL){\r\n              <span> ({{ \"SUBSCRIPTION.TRIAL_END_DATE\" | translate: { date: currentSubscription.EndDate | date: \"dd.MM.yyyy.\" } }}) </span>\r\n            }\r\n            @case (subscriptionStates.ACTIVE) {\r\n              @if(currentSubscription.EndDate){\r\n                <span> ({{ \"SUBSCRIPTION.END_DATE\" | translate: { date: currentSubscription.EndDate | date: \"dd.MM.yyyy.\" } }}) </span>\r\n              }\r\n            }\r\n            @case (subscriptionStates.ENDED) {\r\n            ({{ \"SUBSCRIPTION.END_DATE\" | translate: { date: currentSubscription.EndDate | date: \"dd.MM.yyyy.\" } }})\r\n            }\r\n          }\r\n        </span>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  @if(currentSubscription.EndDate){\r\n  <div class=\"subscription-data-row\">\r\n    <div class=\"subscription-label\">\r\n      <span class=\"label\">{{ \"SUBSCRIPTION.LABEL_SUBSCRIPTION_END_DATE\" | translate }}</span>\r\n    </div>\r\n\r\n    <div class=\"subscription-data\">\r\n      <ng-container>\r\n        <span>{{currentSubscription.EndDate | date: \"dd.MM.yyyy\"}}</span>\r\n      </ng-container>\r\n    </div>\r\n    </div>\r\n  }\r\n\r\n  @if(currentSubscription.Addons?.length){\r\n    <div fxLayout=\"row\" class=\"subscription-data-row\">\r\n      <div class=\"subscription-label\">\r\n        <span class=\"label\">{{ \"SUBSCRIPTION.ADDITIONS_PLUGINS\" | translate }}</span>\r\n      </div>\r\n\r\n      <div class=\"subscription-data\">\r\n        @for (item of currentSubscription.Addons; track $index; let i = $index) {\r\n            <span>{{ item.id }}</span>\r\n            @if(item.qt>1){\r\n              <span> ({{item.qt}})</span>\r\n            }\r\n            <span> {{ currentSubscription.Addons!.length - 1 > i ? \",\" : \"\" }} </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n\r\n@if(visibleQuotas().length){\r\n  <h3 class=\"subscription-section-title text-l-semi-bold\">{{ \"SUBSCRIPTION.LIMITS\" | translate }}</h3>\r\n\r\n  @for (currentQuota of visibleQuotas(); track $index) {\r\n    <div class=\"subscription-limit-wrapper\">\r\n      <mat-progress-bar [value]=\"currentQuota.percentUsed\"></mat-progress-bar>\r\n      <div class=\"subscription-limit\">\r\n        <span class=\"text-l-semi-bold\">\r\n          {{ (\"QUOTA.\" + (currentQuota.quotaType.toString() | uppercase) + (currentQuota.isUnlimited? \"_UNLIMITED\": \"\")) | translate: { used: currentQuota.convertedUsed, limit: currentQuota.convertedLimit, percent: currentQuota.percentUsed} }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n\r\n<!-- Add some extra info, such as disclaimer etc -->\r\n  <ng-content></ng-content>\r\n\r\n<div class=\"subscription-actions-wrapper\">\r\n  @if(chargebeeSettings()){\r\n    <a mat-flat-button color=\"accent\" class=\"manage-sub-btn button-row-element\" href=\"javascript:void(0)\" data-cb-type=\"portal\" (click)=\"manageClicked()\">\r\n      {{ \"SUBSCRIPTION.MANAGE\" | translate }}\r\n    </a>\r\n  }\r\n  @if(contactUsUrl()){\r\n    <a mat-stroked-button [attr.href]=\"contactUsUrl()\" target=\"_blank\" color=\"accent\" (click)=\"contactUsClicked()\">{{\"SUBSCRIPTION.CONTACT\" | translate}}</a>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}mat-card{margin:1.5rem}.subscription-container:not(.mobile){margin:16px 32px}.subscription-section-title{margin:32px 0 18px}.subscription-data-row{border-bottom:2px solid var(--base-70);margin-bottom:18px;flex-direction:row;display:flex}.subscription-data{color:var(--base-30);word-wrap:break-word;margin-left:.5rem}.subscription-limit-wrapper,.subscription-limit{margin-top:16px}.subscription-actions-wrapper{padding:32px 0 18px;display:flex;flex-direction:row;gap:24px}.subscription-manage-link{text-decoration:none}.subscription-container:not(.mobile,.empty){width:75%}.subscription-label:not(.mobile,.empty){width:35%}.subscription-data:not(.mobile,.empty){width:65%}.untranslated-files-disclaimer{margin-top:16px;margin-bottom:10px;color:var(--base-40)}.no-subscription-message{margin-top:32px;color:var(--base-40)}.contact-sales-btn{text-align:center}.contact-sales-btn:hover{text-decoration:none}\n"] }]
-    }], null, null); })();
+    }], null, { token: [{ type: i0.Input, args: [{ isSignal: true, alias: "token", required: true }] }], subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], quota: [{ type: i0.Input, args: [{ isSignal: true, alias: "quota", required: true }] }], visibleQuotaTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleQuotaTypes", required: false }] }], contactUsUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactUsUrl", required: false }] }], chargebeeSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargebeeSettings", required: false }] }], manageClick: [{ type: i0.Output, args: ["manageClick"] }], contactUsClick: [{ type: i0.Output, args: ["contactUsClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubscriptionComponent, { className: "SubscriptionComponent", filePath: "lib/subscription/subscription.component.ts", lineNumber: 26 }); })();
 
 var AccessibilityFontSizes;
@@ -9460,22 +9460,14 @@ class CookieConsentComponent {
         this.destroy.complete();
     }
     resolveInitialConsentState() {
-        const configured = this.isCookieConsentConfigured();
-        if (this.isPromise(configured)) {
-            configured.then((isConfigured) => {
-                if (isConfigured) {
-                    this.isClosed = true;
-                    return;
-                }
-                this.setupTranslations();
-            });
-            return;
-        }
-        if (configured) {
-            this.isClosed = true;
-            return;
-        }
-        this.setupTranslations();
+        this.isCookieConsentConfigured()
+            .pipe(tap((isConfigured) => {
+            if (isConfigured) {
+                this.isClosed = true;
+                return;
+            }
+            this.setupTranslations();
+        })).subscribe();
     }
     injectConsentScript() {
         if (!this.script || typeof document === 'undefined') {
@@ -9502,24 +9494,19 @@ class CookieConsentComponent {
         return translations[key] ? key : 'en';
     }
     isCookieConsentConfigured() {
-        const snapshot = this.#storage?.snapshot();
-        if (snapshot) {
-            return this.applyStoredConsent(snapshot);
+        if (!this.#storage) {
+            return of(false);
         }
-        const stored = this.#storage?.read();
-        if (this.isPromise(stored)) {
-            return stored.then((config) => this.applyStoredConsent(config));
-        }
-        return this.applyStoredConsent(stored ?? null);
+        return this.#storage?.read().pipe(map((config) => {
+            return this.hasUserHandledConsent(config ?? null);
+        }));
     }
-    applyStoredConsent(config) {
+    hasUserHandledConsent(config) {
         const consent = config?.cookieConsent;
         if (!consent?.updatedAt) {
             return false;
         }
-        if (consent.accepted) {
-            this.#analytics.cookieConsentGiven(true);
-        }
+        this.#analytics.cookieConsentGiven(true);
         return true;
     }
     persistConsent(accepted) {
@@ -9532,10 +9519,7 @@ class CookieConsentComponent {
                 accepted,
                 updatedAt: now,
             },
-        });
-    }
-    isPromise(value) {
-        return !!value && typeof value.then === 'function';
+        }).subscribe();
     }
     static { this.ɵfac = function CookieConsentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CookieConsentComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CookieConsentComponent, selectors: [["lib-cookie-consent"]], inputs: { script: "script", privacyPolicyUrl: "privacyPolicyUrl" }, decls: 1, vars: 1, consts: [[1, "cookie-consent-container"], [1, "cookie-consent-content"], [1, "cookie-consent-description", 3, "innerHTML"], [1, "cookie-consent-actions"], ["mat-flat-button", "", 3, "click"], ["mat-stroked-button", "", 3, "click"], [1, "cookie-consent-info"], [1, "cookie-consent-info--privacy", 3, "href"], [1, "cookie-consent-info--details", 3, "click"], [1, "spin"], [1, "cookie-consent--details"]], template: function CookieConsentComponent_Template(rf, ctx) { if (rf & 1) {
@@ -9599,134 +9583,132 @@ const USER_CONFIG_MESSAGE_UPDATE = 'ngx-user-config:update';
 const DEFAULT_USER_CONFIG_OPTIONS = {
     strategy: UserConfigStrategy.Local,
     iframeUrl: DEFAULT_USER_CONFIG_IFRAME_URL,
+    defaultConfig: DEFAULT_USER_CONFIG
 };
 
-const USER_CONFIG_STORAGE_KEY = 'ngx_common_user_config';
-
 const USER_CONFIG_OPTIONS = new InjectionToken('USER_CONFIG_OPTIONS');
 
-class IframeStorageStrategy {
-    #dom;
-    #options;
-    #iframe;
-    #messageHandler;
-    constructor() {
-        this.#dom = inject(DOMService);
-        this.#options = inject(USER_CONFIG_OPTIONS);
+const mergeSection = (defaults, override) => ({
+    ...defaults,
+    ...(override ?? {}),
+});
+const mergeConfigSections = (base, override = {}) => ({
+    accessibility: mergeSection(base.accessibility, override.accessibility),
+    cookieConsent: mergeSection(base.cookieConsent, override.cookieConsent),
+    language: mergeSection(base.language, override.language),
+    metadata: mergeSection(base.metadata, override.metadata),
+});
+function createDefaultUserConfig(options) {
+    const override = options.defaultConfig ?? {};
+    return mergeConfigSections(DEFAULT_USER_CONFIG, override);
+}
+function mergeUserConfig(current, update, options) {
+    const base = current ?? createDefaultUserConfig(options);
+    const merged = mergeConfigSections(base, update);
+    return {
+        ...merged,
+        metadata: {
+            ...merged.metadata,
+            updatedAt: new Date().toISOString(),
+        },
+    };
+}
+
+class BaseStorageStrategy {
+    constructor(options) {
+        this.options = options;
         this.snapshot = signal(null, ...(ngDevMode ? [{ debugName: "snapshot" }] : []));
-        this.#ensureIframe();
-        const win = this.#dom.window;
-        if (!win) {
-            return;
-        }
-        this.#messageHandler = (event) => this.#handleMessage(event);
-        win.addEventListener('message', this.#messageHandler);
-        const cached = this.#readCache();
-        if (cached) {
-            this.snapshot.set(cached);
-        }
+        /** Tracks when the initial data has been fetched from the source */
+        this.isReady$ = new ReplaySubject(1);
     }
+    /**
+     * Returns an Observable that waits for the source to be ready,
+     * then emits the current snapshot.
+     */
     read() {
-        return this.#readCache();
+        return this.isReady$.pipe(filter((ready) => ready), first(), map(() => {
+            return this.snapshot();
+        }));
     }
+    /**
+     * Waits for readiness, performs a deep merge, updates the local signal,
+     * and triggers the implementation-specific persistence.
+     */
     write(config) {
-        const merged = this.#mergeWithBase(config);
-        this.#writeCache(merged);
-        this.#postToBridge({ type: USER_CONFIG_MESSAGE_UPDATE, payload: merged });
-        this.snapshot.set(merged);
+        return this.isReady$.pipe(filter((ready) => ready), first(), map(() => {
+            const merged = this.mergeWithBase(config);
+            this.snapshot.set(merged);
+            this.saveToSource(merged);
+            return merged;
+        }));
+    }
+    initialize() {
+        return this.isReady$.pipe(filter((ready) => ready), first(), map(() => null));
+    }
+    mergeWithBase(update) {
+        return mergeUserConfig(this.snapshot(), update, this.options);
+    }
+    createDefaultConfig() {
+        return createDefaultUserConfig(this.options);
+    }
+    static { this.ɵfac = function BaseStorageStrategy_Factory(__ngFactoryType__) { i0.ɵɵinvalidFactory(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseStorageStrategy, factory: BaseStorageStrategy.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseStorageStrategy, [{
+        type: Injectable
+    }], () => [{ type: undefined }], null); })();
+
+class IframeStorageStrategy extends BaseStorageStrategy {
+    #dom = inject(DOMService);
+    #options = inject(USER_CONFIG_OPTIONS);
+    #iframe;
+    #messageHandler;
+    constructor() {
+        super(inject(USER_CONFIG_OPTIONS));
+        this.#init();
+    }
+    saveToSource(config) {
+        this.#postToBridge({ type: USER_CONFIG_MESSAGE_UPDATE, payload: config });
     }
     ngOnDestroy() {
         if (this.#messageHandler && this.#dom.window) {
             this.#dom.window.removeEventListener('message', this.#messageHandler);
         }
     }
-    #ensureIframe() {
-        if (this.#iframe) {
-            return;
-        }
-        const win = this.#dom.window;
-        const doc = win?.document;
-        if (!doc) {
+    #init() {
+        const window = this.#dom.window;
+        if (!window) {
             return;
         }
+        ;
+        this.#messageHandler = (event) => this.#handleMessage(event);
+        window.addEventListener('message', this.#messageHandler);
+        const doc = window.document;
         const iframe = doc.createElement('iframe');
         iframe.style.display = 'none';
         iframe.name = USER_CONFIG_IFRAME_NAME;
         iframe.src = this.#options?.iframeUrl ?? DEFAULT_USER_CONFIG_IFRAME_URL;
         iframe.setAttribute('aria-hidden', 'true');
-        iframe.addEventListener('load', () => this.#postToBridge({ type: USER_CONFIG_MESSAGE_REQUEST }));
+        iframe.addEventListener('load', () => {
+            this.#postToBridge({ type: USER_CONFIG_MESSAGE_REQUEST });
+        });
         doc.body?.appendChild(iframe);
         this.#iframe = iframe;
     }
     #handleMessage(event) {
-        if (!this.#iframe || event.source !== this.#iframe.contentWindow) {
-            return;
-        }
-        const data = event.data;
-        if (data?.type === USER_CONFIG_MESSAGE_SNAPSHOT && data.payload) {
-            const snapshot = data.payload;
-            this.#writeCache(snapshot);
-            this.snapshot.set(snapshot);
-        }
-    }
-    #postToBridge(message) {
-        if (!this.#iframe?.contentWindow) {
+        if (event.source !== this.#iframe?.contentWindow) {
             return;
         }
-        this.#iframe.contentWindow.postMessage(message, USER_CONFIG_IFRAME_TARGET_ORIGIN);
-    }
-    #readCache() {
-        const store = this.#dom.localStorage;
-        if (!store) {
-            return null;
-        }
-        return this.#parse(store.getItem(USER_CONFIG_STORAGE_KEY));
-    }
-    #writeCache(config) {
-        const store = this.#dom.localStorage;
-        if (!store) {
+        const messageData = event.data;
+        if (messageData?.type !== USER_CONFIG_MESSAGE_SNAPSHOT) {
             return;
         }
-        try {
-            store.setItem(USER_CONFIG_STORAGE_KEY, JSON.stringify(config));
-        }
-        catch {
-            /* noop */
-        }
+        const data = messageData?.payload ?? this.createDefaultConfig();
+        this.snapshot.set(data);
+        this.isReady$.next(true);
     }
-    #parse(raw) {
-        if (!raw) {
-            return null;
-        }
-        try {
-            return JSON.parse(raw);
-        }
-        catch {
-            return DEFAULT_USER_CONFIG;
-        }
-    }
-    #mergeWithBase(update) {
-        const base = this.snapshot() ?? this.read() ?? DEFAULT_USER_CONFIG;
-        const mergedMetadata = {
-            ...base.metadata,
-            ...update.metadata,
-            updatedAt: new Date().toISOString(),
-        };
-        return {
-            accessibility: {
-                ...base.accessibility,
-                ...update.accessibility,
-            },
-            cookieConsent: {
-                ...base.cookieConsent,
-                ...update.cookieConsent,
-            },
-            language: {
-                ...base.language,
-                ...update.language,
-            },
-            metadata: mergedMetadata,
-        };
+    #postToBridge(message) {
+        this.#iframe?.contentWindow?.postMessage(message, USER_CONFIG_IFRAME_TARGET_ORIGIN);
     }
     static { this.ɵfac = function IframeStorageStrategy_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IframeStorageStrategy)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: IframeStorageStrategy, factory: IframeStorageStrategy.ɵfac, providedIn: 'root' }); }
@@ -9736,91 +9718,60 @@ class IframeStorageStrategy {
         args: [{ providedIn: 'root' }]
     }], () => [], null); })();
 
-class LocalStorageStrategy {
-    #dom;
+const USER_CONFIG_STORAGE_KEY = 'ngx_common_user_config';
+
+class LocalStorageStrategy extends BaseStorageStrategy {
+    #dom = inject(DOMService);
     #storageListener;
     constructor() {
-        this.#dom = inject(DOMService);
-        this.snapshot = signal(null, ...(ngDevMode ? [{ debugName: "snapshot" }] : []));
-        const win = this.#dom.window;
-        if (!win) {
-            return;
-        }
-        this.#storageListener = (event) => {
-            if (event.key !== USER_CONFIG_STORAGE_KEY || !event.newValue) {
-                return;
+        super(inject(USER_CONFIG_OPTIONS));
+        this.#init();
+    }
+    saveToSource(config) {
+        const store = this.#dom.localStorage;
+        if (store) {
+            try {
+                store.setItem(USER_CONFIG_STORAGE_KEY, JSON.stringify(config));
             }
-            const parsed = this.#parse(event.newValue);
-            if (parsed) {
-                this.snapshot.set(parsed);
+            catch (exception) {
+                console.error('Failed to save user config to localStorage', exception);
             }
-        };
-        win.addEventListener('storage', this.#storageListener);
-        const current = this.read();
-        if (current) {
-            this.snapshot.set(current);
         }
     }
-    read() {
-        const store = this.#dom.localStorage;
-        if (!store) {
-            return null;
+    ngOnDestroy() {
+        if (this.#storageListener && this.#dom.window) {
+            this.#dom.window.removeEventListener('storage', this.#storageListener);
         }
-        return this.#parse(store.getItem(USER_CONFIG_STORAGE_KEY));
     }
-    write(config) {
+    #init() {
+        const win = this.#dom.window;
         const store = this.#dom.localStorage;
-        if (!store) {
-            return;
-        }
-        const merged = this.#mergeWithBase(config);
-        try {
-            store.setItem(USER_CONFIG_STORAGE_KEY, JSON.stringify(merged));
-            this.snapshot.set(merged);
-        }
-        catch {
-            /* noop */
+        if (win) {
+            this.#storageListener = (event) => {
+                if (event.key === USER_CONFIG_STORAGE_KEY && event.newValue) {
+                    this.snapshot.set(this.#parse(event.newValue));
+                }
+            };
+            win.addEventListener('storage', this.#storageListener);
         }
-    }
-    ngOnDestroy() {
-        if (this.#storageListener && this.#dom.window) {
-            this.#dom.window.removeEventListener('storage', this.#storageListener);
+        if (store) {
+            const raw = store.getItem(USER_CONFIG_STORAGE_KEY);
+            this.snapshot.set(this.#parse(raw));
         }
+        // LocalStorage is available immediately
+        this.isReady$.next(true);
     }
     #parse(raw) {
         if (!raw) {
-            return null;
+            return this.createDefaultConfig();
         }
         try {
             return JSON.parse(raw);
         }
         catch {
-            return DEFAULT_USER_CONFIG;
+            return this.createDefaultConfig();
         }
     }
-    #mergeWithBase(update) {
-        const base = this.snapshot() ?? this.read() ?? DEFAULT_USER_CONFIG;
-        const mergedMetadata = {
-            ...base.metadata,
-            ...update.metadata,
-            updatedAt: new Date().toISOString(),
-        };
-        return {
-            accessibility: {
-                ...base.accessibility,
-                ...update.accessibility,
-            },
-            cookieConsent: {
-                ...base.cookieConsent,
-                ...update.cookieConsent,
-            },
-            language: {
-                ...base.language,
-                ...update.language,
-            },
-            metadata: mergedMetadata,
-        };
-    }
     static { this.ɵfac = function LocalStorageStrategy_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalStorageStrategy)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalStorageStrategy, factory: LocalStorageStrategy.ɵfac, providedIn: 'root' }); }
 }
@@ -9863,9 +9814,103 @@ function provideUserConfig(options = {}) {
             useFactory: userConfigStorageFactory,
             deps: [USER_CONFIG_OPTIONS],
         },
+        provideAppInitializer(() => {
+            const storage = inject(USER_CONFIG_STORAGE);
+            return storage.initialize();
+        })
     ]);
 }
 
+const LOCALIZATION_CONFIGURATION_TOKEN = new InjectionToken("Localization configuration");
+
+class UILanguageService {
+    #translateService = inject(TranslateService);
+    #configuration = inject(LOCALIZATION_CONFIGURATION_TOKEN);
+    #storage = inject(USER_CONFIG_STORAGE, { optional: true });
+    get currentLanguage() {
+        return this.#getFromStore();
+    }
+    get languages() {
+        return this.#configuration.supportedLanguages ?? [];
+    }
+    /**
+     * Initializes the language service by setting the default language and loading the user's preferred language from storage.
+     *
+     * - Sets the default language using `ngx-translate#setFallbackLang`.
+     * - Attempts to retrieve the user's preferred language from storage (implementation details omitted for brevity).
+     * - If a preferred language is found, calls `useLanguage` to set the current language.
+     */
+    initialize() {
+        this.#translateService.setFallbackLang(this.#getDefaultLanguage());
+        this.#getFromStore()
+            .pipe(tap(language => this.useLanguage(language))).subscribe();
+    }
+    /**
+     * Sets the current language for the application.
+     * @param languageCode - The desired language code.
+     *
+     * This method attempts to set the language using the provided `languageCode`.
+     * If the language code is not supported (not present in the `languages` array),
+     * it:
+     *  - Logs an error message.
+     *  - Falls back to the `defaultLanguage`.
+     *
+     * It updates UI language and stores the value in store.
+     */
+    useLanguage(languageCode) {
+        if (!this.languages.includes(languageCode)) {
+            console.error(`Language with code '${languageCode}' not supported`);
+            languageCode = this.#getDefaultLanguage();
+        }
+        this.#translateService.use(languageCode);
+        this.#updateDocumentLangAttribute(languageCode);
+        this.updateStore(languageCode);
+    }
+    updateStore(language) {
+        if (!this.#storage) {
+            return;
+        }
+        this.#storage.write({ language: { locale: language } }).subscribe();
+    }
+    #getFromStore() {
+        const defaultLanguage = this.#getDefaultLanguage();
+        if (!this.#storage) {
+            return of(defaultLanguage);
+        }
+        return this.#storage.read()
+            .pipe(map(config => config?.language.locale ?? defaultLanguage));
+    }
+    #getDefaultLanguage() {
+        return this.#configuration.defaultLanguage;
+    }
+    #updateDocumentLangAttribute(lang) {
+        const doc = document.documentElement;
+        doc.lang = lang.split('-')[0];
+    }
+    static { this.ɵfac = function UILanguageService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UILanguageService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UILanguageService, factory: UILanguageService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UILanguageService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], null, null); })();
+
+const provideLanguageService = (config) => {
+    return makeEnvironmentProviders([
+        {
+            provide: LOCALIZATION_CONFIGURATION_TOKEN,
+            useFactory: (...deps) => config.localizationConfiguration.useFactory(...deps),
+            deps: config.localizationConfiguration.deps
+        },
+        provideAppInitializer(() => {
+            const languageService = inject(UILanguageService);
+            languageService.initialize();
+        })
+    ]);
+};
+
 /*
  * Public API Surface of ngx-common
  */
@@ -9874,5 +9919,5 @@ function provideUserConfig(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_CONFIGURATION_TOKEN, AccessibilityContrasts, AccessibilityDialogComponent, AccessibilityFontSizes, AccessibilityService, AccessibilityTextMagnifierService, AlertService, AnalyticsService, AuthHeadersHelper, COLLECTIONS_MENU, CUSTOM_TITLE_CONFIGURATION_TOKEN, ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CombinedCollection, CombinedCollectionTooltipKey, CompanyProductComponent, CompanyProductModule, Confirmation, ConfirmationModalComponent, ConfirmationModalModule, ConfirmationService, ConversionHelper, CookieConsentComponent, CustomPaginatorInernationalizationHelper, CustomTitleStrategyService, CustomTranslateLoader, DEFAULT_ACCESSIBILITY_PREFERENCES, DEFAULT_COOKIE_CONSENT_PREFERENCES, DEFAULT_USER_CONFIG, DEFAULT_USER_CONFIG_IFRAME_URL, DEFAULT_USER_CONFIG_OPTIONS, DISABLE_EXPORT_ATTRIBUTE_NAME, DOMService, DateAgoModule, DateAgoPipe, DomainTranslatePipe, DragAndDropDirective, DragAndDropModule, ERROR_CODES, EngineTermApiService, EngineTermCollectionScope, EngineTermCollectionSource, EngineTermCollectionStatus, EngineTermCollectionSubStatus, ExportFormat, ExtensionDialogComponent, ExtensionDialogModule, ExtensionDialogService, FILE_SIZE_UNIT, FileCategories, FileExtensionHelper, FileExtensions, FileSizeLabelPipe, FileTypeIcons, FileTypes, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, GlobalMessageComponent, HashHelper, HtmlElementParseHelper, HtmlHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, LAST_USED_SYSTEM_LOCAL_STORAGE_KEY, LLMActions, LLMComponent, LLMModule, LLM_CONFIGURATION_TOKEN, LanguageTranslateModule, LanguageTranslatePipe, LanguageTranslateService, MatButtonLoadingDirective, MatButtonLoadingModule, MatomoService, MissingTranslationHandlerService, MissingTranslationHelper, MtCollectionStatus, MultiFunctionalTableComponent, MultiFunctionalTableModule, NewFeatureDialogWrapperComponent, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, NotificationService, OPEN_CLOSE_BTN_ICONS_TOKEN, ObjectLengthModule, ObjectLengthPipe, OpenCloseButtonComponent, OpenCloseButtonModule, OpenExtensionDialogComponent, Operations, PlausibleEventDirective, PlausibleHelper, PlausibleModule, ResolutionHelper, SCREEN_SIZE, SaveFileHelper, SelectLanguageDialogComponent, SidebarComponent, SidebarService, SortAlphabeticallyModule, SortAlphabeticallyPipe, SortByNumberPipe, SortDomainsPipe, SortHelper, SortLanguageListPipe, SortTranslationsByPropertyModule, SortTranslationsByPropertyPipe, SortTranslationsModule, SortTranslationsPipe, StatusDisplayComponent, StatusDisplayModule, SubscriptionComponent, SubscriptionPlan, SystemService, TerminologyApiService, TerminologyCollectionService, TerminologyComponent, TerminologyConfigService, TerminologyCreateCollectionComponent, TerminologyModule, TerminologyService, TextToSpeechComponent, TldLoaderComponent, TldLoaderModule, ToastComponent, ToastService, USER_CONFIG_IFRAME_NAME, USER_CONFIG_IFRAME_TARGET_ORIGIN, USER_CONFIG_MESSAGE_REQUEST, USER_CONFIG_MESSAGE_SNAPSHOT, USER_CONFIG_MESSAGE_UPDATE, USER_CONFIG_OPTIONS, USER_CONFIG_STORAGE, USER_CONFIG_STORAGE_KEY, USER_CONFIG_VERSION, UserConfigStrategy, createMetadata, getFileSizeLabel, isUserConfigOptionsFactoryProvider, provideCustomTitleStrategy, provideUserConfig, userConfigStorageFactory };
+export { ALERT_CONFIGURATION_TOKEN, AccessibilityContrasts, AccessibilityDialogComponent, AccessibilityFontSizes, AccessibilityService, AccessibilityTextMagnifierService, AlertService, AnalyticsService, AuthHeadersHelper, COLLECTIONS_MENU, CUSTOM_TITLE_CONFIGURATION_TOKEN, ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CombinedCollection, CombinedCollectionTooltipKey, CompanyProductComponent, CompanyProductModule, Confirmation, ConfirmationModalComponent, ConfirmationModalModule, ConfirmationService, ConversionHelper, CookieConsentComponent, CustomPaginatorInernationalizationHelper, CustomTitleStrategyService, CustomTranslateLoader, DEFAULT_ACCESSIBILITY_PREFERENCES, DEFAULT_COOKIE_CONSENT_PREFERENCES, DEFAULT_USER_CONFIG, DEFAULT_USER_CONFIG_IFRAME_URL, DEFAULT_USER_CONFIG_OPTIONS, DISABLE_EXPORT_ATTRIBUTE_NAME, DOMService, DateAgoModule, DateAgoPipe, DomainTranslatePipe, DragAndDropDirective, DragAndDropModule, ERROR_CODES, EngineTermApiService, EngineTermCollectionScope, EngineTermCollectionSource, EngineTermCollectionStatus, EngineTermCollectionSubStatus, ExportFormat, ExtensionDialogComponent, ExtensionDialogModule, ExtensionDialogService, FILE_SIZE_UNIT, FileCategories, FileExtensionHelper, FileExtensions, FileSizeLabelPipe, FileTypeIcons, FileTypes, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, GlobalMessageComponent, HashHelper, HtmlElementParseHelper, HtmlHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, LAST_USED_SYSTEM_LOCAL_STORAGE_KEY, LLMActions, LLMComponent, LLMModule, LLM_CONFIGURATION_TOKEN, LOCALIZATION_CONFIGURATION_TOKEN, LanguageTranslateModule, LanguageTranslatePipe, LanguageTranslateService, MatButtonLoadingDirective, MatButtonLoadingModule, MatomoService, MissingTranslationHandlerService, MissingTranslationHelper, MtCollectionStatus, MultiFunctionalTableComponent, MultiFunctionalTableModule, NewFeatureDialogWrapperComponent, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, NotificationService, OPEN_CLOSE_BTN_ICONS_TOKEN, ObjectLengthModule, ObjectLengthPipe, OpenCloseButtonComponent, OpenCloseButtonModule, OpenExtensionDialogComponent, Operations, PlausibleEventDirective, PlausibleHelper, PlausibleModule, ResolutionHelper, SCREEN_SIZE, SaveFileHelper, SelectLanguageDialogComponent, SidebarComponent, SidebarService, SortAlphabeticallyModule, SortAlphabeticallyPipe, SortByNumberPipe, SortDomainsPipe, SortHelper, SortLanguageListPipe, SortTranslationsByPropertyModule, SortTranslationsByPropertyPipe, SortTranslationsModule, SortTranslationsPipe, StatusDisplayComponent, StatusDisplayModule, SubscriptionComponent, SubscriptionPlan, SystemService, TerminologyApiService, TerminologyCollectionService, TerminologyComponent, TerminologyConfigService, TerminologyCreateCollectionComponent, TerminologyModule, TerminologyService, TextToSpeechComponent, TldLoaderComponent, TldLoaderModule, ToastComponent, ToastService, UILanguageService, USER_CONFIG_IFRAME_NAME, USER_CONFIG_IFRAME_TARGET_ORIGIN, USER_CONFIG_MESSAGE_REQUEST, USER_CONFIG_MESSAGE_SNAPSHOT, USER_CONFIG_MESSAGE_UPDATE, USER_CONFIG_OPTIONS, USER_CONFIG_STORAGE, USER_CONFIG_STORAGE_KEY, USER_CONFIG_VERSION, UserConfigStrategy, createMetadata, getFileSizeLabel, isUserConfigOptionsFactoryProvider, provideCustomTitleStrategy, provideLanguageService, provideUserConfig, userConfigStorageFactory };
 //# sourceMappingURL=tilde-nlp-ngx-common.mjs.map