@bravobit/bb-foundation 0.16.3 → 0.20.0

package/fesm2020/bravobit-bb-foundation-localize.mjs

@@ -1,832 +1,630 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Injectable, Optional, Inject, Pipe, APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core';
+import { InjectionToken, Directive, Input, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, isDevMode, Injectable, Optional, Inject, Pipe, APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { formatDate, DOCUMENT, CommonModule } from '@angular/common';
 import { startWith } from 'rxjs/operators';
-import { Subscription, firstValueFrom } from 'rxjs';
-import * as i4 from '@angular/platform-browser';
-import { makeStateKey } from '@angular/platform-browser';
-import { USE_AUTHORIZATION } from '@bravobit/bb-foundation/auth';
-import * as i1$1 from '@angular/common/http';
-import { HttpContext, HttpClientModule } from '@angular/common/http';
-import * as i3 from '@bravobit/bb-foundation';
-import { LOCATION, BASE_URL } from '@bravobit/bb-foundation';
-import * as i2 from '@bravobit/bb-foundation/storage';
+import { Subscription } from 'rxjs';
+import * as i1$1 from '@bravobit/bb-foundation/storage';
+import * as i2 from '@bravobit/bb-foundation';
 
-//
-// The configuration that can be passed when
-// the user initializes the localize module.
-//
-class LocalizeConfig {
-    constructor() {
-        this.dictionary = [];
-    }
+//
+// The configuration that can be passed when
+// the user initializes the localize module.
+//
+class LocalizeConfig {
 }
 
 //
 
-//
-// This is the injection token that will be injected
-// into the service so that the all localize functions
-// can retrieved and used.
-//
+//
+// This is the injection token that will be injected
+// into the service so that the all localize functions
+// can retrieved and used.
+//
 const LOCALIZE_FUNCTION = new InjectionToken('localize_function');
 
-//
-// This is the injection token that will be injected
-// into the service so that the all extra dictionaries
-// can retrieved and used.
-//
-const LOCALIZE_EXTRA_DICTIONARY = new InjectionToken('localize_extra_dictionary');
-
-//
-// This function transform the value
-// to a lowercase variant of the value.
-//
-class LocalizeLowercaseFunction {
-    keyword() {
-        return 'lowercase';
-    }
-    transform(value) {
-        return (value || '').toLowerCase();
-    }
+//
+// This function transform the value
+// to a lowercase variant of the value.
+//
+class LocalizeLowercaseFunction {
+    keyword() {
+        return 'lowercase';
+    }
+    transform(value) {
+        return (value || '').toLowerCase();
+    }
 }
 
-//
-// This function transform the value
-// to a uppercase variant of the value.
-//
-class LocalizeUppercaseFunction {
-    keyword() {
-        return 'uppercase';
-    }
-    transform(value) {
-        return (value || '').toUpperCase();
-    }
+//
+// This function transform the value
+// to a uppercase variant of the value.
+//
+class LocalizeUppercaseFunction {
+    keyword() {
+        return 'uppercase';
+    }
+    transform(value) {
+        return (value || '').toUpperCase();
+    }
 }
 
-//
-// This function transform the value
-// to a localized date.
-//
-class LocalizeDateFunction {
-    keyword() {
-        return 'date';
-    }
-    transform(value, locale) {
-        const date = new Date(value);
-        if (date.toString() === 'Invalid Date') {
-            return '?';
-        }
-        return formatDate(date, 'longDate', locale);
-    }
+//
+// This function transform the value
+// to a localized date.
+//
+class LocalizeDateFunction {
+    keyword() {
+        return 'date';
+    }
+    transform(value, locale) {
+        const date = new Date(value);
+        if (date.toString() === 'Invalid Date') {
+            return '?';
+        }
+        return formatDate(date, 'longDate', locale);
+    }
 }
 
-const LOCALIZATION_EXTRA_ENGLISH = {
-    provide: LOCALIZE_EXTRA_DICTIONARY,
-    useValue: {
-        locale: 'en-US',
-        data: {
-            'form-control-errors': {
-                'unknown': 'The field has an unknown error.',
-                'required': 'This field is required.',
-                'pattern': 'Invalid format.',
-                'email': 'The field does not match a valid email address.',
-                'emailTaken': 'The e-mail is already taken.',
-                'passwordMatch': 'The passwords don\'t match.',
-                'confirm': 'The field does not match.',
-                'fullNumber': 'The field should be a full number.',
-                'min': 'Minimum amount should be {{min}}.',
-                'max': 'Maximum amount should be {{max}}.',
-                'invalidFileType': 'The file type is not allowed.',
-                'maxFileSize': 'The file has exceed the maximum amount of {{maxSize}}.',
-                'minDate': 'The first accepted date is {{date|date}}.',
-                'maxDate': 'The last accepted date is {{date|date}}.',
-                'invalidDate': 'The field contains an invalid date.',
-                'minlength': 'Expected a minimum of {{requiredLength}} characters but got {{actualLength}} characters.',
-                'maxlength': 'Expected a maximum of {{requiredLength}} characters but got {{actualLength}} characters.'
-            },
-            'tables': {
-                'search': 'Search...',
-                'loading': 'Loading...',
-                'empty': 'There is nothing to find here.',
-                'page': 'page',
-                'error_datasource': 'No data source was provided.',
-                'error_unauthorized': 'You need to be authenticated to view this data.',
-                'error_forbidden': 'You do not have access to view this data.',
-                'error_not_found': 'The data was not found.',
-                'error_server': 'A server error occurred while fetching data from the server.',
-                'error_down': 'It looks like the server is down.',
-                'error_unknown': 'A unknown error occurred.'
-            },
-            'file-picker': {
-                'choose': 'Choose file',
-                'remove': 'Remove file',
-                'drop': 'or drag and drop file here'
-            },
-            'times': {
-                'tomorrow_at': 'Tomorrow at {{date}}',
-                'today_at': 'Today at {{date}}',
-                'yesterday_at': 'Yesterday at {{date}}'
-            }
-        }
-    },
-    multi: true
+const extraEnglishDictionary = {
+    'form-control-errors': {
+        'unknown': 'The field has an unknown error.',
+        'required': 'This field is required.',
+        'pattern': 'Invalid format.',
+        'email': 'The field does not match a valid email address.',
+        'emailTaken': 'The e-mail is already taken.',
+        'passwordMatch': 'The passwords don\'t match.',
+        'confirm': 'The field does not match.',
+        'fullNumber': 'The field should be a full number.',
+        'min': 'Minimum amount should be {{min}}.',
+        'max': 'Maximum amount should be {{max}}.',
+        'invalidFileType': 'The file type is not allowed.',
+        'maxFileSize': 'The file has exceed the maximum amount of {{maxSize}}.',
+        'minDate': 'The first accepted date is {{date|date}}.',
+        'maxDate': 'The last accepted date is {{date|date}}.',
+        'invalidDate': 'The field contains an invalid date.',
+        'minlength': 'Expected a minimum of {{requiredLength}} characters but got {{actualLength}} characters.',
+        'maxlength': 'Expected a maximum of {{requiredLength}} characters but got {{actualLength}} characters.'
+    },
+    'tables': {
+        'search': 'Search...',
+        'loading': 'Loading...',
+        'empty': 'There is nothing to find here.',
+        'page': 'page',
+        'error_datasource': 'No data source was provided.',
+        'error_unauthorized': 'You need to be authenticated to view this data.',
+        'error_forbidden': 'You do not have access to view this data.',
+        'error_not_found': 'The data was not found.',
+        'error_server': 'A server error occurred while fetching data from the server.',
+        'error_down': 'It looks like the server is down.',
+        'error_unknown': 'A unknown error occurred.'
+    },
+    'file-picker': {
+        'choose': 'Choose file',
+        'remove': 'Remove file',
+        'drop': 'or drag and drop file here'
+    },
+    'times': {
+        'tomorrow_at': 'Tomorrow at {{date}}',
+        'today_at': 'Today at {{date}}',
+        'yesterday_at': 'Yesterday at {{date}}'
+    }
 };
 
-const LOCALIZATION_EXTRA_DUTCH = {
-    provide: LOCALIZE_EXTRA_DICTIONARY,
-    useValue: {
-        locale: 'nl-NL',
-        data: {
-            'form-control-errors': {
-                'unknown': 'Het veld heeft een onbekende fout.',
-                'required': 'Dit veld is verplicht.',
-                'pattern': 'Ongeldig formaat.',
-                'email': 'Het veld komt niet overeen met een geldig e-mailadres.',
-                'emailTaken': 'Het e-mailadres is al bezet.',
-                'passwordMatch': 'De wachtwoorden komen niet overeen.',
-                'confirm': 'Het veld komt niet overeen.',
-                'fullNumber': 'Het veld moet een volledig getal zijn.',
-                'min': 'Minimum hoeveelheid moet {{min}} zijn.',
-                'max': 'Maximum hoeveelheid moet {{max}} zijn.',
-                'invalidFileType': 'Het type bestand is niet toegestaan.',
-                'maxFileSize': 'Het bestand heeft de maximum hoeveelheid van {{maxSize}} overschreden.',
-                'minDate': 'De eerst mogelijke datum is {{date|date}}.',
-                'maxDate': 'De laatst mogelijke datum is {{date|date}}.',
-                'invalidDate': 'Het veld bevat een ongeldige datum.',
-                'minlength': 'Verwachtte minimaal {{requiredLength}} tekens, maar kreeg {{actualLength}} tekens.',
-                'maxlength': 'Verwachtte maximaal {{requiredLength}} tekens, maar kreeg {{actualLength}} tekens.'
-            },
-            'tables': {
-                'search': 'Zoeken...',
-                'loading': 'Aan het laden...',
-                'empty': 'Er is hier niets te vinden.',
-                'page': 'pagina',
-                'error_datasource': 'Er is geen gegevensbron verstrekt.',
-                'error_unauthorized': 'U moet ingelogd zijn om deze gegevens te bekijken.',
-                'error_forbidden': 'U hebt geen toegang om deze gegevens te bekijken.',
-                'error_not_found': 'De gegevens zijn niet gevonden.',
-                'error_server': 'Er is een serverfout opgetreden bij het ophalen van gegevens van de server.',
-                'error_down': 'Het lijkt erop dat de server down is.',
-                'error_unknown': 'Er is een onbekende fout opgetreden bij het ophalen van gegevens van de server.'
-            },
-            'file-picker': {
-                'choose': 'Kies bestand',
-                'remove': 'Verwijder bestand',
-                'drop': 'of sleep het bestand hiernaartoe'
-            },
-            'times': {
-                'tomorrow_at': 'Morgen om {{date}}',
-                'today_at': 'Vandaag om {{date}}',
-                'yesterday_at': 'Gisteren om {{date}}'
-            }
-        }
-    },
-    multi: true
+const extraDutchDictionary = {
+    'form-control-errors': {
+        'unknown': 'Het veld heeft een onbekende fout.',
+        'required': 'Dit veld is verplicht.',
+        'pattern': 'Ongeldig formaat.',
+        'email': 'Het veld komt niet overeen met een geldig e-mailadres.',
+        'emailTaken': 'Het e-mailadres is al bezet.',
+        'passwordMatch': 'De wachtwoorden komen niet overeen.',
+        'confirm': 'Het veld komt niet overeen.',
+        'fullNumber': 'Het veld moet een volledig getal zijn.',
+        'min': 'Minimum hoeveelheid moet {{min}} zijn.',
+        'max': 'Maximum hoeveelheid moet {{max}} zijn.',
+        'invalidFileType': 'Het type bestand is niet toegestaan.',
+        'maxFileSize': 'Het bestand heeft de maximum hoeveelheid van {{maxSize}} overschreden.',
+        'minDate': 'De eerst mogelijke datum is {{date|date}}.',
+        'maxDate': 'De laatst mogelijke datum is {{date|date}}.',
+        'invalidDate': 'Het veld bevat een ongeldige datum.',
+        'minlength': 'Verwachtte minimaal {{requiredLength}} tekens, maar kreeg {{actualLength}} tekens.',
+        'maxlength': 'Verwachtte maximaal {{requiredLength}} tekens, maar kreeg {{actualLength}} tekens.'
+    },
+    'tables': {
+        'search': 'Zoeken...',
+        'loading': 'Aan het laden...',
+        'empty': 'Er is hier niets te vinden.',
+        'page': 'pagina',
+        'error_datasource': 'Er is geen gegevensbron verstrekt.',
+        'error_unauthorized': 'U moet ingelogd zijn om deze gegevens te bekijken.',
+        'error_forbidden': 'U hebt geen toegang om deze gegevens te bekijken.',
+        'error_not_found': 'De gegevens zijn niet gevonden.',
+        'error_server': 'Er is een serverfout opgetreden bij het ophalen van gegevens van de server.',
+        'error_down': 'Het lijkt erop dat de server down is.',
+        'error_unknown': 'Er is een onbekende fout opgetreden bij het ophalen van gegevens van de server.'
+    },
+    'file-picker': {
+        'choose': 'Kies bestand',
+        'remove': 'Verwijder bestand',
+        'drop': 'of sleep het bestand hiernaartoe'
+    },
+    'times': {
+        'tomorrow_at': 'Morgen om {{date}}',
+        'today_at': 'Vandaag om {{date}}',
+        'yesterday_at': 'Gisteren om {{date}}'
+    }
 };
 
-class LocalizeMissingHandler {
-    constructor() {
-        this.log = (message) => {
-            console && console.warn && console.warn(message);
-        };
-    }
-    handle(params) {
-        // Log to the console when the token was not found
-        // if the user did not mark it as optional.
-        if (!params.optional) {
-            this.log(`Localize: The token with name: "${params.token}" was not found.`);
-        }
-        // Return the default token back.
-        return params.token;
-    }
+class LocalizeMissingHandler {
+    constructor() {
+        this.log = (message) => console?.warn?.(message);
+    }
+    handle(params) {
+        // Log to the console when the token was not found
+        // if the user did not mark it as optional.
+        if (!params?.optional) {
+            this.log(`Localize: The token with name: "${params?.token}" was not found.`);
+        }
+        // Return the default token back.
+        return params?.token ?? null;
+    }
 }
 
-class BbLocalizeTemplate {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-        // Inputs.
-        this.name = null;
-    }
-}
-BbLocalizeTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-BbLocalizeTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: BbLocalizeTemplate, selector: "[bbLocalizeTemplate]", inputs: { name: ["bbLocalizeTemplate", "name"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeTemplate, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbLocalizeTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
-                type: Input,
-                args: ['bbLocalizeTemplate']
+class BbLocalizeTemplate {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        // Inputs.
+        this.name = null;
+    }
+}
+BbLocalizeTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BbLocalizeTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbLocalizeTemplate, selector: "[bbLocalizeTemplate]", inputs: { name: ["bbLocalizeTemplate", "name"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbLocalizeTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
+                type: Input,
+                args: ['bbLocalizeTemplate']
             }] } });
 
-class BbLocalizeTemplateOrString {
-    constructor(_templateRef, _viewContainerRef) {
-        this._templateRef = _templateRef;
-        this._viewContainerRef = _viewContainerRef;
-    }
-    set bbLocalizeTemplateOrString(content) {
-        // Get the template.
-        const template = content instanceof TemplateRef
-            ? content
-            : this._templateRef;
-        // Clear the view container ref and create the view.
-        this._viewContainerRef.clear();
-        this._viewContainerRef.createEmbeddedView(template);
-    }
-}
-BbLocalizeTemplateOrString.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeTemplateOrString, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-BbLocalizeTemplateOrString.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: BbLocalizeTemplateOrString, selector: "[bbLocalizeTemplateOrString]", inputs: { bbLocalizeTemplateOrString: "bbLocalizeTemplateOrString" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeTemplateOrString, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbLocalizeTemplateOrString]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { bbLocalizeTemplateOrString: [{
-                type: Input
+class BbLocalizeTemplateOrString {
+    constructor(_templateRef, _viewContainerRef) {
+        this._templateRef = _templateRef;
+        this._viewContainerRef = _viewContainerRef;
+    }
+    set bbLocalizeTemplateOrString(content) {
+        // Get the template.
+        const template = content instanceof TemplateRef
+            ? content
+            : this._templateRef;
+        // Clear the view container ref and create the view.
+        this._viewContainerRef.clear();
+        this._viewContainerRef.createEmbeddedView(template);
+    }
+}
+BbLocalizeTemplateOrString.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeTemplateOrString, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BbLocalizeTemplateOrString.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: BbLocalizeTemplateOrString, selector: "[bbLocalizeTemplateOrString]", inputs: { bbLocalizeTemplateOrString: "bbLocalizeTemplateOrString" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeTemplateOrString, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbLocalizeTemplateOrString]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { bbLocalizeTemplateOrString: [{
+                type: Input
             }] } });
 
-class BbLocalizeString {
-    constructor(_changeDetection) {
-        this._changeDetection = _changeDetection;
-        // Inputs.
-        this.substitutions = ['[', ']'];
-        // Data.
-        this.components = [];
-        // Subscriptions.
-        this._subscription = new Subscription();
-        // State.
-        this._value = null;
-    }
-    set value(value) {
-        this._value = value;
-        this.revalidate();
-    }
-    get value() {
-        return this._value;
-    }
-    ngAfterViewInit() {
-        this.observeItemChanges();
-    }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
-    }
-    observeItemChanges() {
-        const subscription = this.items.changes.pipe(startWith(0)).subscribe(() => this.revalidate());
-        this._subscription.add(subscription);
-    }
-    revalidate() {
-        const items = this.items?.toArray() ?? [];
-        if (items.length <= 0) {
-            return;
-        }
-        this.setComponents(items);
-    }
-    setComponents(items) {
-        const [start, end] = this.substitutions;
-        const templates = items.reduce((previous, current) => {
-            const template = current?.templateRef ?? null;
-            const name = current?.name ?? null;
-            if (!template || !name) {
-                return previous;
-            }
-            return { ...previous, [`${start}${name}${end}`]: template };
-        }, {});
-        this.components = this.getStringComponents(this._value)
-            .map(component => templates?.[component] ?? component ?? null)
-            .filter(item => !!item);
-        this._changeDetection.detectChanges();
-    }
-    getStringComponents(value) {
-        const [start, end] = this.getSubstitutions();
-        const regex = new RegExp(`(${start}[a-zA-Z]+${end})`, 'g');
-        return value.split(regex);
-    }
-    getSubstitutions() {
-        const [start, end] = this.substitutions;
-        const escape = /[.*+?^${}()|[\]\\]/g;
-        return [
-            start.replace(escape, '\\$&'),
-            end.replace(escape, '\\$&')
-        ];
-    }
-}
-BbLocalizeString.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeString, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BbLocalizeString.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: BbLocalizeString, selector: "bb-localize-string", inputs: { substitutions: "substitutions", value: "value" }, host: { classAttribute: "bb-localize-string" }, queries: [{ propertyName: "items", predicate: BbLocalizeTemplate }], ngImport: i0, template: "<ng-container *ngFor=\"let component of components\">\n    <ng-template [bbLocalizeTemplateOrString]=\"component\">{{ component }}</ng-template>\n</ng-container>\n", styles: [".bb-localize-string{display:inline}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: BbLocalizeTemplateOrString, selector: "[bbLocalizeTemplateOrString]", inputs: ["bbLocalizeTemplateOrString"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalizeString, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-localize-string', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
-                        'class': 'bb-localize-string'
-                    }, template: "<ng-container *ngFor=\"let component of components\">\n    <ng-template [bbLocalizeTemplateOrString]=\"component\">{{ component }}</ng-template>\n</ng-container>\n", styles: [".bb-localize-string{display:inline}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
-                type: ContentChildren,
-                args: [BbLocalizeTemplate]
-            }], substitutions: [{
-                type: Input
-            }], value: [{
-                type: Input
+class BbLocalizeString {
+    constructor(_changeDetection) {
+        this._changeDetection = _changeDetection;
+        // Inputs.
+        this.substitutions = ['[', ']'];
+        // Data.
+        this.components = [];
+        // Subscriptions.
+        this._subscription = new Subscription();
+        // State.
+        this._value = null;
+    }
+    set value(value) {
+        this._value = value;
+        this.revalidate();
+    }
+    get value() {
+        return this._value;
+    }
+    ngAfterViewInit() {
+        this.observeItemChanges();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    observeItemChanges() {
+        const subscription = this.items.changes.pipe(startWith(0)).subscribe(() => this.revalidate());
+        this._subscription.add(subscription);
+    }
+    revalidate() {
+        const items = this.items?.toArray() ?? [];
+        if (items.length <= 0) {
+            return;
+        }
+        this.setComponents(items);
+    }
+    setComponents(items) {
+        const [start, end] = this.substitutions;
+        const templates = items.reduce((previous, current) => {
+            const template = current?.templateRef ?? null;
+            const name = current?.name ?? null;
+            if (!template || !name) {
+                return previous;
+            }
+            return { ...previous, [`${start}${name}${end}`]: template };
+        }, {});
+        this.components = this.getStringComponents(this._value)
+            .map(component => templates?.[component] ?? component ?? null)
+            .filter(item => !!item);
+        this._changeDetection.detectChanges();
+    }
+    getStringComponents(value) {
+        const [start, end] = this.getSubstitutions();
+        const regex = new RegExp(`(${start}[a-zA-Z]+${end})`, 'g');
+        return value.split(regex);
+    }
+    getSubstitutions() {
+        const [start, end] = this.substitutions;
+        const escape = /[.*+?^${}()|[\]\\]/g;
+        return [
+            start.replace(escape, '\\$&'),
+            end.replace(escape, '\\$&')
+        ];
+    }
+}
+BbLocalizeString.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeString, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbLocalizeString.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: BbLocalizeString, selector: "bb-localize-string, [bb-localize-string]", inputs: { substitutions: "substitutions", value: "value" }, host: { classAttribute: "bb-localize-string" }, queries: [{ propertyName: "items", predicate: BbLocalizeTemplate }], ngImport: i0, template: "<ng-container *ngFor=\"let component of components\">\r\n    <ng-template [bbLocalizeTemplateOrString]=\"component\">{{ component }}</ng-template>\r\n</ng-container>\r\n", styles: [".bb-localize-string{display:inline}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: BbLocalizeTemplateOrString, selector: "[bbLocalizeTemplateOrString]", inputs: ["bbLocalizeTemplateOrString"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalizeString, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-localize-string, [bb-localize-string]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
+                        'class': 'bb-localize-string'
+                    }, template: "<ng-container *ngFor=\"let component of components\">\r\n    <ng-template [bbLocalizeTemplateOrString]=\"component\">{{ component }}</ng-template>\r\n</ng-container>\r\n", styles: [".bb-localize-string{display:inline}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: ContentChildren,
+                args: [BbLocalizeTemplate]
+            }], substitutions: [{
+                type: Input
+            }], value: [{
+                type: Input
             }] } });
 
-class LocalizeDictionary {
-    constructor({ id, data, locale, supportedLanguages }, baseUrl, http) {
-        // Dictionary data.
-        this._data = {};
-        this._url = null;
-        this.isAbsoluteUrl = (url) => {
-            if (url.indexOf('//') === 0) {
-                return true;
-            }
-            if (url.indexOf('://') === -1) {
-                return false;
-            }
-            if (url.indexOf('.') === -1) {
-                return false;
-            }
-            if (url.indexOf('/') === -1) {
-                return false;
-            }
-            if (url.indexOf(':') > url.indexOf('/')) {
-                return false;
-            }
-            return url.indexOf('://') < url.indexOf('.');
-        };
-        this.recursiveSearchValue = (data, value) => {
-            if (typeof data === 'undefined' || typeof data === 'string') {
-                return undefined;
-            }
-            return data[value];
-        };
-        this._id = id;
-        this._locale = locale || 'en-US';
-        this._supportedLanguages = supportedLanguages || [];
-        this._http = http;
-        this.stateKey = makeStateKey(`locale:${this._id}`);
-        // Set the correct variable to the url or data.
-        if (typeof data === 'string') {
-            this._url = this.getUrl(data, baseUrl);
-        }
-        else {
-            this._data = data;
-        }
-    }
-    get id() {
-        return this._id;
-    }
-    get locale() {
-        return this._locale;
-    }
-    get supportedLanguages() {
-        return this._supportedLanguages;
-    }
-    get data() {
-        return this._data;
-    }
-    async load(data) {
-        // Check if data was passed.
-        if (data) {
-            this.setData(data);
-            return true;
-        }
-        // If the url was not set the data was already loaded
-        // return true because it was successful.
-        if (!this._url) {
-            return true;
-        }
-        try {
-            // Try to load the data via a HTTP request.
-            const context = new HttpContext().set(USE_AUTHORIZATION, false);
-            const result$ = this._http.get(this._url, { context });
-            const result = await firstValueFrom(result$);
-            // Set the data.
-            this.setData(result);
-            // Return true because it succeeded.
-            return true;
-        }
-        catch {
-            // Return false because it failed.
-            return false;
-        }
-    }
-    combine(extraDictionary, mode = 'prepend') {
-        // Validate that the locale matches.
-        if (extraDictionary.locale !== this._locale) {
-            return;
-        }
-        // Extract the extra data.
-        const extraData = extraDictionary.data || {};
-        // If the selected mode is prepend
-        // add the data in front.
-        if (mode === 'prepend') {
-            this._data = { ...extraData, ...this._data };
-            return;
-        }
-        // If the selected mode is append
-        // add the data in the back.
-        this._data = { ...this._data, ...extraData };
-    }
-    search(token) {
-        // Check if the token is present in the
-        // data, if so return it.
-        if (this._data[token]) {
-            return this._data[token];
-        }
-        // Values might be nested in objects this means we need
-        // to split them on the dot and search them recursively
-        // in the data.
-        const value = (token || '')
-            .split('.')
-            .filter(value => !!value)
-            .reduce(this.recursiveSearchValue, this._data);
-        // Check if the value is a string
-        // if this is true it can be returned.
-        if (typeof value === 'string') {
-            return value;
-        }
-        // This means the translation was incorrect.
-        return null;
-    }
-    setData(data) {
-        this._data = data ?? {};
-        this._url = null;
-    }
-    getUrl(value, baseUrl) {
-        const isAbsolute = this.isAbsoluteUrl(value);
-        if (isAbsolute || !baseUrl) {
-            return value;
-        }
-        return [baseUrl, value].join('/');
-    }
+class LocalizeDictionary {
+    constructor(data) {
+        this._data = this.formatData(data);
+    }
+    get(token) {
+        const key = Array.isArray(token) ? token.join('.') : token;
+        return this._data?.[key] ?? null;
+    }
+    formatData(data, scope = null) {
+        const devMode = isDevMode();
+        return Object.keys(data).reduce((previous, current) => {
+            const value = data?.[current];
+            if (typeof value === 'object' && value !== null) {
+                const reformatted = this.formatData(value, current);
+                return { ...previous, ...reformatted };
+            }
+            const token = [scope, current].filter(item => !!item).join('.');
+            if (previous[token] && devMode) {
+                console?.warn?.(`Localize: Duplicate key "${token}" was found, please verify your translation files.`);
+            }
+            return { ...previous, [token]: value };
+        }, {});
+    }
 }
 
-class Localize {
-    constructor(_http, _storage, _platform, _languages, _state, _config, _missingHandler, _document, _location, _baseUrl, _functions, _extras) {
-        this._http = _http;
-        this._storage = _storage;
-        this._platform = _platform;
-        this._languages = _languages;
-        this._state = _state;
-        this._config = _config;
-        this._missingHandler = _missingHandler;
-        this._document = _document;
-        this._location = _location;
-        this._baseUrl = _baseUrl;
-        this._functions = _functions;
-        this._extras = _extras;
-        this._storageToken = 'bb-language-dictionary-id';
-        this.convertToParams = (tokenOrParams) => {
-            if (typeof tokenOrParams !== 'string') {
-                // Destruct the params from the object.
-                const { token, optional, data } = tokenOrParams;
-                // Make sure all parameters are valid
-                // by type safe adding them.
-                return { token: token, optional: optional || false, data: data || {} };
-            }
-            // If the parameter is a string fill in the blanks.
-            return { token: tokenOrParams, optional: false, data: {} };
-        };
-        this.getMatches = (value, substitutions) => {
-            // Get the matching substitutions.
-            const { start, end } = substitutions;
-            // Compose a regex that will find the matches.
-            const regex = new RegExp(`${start}([^${end}]+)${end}`, 'g');
-            // Execute the regex to find matches.
-            let match = regex.exec(value);
-            const matches = [];
-            while (match !== null) {
-                // Push a new match.
-                matches.push({
-                    match: match[0],
-                    token: match[1]
-                });
-                // Try to find more matches.
-                match = regex.exec(value);
-            }
-            // Return the processed value.
-            return matches.filter(item => !!item);
-        };
-        this.reload = () => this._location?.reload();
-        // Check if at least one language was passed in the config.
-        if (this._config.dictionary.length < 1) {
-            throw new Error('Localize: one or more languages should be supplied.');
-        }
-        // Gather the dictionaries.
-        this._dictionaries = this._config.dictionary.map(item => {
-            return new LocalizeDictionary(item, this._baseUrl, this._http);
-        });
-        // Save the best matching current dictionary.
-        this._currentDictionary = this.retrieveBestMatchingDictionary();
-        // Gather all the localize functions.
-        this._functionMiddleware = this._functions.reduce((previous, current) => {
-            previous[current.keyword()] = current;
-            return previous;
-        }, {});
-        this.renderDocumentLanguage();
-    }
-    get dictionaries() {
-        return this._dictionaries;
-    }
-    get current() {
-        return this._currentDictionary;
-    }
-    get locale() {
-        return this._currentDictionary.locale;
-    }
-    initialize() {
-        return async () => this.load(this._currentDictionary);
-    }
-    change(id, reload = true) {
-        // Try to fetch the dictionary.
-        const dictionary = this._dictionaries.find(item => item.id === id);
-        // Validate the dictionary exists.
-        if (!dictionary) {
-            throw new Error(`Localize: Could not find dictionary with id: "${id}"`);
-        }
-        // Save the language in the storage.
-        this._storage.cookie.set(this._storageToken, dictionary.id, {});
-        // Just quit if we don't need to reload.
-        if (!reload) {
-            return;
-        }
-        // We need to reload the application for the translations.
-        return this.reload();
-    }
-    clear(reload = true) {
-        // Remove the language in the local storage.
-        this._storage.cookie.remove(this._storageToken);
-        // Just quit if we don't need to reload.
-        if (!reload) {
-            return;
-        }
-        // We need to reload the application for the translations.
-        return this.reload();
-    }
-    translate(tokenOrParams) {
-        // 1. Convert to the params.
-        const params = this.convertToParams(tokenOrParams);
-        // 2. Try to find the translation in the dictionary.
-        const searchResult = this._currentDictionary.search(params.token);
-        // 3. Verify the translation was found.
-        if (!searchResult) {
-            return this._missingHandler.handle(params);
-        }
-        // 4. Find references in the translation that need to be translated as well.
-        const processResult = this.findReferencesInTranslation(searchResult);
-        // 5. Parse the interpolation data.
-        return this.parseInterpolationData(processResult, params.data);
-    }
-    parseInterpolationData(value, data) {
-        // Get the interpolation substitutions.
-        const substitutions = this.getSubstitutions('interpolation', ['{{', '}}']);
-        // Get all matches in the value.
-        const matches = this.getMatches(value, substitutions);
-        // Replace all matches with the parsed value.
-        return matches.reduce((previous, current) => {
-            // Try to parse the token.
-            const interpolatedToken = this.interpolateFunctionData(current.token, data);
-            // Replace the match with the parsed token.
-            return previous.replace(current.match, interpolatedToken);
-        }, `${value}`);
-    }
-    interpolateFunctionData(value, interpolationData) {
-        // Get the token and the methods by splitting
-        // on the pipe symbol.
-        const [token, ...methods] = value.split('|').map(item => item.trim());
-        // Get the value for the token from
-        // the interpolation data.
-        const interpolationValue = interpolationData[token] || token;
-        // Loop through all the middleware methods and try to
-        // conform the string to the given parameters.
-        return methods.reduce((string, middlewareName) => {
-            // Try to retrieve the middleware from the collection.
-            const middleware = this._functionMiddleware[middlewareName];
-            // If the middleware is missing return an error
-            // so that the user knows it was not found.
-            if (!middleware) {
-                return string;
-            }
-            // Execute the middleware function with the string.
-            return middleware.transform(string, this.locale);
-        }, `${interpolationValue}`);
-    }
-    findReferencesInTranslation(value) {
-        // Get the reference substitutions.
-        const substitutions = this.getSubstitutions('references', ['#(', ')']);
-        // Get all matches in the value.
-        const matches = this.getMatches(value, substitutions);
-        // Replace all matches with the translated value.
-        return matches.reduce((previous, current) => {
-            // Try to translate the token.
-            const translatedToken = this.translate(current.token);
-            // Replace the match with the translated token.
-            return previous.replace(current.match, translatedToken);
-        }, value);
-    }
-    getSubstitutions(type, defaultValue) {
-        const substitutions = (this._config
-            && this._config.substitutions
-            && this._config.substitutions[type]);
-        // Get the substitutions.
-        const value = (!substitutions || substitutions.length !== 2)
-            ? defaultValue
-            : substitutions;
-        // Escape both substitutions so that they
-        // can be used.
-        const escape = /[.*+?^${}()|[\]\\]/g;
-        const start = value[0].replace(escape, '\\$&');
-        const end = value[1].replace(escape, '\\$&');
-        // Return the substitutions.
-        return { start, end };
-    }
-    retrieveBestMatchingDictionary() {
-        // Get the dictionary based on storage.
-        const storageDictionary = this.getDictionaryFromStorage();
-        // Get the dictionary based on the supported language.
-        const browserDictionary = this.getBestBrowserMatchDictionary();
-        // Get the dictionary based on the first index.
-        const firstDictionary = this._dictionaries[0];
-        // Return the best matching dictionary.
-        return storageDictionary || browserDictionary || firstDictionary;
-    }
-    getDictionaryFromStorage() {
-        // Get dictionary id from the storage..
-        const dictionaryId = this._storage.cookie.get(this._storageToken);
-        // Return the dictionary based on the storage dictionary id.
-        return this._dictionaries.find(item => item.id === dictionaryId);
-    }
-    getBestBrowserMatchDictionary() {
-        // Loop through all browser languages and return the
-        // best matching dictionary.
-        return this._languages.all.map(({ code, region }) => {
-            const languageCode = [code, region].filter(data => !!data).join('-');
-            return this._dictionaries.find(item => item.supportedLanguages.includes(languageCode));
-        }).filter(item => !!item).find((_, index) => index === 0);
-    }
-    async load(dictionary) {
-        const data = this._state?.hasKey(dictionary.stateKey)
-            ? this._state?.get(dictionary.stateKey, {})
-            : null;
-        // Try to load the dictionary data.
-        const loaded = await dictionary.load(data);
-        // Verify the data was loaded.
-        if (!loaded) {
-            throw new Error(`Localize: Could not correctly fetch the data from: "${dictionary.id}"`);
-        }
-        if (!this._platform.isBrowser && this._state) {
-            this._state?.set(dictionary?.stateKey, dictionary?.data ?? {});
-        }
-        // Combine the extra dictionary data.
-        (this._extras || []).forEach(extraDictionary => dictionary.combine(extraDictionary));
-        // Return the dictionary.
-        return dictionary;
-    }
-    renderDocumentLanguage() {
-        const element = this._document?.documentElement;
-        if (!element) {
-            return;
-        }
-        element.lang = this._currentDictionary?.supportedLanguages?.[0] ?? this._currentDictionary?.locale;
-    }
-}
-Localize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: Localize, deps: [{ token: i1$1.HttpClient }, { token: i2.Storage }, { token: i3.Platform }, { token: i3.Languages }, { token: i4.TransferState, optional: true }, { token: LocalizeConfig, optional: true }, { token: LocalizeMissingHandler }, { token: DOCUMENT, optional: true }, { token: LOCATION, optional: true }, { token: BASE_URL, optional: true }, { token: LOCALIZE_FUNCTION, optional: true }, { token: LOCALIZE_EXTRA_DICTIONARY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-Localize.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: Localize });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: Localize, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i2.Storage }, { type: i3.Platform }, { type: i3.Languages }, { type: i4.TransferState, decorators: [{
-                    type: Optional
-                }] }, { type: LocalizeConfig, decorators: [{
-                    type: Optional
-                }] }, { type: LocalizeMissingHandler }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LOCATION]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [BASE_URL]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LOCALIZE_FUNCTION]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LOCALIZE_EXTRA_DICTIONARY]
+class Localize {
+    constructor(_storage, _languages, _config, _missingHandler, _document, _functions) {
+        this._storage = _storage;
+        this._languages = _languages;
+        this._config = _config;
+        this._missingHandler = _missingHandler;
+        this._document = _document;
+        this._functions = _functions;
+        this._storageToken = 'bb-language-dictionary-id';
+        // Current language dictionary.
+        this._currentLanguage = null;
+        this._currentDictionary = null;
+        this.convertToParams = (tokenOrParams) => {
+            if (typeof tokenOrParams !== 'string') {
+                // Destruct the params from the object.
+                const { token, optional, data } = tokenOrParams;
+                // Make sure all parameters are valid
+                // by type safe adding them.
+                return { token: token, optional: optional ?? false, data: data ?? {} };
+            }
+            // If the parameter is a string fill in the blanks.
+            return { token: tokenOrParams, optional: false, data: {} };
+        };
+        this.getMatches = (value, substitutions) => {
+            // Get the matching substitutions.
+            const { start, end } = substitutions;
+            // Compose a regex that will find the matches.
+            const regex = new RegExp(`${start}([^${end}]+)${end}`, 'g');
+            // Execute the regex to find matches.
+            let match = regex.exec(value);
+            const matches = [];
+            while (match !== null) {
+                matches.push({ match: match[0], token: match[1] });
+                match = regex.exec(value);
+            }
+            // Return the processed value.
+            return matches.filter(item => !!item);
+        };
+        // Check if at least one language was passed in the config.
+        this._availableLanguages = this._config.languages;
+        if (this._availableLanguages.length < 1) {
+            throw new Error('Localize: one or more languages should be supplied.');
+        }
+        // Gather all the localize functions.
+        this._functionMiddleware = this._functions.reduce((previous, current) => {
+            previous[current.keyword()] = current;
+            return previous;
+        }, {});
+        // Save the best matching current dictionary.
+        this._bestMatchingLanguage = this.retrieveBestMatchingLanguage();
+        this.renderDocumentLanguage();
+    }
+    get languages() {
+        return this._availableLanguages ?? [];
+    }
+    get current() {
+        return this._currentLanguage;
+    }
+    async set(language, cache = true) {
+        // Await the language data and set the current
+        // dictionary to the loaded data.
+        this._currentLanguage = language;
+        this._currentDictionary = await language.data();
+        // Save the selected language in the storage.
+        if (cache) {
+            this._storage.cookie.set(this._storageToken, this._currentLanguage?.id, {});
+        }
+    }
+    initialize() {
+        return async () => this.set(this._bestMatchingLanguage, false);
+    }
+    clear() {
+        this._storage.cookie.remove(this._storageToken);
+    }
+    translate(tokenOrParams) {
+        // 1. Convert to the params.
+        const params = this.convertToParams(tokenOrParams);
+        // 2. Try to find the translation in the dictionary.
+        const searchResult = this._currentDictionary.get(params?.token);
+        // 3. Verify the translation was found.
+        if (!searchResult) {
+            return this._missingHandler.handle(params);
+        }
+        // 4. Find references in the translation that need to be translated as well.
+        const processResult = this.findReferencesInTranslation(searchResult);
+        // 5. Parse the interpolation data.
+        return this.parseInterpolationData(processResult, params?.data);
+    }
+    parseInterpolationData(value, data) {
+        // Get the interpolation substitutions.
+        const substitutions = this.getSubstitutions('interpolation', ['{{', '}}']);
+        // Get all matches in the value.
+        const matches = this.getMatches(value, substitutions);
+        // Replace all matches with the parsed value.
+        return matches.reduce((previous, current) => {
+            // Try to parse the token.
+            const interpolatedToken = this.interpolateFunctionData(current?.token, data);
+            // Replace the match with the parsed token.
+            return previous.replace(current?.match, interpolatedToken);
+        }, `${value}`);
+    }
+    interpolateFunctionData(value, interpolationData) {
+        // Get the token and the methods by splitting
+        // on the pipe symbol.
+        const [token, ...methods] = value.split('|').map(item => item.trim());
+        // Get the value for the token from
+        // the interpolation data.
+        const interpolationValue = interpolationData?.[token] ?? token;
+        // Loop through all the middleware methods and try to
+        // conform the string to the given parameters.
+        return methods.reduce((string, middlewareName) => {
+            // Try to retrieve the middleware from the collection.
+            const middleware = this._functionMiddleware[middlewareName];
+            // If the middleware is missing return an error
+            // so that the user knows it was not found.
+            if (!middleware) {
+                return string;
+            }
+            // Execute the middleware function with the string.
+            return middleware.transform(string, this.current?.locale);
+        }, `${interpolationValue}`);
+    }
+    findReferencesInTranslation(value) {
+        // Get the reference substitutions.
+        const substitutions = this.getSubstitutions('references', ['#(', ')']);
+        // Get all matches in the value.
+        const matches = this.getMatches(value, substitutions);
+        // Replace all matches with the translated value.
+        return matches.reduce((previous, current) => {
+            // Try to translate the token.
+            const translatedToken = this.translate(current?.token);
+            // Replace the match with the translated token.
+            return previous.replace(current?.match, translatedToken);
+        }, value);
+    }
+    getSubstitutions(type, defaultValue) {
+        // Get the substitutions.
+        const substitutions = this._config?.substitutions?.[type] ?? null;
+        const value = (!substitutions || substitutions.length !== 2)
+            ? defaultValue
+            : substitutions;
+        // Escape both substitutions so that they
+        // can be used.
+        const escape = /[.*+?^${}()|[\]\\]/g;
+        const start = value[0].replace(escape, '\\$&');
+        const end = value[1].replace(escape, '\\$&');
+        // Return the substitutions.
+        return { start, end };
+    }
+    retrieveBestMatchingLanguage() {
+        // Get the language based on storage.
+        const storageLanguage = this.getLanguageFromStorage();
+        // Get the language based on the supported languages of the browser.
+        const browserLanguage = this.getBestBrowserMatchLanguage();
+        // Return the best matching language.
+        return storageLanguage ?? browserLanguage ?? this._languages?.[0];
+    }
+    getLanguageFromStorage() {
+        // Get id from the storage.
+        const id = this._storage.cookie.get(this._storageToken);
+        // Return the language based on the storage id.
+        return this._availableLanguages.find(item => item?.id === id);
+    }
+    getBestBrowserMatchLanguage() {
+        // Loop through all browser languages and return the
+        // best matching language.
+        return this._languages.all.map(({ code, region }) => {
+            const languageCode = [code, region].filter(data => !!data).join('-');
+            return this._availableLanguages.find(item => item?.supported?.includes(languageCode));
+        }).filter(item => !!item).find((_, index) => index === 0);
+    }
+    renderDocumentLanguage() {
+        const element = this._document?.documentElement;
+        if (!element) {
+            return;
+        }
+        element.lang = this._bestMatchingLanguage?.supported?.[0] ?? this._bestMatchingLanguage?.locale;
+    }
+}
+Localize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: Localize, deps: [{ token: i1$1.Storage }, { token: i2.Languages }, { token: LocalizeConfig, optional: true }, { token: LocalizeMissingHandler }, { token: DOCUMENT, optional: true }, { token: LOCALIZE_FUNCTION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+Localize.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: Localize });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: Localize, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.Storage }, { type: i2.Languages }, { type: LocalizeConfig, decorators: [{
+                    type: Optional
+                }] }, { type: LocalizeMissingHandler }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LOCALIZE_FUNCTION]
                 }] }]; } });
 
