@net7/boilerplate-common 3.0.1-rc.2

package/fesm2020/net7-boilerplate-common.mjs

@@ -0,0 +1,1164 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, Component, Input, NgModule } from '@angular/core';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+import * as i6 from '@n7-frontend/components';
+import { DvComponentsLibModule } from '@n7-frontend/components';
+import { ReplaySubject, empty, Subject, of } from 'rxjs';
+import { map, catchError, takeUntil, filter, tap } from 'rxjs/operators';
+import { LayoutBuilder, LayoutDataSource, EventHandler, DataSource, _t } from '@n7-frontend/core';
+import { hideAll } from 'tippy.js';
+import * as i1$1 from '@angular/router';
+import { NavigationStart } from '@angular/router';
+import * as i5 from '@angular/platform-browser';
+import { merge } from 'lodash';
+import slugify from 'slugify';
+
+class ConfigurationService {
+    constructor() {
+        this.defaults = {};
+        this.get = (key) => this.defaults[key];
+        this.set = (key, value) => { this.defaults[key] = value; };
+    }
+}
+ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ConfigurationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LayoutsConfigurationService {
+    constructor(config) {
+        this.config = config;
+        this.defaults = {};
+        this.get = (key) => this.defaults[key];
+        this.set = (key, value) => { this.defaults[key] = value; };
+        if (this.config?.layouts) {
+            Object.keys(this.config.layouts).forEach((key) => {
+                this.set(key, this.config.layouts[key]);
+            });
+        }
+    }
+}
+LayoutsConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LayoutsConfigurationService, deps: [{ token: 'config' }], target: i0.ɵɵFactoryTarget.Injectable });
+LayoutsConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LayoutsConfigurationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LayoutsConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }]; } });
+
+class MainStateService {
+    constructor() {
+        // custom streams
+        this.custom = {};
+        // default streams
+        this.default = {
+            headTitle: new ReplaySubject(),
+            pageTitle: new ReplaySubject(),
+            subnav: new ReplaySubject(),
+            breadcrumbs: new ReplaySubject(),
+            filters: new ReplaySubject(),
+            header: new ReplaySubject(),
+        };
+        this.get$ = (key) => this._get('default', key);
+        this.getCustom$ = (key) => this._get('custom', key);
+        this.update = (key, newValue) => this._update('default', key, newValue);
+        this.updateCustom = (key, newValue) => this._update('custom', key, newValue);
+        this.has = (key) => !!this.default[key];
+        this.hasCustom = (key) => !!this.custom[key];
+    }
+    addCustom(key, stream$) {
+        if (this.custom[key])
+            throw Error(`custom stream ${key} exists!`);
+        this.custom[key] = stream$;
+    }
+    _update(type, key, newValue) {
+        if (!this[type])
+            throw Error(`${type} stream group does not exists!`);
+        if (!this[type][key])
+            throw Error(`${type} stream ${key} does not exists!`);
+        this[type][key].next(newValue);
+    }
+    _get(type, key) {
+        if (!this[type])
+            throw Error(`${type} stream group does not exists!`);
+        if (!this[type][key])
+            throw Error(`${type} stream ${key} does not exists!`);
+        return this[type][key];
+    }
+}
+MainStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MainStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MainStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MainStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MainStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const DEFAULT_TREE_DEPTH = 15;
+class ApolloProvider {
+    constructor(http, configuration) {
+        this.http = http;
+        this.configuration = configuration;
+    }
+    request$(providerConfig, requestId, options) {
+        const { params, method, httpOptions } = options;
+        const treeDepth = this.configuration.get('treeDepth') || DEFAULT_TREE_DEPTH;
+        const config = providerConfig.config ? providerConfig.config(treeDepth) : {};
+        let query;
+        if (config && config[requestId]) {
+            query = config[requestId];
+        }
+        query = query || {};
+        const { queryName } = query;
+        let { queryBody } = query;
+        // config query control
+        if (!queryName || !queryBody) {
+            throw Error(`No config found for requestId '${requestId}'`);
+        }
+        if (params) {
+            const paramsStr = this.makeParamsStr(params);
+            queryBody = queryBody.replace('__PARAMS__', paramsStr);
+        }
+        else {
+            queryBody = queryBody.replace('(__PARAMS__)', '');
+        }
+        let source$;
+        if (method && method === 'GET') {
+            source$ = this.http.get(providerConfig.baseUrl);
+        }
+        else {
+            source$ = this.http.post(providerConfig.baseUrl, { query: queryBody }, httpOptions);
+        }
+        return source$.pipe(map((response) => response.data[queryName]));
+    }
+    makeParamsStr(params) {
+        const paramsStr = [];
+        Object.keys(params).forEach((key) => {
+            if (Array.isArray(params[key])) {
+                const arrStr = [];
+                params[key].forEach((val) => {
+                    if (typeof val === 'object') {
+                        const subParamsStr = this.makeParamsStr(val);
+                        arrStr.push(`{ ${subParamsStr} }`);
+                    }
+                    else if (typeof val === 'number' || typeof val === 'boolean' || val === null) {
+                        arrStr.push(`${val}`);
+                    }
+                    else {
+                        arrStr.push(`"${val}"`);
+                    }
+                });
+                paramsStr.push(`${key}: [${arrStr.join(',')}]`);
+            }
+            else if (typeof params[key] === 'object' && params[key]) {
+                const subParamsStr = this.makeParamsStr(params[key]);
+                paramsStr.push(`${key}: { ${subParamsStr} }`);
+            }
+            else if (typeof params[key] === 'string' && key.indexOf('$') === 0) {
+                paramsStr.push(`${key.replace('$', '')}: ${params[key]}`);
+            }
+            else if (typeof params[key] === 'number' || typeof params[key] === 'boolean' || params[key] === null) {
+                paramsStr.push(`${key}: ${params[key]}`);
+            }
+            else {
+                paramsStr.push(`${key}: "${params[key]}"`);
+            }
+        });
+        return paramsStr.join(' ');
+    }
+}
+ApolloProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ApolloProvider, deps: [{ token: i1.HttpClient }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ApolloProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ApolloProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ApolloProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: ConfigurationService }]; } });
+
+class RestProvider {
+    constructor(http) {
+        this.http = http;
+    }
+    request$(providerConfig, requestId, options = {}) {
+        const { params, httpOptions, urlParams = '', } = options;
+        let { method } = options;
+        let point;
+        // default method
+        if (!method) {
+            method = providerConfig.defaultMethod || 'GET';
+        }
+        if (providerConfig.config && providerConfig.config[requestId]) {
+            point = providerConfig.config[requestId];
+        }
+        // config point control
+        if (!point) {
+            throw Error(`No config found for requestId "${requestId}"`);
+        }
+        if (method === 'POST' || method === 'PUT') {
+            return this.http[method.toLowerCase()](providerConfig.baseUrl + point + urlParams, params, httpOptions);
+        }
+        if (method === 'GET' || method === 'DELETE') {
+            return this.http[method.toLowerCase()](providerConfig.baseUrl + point + urlParams, httpOptions);
+        }
+        throw Error(`Rest method ${method} not supported`);
+    }
+}
+RestProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RestProvider, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+RestProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RestProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RestProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+class CommunicationService {
+    constructor(config, apollo, rest) {
+        this.config = config;
+        this.apollo = apollo;
+        this.rest = rest;
+        try {
+            this.communicationConfig = this.config.get('communication');
+            this.defaultProvider = this.communicationConfig.defaultProvider;
+        }
+        catch (err) {
+            throw Error('No communications.defaultProvider setted in config');
+        }
+    }
+    request$(requestId, options = {}, provider) {
+        const activeProvider = provider || this.defaultProvider;
+        const activeProviderConfig = this.communicationConfig.providers[activeProvider];
+        if (!activeProviderConfig) {
+            throw Error(`There is no config for "${activeProvider}" provider`);
+        }
+        // provider.type control for retrocompatibility
+        const activeProviderType = activeProviderConfig.type || activeProvider;
+        if (!this[activeProviderType]) {
+            throw Error(`There is no "${activeProviderType}" provider type`);
+        }
+        const { onError } = options;
+        return this[activeProviderType].request$(activeProviderConfig, requestId, options)
+            .pipe(catchError((error) => this.handleError(error, onError)));
+    }
+    handleError(error, onError) {
+        if (onError) {
+            onError(error);
+        }
+        else {
+            console.warn('No error handler for communication request', error);
+        }
+        return empty();
+    }
+}
+CommunicationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CommunicationService, deps: [{ token: ConfigurationService }, { token: ApolloProvider }, { token: RestProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+CommunicationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CommunicationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CommunicationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ApolloProvider }, { type: RestProvider }]; } });
+
+class AbstractLayout {
+    constructor(config) {
+        this.config = config;
+        this.widgets = this.config.widgets;
+        this.lb = new LayoutBuilder(this.config.layoutId);
+    }
+    onInit() {
+        // on ready
+        this.lb.ready$.subscribe(() => {
+            this.lb.eventHandler.emitInner('init', this.initPayload());
+        });
+        const LayoutDS = this.config.layoutDS;
+        const LayoutEH = this.config.layoutEH;
+        this.lb.init({
+            widgetsConfig: this.widgets,
+            widgetsDataSources: this.config.widgetsDataSources,
+            widgetsEventHandlers: this.config.widgetsEventHandlers,
+            dataSource: new LayoutDS(),
+            eventHandler: new LayoutEH(),
+        });
+    }
+    onDestroy() {
+        this.lb.eventHandler.emitInner('destroy');
+    }
+}
+
+class MainLayoutDS extends LayoutDataSource {
+    onInit({ configuration, mainState, router, options, titleService, route, }) {
+        this.configuration = configuration;
+        this.mainState = mainState;
+        this.router = router;
+        this.route = route;
+        this.titleService = titleService;
+        this.options = options;
+        // update header
+        if (this.configuration.get('header')) {
+            this.one('header').update(this.configuration.get('header'));
+        }
+        if (this.configuration.get('footer')) {
+            this.one('footer').update(this.configuration.get('footer'));
+        }
+        // main state updates
+        this.mainState.get$('headTitle').subscribe((val) => {
+            this.titleService.setTitle(val);
+        });
+        this.mainState.get$('pageTitle').subscribe((val) => {
+            this.pageTitle = val;
+        });
+        this.mainState.get$('subnav').subscribe((val) => {
+            this.one('subnav').update(val);
+        });
+        this.mainState.get$('breadcrumbs').subscribe((val) => {
+            this.one('breadcrumbs').update(val);
+        });
+        this.mainState.get$('header').subscribe((val) => {
+            this.one('header').update(val);
+        });
+        // mainState test
+        /* this.mainState.addCustom('customNav', new Subject());
+        this.mainState.get$('pageTitle').subscribe(val => console.log('pageTitle', val));
+        this.mainState.getCustom$('customNav').subscribe(val => console.log('customNav', val));
+    
+        this.mainState.update('pageTitle', 'hola');
+        this.mainState.updateCustom('customNav', {'hello': 'mundo!'});
+    
+        setTimeout(() => {
+          this.mainState.update('pageTitle', 'chao');
+          this.mainState.updateCustom('customNav', {'hello': 'world!'});
+          console.log('has', {
+            'pageSubTitle' : this.mainState.has('pageSubTitle'),
+            'customNav' : this.mainState.hasCustom('customNav'),
+            'customNavs' : this.mainState.has('customNavs'),
+          });
+        }, 5000); */
+    }
+    // navigate emitter (click) handler
+    onNavigate(payload) {
+        // router navigation
+        if (payload.handler === 'router') {
+            const { path, queryParams } = payload;
+            // path control
+            if (!path)
+                throw Error('onNavigate: no path for router navigate');
+            if (queryParams) {
+                this.router.navigate(path, {
+                    relativeTo: this.route,
+                    queryParams,
+                    queryParamsHandling: 'merge',
+                });
+            }
+            else {
+                this.router.navigate(path);
+            }
+            // on change
+            this._onRouterNavigate();
+        }
+    }
+    // links routerLink change handler
+    onRouterChanged() {
+        hideAll();
+    }
+    _onRouterNavigate() {
+        // hide tippy
+        hideAll();
+    }
+}
+
+class MainLayoutEH extends EventHandler {
+    constructor() {
+        super(...arguments);
+        this.destroyed$ = new Subject();
+    }
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'main-layout.init':
+                    this.dataSource.onInit(payload);
+                    this.mainState = payload.mainState;
+                    this.route = payload.route;
+                    this.router = payload.router;
+                    this._listenRouterChanges();
+                    this._listenMainStateChanges();
+                    break;
+                case 'main-layout.destroy':
+                    this.destroyed$.next();
+                    break;
+                default:
+                    break;
+            }
+        });
+        // listen to global events
+        EventHandler.globalEvents$.pipe(takeUntil(this.destroyed$)).subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'global.navigate':
+                    this.dataSource.onNavigate(payload);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    _listenRouterChanges() {
+        this.route.queryParams.pipe(filter((params) => {
+            if (Object.keys(params).length)
+                return true;
+            return false;
+        })).subscribe((params) => {
+            this.emitGlobal('queryparams', params);
+        });
+        // router changed
+        this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
+            this.emitOuter('routerchange');
+            this.dataSource.onRouterChanged();
+        });
+    }
+    _listenMainStateChanges() {
+        this.mainState.addCustom('currentNav', new Subject());
+        this.mainState.getCustom$('currentNav').subscribe((val) => {
+            this.emitOuter('currentnavchange', val);
+        });
+    }
+}
+
+const MOBILE_CLASS = 'is-mobile-nav-displayed';
+const ACTIVE_CLASS = 'is-active';
+class HeaderDS extends DataSource {
+    transform(data) {
+        if (!data) {
+            return null;
+        }
+        return {
+            ...data,
+            menuToggle: {
+                open: {
+                    payload: 'mobile-open'
+                },
+                close: {
+                    payload: 'mobile-close'
+                }
+            }
+        };
+    }
+    onCurrentNavChange(payload) {
+        this.output.nav.items.forEach((item) => {
+            this.updateItemClass(item, payload);
+            if (item.subnav) {
+                item.subnav.forEach((subNavItem) => {
+                    this.updateItemClass(subNavItem, payload);
+                });
+            }
+        });
+    }
+    onRouterChange() {
+        if (!this.output) {
+            return;
+        }
+        let { classes } = this.output;
+        classes = classes || '';
+        classes = classes.split(' ');
+        if (classes.includes(MOBILE_CLASS)) {
+            classes.splice(classes.indexOf(MOBILE_CLASS), 1);
+            this.output.classes = classes.join(' ');
+        }
+    }
+    onClick(payload) {
+        // mobile control
+        if (['mobile-open', 'mobile-close'].includes(payload)) {
+            let { classes } = this.output;
+            classes = classes || '';
+            classes = classes.split(' ');
+            if (classes.includes(MOBILE_CLASS)) {
+                classes.splice(classes.indexOf(MOBILE_CLASS), 1);
+            }
+            else {
+                classes.push(MOBILE_CLASS);
+            }
+            this.output.classes = classes.join(' ');
+        }
+    }
+    updateItemClass(item, payload) {
+        let itemClasses = [];
+        if (item.classes) {
+            itemClasses = itemClasses.concat(item.classes.split(' '));
+        }
+        if (item._meta.id === payload && !itemClasses.includes(ACTIVE_CLASS)) {
+            itemClasses.push(ACTIVE_CLASS);
+        }
+        else if (itemClasses.includes(ACTIVE_CLASS)) {
+            itemClasses.splice(itemClasses.indexOf(ACTIVE_CLASS, 1));
+        }
+        item.classes = itemClasses.join(' ');
+    }
+}
+
+class SubnavDS extends DataSource {
+    transform(data) {
+        return {
+            classes: 'main-subnav',
+            items: data,
+        };
+    }
+    setActive(id) {
+        this.output.items.forEach((item) => {
+            if (item._meta.id === id) {
+                item.classes = 'is-current';
+                item._meta.isActive = true;
+            }
+            else {
+                item.classes = '';
+                item._meta.isActive = false;
+            }
+        });
+    }
+    getActive() {
+        return this.output.items.filter((item) => item._meta.isActive)[0] || null;
+    }
+}
+
+class BreadcrumbsDS extends DataSource {
+    transform(data) {
+        return data;
+    }
+}
+
+class FacetsDS extends DataSource {
+    transform({ fields }) {
+        const { searchModel } = this.options;
+        this.searchModel = searchModel;
+        return fields;
+    }
+}
+
+class FooterDS extends DataSource {
+    transform(data) {
+        if (!data) {
+            return null;
+        }
+        return data;
+    }
+}
+
+class SmartPaginationDS extends DataSource {
+    constructor() {
+        super(...arguments);
+        this.paginationBuilder = (tp, cp, pl, m, href, qp) => {
+            const result = [];
+            /*
+              tp - total pages
+              cp - current page
+              pl - page limit
+              m - pagination mode (href or payloads)
+              href - href for anchor wrapper
+              qp - query params for pagination
+            */
+            let limit = pl;
+            if (tp <= limit) {
+                limit = tp - 1;
+            }
+            if (limit) {
+                let lp; // last page
+                let fp; // first page
+                if (cp > Math.floor(limit / 2)) {
+                    if (tp === 2) {
+                        lp = tp;
+                        fp = 1;
+                        // when currentPage is after half-point
+                        // (example: [ 14 ][ 15 ][!16!][ 17 ][ 18 ])
+                    }
+                    else if (cp < (tp - Math.floor(limit / 2))) {
+                        lp = cp / 1 + Math.floor(limit / 2);
+                        fp = cp / 1 - Math.floor(limit / 2);
+                    }
+                    else {
+                        lp = tp;
+                        fp = cp - limit + (tp - cp);
+                    }
+                }
+                else {
+                    // when currentPage is before half-point
+                    // (example: [ 1 ][!2!][ 3 ][ 4 ][ 5 ])
+                    lp = limit + 1;
+                    fp = 1;
+                }
+                for (let i = fp; i <= lp; i += 1) {
+                    result.push({
+                        text: String(i),
+                        classes: cp === i ? 'is-active' : '',
+                        anchor: cp !== i ? this._getPaginationAnchor(i, m, href, qp) : null,
+                    });
+                }
+            }
+            else {
+                result.push({
+                    text: '1',
+                    classes: cp === 1 ? 'is-active' : '',
+                    anchor: cp !== 1 ? this._getPaginationAnchor(1, m, href, qp) : null,
+                });
+                for (let i = 1; i < tp; i += 1) {
+                    result.push({
+                        text: String(i + 1),
+                        classes: cp === i + 1 ? 'is-active' : '',
+                        anchor: cp !== i + 1 ? this._getPaginationAnchor(i + 1, m, href, qp) : null,
+                    });
+                }
+            }
+            return {
+                links: result,
+                first: {
+                    classes: cp === 1 ? 'is-disabled' : '',
+                    anchor: cp !== 1 ? this._getPaginationAnchor(1, m, href, qp) : null,
+                },
+                prev: {
+                    classes: cp === 1 ? 'is-disabled' : '',
+                    anchor: cp !== 1 ? this._getPaginationAnchor(cp / 1 - 1, m, href, qp) : null,
+                },
+                next: {
+                    classes: cp === tp ? 'is-disabled' : '',
+                    anchor: cp !== tp ? this._getPaginationAnchor(cp / 1 + 1, m, href, qp) : null,
+                },
+                last: {
+                    classes: cp === tp ? 'is-disabled' : '',
+                    anchor: cp !== tp ? this._getPaginationAnchor(tp, m, href, qp) : null,
+                },
+            };
+        };
+    }
+    transform(data) {
+        const { totalPages, currentPage, pageLimit, sizes } = data;
+        const { mode, href, queryParams } = this.options;
+        // ===== WARNINGS =====
+        if (!['href', 'payload'].includes(mode)) {
+            console.warn('(smart-pagination) The "mode" option is incorrect. Please specify "href" or "payload" as the mode option.');
+        }
+        const { links, first, prev, next, last, } = this.paginationBuilder(totalPages, +currentPage, pageLimit, mode, href, queryParams);
+        return {
+            first,
+            prev,
+            next,
+            last,
+            links,
+            select: sizes ? {
+                label: sizes.label || _t('search#resultsamount'),
+                options: sizes.list.map((s) => ({
+                    text: s,
+                    selected: s === sizes.active,
+                })),
+                payload: 'select-size',
+            } : null,
+        };
+    }
+    _getPaginationAnchor(page, mode, href, queryParams) {
+        switch (mode) {
+            case 'payload':
+                return {
+                    payload: { source: 'pagination', page },
+                };
+            case 'href':
+                return {
+                    href: queryParams ? href : href + page,
+                    queryParams: queryParams ? {
+                        ...queryParams,
+                        page,
+                    } : null,
+                };
+            default:
+                break;
+        }
+        return {};
+    }
+}
+
+var DS = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    HeaderDS: HeaderDS,
+    SubnavDS: SubnavDS,
+    BreadcrumbsDS: BreadcrumbsDS,
+    FacetsDS: FacetsDS,
+    FooterDS: FooterDS,
+    SmartPaginationDS: SmartPaginationDS
+});
+
+class HeaderEH extends EventHandler {
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'header.click':
+                    this.dataSource.onClick(payload);
+                    break;
+                default:
+                    break;
+            }
+        });
+        this.outerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'main-layout.currentnavchange':
+                    this.dataSource.onCurrentNavChange(payload);
+                    break;
+                case 'main-layout.routerchange':
+                    this.dataSource.onRouterChange();
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+
+class SubnavEH extends EventHandler {
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'subnav.click':
+                    // navigate control
+                    if (payload.source === 'navigate') {
+                        this.emitGlobal('navigate', payload);
+                    }
+                    // global signal
+                    this.emitGlobal(type, payload);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+
+class BreadcrumbsEH extends EventHandler {
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'breadcrumbs.click':
+                    // navigate control
+                    if (payload.source === 'navigate') {
+                        this.emitGlobal('navigate', payload);
+                    }
+                    // global signal
+                    this.emitGlobal(type, payload);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+
+class FooterEH extends EventHandler {
+    listen() {
+        // no events
+    }
+}
+
+class SmartPaginationEH extends EventHandler {
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'n7-smart-pagination.change':
+                    this.emitOuter('change', payload);
+                    break;
+                case 'n7-smart-pagination.click':
+                    this.emitOuter('click', payload);
+                    break;
+                default:
+                    console.warn('unhandled inner event of type', type);
+                    break;
+            }
+        });
+    }
+}
+
+var EH = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    HeaderEH: HeaderEH,
+    SubnavEH: SubnavEH,
+    BreadcrumbsEH: BreadcrumbsEH,
+    FooterEH: FooterEH,
+    SmartPaginationEH: SmartPaginationEH
+});
+
+const MainLayoutConfig = {
+    layoutId: 'main-layout',
+    widgets: [{
+            id: 'header',
+        }, {
+            id: 'subnav',
+        }, {
+            id: 'breadcrumbs',
+        }, {
+            id: 'footer',
+        }],
+    layoutDS: MainLayoutDS,
+    layoutEH: MainLayoutEH,
+    widgetsDataSources: DS,
+    widgetsEventHandlers: EH,
+    options: {
+    // TODO
+    },
+};
+
+class MainLayoutComponent extends AbstractLayout {
+    constructor(router, route, configuration, layoutsConfiguration, mainState, titleService) {
+        super(layoutsConfiguration.get('MainLayoutConfig') || MainLayoutConfig);
+        this.router = router;
+        this.route = route;
+        this.configuration = configuration;
+        this.layoutsConfiguration = layoutsConfiguration;
+        this.mainState = mainState;
+        this.titleService = titleService;
+    }
+    initPayload() {
+        return {
+            configuration: this.configuration,
+            mainState: this.mainState,
+            router: this.router,
+            route: this.route,
+            titleService: this.titleService,
+            options: this.config.options || {},
+        };
+    }
+    ngOnInit() {
+        this.onInit();
+    }
+    ngOnDestroy() {
+        this.onDestroy();
+    }
+}
+MainLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MainLayoutComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: ConfigurationService }, { token: LayoutsConfigurationService }, { token: MainStateService }, { token: i5.Title }], target: i0.ɵɵFactoryTarget.Component });
+MainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: MainLayoutComponent, selector: "main-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"n7-main-layout\" id=\"main-layout\">\n    <div class=\"n7-page-content\">\n        <n7-header\n            [data]=\"lb.widgets['header'].ds.out$ | async\"\n            [emit]=\"lb.widgets['header'].emit\">\n        </n7-header>\n        <main class=\"n7-content\">\n            <div class=\"n7-top-page-bar\">\n                <div class=\"n7-top-page-bar__main\"></div>\n            </div>\n            <div class=\"n7-alert-bar\">\n                <!--<n7-alert\n                [attr.id]=\"'main-layout-alert'\"\n                [data]=\"lb.dataSource.alertData$ | async\"\n                [emit]=\"lb.dataSource.closeAlert.bind(lb.dataSource)\"></n7-alert>-->\n            </div>\n            <ng-content></ng-content>\n        </main>\n    </div>\n    <n7-footer\n        [data]=\"lb.widgets['footer'].ds.out$ | async\"\n        [emit]=\"lb.widgets['footer'].emit\">\n    </n7-footer>\n</div>\n", components: [{ type: i6.HeaderComponent, selector: "n7-header", inputs: ["data", "emit"] }, { type: i6.FooterComponent, selector: "n7-footer", inputs: ["data", "emit"] }], pipes: { "async": i7.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MainLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'main-layout', template: "<div class=\"n7-main-layout\" id=\"main-layout\">\n    <div class=\"n7-page-content\">\n        <n7-header\n            [data]=\"lb.widgets['header'].ds.out$ | async\"\n            [emit]=\"lb.widgets['header'].emit\">\n        </n7-header>\n        <main class=\"n7-content\">\n            <div class=\"n7-top-page-bar\">\n                <div class=\"n7-top-page-bar__main\"></div>\n            </div>\n            <div class=\"n7-alert-bar\">\n                <!--<n7-alert\n                [attr.id]=\"'main-layout-alert'\"\n                [data]=\"lb.dataSource.alertData$ | async\"\n                [emit]=\"lb.dataSource.closeAlert.bind(lb.dataSource)\"></n7-alert>-->\n            </div>\n            <ng-content></ng-content>\n        </main>\n    </div>\n    <n7-footer\n        [data]=\"lb.widgets['footer'].ds.out$ | async\"\n        [emit]=\"lb.widgets['footer'].emit\">\n    </n7-footer>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: ConfigurationService }, { type: LayoutsConfigurationService }, { type: MainStateService }, { type: i5.Title }]; } });
+
+class Page404LayoutDS extends LayoutDataSource {
+    onInit({ options }) {
+        this.options = options;
+    }
+}
+
+class Page404LayoutEH extends EventHandler {
+    constructor() {
+        super(...arguments);
+        this.destroyed$ = new Subject();
+    }
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case 'n7-page404-layout.init':
+                    this.dataSource.onInit(payload);
+                    break;
+                case 'n7-page404-layout.destroy':
+                    this.destroyed$.next();
+                    break;
+                default:
+                    break;
+            }
+        });
+        // listen to global events
+        /* EventHandler.globalEvents$.pipe(
+          takeUntil(this.destroyed$)
+        ).subscribe(({type, payload}) => {
+          switch(type){
+            case 'global.navigate':
+              this.dataSource.onNavigate(payload);
+              break;
+    
+            default:
+              break;
+          }
+        }); */
+    }
+}
+
+const Page404LayoutConfig = {
+    layoutId: 'n7-page404-layout',
+    widgets: [],
+    layoutDS: Page404LayoutDS,
+    layoutEH: Page404LayoutEH,
+    widgetsDataSources: DS,
+    widgetsEventHandlers: EH,
+    options: {
+    // TODO
+    },
+};
+
+class Page404LayoutComponent extends AbstractLayout {
+    constructor(layoutsConfiguration) {
+        super(layoutsConfiguration.get('Page404LayoutConfig') || Page404LayoutConfig);
+    }
+    initPayload() {
+        return {
+            options: this.config.options || {},
+        };
+    }
+    ngOnInit() {
+        this.onInit();
+    }
+    ngOnDestroy() {
+        this.onDestroy();
+    }
+}
+Page404LayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Page404LayoutComponent, deps: [{ token: LayoutsConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+Page404LayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Page404LayoutComponent, selector: "n7-page404-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"n7-page404-layout\">\n    404 - Resource not found\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Page404LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-page404-layout', template: "<div class=\"n7-page404-layout\">\n    404 - Resource not found\n</div>" }]
+        }], ctorParameters: function () { return [{ type: LayoutsConfigurationService }]; } });
+
+class SmartPaginationComponent {
+    constructor() {
+        this.handlePaginationEvent.bind(this);
+    }
+    handlePaginationEvent(type, payload) {
+        if (!this.emit)
+            return;
+        this.emit('change', payload);
+    }
+}
+SmartPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SmartPaginationComponent, selector: "n7-smart-pagination", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div class=\"n7-smart-pagination\" *ngIf=\"data\">\n  <n7-pagination\n    [data]=\"data\"\n    [emit]=\"emit\">\n  </n7-pagination>\n</div>", components: [{ type: i6.PaginationComponent, selector: "n7-pagination", inputs: ["data", "emit"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SmartPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-smart-pagination', template: "<div class=\"n7-smart-pagination\" *ngIf=\"data\">\n  <n7-pagination\n    [data]=\"data\"\n    [emit]=\"emit\">\n  </n7-pagination>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
+const COMPONENTS = [
+    MainLayoutComponent,
+    Page404LayoutComponent,
+    SmartPaginationComponent,
+];
+class N7BoilerplateCommonModule {
+    static forRoot(config) {
+        return {
+            ngModule: N7BoilerplateCommonModule,
+            providers: [
+                MainStateService,
+                ConfigurationService,
+                LayoutsConfigurationService,
+                CommunicationService,
+                { provide: 'config', useValue: config },
+            ],
+        };
+    }
+}
+N7BoilerplateCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: N7BoilerplateCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+N7BoilerplateCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: N7BoilerplateCommonModule, declarations: [MainLayoutComponent,
+        Page404LayoutComponent,
+        SmartPaginationComponent], imports: [CommonModule,
+        HttpClientModule,
+        DvComponentsLibModule], exports: [MainLayoutComponent,
+        Page404LayoutComponent,
+        SmartPaginationComponent] });
+N7BoilerplateCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: N7BoilerplateCommonModule, providers: [], imports: [[
+            CommonModule,
+            HttpClientModule,
+            DvComponentsLibModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: N7BoilerplateCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: COMPONENTS,
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        DvComponentsLibModule,
+                    ],
+                    providers: [],
+                    exports: COMPONENTS
+                }]
+        }] });
+
+class JsonConfigService {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+    }
+    load(path) {
+        return this.http.get(path).pipe(catchError(() => of({})), tap((response) => this._handleResponse(response))).toPromise();
+    }
+    _handleResponse(response) {
+        // set loaded json config
+        if (response) {
+            Object.keys(response).forEach((key) => {
+                const oldValue = this.config.get(key);
+                const newValue = response[key];
+                this.config.set(key, merge(oldValue, newValue));
+            });
+            // config keys colors
+            if (response['config-keys']) {
+                const headTag = document.querySelector('head');
+                const styleElement = document.createElement('style');
+                const styles = [];
+                Object.keys(response['config-keys']).forEach((key) => {
+                    const configKey = response['config-keys'][key] || {};
+                    const className = configKey['class-name'];
+                    if (configKey.color && configKey.color.hex) {
+                        // add css class
+                        styles.push(`--color-${className}: ${configKey.color.hex};`);
+                    }
+                });
+                if (styles.length) {
+                    styles.unshift(':root {');
+                    styles.push('}');
+                    styleElement.appendChild(document.createTextNode(styles.join('\n')));
+                    headTag.appendChild(styleElement);
+                }
+            }
+        }
+    }
+}
+JsonConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: JsonConfigService, deps: [{ token: i1.HttpClient }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
+JsonConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: JsonConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: JsonConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: ConfigurationService }]; } });
+
+class LocalConfigService {
+    constructor(config) {
+        this.config = config;
+    }
+    load(config) {
+        return of(true).pipe(tap(() => {
+            if (config) {
+                Object.keys(config).forEach((key) => this.config.set(key, config[key]));
+                // config keys colors
+                if (config['config-keys']) {
+                    const headTag = document.querySelector('head');
+                    const styleElement = document.createElement('style');
+                    const styles = [];
+                    Object.keys(config['config-keys']).forEach((key) => {
+                        const configKey = config['config-keys'][key] || {};
+                        const className = configKey['class-name'];
+                        if (configKey.color && configKey.color.hex) {
+                            // add css class
+                            styles.push(`--color-${className}: ${configKey.color.hex};`);
+                        }
+                    });
+                    if (styles.length) {
+                        styles.unshift(':root {');
+                        styles.push('}');
+                        styleElement.appendChild(document.createTextNode(styles.join('\n')));
+                        headTag.appendChild(styleElement);
+                    }
+                }
+            }
+        })).toPromise();
+    }
+}
+LocalConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LocalConfigService, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
+LocalConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LocalConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LocalConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+// main layout
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const domParser = new DOMParser();
+const helpers = {
+    prettifySnakeCase(key, label) {
+        if (typeof label === 'string') {
+            return label;
+        }
+        return (key || '').split('_').map((word, index) => (index === 0 ? this.ucFirst(word) : word)).join(' ');
+    },
+    ucFirst(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    },
+    slugify(str) {
+        if (!str) {
+            return '';
+        }
+        const parsedDoc = domParser.parseFromString(str, 'text/html');
+        let parsedString = parsedDoc.body.textContent || '';
+        // custom replacements
+        parsedString = parsedString.replace(/\//g, '-');
+        return slugify(parsedString, {
+            remove: /[*+~.()'"!:@,]/g,
+            lower: true
+        });
+    },
+    browserIsIE() {
+        return window.navigator.userAgent.match(/(MSIE|Trident)/);
+    },
+    escapeQuotes(str) {
+        if (typeof str !== 'string') {
+            return '';
+        }
+        return str
+            .replace(/"/g, '\\\\\\"')
+            .replace(/'/g, '\\\\\'');
+    },
+    unescapeQuotes(str) {
+        if (typeof str !== 'string') {
+            return '';
+        }
+        return str
+            .replace(/\\\\\\"/g, '"')
+            .replace(/\\\\'/g, '\'');
+    },
+    escapeDoubleQuotes(str) {
+        if (str.search(/\\?(")([\w\s]+)\\?(")/g) >= 0) {
+            // match piece of string between double quotes
+            return str.replace(/\\?(")([\w\s]+)\\?(")/g, '\\$1$2\\$3'); // thanks @slevithan!
+        }
+        return str.replace(/\\([\s\S])|(")/g, '\\\\\\$1$2'); // thanks @slevithan!
+    },
+    unescapeDoubleQuotes(str) {
+        return (str && str !== '') ? str.replace(/\\*(")/g, '$1') : str; // thanks @slevithan!
+    },
+    striptags(str) {
+        if (typeof str !== 'string') {
+            return '';
+        }
+        return str.replace(/(<([^>]+)>)/gi, '');
+    },
+    isElementInViewport(el) {
+        if (!el) {
+            throw Error('There is no element');
+        }
+        const rect = el.getBoundingClientRect();
+        return rect.bottom > 0
+            && rect.right > 0
+            && rect.left < (window.innerWidth || document.documentElement.clientWidth)
+            && rect.top < (window.innerHeight || document.documentElement.clientHeight);
+    },
+    /** Return true if an object is empty */
+    isEmpty: (obj) => (typeof obj === 'object'
+        && Object.keys(obj).length === 0)
+};
+
+/*
+ * Public API Surface of n7-boilerplate-common
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractLayout, ApolloProvider, BreadcrumbsDS, BreadcrumbsEH, CommunicationService, ConfigurationService, FacetsDS, FooterDS, FooterEH, HeaderDS, HeaderEH, JsonConfigService, LayoutsConfigurationService, LocalConfigService, MainLayoutComponent, MainLayoutConfig, MainLayoutDS, MainLayoutEH, MainStateService, N7BoilerplateCommonModule, Page404LayoutComponent, Page404LayoutConfig, Page404LayoutDS, Page404LayoutEH, RestProvider, SmartPaginationComponent, SmartPaginationDS, SmartPaginationEH, SubnavDS, SubnavEH, helpers };
+//# sourceMappingURL=net7-boilerplate-common.mjs.map