@muraai/mnl-commons 0.1.0-alpha-a04cfbd → 0.1.0-alpha-0abf887

package/fesm2020/muraai-mnl-commons.mjs

@@ -0,0 +1,911 @@
+import * as i0 from '@angular/core';
+import { NgModule, EventEmitter, Component, ViewEncapsulation, Input, Output, Injectable, Inject, Pipe, InjectionToken, APP_INITIALIZER } from '@angular/core';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$2 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i8 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
+import * as i4$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 from '@angular/common';
+import { DOCUMENT, DatePipe, registerLocaleData, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import localeAR from '@angular/common/locales/ar';
+import localeDE from '@angular/common/locales/de';
+import localeFR from '@angular/common/locales/fr';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i2 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i2$2 from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import * as i3 from '@angular/flex-layout/flex';
+import * as i2$1 from '@angular/flex-layout/extended';
+import * as i1$2 from '@angular/platform-browser';
+import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
+import { formatDistance } from 'date-fns';
+import differenceInDays from 'date-fns/differenceInDays';
+import { Subject } from 'rxjs';
+
+function modules() {
+    return [
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatMenuModule,
+    ];
+}
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatMenuModule], exports: [MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatMenuModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [modules(), MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: modules(),
+                    exports: modules()
+                }]
+        }] });
+
+class HeaderComponent {
+    constructor() {
+        this.menuButonClickEvent = new EventEmitter();
+        this.logoClick = new EventEmitter();
+    }
+    menuClick(event) {
+        this.menuButonClickEvent.emit(event);
+    }
+    onLogoClick(event) {
+        this.logoClick.emit(event);
+    }
+}
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: HeaderComponent, selector: "mnl-header", inputs: { header: "header" }, outputs: { menuButonClickEvent: "menuButonClickEvent", logoClick: "logoClick" }, ngImport: i0, template: "<mat-toolbar *ngIf=\"header\" color=\"{{ header.toolbarColor }}\">\n  <mat-toolbar-row>\n    <div fxLayout fxLayoutAlign=\"start center\">\n      <button mat-icon-button *ngIf=\"header.showMenuIcon\">\n        <mat-icon (click)=\"menuClick($event)\">menu</mat-icon>\n      </button>\n      <img\n        class=\"mnl-logo\"\n        (click)=\"onLogoClick($event)\"\n        src=\"{{ header.logo }}\"\n      />\n      <span>{{ header.name }}</span>\n    </div>\n    <div fxLayoutAlign=\"end center\" fxFlex>\n      <ng-content select=\"`[mnl-header-content]`\"></ng-content>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".mnl-logo{margin-right:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-header', encapsulation: ViewEncapsulation.None, template: "<mat-toolbar *ngIf=\"header\" color=\"{{ header.toolbarColor }}\">\n  <mat-toolbar-row>\n    <div fxLayout fxLayoutAlign=\"start center\">\n      <button mat-icon-button *ngIf=\"header.showMenuIcon\">\n        <mat-icon (click)=\"menuClick($event)\">menu</mat-icon>\n      </button>\n      <img\n        class=\"mnl-logo\"\n        (click)=\"onLogoClick($event)\"\n        src=\"{{ header.logo }}\"\n      />\n      <span>{{ header.name }}</span>\n    </div>\n    <div fxLayoutAlign=\"end center\" fxFlex>\n      <ng-content select=\"`[mnl-header-content]`\"></ng-content>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".mnl-logo{margin-right:15px}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], menuButonClickEvent: [{
+                type: Output
+            }], logoClick: [{
+                type: Output
+            }] } });
+
+class HighlighterComponent {
+    constructor() {
+        this.height = '40px';
+        this.width = '4px';
+        this.enabled = true;
+    }
+}
+HighlighterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HighlighterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HighlighterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: HighlighterComponent, selector: "mnl-highlighter", inputs: { height: "height", width: "width", enabled: "enabled" }, ngImport: i0, template: "<div [ngClass]=\"{'mnl-bg-primary' : enabled}\" [ngStyle]=\" {'height': height, 'width' : width}\"></div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HighlighterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-highlighter', template: "<div [ngClass]=\"{'mnl-bg-primary' : enabled}\" [ngStyle]=\" {'height': height, 'width' : width}\"></div>" }]
+        }], propDecorators: { height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], enabled: [{
+                type: Input
+            }] } });
+
+class ObjectUtils {
+    /**
+     * Gets a value from an object by composed key
+     * ObjectUtils.getValue({ item: { nodeType: 'cm:folder' }}, 'item.nodeType') ==> 'cm:folder'
+     */
+    static getValue(target, key) {
+        if (!target) {
+            return undefined;
+        }
+        const keys = key.split('.');
+        key = '';
+        do {
+            key += keys.shift();
+            const value = target[key];
+            if (value !== undefined && (typeof value === 'object' || !keys.length)) {
+                target = value;
+                key = '';
+            }
+            else if (!keys.length) {
+                target = undefined;
+            }
+            else {
+                key += '.';
+            }
+        } while (keys.length);
+        return target;
+    }
+    static merge(...objects) {
+        const result = {};
+        objects.forEach((source) => {
+            Object.keys(source).forEach((prop) => {
+                if (prop in result && Array.isArray(result[prop])) {
+                    result[prop] = result[prop].concat(source[prop]);
+                }
+                else if (prop in result && typeof result[prop] === 'object') {
+                    result[prop] = ObjectUtils.merge(result[prop], source[prop]);
+                }
+                else {
+                    result[prop] = source[prop];
+                }
+            });
+        });
+        return result;
+    }
+}
+
+class AppConfigService {
+    constructor(http) {
+        this.http = http;
+        this.config = null;
+    }
+    /**
+     * Use to get the data found in the file (config file)
+     */
+    get(key, defaultValue) {
+        const result = ObjectUtils.getValue(this.config, key);
+        return (result === undefined ? defaultValue : result);
+    }
+    /**
+     * This method:
+     *   Loads "config.json" to get all variables (e.g.: 'app.config.json')
+     */
+    load() {
+        return new Promise(async (resolve) => {
+            const configUrl = `assets/app.config.json`;
+            await this.http.get(configUrl).subscribe((data) => {
+                this.config = Object.assign({}, this.config, data || {});
+                resolve(this.config);
+            }, () => {
+                resolve(this.config);
+            });
+        });
+    }
+}
+AppConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AppConfigService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+AppConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AppConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AppConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class LocalStorageService {
+    constructor() {
+        this.memoryStore = {};
+        this.useLocalStorage = false;
+        this.useLocalStorage = this.isStorageAvailable('localStorage');
+    }
+    set(key, value) {
+        if (this.useLocalStorage) {
+            localStorage.setItem(key, value);
+        }
+        else {
+            this.memoryStore[key] = value;
+        }
+    }
+    get(key) {
+        if (this.useLocalStorage) {
+            return localStorage.getItem(key);
+        }
+        else {
+            return this.memoryStore.hasOwnProperty(key)
+                ? this.memoryStore[key]
+                : null;
+        }
+    }
+    isStorageAvailable(type) {
+        try {
+            const storage = window[type];
+            const key = '__storage_test__';
+            storage.setItem(key, key);
+            storage.removeItem(key, key);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+}
+LocalStorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LocalStorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class UserProfileService {
+    constructor(appConfigService, localStorageService) {
+        this.appConfigService = appConfigService;
+        this.localStorageService = localStorageService;
+        this.userPrefix = '';
+    }
+    getApplicationId() {
+        return this.appConfigService.get('applicationId') ? this.appConfigService.get('applicationId') : '';
+    }
+    setUserPrefix(userPrefix) {
+        this.userPrefix = userPrefix;
+    }
+    getUserPrefix() {
+        return this.userPrefix ? this.userPrefix : '';
+    }
+    setLocale(locale) {
+        this.localStorageService.set(this.getApplicationId() + this.userPrefix + UserProfileService.LOCALE_PREFIX, locale);
+    }
+    getLocale() {
+        return this.localStorageService.get(this.getApplicationId() + this.userPrefix + UserProfileService.LOCALE_PREFIX);
+    }
+}
+UserProfileService.LOCALE_PREFIX = '____locale';
+UserProfileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserProfileService, deps: [{ token: AppConfigService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+UserProfileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserProfileService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserProfileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: AppConfigService }, { type: LocalStorageService }]; } });
+
+/** @dynamic */
+class LocaleService {
+    constructor(config, translate, userProfileService, document) {
+        this.config = config;
+        this.translate = translate;
+        this.userProfileService = userProfileService;
+        this.document = document;
+        this.languages = [];
+        this.initUserLanguage();
+    }
+    initUserLanguage() {
+        this.setActiveLocale(this.getActiveLocale() || this.getDefaultLocale());
+    }
+    setTextOrientation(direction) {
+        document.body.setAttribute('dir', direction);
+    }
+    getTextOrientation() {
+        return document.body.getAttribute('dir');
+    }
+    getLanguages() {
+        this.languages = this.config.get('languages');
+        if (!this.languages) {
+            this.languages = [
+                {
+                    key: 'fr',
+                    label: 'French',
+                    direction: 'ltr',
+                },
+                {
+                    key: 'de',
+                    label: 'German',
+                    direction: 'ltr',
+                },
+                {
+                    key: 'en',
+                    label: 'English',
+                    direction: 'ltr',
+                },
+                {
+                    key: 'ar',
+                    label: 'Arabic',
+                    direction: 'rtl',
+                },
+            ];
+        }
+        return this.languages;
+    }
+    getDefaultLocale() {
+        this.locale = this.userProfileService.getLocale();
+        if (!this.locale) {
+            this.locale = this.config.get('locale')
+                ? this.config.get('locale')
+                : this.translate.getBrowserLang()
+                    ? this.translate.getBrowserLang()
+                    : 'en';
+        }
+        return this.getLanguages().find((e) => e.key === this.locale);
+    }
+    getActiveLocale() {
+        if (this.userProfileService.getLocale()) {
+            return this.getLanguages().find((e) => e.key === this.userProfileService.getLocale());
+        }
+    }
+    setActiveLocale(locale) {
+        if (locale) {
+            this.translate.use(locale.key);
+            this.setTextOrientation(locale.direction);
+            this.userProfileService.setLocale(locale.key);
+        }
+    }
+}
+LocaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocaleService, deps: [{ token: AppConfigService }, { token: i2$2.TranslateService }, { token: UserProfileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+LocaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocaleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LocaleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: AppConfigService }, { type: i2$2.TranslateService }, { type: UserProfileService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class LanguageMenuComponent {
+    constructor(localeService) {
+        this.localeService = localeService;
+        this.showLocaleKeyAsLabel = false;
+        this.showLocaleAsLabel = false;
+        this.languages = [];
+    }
+    ngOnInit() {
+        this.languages = this.localeService.getLanguages();
+        this.localeService.setActiveLocale(this.locale);
+    }
+    onChangeLanguage(language) {
+        this.localeService.setActiveLocale(language);
+    }
+    get locale() {
+        return this.localeService.getActiveLocale() || this.localeService.getDefaultLocale();
+    }
+}
+LanguageMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LanguageMenuComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component });
+LanguageMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: LanguageMenuComponent, selector: "mnl-language-menu", inputs: { showLocaleKeyAsLabel: "showLocaleKeyAsLabel", showLocaleAsLabel: "showLocaleAsLabel" }, ngImport: i0, template: "<button id=\"mnl-locale-button\" mat-menu-item [matMenuTriggerFor]=\"languageMenu\">\n  <ng-container *ngIf=\"showLocaleKeyAsLabel || showLocaleAsLabel; else defaultLabel\">\n    <div *ngIf=\"showLocaleKeyAsLabel\">{{ locale.key | uppercase }}</div>\n    <div *ngIf=\"showLocaleAsLabel\">{{ locale.label }}</div>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <mat-icon>language</mat-icon>\n    {{ \"MNL.LANGUAGE-SELECTOR.LANGUAGES\" | translate }}\n  </ng-template>\n</button>\n<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    *ngFor=\"let language of languages\"\n    (click)=\"onChangeLanguage(language)\"\n    id=\"langMenu\"\n  >\n    {{ language.label }}\n  </button>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LanguageMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-language-menu', template: "<button id=\"mnl-locale-button\" mat-menu-item [matMenuTriggerFor]=\"languageMenu\">\n  <ng-container *ngIf=\"showLocaleKeyAsLabel || showLocaleAsLabel; else defaultLabel\">\n    <div *ngIf=\"showLocaleKeyAsLabel\">{{ locale.key | uppercase }}</div>\n    <div *ngIf=\"showLocaleAsLabel\">{{ locale.label }}</div>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <mat-icon>language</mat-icon>\n    {{ \"MNL.LANGUAGE-SELECTOR.LANGUAGES\" | translate }}\n  </ng-template>\n</button>\n<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    *ngFor=\"let language of languages\"\n    (click)=\"onChangeLanguage(language)\"\n    id=\"langMenu\"\n  >\n    {{ language.label }}\n  </button>\n</mat-menu>\n" }]
+        }], ctorParameters: function () { return [{ type: LocaleService }]; }, propDecorators: { showLocaleKeyAsLabel: [{
+                type: Input
+            }], showLocaleAsLabel: [{
+                type: Input
+            }] } });
+
+class LoginComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.title = '';
+        this.logoImageUrl = './assets/images/logo.png';
+        this.backgroundImageUrl = './assets/images/background.jpg';
+        this.disabled = false;
+        this.login = new EventEmitter();
+    }
+    ngOnInit() {
+        this.initForm();
+    }
+    initForm() {
+        this.formGroup = new UntypedFormGroup({
+            username: new UntypedFormControl('', [Validators.required]),
+            password: new UntypedFormControl('', [Validators.required])
+        });
+    }
+    onSubmit() {
+        if (this.formGroup.valid) {
+            this.login.emit(this.formGroup.value);
+        }
+    }
+    getBackgroundImageUrl() {
+        return this.sanitizer.bypassSecurityTrustStyle(`url(${this.backgroundImageUrl})`);
+    }
+}
+LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LoginComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: LoginComponent, selector: "mnl-login", inputs: { title: "title", logoImageUrl: "logoImageUrl", backgroundImageUrl: "backgroundImageUrl", disabled: "disabled" }, outputs: { login: "login" }, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" class=\"mnl-login-container\" fxFlexFill [style.background-image]=\"getBackgroundImageUrl()\">\n    <mat-card class=\"mnl-login-card\">\n        <form fxLayoutAlign=\"stretch\" fxLayout=\"column\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n            <mat-card-header fxLayoutAlign=\"center center\">\n                <mat-card-title>\n                    <img *ngIf=\"logoImageUrl\" src=\"{{logoImageUrl}}\">\n                </mat-card-title>\n            </mat-card-header>\n            <h3 fxLayoutAlign=\"center center\" class=\"mnl-login-title\" *ngIf=\"title\">{{title | translate}}</h3>\n            <mat-form-field fxFlex=\"100\">\n                <input id=\"username\" matInput placeholder=\"{{'MNL.LOGIN.USERNAME' | translate}}\"\n                    formControlName=\"username\">\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100\">\n                <input id=\"password\" matInput type=\"password\" placeholder=\"{{'MNL.LOGIN.PASSWORD' | translate}}\"\n                    formControlName=\"password\">\n            </mat-form-field>\n            <mat-card-actions fxLayoutAlign=\"center center\">\n                <button id=\"loginButton\" mat-raised-button color=\"accent\" [disabled]=\"disabled || !formGroup.valid\"\n                    type=\"submit\"> {{'MNL.LOGIN.LOGIN_BUTTON' | translate}}</button>\n            </mat-card-actions>\n\n        </form>\n    </mat-card>\n</div>", styles: [".mnl-login-card{min-width:260px}.mnl-login-container{background-size:cover}.mnl-login-title{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i5$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-login', template: "<div fxLayoutAlign=\"center center\" class=\"mnl-login-container\" fxFlexFill [style.background-image]=\"getBackgroundImageUrl()\">\n    <mat-card class=\"mnl-login-card\">\n        <form fxLayoutAlign=\"stretch\" fxLayout=\"column\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n            <mat-card-header fxLayoutAlign=\"center center\">\n                <mat-card-title>\n                    <img *ngIf=\"logoImageUrl\" src=\"{{logoImageUrl}}\">\n                </mat-card-title>\n            </mat-card-header>\n            <h3 fxLayoutAlign=\"center center\" class=\"mnl-login-title\" *ngIf=\"title\">{{title | translate}}</h3>\n            <mat-form-field fxFlex=\"100\">\n                <input id=\"username\" matInput placeholder=\"{{'MNL.LOGIN.USERNAME' | translate}}\"\n                    formControlName=\"username\">\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100\">\n                <input id=\"password\" matInput type=\"password\" placeholder=\"{{'MNL.LOGIN.PASSWORD' | translate}}\"\n                    formControlName=\"password\">\n            </mat-form-field>\n            <mat-card-actions fxLayoutAlign=\"center center\">\n                <button id=\"loginButton\" mat-raised-button color=\"accent\" [disabled]=\"disabled || !formGroup.valid\"\n                    type=\"submit\"> {{'MNL.LOGIN.LOGIN_BUTTON' | translate}}</button>\n            </mat-card-actions>\n\n        </form>\n    </mat-card>\n</div>", styles: [".mnl-login-card{min-width:260px}.mnl-login-container{background-size:cover}.mnl-login-title{opacity:.6}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { title: [{
+                type: Input
+            }], logoImageUrl: [{
+                type: Input
+            }], backgroundImageUrl: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], login: [{
+                type: Output
+            }] } });
+
+class MenuComponent {
+    constructor() {
+        this.menuClick = new EventEmitter();
+    }
+    onMenuClick(menu) {
+        if (this.hasSubMenu(menu)) {
+            this.openMenu(menu);
+            this.onSubMenuClick(menu.subMenus[0], menu);
+        }
+        else {
+            this.deSelectMenus(this.menuData);
+            this.selectMenu(menu);
+            this.menuClick.emit(menu);
+        }
+    }
+    onSubMenuClick(subMenu, menu) {
+        this.deSelectMenus(this.menuData);
+        this.selectMenu(menu);
+        this.selectMenu(subMenu);
+        this.menuClick.emit(subMenu);
+    }
+    deSelectMenus(menus) {
+        if (menus) {
+            for (const menu of menus) {
+                if (menu.selected) {
+                    menu.selected = false;
+                }
+                this.deSelectMenus(menu.subMenus);
+            }
+        }
+    }
+    selectMenu(menu) {
+        if (menu) {
+            menu.selected = true;
+        }
+    }
+    hasSubMenu(menu) {
+        return menu.subMenus && menu.subMenus.length > 0;
+    }
+    toggleMenu(menu, event) {
+        menu.expanded = !menu.expanded;
+        if (event) {
+            event.stopPropagation();
+        }
+    }
+    openMenu(menu) {
+        menu.expanded = true;
+    }
+}
+MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MenuComponent, selector: "mnl-menu", inputs: { menuData: "menuData" }, outputs: { menuClick: "menuClick" }, ngImport: i0, template: "<mat-nav-list *ngFor=\"let menu of menuData\">\n    <a mat-list-item fxLayout=\"row\" (click)=\"onMenuClick(menu)\" id=\"mnl-menu-anchor\">\n        <mnl-highlighter [enabled]=\"menu.selected\"></mnl-highlighter>\n        <mat-icon *ngIf=\"menu.icon; else svgTemplate \">{{menu.icon}}</mat-icon>\n        <ng-template #svgTemplate>\n            <mat-icon svgIcon=\"{{menu.svgIcon}}\"> </mat-icon>\n        </ng-template>\n        <span class=\"mnl-menu\" id=\"mnl-menu\">{{menu.name | translate }}</span>\n        <mat-icon class=\"mnl-menu-button\" *ngIf=\"menu.subMenus\" (click)=\"toggleMenu(menu, $event)\"\n            [ngClass]=\"{'mnl-rotated' : menu.expanded}\">expand_more</mat-icon>\n    </a>\n    <ng-container *ngFor=\"let sub of menu.subMenus\">\n        <a mat-list-item fxLayout=\"row\" class=\"mnl-submenu\" [class.mnl-expanded]=\"menu.expanded\" *ngIf=\"menu.expanded\"\n            (click)=\"onSubMenuClick(sub, menu)\" fxLayout=\"row\" id=\"mnl-submenu-anchor\">\n            <mnl-highlighter [enabled]=\"sub.selected\"></mnl-highlighter>\n            <mat-icon>{{sub.icon}}</mat-icon>\n            <span class=\"mnl-menu\" id=\"mnl-submenu\">{{sub.name | translate }}</span>\n        </a>\n    </ng-container>\n</mat-nav-list>", styles: [".mnl-submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:15px!important}.mnl-submenu.mnl-expanded{transform:scaleY(1)}.mnl-menu{margin-top:5px;margin-left:10px;margin-right:10px}.mnl-menu-button{transition:.3s ease-in-out;transform:rotate(0);margin-top:3px;margin-left:25px}.mnl-menu-button.mnl-rotated{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: HighlighterComponent, selector: "mnl-highlighter", inputs: ["height", "width", "enabled"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-menu', template: "<mat-nav-list *ngFor=\"let menu of menuData\">\n    <a mat-list-item fxLayout=\"row\" (click)=\"onMenuClick(menu)\" id=\"mnl-menu-anchor\">\n        <mnl-highlighter [enabled]=\"menu.selected\"></mnl-highlighter>\n        <mat-icon *ngIf=\"menu.icon; else svgTemplate \">{{menu.icon}}</mat-icon>\n        <ng-template #svgTemplate>\n            <mat-icon svgIcon=\"{{menu.svgIcon}}\"> </mat-icon>\n        </ng-template>\n        <span class=\"mnl-menu\" id=\"mnl-menu\">{{menu.name | translate }}</span>\n        <mat-icon class=\"mnl-menu-button\" *ngIf=\"menu.subMenus\" (click)=\"toggleMenu(menu, $event)\"\n            [ngClass]=\"{'mnl-rotated' : menu.expanded}\">expand_more</mat-icon>\n    </a>\n    <ng-container *ngFor=\"let sub of menu.subMenus\">\n        <a mat-list-item fxLayout=\"row\" class=\"mnl-submenu\" [class.mnl-expanded]=\"menu.expanded\" *ngIf=\"menu.expanded\"\n            (click)=\"onSubMenuClick(sub, menu)\" fxLayout=\"row\" id=\"mnl-submenu-anchor\">\n            <mnl-highlighter [enabled]=\"sub.selected\"></mnl-highlighter>\n            <mat-icon>{{sub.icon}}</mat-icon>\n            <span class=\"mnl-menu\" id=\"mnl-submenu\">{{sub.name | translate }}</span>\n        </a>\n    </ng-container>\n</mat-nav-list>", styles: [".mnl-submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:15px!important}.mnl-submenu.mnl-expanded{transform:scaleY(1)}.mnl-menu{margin-top:5px;margin-left:10px;margin-right:10px}.mnl-menu-button{transition:.3s ease-in-out;transform:rotate(0);margin-top:3px;margin-left:25px}.mnl-menu-button.mnl-rotated{transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { menuData: [{
+                type: Input
+            }], menuClick: [{
+                type: Output
+            }] } });
+
+class UserInitialPipe {
+    transform(value) {
+        let userInitials = '';
+        if (!this.isEmptyObject(value)) {
+            if (value.firstName && value.lastName) {
+                userInitials = value.firstName.substring(0, 1).toUpperCase() + value.lastName.substring(0, 1).toUpperCase();
+            }
+            else if (!value.firstName && value.lastName) {
+                userInitials = this.getUserInitials(value.lastName);
+            }
+            else if (value.firstName && !value.lastName) {
+                userInitials = this.getUserInitials(value.firstName);
+            }
+            else if (!value.firstName && !value.lastName) {
+                userInitials = value.email.substring(0, 1).toUpperCase();
+            }
+        }
+        return userInitials;
+    }
+    isEmptyObject(data) {
+        return (data && (Object.keys(data).length === 0));
+    }
+    getUserInitials(name) {
+        let userInitial = '';
+        if (this.hasWhiteSpace(name.trim())) {
+            const data = name.split(/\s+/);
+            userInitial = data[0].substring(0, 1).toUpperCase() + data[1].substring(0, 1).toUpperCase();
+        }
+        else {
+            userInitial = name.trim().substring(0, 1).toUpperCase();
+        }
+        return userInitial;
+    }
+    hasWhiteSpace(data) {
+        return /\s/g.test(data);
+    }
+}
+UserInitialPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserInitialPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+UserInitialPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: UserInitialPipe, name: "mnlUserInitialPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserInitialPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnlUserInitialPipe'
+                }]
+        }] });
+
+class UserFullnamePipe {
+    transform(value) {
+        let fullName = '';
+        if (!this.isEmptyObject(value)) {
+            if (value.firstName && value.lastName) {
+                fullName = value.firstName + ' ' + value.lastName;
+            }
+            else if (!value.firstName && value.lastName) {
+                fullName = value.lastName;
+            }
+            else if (value.firstName && !value.lastName) {
+                fullName = value.firstName;
+            }
+            else if (!value.firstName && !value.lastName) {
+                fullName = value.email;
+            }
+        }
+        return fullName;
+    }
+    isEmptyObject(data) {
+        return (data && (Object.keys(data).length === 0));
+    }
+}
+UserFullnamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserFullnamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+UserFullnamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: UserFullnamePipe, name: "mnlUserFullName" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UserFullnamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnlUserFullName'
+                }]
+        }] });
+
+class ProfileComponent {
+    constructor() {
+        this.showDisplayName = true;
+        this.userInitialClick = new EventEmitter();
+        this.profileMenuClick = new EventEmitter();
+    }
+    onUserInitialClick(event) {
+        this.userInitialClick.emit(event);
+    }
+    ngOnChanges(changes) {
+        if (changes && changes.userProfileDetails && changes.userProfileDetails.currentValue
+            && changes.userProfileDetails.currentValue.firstName && changes.userProfileDetails.currentValue.lastName
+            && changes.userProfileDetails.currentValue.email) {
+            this.hasUserDetails = true;
+        }
+        else {
+            this.hasUserDetails = false;
+        }
+    }
+}
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ProfileComponent, selector: "mnl-user-profile", inputs: { userProfileDetails: "userProfileDetails", showDisplayName: "showDisplayName" }, outputs: { userInitialClick: "userInitialClick", profileMenuClick: "profileMenuClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"mnl-profile-container\" fxLayoutGap=\"10px\">\n  <span\n    *ngIf=\"showDisplayName && hasUserDetails\"\n    id=\"mnl-userinfo-name\"\n    fxHide.xs\n    >{{ userProfileDetails | mnlUserFullName }}</span\n  >\n  <button\n    *ngIf=\"hasUserDetails\"\n    id=\"mnl-initials-button\"\n    mat-raised-button\n    (click)=\"onUserInitialClick($event)\"\n    mat-icon-button\n  >\n    {{ userProfileDetails | mnlUserInitialPipe }}\n  </button>\n\n  <button\n    *ngIf=\"!hasUserDetails\"\n    id=\"mnl-user-icon-button\"\n    mat-raised-button\n    (click)=\"onUserInitialClick($event)\"\n    mat-icon-button\n  >\n    <mat-icon>person</mat-icon>\n  </button>\n</div>\n", styles: ["#mnl-initials-button{border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: UserInitialPipe, name: "mnlUserInitialPipe" }, { kind: "pipe", type: UserFullnamePipe, name: "mnlUserFullName" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mnl-user-profile', template: "<div id=\"mnl-profile-container\" fxLayoutGap=\"10px\">\n  <span\n    *ngIf=\"showDisplayName && hasUserDetails\"\n    id=\"mnl-userinfo-name\"\n    fxHide.xs\n    >{{ userProfileDetails | mnlUserFullName }}</span\n  >\n  <button\n    *ngIf=\"hasUserDetails\"\n    id=\"mnl-initials-button\"\n    mat-raised-button\n    (click)=\"onUserInitialClick($event)\"\n    mat-icon-button\n  >\n    {{ userProfileDetails | mnlUserInitialPipe }}\n  </button>\n\n  <button\n    *ngIf=\"!hasUserDetails\"\n    id=\"mnl-user-icon-button\"\n    mat-raised-button\n    (click)=\"onUserInitialClick($event)\"\n    mat-icon-button\n  >\n    <mat-icon>person</mat-icon>\n  </button>\n</div>\n", styles: ["#mnl-initials-button{border-radius:20px}\n"] }]
+        }], propDecorators: { userProfileDetails: [{
+                type: Input
+            }], showDisplayName: [{
+                type: Input
+            }], userInitialClick: [{
+                type: Output
+            }], profileMenuClick: [{
+                type: Output
+            }] } });
+
+const MNL_TRANSLATION_RESOURCE = new InjectionToken('Translation Resource');
+function translationLoaderFactory(http, resources) {
+    if (!resources) {
+        resources = [];
+    }
+    else if (!resources.length) {
+        resources = [resources];
+    }
+    resources.push({ prefix: './assets/mnl-commons/i18n/', suffix: '.json' });
+    return new MultiTranslateHttpLoader(http, resources);
+}
+
+class AppConfigPipe {
+    constructor(config) {
+        this.config = config;
+    }
+    transform(value, defaultValue) {
+        return this.config.get(value) || defaultValue || '';
+    }
+}
+AppConfigPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AppConfigPipe, deps: [{ token: AppConfigService }], target: i0.ɵɵFactoryTarget.Pipe });
+AppConfigPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: AppConfigPipe, name: "mnlAppConfig" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AppConfigPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnlAppConfig'
+                }]
+        }], ctorParameters: function () { return [{ type: AppConfigService }]; } });
+
+class TimeAgoPipe {
+    constructor(appConfigService, userProfileService) {
+        this.appConfigService = appConfigService;
+        this.userProfileService = userProfileService;
+        this.defaultLocale = TimeAgoPipe.DEFAULT_LOCALE;
+        this.defaultDateTimeFormat = TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT;
+    }
+    transform(value, dateTimeFormat, locale) {
+        if (value) {
+            const currentLocale = this.userProfileService.getLocale();
+            const currentDateTimeFormat = this.appConfigService.get('dateTimeFormat');
+            const requiredLocale = locale || currentLocale || this.defaultLocale;
+            const requiredDateTimeFormat = dateTimeFormat || currentDateTimeFormat || this.defaultDateTimeFormat;
+            if (differenceInDays(new Date(), new Date(value)) > 7) {
+                const datePipe = new DatePipe(requiredLocale);
+                return datePipe.transform(value, requiredDateTimeFormat);
+            }
+            return formatDistance(new Date(value), new Date(), {
+                includeSeconds: true,
+                addSuffix: true,
+            });
+        }
+        return '';
+    }
+}
+TimeAgoPipe.DEFAULT_LOCALE = 'en-US';
+TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
+TimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TimeAgoPipe, deps: [{ token: AppConfigService }, { token: UserProfileService }], target: i0.ɵɵFactoryTarget.Pipe });
+TimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: TimeAgoPipe, name: "mnlTimeAgo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TimeAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnlTimeAgo',
+                }]
+        }], ctorParameters: function () { return [{ type: AppConfigService }, { type: UserProfileService }]; } });
+
+class LogLevelsEnum extends Number {
+}
+LogLevelsEnum.TRACE = 5;
+LogLevelsEnum.DEBUG = 1;
+LogLevelsEnum.INFO = 2;
+LogLevelsEnum.WARN = 3;
+LogLevelsEnum.ERROR = 4;
+LogLevelsEnum.SILENT = 0;
+let logLevels = [
+    { level: LogLevelsEnum.TRACE, name: 'TRACE' },
+    { level: LogLevelsEnum.DEBUG, name: 'DEBUG' },
+    { level: LogLevelsEnum.INFO, name: 'INFO' },
+    { level: LogLevelsEnum.WARN, name: 'WARN' },
+    { level: LogLevelsEnum.ERROR, name: 'ERROR' },
+    { level: LogLevelsEnum.SILENT, name: 'SILENT' }
+];
+
+/* eslint-disable no-console */
+class LogService {
+    constructor(appConfigService) {
+        this.appConfigService = appConfigService;
+        this.onMessage = new Subject();
+    }
+    get currentLogLevel() {
+        const configLevel = this.appConfigService.get('logLevel');
+        if (configLevel) {
+            return this.getLogLevel(configLevel);
+        }
+        return LogLevelsEnum.ERROR;
+    }
+    error(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.ERROR) {
+            this.messageBus(message, 'ERROR');
+            console.error(message, ...optionalParams);
+        }
+    }
+    debug(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.DEBUG) {
+            this.messageBus(message, 'DEBUG');
+            console.debug(message, ...optionalParams);
+        }
+    }
+    info(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.INFO) {
+            this.messageBus(message, 'INFO');
+            console.info(message, ...optionalParams);
+        }
+    }
+    log(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.TRACE) {
+            this.messageBus(message, 'LOG');
+            console.log(message, ...optionalParams);
+        }
+    }
+    trace(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.TRACE) {
+            this.messageBus(message, 'TRACE');
+            console.trace(message, ...optionalParams);
+        }
+    }
+    warn(message, ...optionalParams) {
+        if (this.currentLogLevel >= LogLevelsEnum.WARN) {
+            this.messageBus(message, 'WARN');
+            console.warn(message, ...optionalParams);
+        }
+    }
+    assert(test, message, ...optionalParams) {
+        if (this.currentLogLevel !== LogLevelsEnum.SILENT) {
+            this.messageBus(message, 'ASSERT');
+            console.assert(test, message, ...optionalParams);
+        }
+    }
+    group(groupTitle, ...optionalParams) {
+        if (this.currentLogLevel !== LogLevelsEnum.SILENT) {
+            console.group(groupTitle, ...optionalParams);
+        }
+    }
+    groupEnd() {
+        if (this.currentLogLevel !== LogLevelsEnum.SILENT) {
+            console.groupEnd();
+        }
+    }
+    getLogLevel(level) {
+        const referencedLevel = logLevels.find((currentLevel) => {
+            return currentLevel.name.toLocaleLowerCase() === level.toLocaleLowerCase();
+        });
+        return referencedLevel ? referencedLevel.level : 4;
+    }
+    messageBus(message, logLevel) {
+        this.onMessage.next({ text: message, type: logLevel });
+    }
+}
+LogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LogService, deps: [{ token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+LogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: AppConfigService }]; } });
+
+registerLocaleData(localeFR);
+registerLocaleData(localeDE);
+registerLocaleData(localeAR);
+class CommonsModule {
+    static forRoot() {
+        return {
+            ngModule: CommonsModule,
+            providers: [
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: loadConfig,
+                    deps: [
+                        AppConfigService,
+                        UserProfileService,
+                        LocalStorageService,
+                        LogService,
+                        LocaleService,
+                    ],
+                    multi: true,
+                },
+            ],
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: CommonsModule,
+        };
+    }
+}
+CommonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CommonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CommonsModule, declarations: [HeaderComponent,
+        MenuComponent,
+        HighlighterComponent,
+        AppConfigPipe,
+        LoginComponent,
+        LanguageMenuComponent,
+        ProfileComponent,
+        UserInitialPipe,
+        TimeAgoPipe,
+        UserFullnamePipe], imports: [CommonModule,
+        MatToolbarModule,
+        FlexLayoutModule,
+        MaterialModule, i2$2.TranslateModule], exports: [HeaderComponent,
+        MenuComponent,
+        HighlighterComponent,
+        AppConfigPipe,
+        LanguageMenuComponent,
+        LoginComponent,
+        ProfileComponent,
+        UserInitialPipe,
+        TimeAgoPipe,
+        UserFullnamePipe,
+        TranslateModule] });
+CommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CommonsModule, imports: [CommonModule,
+        MatToolbarModule,
+        FlexLayoutModule,
+        MaterialModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: translationLoaderFactory,
+                deps: [HttpClient, MNL_TRANSLATION_RESOURCE],
+            },
+        }), TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CommonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HeaderComponent,
+                        MenuComponent,
+                        HighlighterComponent,
+                        AppConfigPipe,
+                        LoginComponent,
+                        LanguageMenuComponent,
+                        ProfileComponent,
+                        UserInitialPipe,
+                        TimeAgoPipe,
+                        UserFullnamePipe,
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        FlexLayoutModule,
+                        MaterialModule,
+                        TranslateModule.forRoot({
+                            loader: {
+                                provide: TranslateLoader,
+                                useFactory: translationLoaderFactory,
+                                deps: [HttpClient, MNL_TRANSLATION_RESOURCE],
+                            },
+                        }),
+                    ],
+                    exports: [
+                        HeaderComponent,
+                        MenuComponent,
+                        HighlighterComponent,
+                        AppConfigPipe,
+                        LanguageMenuComponent,
+                        LoginComponent,
+                        ProfileComponent,
+                        UserInitialPipe,
+                        TimeAgoPipe,
+                        UserFullnamePipe,
+                        TranslateModule,
+                    ],
+                }]
+        }] });
+function loadConfig(config) {
+    const conf = () => config.load();
+    return conf;
+}
+
+/*
+ * Public API Surface of mnl-commons
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppConfigPipe, AppConfigService, CommonsModule, HeaderComponent, HighlighterComponent, LanguageMenuComponent, LocalStorageService, LocaleService, LogLevelsEnum, LogService, LoginComponent, MNL_TRANSLATION_RESOURCE, MaterialModule, MenuComponent, ProfileComponent, TimeAgoPipe, UserFullnamePipe, UserInitialPipe, UserProfileService, loadConfig, logLevels, modules, translationLoaderFactory };
+//# sourceMappingURL=muraai-mnl-commons.mjs.map