-class BbLocalize {
-    constructor(_localize) {
-        this._localize = _localize;
-    }
-    transform(tokenOrParams, args) {
-        // Validate that the localize service
-        // exists in the pipe.
-        if (!this._localize) {
-            return tokenOrParams;
-        }
-        // Combine the params with the options
-        // to form the localize params.
-        const params = this.combineParamsWithOptions(tokenOrParams, args);
-        // Try to localize the value.
-        return this._localize.translate(params);
-    }
-    combineParamsWithOptions(tokenOrParams, args) {
-        // Gather the extras.
-        const extras = args || {};
-        // Loop through all the keys to find the set options.
-        const options = Object.keys(extras).reduce((previous, current) => {
-            if (typeof extras[current] === 'undefined') {
-                return previous;
-            }
-            previous[current] = extras[current];
-            return previous;
-        }, {});
-        // Convert the string token to a params object.
-        const params = typeof tokenOrParams === 'string'
-            ? { token: tokenOrParams, optional: false, data: {} }
-            : tokenOrParams;
-        // Return the combined params and options.
-        return { ...params, ...options };
-    }
-}
-BbLocalize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalize, deps: [{ token: Localize, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-BbLocalize.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalize, name: "bbLocalize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbLocalize, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'bbLocalize'
-                }]
-        }], ctorParameters: function () { return [{ type: Localize, decorators: [{
-                    type: Optional
+class BbLocalize {
+    constructor(_localize) {
+        this._localize = _localize;
+    }
+    transform(tokenOrParams, args) {
+        // Validate that the localize service
+        // exists in the pipe.
+        if (!this._localize) {
+            return tokenOrParams;
+        }
+        // Combine the params with the options
+        // to form the localize params.
+        const params = this.combineParamsWithOptions(tokenOrParams, args);
+        // Try to localize the value.
+        return this._localize.translate(params);
+    }
+    combineParamsWithOptions(tokenOrParams, args) {
+        // Gather the extras.
+        const extras = args || {};
+        // Loop through all the keys to find the set options.
+        const options = Object.keys(extras).reduce((previous, current) => {
+            if (typeof extras[current] === 'undefined') {
+                return previous;
+            }
+            previous[current] = extras[current];
+            return previous;
+        }, {});
+        // Convert the string token to a params object.
+        const params = typeof tokenOrParams === 'string'
+            ? { token: tokenOrParams, optional: false, data: {} }
+            : tokenOrParams;
+        // Return the combined params and options.
+        return { ...params, ...options };
+    }
+}
+BbLocalize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalize, deps: [{ token: Localize, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+BbLocalize.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalize, name: "bbLocalize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BbLocalize, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bbLocalize'
+                }]
+        }], ctorParameters: function () { return [{ type: Localize, decorators: [{
+                    type: Optional
                 }] }]; } });
 
-class LocalizeModule {
-    static forRoot(config) {
-        return {
-            ngModule: LocalizeModule,
-            providers: [
-                // Angular providers.
-                { provide: APP_INITIALIZER, deps: [Localize], useFactory: initializeLocale, multi: true },
-                { provide: LOCALE_ID, deps: [Localize], useFactory: getLocale },
-                // Config provider.
-                { provide: LocalizeConfig, useValue: config },
-                // Function providers.
-                { provide: LOCALIZE_FUNCTION, useClass: LocalizeLowercaseFunction, multi: true },
-                { provide: LOCALIZE_FUNCTION, useClass: LocalizeUppercaseFunction, multi: true },
-                { provide: LOCALIZE_FUNCTION, useClass: LocalizeDateFunction, multi: true },
-                // Handler providers.
-                { provide: LocalizeMissingHandler, useClass: LocalizeMissingHandler },
-                // Service providers.
-                Localize
-            ]
-        };
-    }
-}
-LocalizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LocalizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LocalizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LocalizeModule, declarations: [BbLocalize,
-        BbLocalizeString,
-        BbLocalizeTemplate,
-        BbLocalizeTemplateOrString], imports: [CommonModule, HttpClientModule], exports: [BbLocalize,
-        BbLocalizeString,
-        BbLocalizeTemplate] });
-LocalizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LocalizeModule, imports: [[CommonModule, HttpClientModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LocalizeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, HttpClientModule],
-                    declarations: [
-                        BbLocalize,
-                        BbLocalizeString,
-                        BbLocalizeTemplate,
-                        BbLocalizeTemplateOrString
-                    ],
-                    exports: [
-                        BbLocalize,
-                        BbLocalizeString,
-                        BbLocalizeTemplate
-                    ]
-                }]
-        }] });
-function initializeLocale(localize) {
-    return localize.initialize();
-}
-function getLocale(localize) {
-    return localize.locale;
+class LocalizeModule {
+    static forRoot(config) {
+        const automatic = config?.automatic ?? true;
+        return {
+            ngModule: LocalizeModule,
+            providers: [
+                // Angular providers.
+                ...(automatic ? [
+                    { provide: APP_INITIALIZER, deps: [Localize], useFactory: initializeLocale, multi: true },
+                    { provide: LOCALE_ID, deps: [Localize], useFactory: getLocale }
+                ] : []),
+                // Config provider.
+                { provide: LocalizeConfig, useValue: config },
+                // Function providers.
+                { provide: LOCALIZE_FUNCTION, useClass: LocalizeLowercaseFunction, multi: true },
+                { provide: LOCALIZE_FUNCTION, useClass: LocalizeUppercaseFunction, multi: true },
+                { provide: LOCALIZE_FUNCTION, useClass: LocalizeDateFunction, multi: true },
+                // Handler providers.
+                { provide: LocalizeMissingHandler, useClass: LocalizeMissingHandler },
+                // Service providers.
+                Localize
+            ]
+        };
+    }
+}
+LocalizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LocalizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LocalizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LocalizeModule, declarations: [BbLocalize,
+        BbLocalizeString,
+        BbLocalizeTemplate,
+        BbLocalizeTemplateOrString], imports: [CommonModule], exports: [BbLocalize,
+        BbLocalizeString,
+        BbLocalizeTemplate] });
+LocalizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LocalizeModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LocalizeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        BbLocalize,
+                        BbLocalizeString,
+                        BbLocalizeTemplate,
+                        BbLocalizeTemplateOrString
+                    ],
+                    exports: [
+                        BbLocalize,
+                        BbLocalizeString,
+                        BbLocalizeTemplate
+                    ]
+                }]
+        }] });
+function initializeLocale(localize) {
+    return localize.initialize();
+}
+function getLocale(localize) {
+    return localize?.current?.locale ?? null;
 }
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { BbLocalize, BbLocalizeString, BbLocalizeTemplate, LOCALIZATION_EXTRA_DUTCH, LOCALIZATION_EXTRA_ENGLISH, LOCALIZE_EXTRA_DICTIONARY, LOCALIZE_FUNCTION, Localize, LocalizeConfig, LocalizeDateFunction, LocalizeDictionary, LocalizeLowercaseFunction, LocalizeMissingHandler, LocalizeModule, LocalizeUppercaseFunction, getLocale, initializeLocale };
+export { BbLocalize, BbLocalizeString, BbLocalizeTemplate, LOCALIZE_FUNCTION, Localize, LocalizeConfig, LocalizeDateFunction, LocalizeDictionary, LocalizeLowercaseFunction, LocalizeMissingHandler, LocalizeModule, LocalizeUppercaseFunction, extraDutchDictionary, extraEnglishDictionary, getLocale, initializeLocale };
 //# sourceMappingURL=bravobit-bb-foundation-localize.mjs.map