@net7/boilerplate-dataviz 4.9.7 → 5.0.0

package/fesm2015/net7-boilerplate-dataviz.mjs

@@ -1,1045 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Input, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@net7/components';
-import { DATA_WIDGET_MOCK, DvComponentsLibModule } from '@net7/components';
-import * as i1$1 from '@net7/boilerplate-common';
-import { AbstractLayout, N7BoilerplateCommonModule } from '@net7/boilerplate-common';
-import { delay, filter, first } from 'rxjs/operators';
-import { LayoutDataSource, EventHandler, DataSource } from '@net7/core';
-import { isObject, merge } from 'lodash';
-import { BehaviorSubject, forkJoin } from 'rxjs';
-import * as i2$1 from '@angular/router';
-
-class DataWidgetWrapperComponent {
-}
-DataWidgetWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataWidgetWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DataWidgetWrapperComponent, selector: "dv-data-widget-wrapper", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dv-data-widget-wrapper {{ data && data.classes || '' }}\">\n    <ng-content></ng-content>\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataWidgetWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-data-widget-wrapper', template: "<div class=\"dv-data-widget-wrapper {{ data && data.classes || '' }}\">\n    <ng-content></ng-content>\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }] } });
-
-class DatepickerWrapperComponent {
-    onClick(payload) {
-        if (!this.emit)
-            return;
-        this.emit('click', payload);
-    }
-    toggleDropDown(payload) {
-        if (!this.emit)
-            return;
-        this.emit('toggle', payload);
-    }
-}
-DatepickerWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatepickerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatepickerWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DatepickerWrapperComponent, selector: "dv-datepicker-wrapper", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"dv-datepicker-wrapper {{ data.select.classes || '' }}\">\n    <div class=\"dv-datepicker-wrapper__label\" (click)=\"toggleDropDown(data.payload)\">\n        <input type=\"text\" [value]=\"data.select.label\" [readOnly]=\"true\"/>\n        <span class=\"{{data.select.icon}}\"></span>\n    </div>\n    <div class=\"dv-datepicker-wrapper__dropdown\" [hidden]=\"data.select.hidden\">\n        <ul class=\"dv-datepicker-wrapper__dropdown-list\">\n            <li class=\"dv-datepicker-wrapper__dropdown-list-option {{ opt.classes || '' }}\" *ngFor=\"let opt of data.select.items\" (click)=\"onClick(opt.payload)\">{{opt.text}}</li>\n        </ul>\n    </div>\n    <n7-datepicker\n        [data]=\"data.datepicker.data\"\n        [emit]=\"emit\">\n    </n7-datepicker>\n</div>\n", 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: i2.DatepickerComponent, selector: "n7-datepicker", inputs: ["data", "emit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatepickerWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-datepicker-wrapper', template: "<div *ngIf=\"data\" class=\"dv-datepicker-wrapper {{ data.select.classes || '' }}\">\n    <div class=\"dv-datepicker-wrapper__label\" (click)=\"toggleDropDown(data.payload)\">\n        <input type=\"text\" [value]=\"data.select.label\" [readOnly]=\"true\"/>\n        <span class=\"{{data.select.icon}}\"></span>\n    </div>\n    <div class=\"dv-datepicker-wrapper__dropdown\" [hidden]=\"data.select.hidden\">\n        <ul class=\"dv-datepicker-wrapper__dropdown-list\">\n            <li class=\"dv-datepicker-wrapper__dropdown-list-option {{ opt.classes || '' }}\" *ngFor=\"let opt of data.select.items\" (click)=\"onClick(opt.payload)\">{{opt.text}}</li>\n        </ul>\n    </div>\n    <n7-datepicker\n        [data]=\"data.datepicker.data\"\n        [emit]=\"emit\">\n    </n7-datepicker>\n</div>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
-class CardStateWrapperComponent {
-    constructor() {
-        this.componentRef = {};
-    }
-    ngOnInit() {
-        // Called after the constructor, initializing input properties,
-        // and the first call to ngOnChanges.
-        this.state$
-            // This subscriber must run AFTER the HTML async pipe
-            .pipe(delay(0))
-            .subscribe({
-            next: (stateID) => {
-                if (this.stateComponents && this.stateComponents[stateID]) {
-                    // only clear the state if the view exists
-                    if (this[stateID]) {
-                        // this[stateID] will be one of the states declared as @ViewChild
-                        this[stateID].clear();
-                    }
-                    const { component, data } = this.stateComponents[stateID];
-                    if (component) {
-                        this.componentRef[stateID] = this[stateID].createComponent(component);
-                        if (data) {
-                            this.componentRef[stateID].instance.data = data;
-                        }
-                    }
-                }
-            }
-        });
-    }
-}
-CardStateWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardStateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardStateWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CardStateWrapperComponent, selector: "dv-card-state-wrapper", inputs: { state$: "state$", stateComponents: "stateComponents" }, viewQueries: [{ propertyName: "loading", first: true, predicate: ["loading"], descendants: true, read: ViewContainerRef }, { propertyName: "empty", first: true, predicate: ["empty"], descendants: true, read: ViewContainerRef }, { propertyName: "error", first: true, predicate: ["error"], descendants: true, read: ViewContainerRef }, { propertyName: "idle", first: true, predicate: ["idle"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container *ngIf=\"(state$ | async) as state\">\n    <ng-container [ngSwitch]=\"state\">\n        <ng-container *ngSwitchCase=\"'idle'\">\n            <ng-container #idle></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'loading'\">\n            <ng-container #loading></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'empty'\">\n            <ng-container #empty></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'success'\">\n            <!-- card content -->\n            <ng-content></ng-content>\n            <!-- ------------ -->\n        </ng-container>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardStateWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-card-state-wrapper', template: "<ng-container *ngIf=\"(state$ | async) as state\">\n    <ng-container [ngSwitch]=\"state\">\n        <ng-container *ngSwitchCase=\"'idle'\">\n            <ng-container #idle></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'loading'\">\n            <ng-container #loading></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'empty'\">\n            <ng-container #empty></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'success'\">\n            <!-- card content -->\n            <ng-content></ng-content>\n            <!-- ------------ -->\n        </ng-container>\n    </ng-container>\n</ng-container>\n" }]
-        }], propDecorators: { state$: [{
-                type: Input
-            }], stateComponents: [{
-                type: Input
-            }], loading: [{
-                type: ViewChild,
-                args: ['loading', { read: ViewContainerRef }]
-            }], empty: [{
-                type: ViewChild,
-                args: ['empty', { read: ViewContainerRef }]
-            }], error: [{
-                type: ViewChild,
-                args: ['error', { read: ViewContainerRef }]
-            }], idle: [{
-                type: ViewChild,
-                args: ['idle', { read: ViewContainerRef }]
-            }] } });
-
-class CardTextItemComponent {
-    onClick(payload) {
-        if (!this.emit)
-            return;
-        this.emit('click', payload);
-    }
-}
-CardTextItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardTextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CardTextItemComponent, selector: "dv-card-text-item", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"dv-card-text-item {{ data.classes || '' }}\">\n    <span [innerHTML]=\"data.text\" (click)=\"onClick(data.payload)\"></span>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardTextItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-card-text-item', template: "<div *ngIf=\"data\" class=\"dv-card-text-item {{ data.classes || '' }}\">\n    <span [innerHTML]=\"data.text\" (click)=\"onClick(data.payload)\"></span>\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
-class CardComponent {
-}
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CardComponent, selector: "dv-card", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"dv-card {{ data.classes || '' }}\">\n    <dv-card-state-wrapper [state$]=\"data.state$[data.id]\"\n                           [stateComponents]=\"data.stateComponents[data.id]\">\n        <ng-container *ngFor=\"let area of ['header', 'content', 'footer']\">\n            <div *ngIf=\"data[area]\"\n                 class=\"dv-card__{{ area }}\">\n                <ng-container *ngFor=\"let section of data[area].sections\">\n                    <dv-card-state-wrapper [state$]=\"data.state$[section.id]\"\n                                           [stateComponents]=\"section.stateComponents\">\n                        <section class=\"dv-card__section {{ section.classes || '' }}\">\n                            <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: section.items }\"></ng-container>\n                        </section>\n                    </dv-card-state-wrapper>\n                </ng-container>\n            </div>\n        </ng-container>\n    </dv-card-state-wrapper>\n</div>\n\n<ng-template #blocks\n             let-items>\n    <ng-container *ngFor=\"let item of items\">\n        <dv-card-state-wrapper [state$]=\"data.state$[item.id]\"\n                               [stateComponents]=\"data.stateComponents[item.id]\">\n            <div class=\"{{ 'dv-card__item dv-card__' + item.type }}\">\n                <!-- TEXT -->\n                <ng-container *ngIf=\"item.type === 'text'\">\n                    <dv-card-text-item [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                       [emit]=\"data.widgets[item.id].emit\"></dv-card-text-item>\n                </ng-container>\n\n                <!-- DATA WIDGET -->\n                <ng-container *ngIf=\"item.type === 'data-widget'\">\n                    <n7-data-widget [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                    [emit]=\"data.widgets[item.id].emit\">\n                    </n7-data-widget>\n                </ng-container>\n\n                <!-- TABLE -->\n                <ng-container *ngIf=\"item.type === 'table'\">\n                    <n7-table [data]=\"data.widgets[item.id].ds.out$ | async\"\n                              [emit]=\"data.widgets[item.id].emit\"></n7-table>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngIf=\"item.type === 'inner-title'\">\n                    <n7-inner-title [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                    [emit]=\"data.widgets[item.id].emit\"></n7-inner-title>\n                </ng-container>\n\n                <!-- SELECT -->\n                <ng-container *ngIf=\"item.type === 'select'\">\n                    <n7-input-select [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                     [emit]=\"data.widgets[item.id].emit\"></n7-input-select>\n                </ng-container>\n\n                <!-- APEX CHARTS -->\n                <ng-container *ngIf=\"item.type.includes('apex')\">\n                    <n7-chart [data]=\"data.widgets[item.id].ds.out$ | async\"></n7-chart>\n                </ng-container>\n\n                <!-- MAP -->\n                <ng-container *ngIf=\"item.type === 'map'\">\n                    <n7-map [data]=\"data.widgets[item.id].ds.out$ | async\"></n7-map>\n                </ng-container>\n            </div>\n        </dv-card-state-wrapper>\n    </ng-container>\n</ng-template>\n", 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ChartComponent, selector: "n7-chart", inputs: ["data", "emit"] }, { kind: "component", type: i2.DataWidgetComponent, selector: "n7-data-widget", inputs: ["data", "emit"] }, { kind: "component", type: i2.InnerTitleComponent, selector: "n7-inner-title", inputs: ["data", "emit"] }, { kind: "component", type: i2.InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }, { kind: "component", type: i2.MapComponent, selector: "n7-map", inputs: ["data", "emit"] }, { kind: "component", type: i2.TableComponent, selector: "n7-table", inputs: ["data", "emit"] }, { kind: "component", type: CardStateWrapperComponent, selector: "dv-card-state-wrapper", inputs: ["state$", "stateComponents"] }, { kind: "component", type: CardTextItemComponent, selector: "dv-card-text-item", inputs: ["data", "emit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-card', template: "<div *ngIf=\"data\"\n     class=\"dv-card {{ data.classes || '' }}\">\n    <dv-card-state-wrapper [state$]=\"data.state$[data.id]\"\n                           [stateComponents]=\"data.stateComponents[data.id]\">\n        <ng-container *ngFor=\"let area of ['header', 'content', 'footer']\">\n            <div *ngIf=\"data[area]\"\n                 class=\"dv-card__{{ area }}\">\n                <ng-container *ngFor=\"let section of data[area].sections\">\n                    <dv-card-state-wrapper [state$]=\"data.state$[section.id]\"\n                                           [stateComponents]=\"section.stateComponents\">\n                        <section class=\"dv-card__section {{ section.classes || '' }}\">\n                            <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: section.items }\"></ng-container>\n                        </section>\n                    </dv-card-state-wrapper>\n                </ng-container>\n            </div>\n        </ng-container>\n    </dv-card-state-wrapper>\n</div>\n\n<ng-template #blocks\n             let-items>\n    <ng-container *ngFor=\"let item of items\">\n        <dv-card-state-wrapper [state$]=\"data.state$[item.id]\"\n                               [stateComponents]=\"data.stateComponents[item.id]\">\n            <div class=\"{{ 'dv-card__item dv-card__' + item.type }}\">\n                <!-- TEXT -->\n                <ng-container *ngIf=\"item.type === 'text'\">\n                    <dv-card-text-item [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                       [emit]=\"data.widgets[item.id].emit\"></dv-card-text-item>\n                </ng-container>\n\n                <!-- DATA WIDGET -->\n                <ng-container *ngIf=\"item.type === 'data-widget'\">\n                    <n7-data-widget [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                    [emit]=\"data.widgets[item.id].emit\">\n                    </n7-data-widget>\n                </ng-container>\n\n                <!-- TABLE -->\n                <ng-container *ngIf=\"item.type === 'table'\">\n                    <n7-table [data]=\"data.widgets[item.id].ds.out$ | async\"\n                              [emit]=\"data.widgets[item.id].emit\"></n7-table>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngIf=\"item.type === 'inner-title'\">\n                    <n7-inner-title [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                    [emit]=\"data.widgets[item.id].emit\"></n7-inner-title>\n                </ng-container>\n\n                <!-- SELECT -->\n                <ng-container *ngIf=\"item.type === 'select'\">\n                    <n7-input-select [data]=\"data.widgets[item.id].ds.out$ | async\"\n                                     [emit]=\"data.widgets[item.id].emit\"></n7-input-select>\n                </ng-container>\n\n                <!-- APEX CHARTS -->\n                <ng-container *ngIf=\"item.type.includes('apex')\">\n                    <n7-chart [data]=\"data.widgets[item.id].ds.out$ | async\"></n7-chart>\n                </ng-container>\n\n                <!-- MAP -->\n                <ng-container *ngIf=\"item.type === 'map'\">\n                    <n7-map [data]=\"data.widgets[item.id].ds.out$ | async\"></n7-map>\n                </ng-container>\n            </div>\n        </dv-card-state-wrapper>\n    </ng-container>\n</ng-template>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
-// import { EMPTY } from 'rxjs';
-// import { catchError } from 'rxjs/operators';
-class DvExampleLayoutDS extends LayoutDataSource {
-    constructor() {
-        super(...arguments);
-        this.Items = [
-            {
-                text: 'Last week',
-                payload: 'Last week',
-            },
-            {
-                text: 'Last month',
-                payload: 'Last month',
-            },
-            {
-                text: 'Last year',
-                payload: 'Last year',
-            },
-            {
-                text: 'Select Date',
-                // this payload key is use for visualise the datepicker.
-                payload: 'ByDate',
-            },
-        ];
-        this.datepickerOptions = {
-            dateFormat: 'Y-m-d',
-            mode: 'range',
-        };
-        this.datePickerExternalData = {
-            select: {
-                id: 'dv-select',
-                label: 'Last week',
-                items: this.Items,
-            },
-            datepicker: {
-                id: 'datepicker',
-                libOptions: this.datepickerOptions,
-            },
-        };
-    }
-    onInit(payload) {
-        this.communication = payload.communication;
-        this.one('dv-datepicker-wrapper').update(this.datePickerExternalData);
-        // communication test
-        // get
-        // this.communication.request$('posts').subscribe((response) => {
-        //   console.log('GET: posts------------>', response);
-        // });
-        // this.communication.request$('firstPost').subscribe((response) => {
-        //   console.log('GET: firstPost------------>', response);
-        // });
-        // this.communication.request$('firstPost', {
-        //   method: 'DELETE'
-        // }).subscribe((response) => {
-        //   console.log('GET: firstPost------------>', response);
-        // });
-        // // post
-        // this.communication.request$<object, object>('firstPost', {
-        //   method: 'PATCH',
-        //   params: {
-        //     title: 'new title',
-        //   }
-        // }).subscribe((response) => {
-        //   console.log('POST: posts------------>', response);
-        // });
-        // // dynamic
-        const user$ = this.communication.request$('comments', {
-            method: 'GET',
-            // urlParams: '/2', // <api>posts/2
-            urlParams: { id: 1 }, // <api>posts/2/5/details
-            // queryParams: {
-            //   userId: 1
-            // }
-        });
-        user$.subscribe((response) => {
-            console.log('response----------------------------->', response);
-        });
-    }
-}
-
-/* eslint-disable */
-class DvExampleLayoutEH extends EventHandler {
-    listen() {
-        this.innerEvents$.subscribe(({ type, payload }) => {
-            if (type === 'dv-example-layout.init') {
-                this.dataSource.onInit(payload);
-            }
-        });
-    }
-}
-
-class DvDataWidgetDS extends DataSource {
-    transform(data) {
-        if (!data) {
-            return null;
-        }
-        return null;
-    }
-}
-
-class DvDatepickerWrapperDS extends DataSource {
-    constructor() {
-        super(...arguments);
-        this._datepicker = null;
-    }
-    transform(data) {
-        if (!data) {
-            return null;
-        }
-        return {
-            // set select option
-            select: {
-                id: data.select.id,
-                hidden: true,
-                icon: data.select.icon || 'n7-icon-angle-down',
-                label: data.select.label,
-                items: data.select.items,
-                classes: data.select.classes,
-            },
-            // set picker
-            datepicker: {
-                hidden: true,
-                data: {
-                    id: data.datepicker.id,
-                    libOptions: data.datepicker.libOptions,
-                    getInstance: (datepicker) => { this._datepicker = datepicker; },
-                },
-            },
-        };
-    }
-    openDatepicker() {
-        setTimeout(() => this._datepicker.open());
-        this.output.select.hidden = true;
-        this.output.datepicker.hidden = false;
-    }
-    closeDatepicker() {
-        setTimeout(() => this._datepicker.close());
-        this.output.select.hidden = true;
-        this.output.datepicker.hidden = true;
-    }
-    setLabel(payload) {
-        this.output.select.label = payload;
-        this.output.datepicker.hidden = true;
-    }
-    toggleDropDown() {
-        if (this.output.select.hidden === false) {
-            this.output.select.hidden = true;
-        }
-        else {
-            this.output.select.hidden = false;
-        }
-    }
-}
-
-class DvGraphDS extends DataSource {
-    transform() {
-        return {
-            containerId: 'test-Chart',
-            libOptions: {
-                chart: {
-                    height: 550,
-                    width: 1500,
-                    type: 'area',
-                    toolbar: { show: true },
-                },
-                dataLabels: { enabled: false },
-                colors: ['rgba(15,200,255)'],
-                fill: {
-                    colors: ['#0fc8ff'],
-                    gradient: { opacityFrom: 0.5, opacityTo: 0.1 },
-                },
-                stroke: { curve: 'straight', width: [2, 1] },
-                series: [
-                    {
-                        name: 'Reddish value',
-                        data: [['2019-08-01', '770.17'], ['2019-08-02', '645.03'],
-                            ['2019-08-03', '709.32'], ['2019-08-04', '708.11'],
-                            ['2019-08-05', '706.59'], ['2019-08-06', '607.28'],
-                            ['2019-08-07', '494.59'], ['2019-08-08', '636.81'],
-                            ['2019-08-09', '709.04'], ['2019-08-10', '717.31'],
-                            ['2019-08-11', '805.61'], ['2019-08-12', '758.60'],
-                            ['2019-08-13', '612.82'], ['2019-08-14', '608.90'],
-                            ['2019-08-15', '734.68'], ['2019-08-16', '838.54'],
-                            ['2019-08-17', '692.88']],
-                    },
-                ],
-                grid: {
-                    borderColor: '#e7e7e7',
-                    strokeDashArray: 3,
-                    xaxis: { lines: { show: true } },
-                },
-                markers: { size: 3, hover: { size: 6 } },
-                xaxis: {
-                    axisBorder: { show: true, color: '#f4f6fc' },
-                    labels: {},
-                    type: 'datetime',
-                    tickAmount: 6,
-                },
-                yaxis: [
-                    {
-                        show: true,
-                        showAlways: false,
-                        opposite: false,
-                        reversed: false,
-                        logarithmic: false,
-                        forceNiceScale: false,
-                        floating: false,
-                        labels: {
-                            show: true,
-                            minWidth: 0,
-                            maxWidth: 160,
-                            offsetX: 0,
-                            offsetY: 0,
-                            rotate: 0,
-                            padding: 20,
-                            style: { colors: [], fontSize: '11px', cssClass: '' },
-                        },
-                        axisBorder: {
-                            show: true, color: '#f4f6fc', offsetX: 0, offsetY: 0,
-                        },
-                        axisTicks: {
-                            show: false, color: '#78909C', width: 6, offsetX: 0, offsetY: 0,
-                        },
-                        title: {
-                            text: 'P Totale °C', rotate: 90, offsetY: 0, offsetX: 0, style: { fontSize: '11px', cssClass: '' },
-                        },
-                        tooltip: { enabled: false, offsetX: 0 },
-                        crosshairs: { show: true, position: 'front', stroke: { color: '#b6b6b6', width: 1, dashArray: 0 } },
-                    },
-                ],
-                legend: { show: true },
-                tooltip: {},
-                annotations: { yaxis: [], xaxis: [], points: [] },
-            },
-        };
-    }
-}
-
-class DvInnerTitleDS extends DataSource {
-    transform() {
-        return {
-            title: {
-                main: {
-                    text: 'Dipendenti',
-                    classes: 'n7-main-widget-title',
-                },
-                secondary: {
-                    text: 'Dipendeti al 10/10/10',
-                    classes: 'n7-secondary-widget-title',
-                },
-            },
-        };
-    }
-}
-
-class DvWidgetDS extends DataSource {
-    transform() {
-        return DATA_WIDGET_MOCK;
-    }
-}
-
-class CardDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-class TextItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-class DataWidgetItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-const getSeries = (series) => series.map(({ id, name, data }) => ({
-    id,
-    name,
-    data: data.map((point) => (isObject(point) ? point.value : point))
-}));
-const getSeriesMetadata = (series) => series.map(({ data }) => {
-    const serieMetadata = [];
-    data.forEach((point) => {
-        if (isObject(point)) {
-            serieMetadata.push((point === null || point === void 0 ? void 0 : point.metadata) || null);
-        }
-        else {
-            serieMetadata.push(null);
-        }
-    });
-    return serieMetadata;
-});
-var apexHelpers = {
-    getContainerId: (id) => `chart-${id}`,
-    getSeries,
-    getSeriesMetadata
-};
-
-var barChart = {
-    run: (id, data, options) => ({
-        containerId: apexHelpers.getContainerId(id),
-        libOptions: merge({
-            chart: {
-                type: 'bar',
-            },
-            series: apexHelpers.getSeries(data.series),
-            xaxis: {
-                categories: data.categories,
-            },
-            metadata: {
-                series: apexHelpers.getSeriesMetadata(data.series),
-            },
-        }, options)
-    })
-};
-
-var lineChart = {
-    run: (id, data, options) => ({
-        containerId: apexHelpers.getContainerId(id),
-        libOptions: merge({
-            chart: {
-                type: 'line',
-            },
-            series: apexHelpers.getSeries(data.series),
-            xaxis: {
-                categories: data.categories,
-            },
-            metadata: {
-                series: apexHelpers.getSeriesMetadata(data.series),
-            },
-        }, options)
-    })
-};
-
-var pieChart = {
-    run: (id, data, options) => ({
-        containerId: apexHelpers.getContainerId(id),
-        libOptions: merge({
-            chart: {
-                type: 'pie',
-            },
-            series: apexHelpers.getSeries(data.series)[0].data,
-            labels: data.categories,
-            metadata: {
-                series: apexHelpers.getSeriesMetadata(data.series),
-            },
-        }, options)
-    })
-};
-
-var radarChart = {
-    run: (id, data, options) => ({
-        containerId: apexHelpers.getContainerId(id),
-        libOptions: merge({
-            chart: {
-                type: 'radar',
-            },
-            series: apexHelpers.getSeries(data.series),
-            xaxis: {
-                categories: data.categories,
-            },
-            metadata: {
-                series: apexHelpers.getSeriesMetadata(data.series),
-            },
-        }, options)
-    })
-};
-
-var radialbarChart = {
-    run: (id, data, options) => ({
-        containerId: apexHelpers.getContainerId(id),
-        libOptions: merge({
-            chart: {
-                type: 'radialBar',
-            },
-            plotOptions: {
-                radialBar: {
-                    startAngle: -90,
-                    endAngle: 90,
-                }
-            },
-            series: apexHelpers.getSeries(data.series)[0].data,
-            labels: data.categories,
-            metadata: {
-                series: apexHelpers.getSeriesMetadata(data.series),
-            },
-        }, options)
-    })
-};
-
-const transformers = {
-    'apex-pie-chart': pieChart,
-    'apex-line-chart': lineChart,
-    'apex-bar-chart': barChart,
-    'apex-radialbar-chart': radialbarChart,
-    'apex-radar-chart': radarChart
-};
-
-class ApexHandler {
-    transform({ id, type, data, options }) {
-        if (!transformers[type]) {
-            throw Error(`Apex transformer ${type} does not exists`);
-        }
-        return transformers[type].run(id, data, options);
-    }
-}
-// exports
-const apexHandler = new ApexHandler();
-
-class ApexChartItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-    update(newData) {
-        const formattedData = apexHandler.transform({
-            data: newData,
-            id: this.id,
-            type: this.type,
-            options: this.options,
-        });
-        if (this.instance) {
-            // lib api update
-            this.instance.updateOptions(formattedData.libOptions);
-        }
-        else {
-            formattedData.setChart = (chart) => {
-                this.instance = chart;
-            };
-            this.run(formattedData);
-        }
-    }
-}
-
-class TableItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-class InnerTitleItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-class SelectItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-}
-
-class MapItemDS extends DataSource {
-    transform(data) {
-        return data;
-    }
-    update(newData) {
-        if (!this.instance) {
-            const formattedData = merge({
-                containerId: `map-${this.id}`,
-                libOptions: {
-                    attributionControl: false,
-                },
-                tileLayers: [],
-                initialView: {
-                    center: []
-                },
-                markers: []
-            }, newData);
-            formattedData._setInstance = (map) => {
-                this.instance = map;
-            };
-            this.run(formattedData);
-        }
-        else {
-            console.warn(`
-        Map ${this.id} instance update is delegated on project.
-        Try using the datasource instance property (ds.instance)
-      `);
-        }
-    }
-}
-
-// Data Widget
-
-var DS = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        DvDataWidgetDS: DvDataWidgetDS,
-        DvDatepickerWrapperDS: DvDatepickerWrapperDS,
-        DvGraphDS: DvGraphDS,
-        DvInnerTitleDS: DvInnerTitleDS,
-        DvWidgetDS: DvWidgetDS,
-        CardDS: CardDS,
-        TextItemDS: TextItemDS,
-        DataWidgetItemDS: DataWidgetItemDS,
-        ApexChartItemDS: ApexChartItemDS,
-        TableItemDS: TableItemDS,
-        InnerTitleItemDS: InnerTitleItemDS,
-        SelectItemDS: SelectItemDS,
-        MapItemDS: MapItemDS
-});
-
-class DvDatepickerWrapperEH extends EventHandler {
-    listen() {
-        this.innerEvents$.subscribe(({ type, payload }) => {
-            switch (type) {
-                case 'dv-datepicker-wrapper.click':
-                    this.dataSource.setLabel(payload);
-                    if (payload === 'ByDate') {
-                        this.dataSource.openDatepicker();
-                    }
-                    else {
-                        this.dataSource.closeDatepicker();
-                    }
-                    break;
-                case 'dv-datepicker-wrapper.toggle':
-                    this.dataSource.toggleDropDown();
-                    break;
-                case 'dv-datepicker-wrapper.change':
-                    this.dataSource.setLabel(payload.dateStr);
-                    break;
-                default:
-                    break;
-            }
-        });
-    }
-}
-
-class CardEH extends EventHandler {
-    listen() {
-        this.innerEvents$.subscribe(({ type, payload }) => {
-            // redirect signal
-            this.emitOuter(type.replace(`${this.hostId}.`, ''), payload);
-        });
-    }
-}
-
-// Data Widget
-
-var EH = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        DvDatepickerWrapperEH: DvDatepickerWrapperEH,
-        CardEH: CardEH
-});
-
-const DvExampleLayoutConfig = {
-    layoutId: 'dv-example-layout',
-    /**
-     * Array of components you want to use
-     * in this leyout
-    */
-    widgets: [
-        { id: 'dv-inner-title', hasStaticData: true },
-        { id: 'dv-widget', hasStaticData: true },
-        { id: 'dv-datepicker-wrapper' },
-        { id: 'dv-graph', hasStaticData: true },
-    ],
-    layoutDS: DvExampleLayoutDS,
-    layoutEH: DvExampleLayoutEH,
-    widgetsDataSources: DS,
-    widgetsEventHandlers: EH,
-    options: {
-    // TODO
-    },
-};
-
-/* eslint-disable */
-class DvExampleLayoutComponent extends AbstractLayout {
-    constructor(communication) {
-        super(DvExampleLayoutConfig);
-        this.communication = communication;
-    }
-    initPayload() {
-        return {
-            communication: this.communication
-        };
-    }
-    ngOnInit() {
-        this.onInit();
-    }
-    ngOnDestroy() {
-        this.onDestroy();
-    }
-}
-DvExampleLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvExampleLayoutComponent, deps: [{ token: i1$1.CommunicationService }], target: i0.ɵɵFactoryTarget.Component });
-DvExampleLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DvExampleLayoutComponent, selector: "dv-example-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"dv-example-layout\" id=\"example-layout\">\n  <h2>Grid component</h2>\n  <p>Four columns equal width</p>\n  <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/200\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/201\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/199\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/198\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/197\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/195\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/203\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/204\" />\n    </div>\n  </n7-grid>\n\n  <br />\n\n  <p>Two columns, first is 33%</p>\n  <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/600\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/600/600\" />\n    </div>\n  </n7-grid>\n\n  <p>Nested grids</p>\n  <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/500\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/200\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/201\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/199\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/198\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/197\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/195\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/203\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/204\" />\n        </div>\n      </n7-grid>\n    </div>\n  </n7-grid>\n\n  <h2>Container component</h2>\n  <p>Full width container</p>\n  <n7-container classes=\"big-container-class\">Container content</n7-container>\n  <n7-container classes=\"big-container-class\" fluid=\"true\">\n    Container fluid content\n  </n7-container>\n\n  <h2>Combined components</h2>\n  <p>Container with grids inside</p>\n  <n7-container classes=\"big-container-class\">\n    <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n      <div class=\"n7-grid__item\">\n        <img src=\"http://placekitten.com/300/500\" />\n      </div>\n      <div class=\"n7-grid__item\">\n        <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/200\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/201\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/199\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/198\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/197\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/195\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/203\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/204\" />\n          </div>\n        </n7-grid>\n      </div>\n    </n7-grid>\n  </n7-container>\n\n\n  <h2>Side scroller component</h2>\n  \n  <n7-container classes=\"big-container-class\" fluid=\"true\">\n    <n7-side-scroller>\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n    </n7-side-scroller>\n  </n7-container>\n\n  <!-- Data widget wrapper with not-fixed height, two rows -->\n  <!-- <dv-data-widget-wrapper>\n        <div class=\"dv-data-widget-wrapper__title\">\n            <n7-inner-title\n                [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n            </n7-inner-title>\n        </div>\n        <div class=\"dv-data-widget-wrapper__content\">\n            <div class=\"dv-data-widget-wrapper__content-row\">\n                <n7-data-widget\n                    [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n                </n7-data-widget>\n            </div>\n            <div class=\"dv-data-widget-wrapper__content-row\">\n                <n7-chart\n                    [data]=\"lb.widgets['dv-graph'].ds.out$ | async\">\n                </n7-chart>\n            </div>\n        </div>\n    </dv-data-widget-wrapper> -->\n\n  <!-- Data widget wrapper with fixed height, two rows -->\n  <!-- <dv-data-widget-wrapper\n    [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n  >\n    <div class=\"dv-data-widget-wrapper__title\">\n      <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n      </n7-inner-title>\n    </div>\n    <div class=\"dv-data-widget-wrapper__content\">\n      <div class=\"dv-data-widget-wrapper__content-row\">\n        <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n        </n7-data-widget>\n      </div>\n      <div class=\"dv-data-widget-wrapper__content-row\">Row content</div>\n    </div>\n  </dv-data-widget-wrapper> -->\n\n  <!-- Data widget wrapper with fixed height, one row -->\n  <!-- <dv-data-widget-wrapper\n    [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n  >\n    <div class=\"dv-data-widget-wrapper__title\">\n      <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n      </n7-inner-title>\n    </div>\n    <div class=\"dv-data-widget-wrapper__content\">\n      <div class=\"dv-data-widget-wrapper__content-row\">\n        <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n        </n7-data-widget>\n      </div>\n    </div>\n  </dv-data-widget-wrapper>\n\n  <dv-datepicker-wrapper\n    [data]=\"lb.widgets['dv-datepicker-wrapper'].ds.out$ | async\"\n    [emit]=\"lb.widgets['dv-datepicker-wrapper'].emit\"\n  >\n  </dv-datepicker-wrapper> -->\n</div>\n", dependencies: [{ kind: "component", type: i1$1.GridComponent, selector: "n7-grid", inputs: ["templateColumns", "classes"] }, { kind: "component", type: i1$1.ContainerComponent, selector: "n7-container", inputs: ["fluid", "classes"] }, { kind: "component", type: i1$1.SideScrollerComponent, selector: "n7-side-scroller", inputs: ["classes"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvExampleLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-example-layout', template: "<div class=\"dv-example-layout\" id=\"example-layout\">\n  <h2>Grid component</h2>\n  <p>Four columns equal width</p>\n  <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/200\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/201\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/199\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/198\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/197\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/195\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/203\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/204\" />\n    </div>\n  </n7-grid>\n\n  <br />\n\n  <p>Two columns, first is 33%</p>\n  <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/600\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/600/600\" />\n    </div>\n  </n7-grid>\n\n  <p>Nested grids</p>\n  <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n    <div class=\"n7-grid__item\">\n      <img src=\"http://placekitten.com/300/500\" />\n    </div>\n    <div class=\"n7-grid__item\">\n      <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/200\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/201\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/199\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/198\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/197\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/195\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/203\" />\n        </div>\n        <div class=\"n7-grid__item\">\n          <img src=\"http://placekitten.com/200/204\" />\n        </div>\n      </n7-grid>\n    </div>\n  </n7-grid>\n\n  <h2>Container component</h2>\n  <p>Full width container</p>\n  <n7-container classes=\"big-container-class\">Container content</n7-container>\n  <n7-container classes=\"big-container-class\" fluid=\"true\">\n    Container fluid content\n  </n7-container>\n\n  <h2>Combined components</h2>\n  <p>Container with grids inside</p>\n  <n7-container classes=\"big-container-class\">\n    <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n      <div class=\"n7-grid__item\">\n        <img src=\"http://placekitten.com/300/500\" />\n      </div>\n      <div class=\"n7-grid__item\">\n        <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/200\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/201\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/199\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/198\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/197\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/195\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/203\" />\n          </div>\n          <div class=\"n7-grid__item\">\n            <img src=\"http://placekitten.com/200/204\" />\n          </div>\n        </n7-grid>\n      </div>\n    </n7-grid>\n  </n7-container>\n\n\n  <h2>Side scroller component</h2>\n  \n  <n7-container classes=\"big-container-class\" fluid=\"true\">\n    <n7-side-scroller>\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n      <img src=\"http://placekitten.com/200/204\" />\n    </n7-side-scroller>\n  </n7-container>\n\n  <!-- Data widget wrapper with not-fixed height, two rows -->\n  <!-- <dv-data-widget-wrapper>\n        <div class=\"dv-data-widget-wrapper__title\">\n            <n7-inner-title\n                [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n            </n7-inner-title>\n        </div>\n        <div class=\"dv-data-widget-wrapper__content\">\n            <div class=\"dv-data-widget-wrapper__content-row\">\n                <n7-data-widget\n                    [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n                </n7-data-widget>\n            </div>\n            <div class=\"dv-data-widget-wrapper__content-row\">\n                <n7-chart\n                    [data]=\"lb.widgets['dv-graph'].ds.out$ | async\">\n                </n7-chart>\n            </div>\n        </div>\n    </dv-data-widget-wrapper> -->\n\n  <!-- Data widget wrapper with fixed height, two rows -->\n  <!-- <dv-data-widget-wrapper\n    [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n  >\n    <div class=\"dv-data-widget-wrapper__title\">\n      <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n      </n7-inner-title>\n    </div>\n    <div class=\"dv-data-widget-wrapper__content\">\n      <div class=\"dv-data-widget-wrapper__content-row\">\n        <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n        </n7-data-widget>\n      </div>\n      <div class=\"dv-data-widget-wrapper__content-row\">Row content</div>\n    </div>\n  </dv-data-widget-wrapper> -->\n\n  <!-- Data widget wrapper with fixed height, one row -->\n  <!-- <dv-data-widget-wrapper\n    [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n  >\n    <div class=\"dv-data-widget-wrapper__title\">\n      <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n      </n7-inner-title>\n    </div>\n    <div class=\"dv-data-widget-wrapper__content\">\n      <div class=\"dv-data-widget-wrapper__content-row\">\n        <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n        </n7-data-widget>\n      </div>\n    </div>\n  </dv-data-widget-wrapper>\n\n  <dv-datepicker-wrapper\n    [data]=\"lb.widgets['dv-datepicker-wrapper'].ds.out$ | async\"\n    [emit]=\"lb.widgets['dv-datepicker-wrapper'].emit\"\n  >\n  </dv-datepicker-wrapper> -->\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.CommunicationService }]; } });
-
-/**
- * All possible states of a card item.
- */
-// eslint-disable-next-line no-shadow
-var CardState;
-(function (CardState) {
-    CardState["Idle"] = "idle";
-    CardState["Loading"] = "loading";
-    CardState["Success"] = "success";
-    CardState["Error"] = "error";
-    CardState["Empty"] = "empty";
-})(CardState || (CardState = {}));
-
-class DvCardExampleLayoutDS extends LayoutDataSource {
-    onInit(payload) {
-        this.cardLoader = payload.cardLoader;
-        this.cards = this.cardLoader.getCards();
-        setTimeout(() => {
-            this.cardLoader.setAllStates(CardState.Success);
-            // this.cardLoader.setState('first-card', CardState.Success);
-            this.one('item-1').update('<b>Hola</b> <i>mundo</i>!!!');
-            // this.one('item-2').update({
-            //   icon: 'n7-icon-earth',
-            //   text: '197 <em>Dipendenti</em>',
-            //   subtitle: {
-            //     text: 'Going down...',
-            //     icon: 'n7-icon-caret-down',
-            //     value: '-49%',
-            //     payload: 'view percent tooltip'
-            //   },
-            //   payload: 'view earth tooltip',
-            //   classes: 'is-negative'
-            // });
-            // this.getWidgetDataSource('item-2').status$.next('loading');
-            // (this.one('item-2') as any).status$.next('loading');
-            this.one('item-3').update({
-                series: [{
-                        id: 'serie-1',
-                        name: 'Serie 1',
-                        data: [24, 35, 23, 33]
-                    }],
-                categories: ['Fetta A', 'Fetta B', 'Fetta C', 'Fetta D'],
-            });
-            this.one('item-4').update({
-                series: [{
-                        id: 'serie-desktops',
-                        name: 'Desktops',
-                        data: [10, 41, 35, 51, 49, 62, 69, 91, 148].map((value) => ({
-                            value,
-                            metadata: {
-                                info: `è questo il valore: ${value}`
-                            }
-                        })).reverse()
-                    }],
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-            });
-            this.one('item-5').update({
-                series: [{
-                        id: 'serie-2021',
-                        name: '2021',
-                        data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380].reverse()
-                    }, {
-                        id: 'serie-2020',
-                        name: '2020',
-                        data: [300, 530, 418, 370, 240, 680, 390, 100, 200, 1280].reverse()
-                    }],
-                categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
-            });
-        }, 3000);
-        setTimeout(() => {
-            this.cardLoader.setState('section-02', CardState.Loading);
-            this.cardLoader.setState('item-4', CardState.Loading);
-            // this.cardLoader.setSomeStates(['item-4', 'text-3', 'section-04'], CardState.Empty);
-        }, 4000);
-    }
-    onDestroy() {
-        console.warn('DvCardExampleLayout destroyed!');
-    }
-}
-
-class DvCardExampleLayoutEH extends EventHandler {
-    listen() {
-        this.innerEvents$.subscribe(({ type, payload }) => {
-            console.log('innerEvents$----->', type, payload);
-            switch (type) {
-                case 'dv-card-example-layout.init':
-                    this.dataSource.onInit(payload);
-                    break;
-                case 'dv-card-example-layout.destroy':
-                    this.dataSource.onDestroy();
-                    break;
-                default:
-                    break;
-            }
-        });
-        this.outerEvents$.subscribe(({ type, payload }) => {
-            console.log('outerEvents$----->', type, payload);
-            // TODO
-        });
-    }
-}
-
-const DvCardExampleLayoutConfig = {
-    layoutId: 'dv-card-example-layout',
-    // widgets added dinamically
-    widgets: [],
-    layoutDS: DvCardExampleLayoutDS,
-    layoutEH: DvCardExampleLayoutEH,
-    widgetsDataSources: {},
-    widgetsEventHandlers: {},
-    options: {},
-};
-
-const DATASOURCE_MAP = {
-    text: TextItemDS,
-    table: TableItemDS,
-    select: SelectItemDS,
-    map: MapItemDS,
-    'inner-title': InnerTitleItemDS,
-    'data-widget': DataWidgetItemDS,
-    'apex-bar-chart': ApexChartItemDS,
-    'apex-line-chart': ApexChartItemDS,
-    'apex-pie-chart': ApexChartItemDS,
-    'apex-radialbar-chart': ApexChartItemDS,
-    'apex-radar-chart': ApexChartItemDS,
-};
-class CardLoader {
-    constructor(layout, config) {
-        this.layout = layout;
-        this.config = config;
-        this.itemsInitialized = false;
-        /**
-         * Holds the state of all the internal widgets and sections
-         * of the cards.
-         */
-        this.state$ = {};
-        this.addLayoutWidgets();
-    }
-    getCards() {
-        const { cards } = this.config;
-        const cardsWithWidgets = [];
-        // initialize items
-        if (cards && !this.itemsInitialized) {
-            const { widgets } = this.layout.lb;
-            this.itemsInitialized = true;
-            cards.forEach(({ id, header, content, footer }, index) => {
-                const cardWidgets = {};
-                const cardSections = content.sections
-                    .concat((header === null || header === void 0 ? void 0 : header.sections) || [])
-                    .concat((footer === null || footer === void 0 ? void 0 : footer.sections) || []);
-                const state$ = {
-                    [id]: new BehaviorSubject(CardState.Idle),
-                    [`${id}.content`]: new BehaviorSubject(CardState.Idle),
-                    [`${id}.header`]: new BehaviorSubject(CardState.Idle),
-                    [`${id}.footer`]: new BehaviorSubject(CardState.Idle),
-                };
-                const cardStateComponents = {};
-                cardSections.forEach(({ id: sectionID, items }) => {
-                    state$[sectionID] = new BehaviorSubject(CardState.Idle);
-                    items.forEach(({ id: widgetID, type: itemType, initialData, stateComponents }) => {
-                        const { ds } = widgets[widgetID];
-                        const { eh } = widgets[widgetID];
-                        ds.id = widgetID;
-                        ds.type = itemType;
-                        const emit = (type, payload) => eh.emitInner(type, payload);
-                        // setup card status stream
-                        // widgets[id].ds.status$ = new BehaviorSubject<Status>(CardState.Idle);
-                        state$[widgetID] = new BehaviorSubject(CardState.Idle);
-                        cardStateComponents[widgetID] = stateComponents;
-                        cardWidgets[widgetID] = { ds, emit };
-                        // with initialData
-                        if (initialData) {
-                            state$[widgetID].pipe(filter((stateID) => stateID === CardState.Success), first()).subscribe({
-                                next: () => ds.update(initialData)
-                            });
-                        }
-                    });
-                });
-                // add widgets to card
-                cardsWithWidgets[index] = Object.assign(Object.assign({}, cards[index]), { widgets: cardWidgets, state$, stateComponents: cardStateComponents });
-                // merge the new states with the existing ones
-                this.state$ = Object.assign(Object.assign({}, this.state$), state$);
-            });
-        }
-        return cardsWithWidgets;
-    }
-    updateState(ids, newState) {
-        const updates = forkJoin(ids.map((id) => this.state$[id]));
-        ids.forEach((id) => {
-            if (this.state$[id]) {
-                this.state$[id].next(newState);
-            }
-        });
-        return updates;
-    }
-    setState(id, newState) {
-        return this.updateState([id], newState);
-    }
-    setAllStates(newState) {
-        return this.updateState(Object.keys(this.state$), newState);
-    }
-    setSomeStates(ids, newState) {
-        return this.updateState(ids, newState);
-    }
-    addLayoutWidgets() {
-        const { cards } = this.config;
-        if (cards) {
-            this.layout.widgets = this.layout.widgets || [];
-            cards.forEach(({ header, content, footer }) => {
-                const cardSections = content.sections
-                    .concat((header === null || header === void 0 ? void 0 : header.sections) || [])
-                    .concat((footer === null || footer === void 0 ? void 0 : footer.sections) || []);
-                cardSections.forEach(({ items }) => {
-                    items.forEach(({ id, type, options }) => {
-                        this.layout.widgets.push({
-                            id,
-                            options,
-                            dataSource: DATASOURCE_MAP[type],
-                            eventHandler: CardEH
-                        });
-                    });
-                });
-            });
-        }
-    }
-}
-
-class DvCardExampleLayoutComponent extends AbstractLayout {
-    constructor(layoutsConfiguration, configuration, communication, activatedRoute) {
-        super(layoutsConfiguration.get('MrResourceLayoutConfig') || DvCardExampleLayoutConfig);
-        this.configuration = configuration;
-        this.communication = communication;
-        this.activatedRoute = activatedRoute;
-    }
-    initPayload() {
-        return {
-            configId: this.configId,
-            configuration: this.configuration,
-            communication: this.communication,
-            cardLoader: this.cardLoader,
-            options: this.config.options || {},
-        };
-    }
-    ngOnInit() {
-        this.activatedRoute.data.subscribe((data) => {
-            this.configId = data.configId;
-            const pageConfig = this.configuration.get(this.configId);
-            this.cardLoader = new CardLoader(this, pageConfig);
-            this.onInit();
-        });
-    }
-    ngOnDestroy() {
-        this.onDestroy();
-    }
-}
-DvCardExampleLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvCardExampleLayoutComponent, deps: [{ token: i1$1.LayoutsConfigurationService }, { token: i1$1.ConfigurationService }, { token: i1$1.CommunicationService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-DvCardExampleLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DvCardExampleLayoutComponent, selector: "dv-card-example-layout", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lb.dataSource && lb.dataSource.cards\" class=\"dv-card-example-layout\">\n    <ng-container *ngFor=\"let card of lb.dataSource.cards\">\n        <dv-card [data]=\"card\"></dv-card>\n    </ng-container>\n</div>", 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: CardComponent, selector: "dv-card", inputs: ["data", "emit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvCardExampleLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dv-card-example-layout', template: "<div *ngIf=\"lb.dataSource && lb.dataSource.cards\" class=\"dv-card-example-layout\">\n    <ng-container *ngFor=\"let card of lb.dataSource.cards\">\n        <dv-card [data]=\"card\"></dv-card>\n    </ng-container>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1$1.LayoutsConfigurationService }, { type: i1$1.ConfigurationService }, { type: i1$1.CommunicationService }, { type: i2$1.ActivatedRoute }]; } });
-
-// MODULES
-const COMPONENTS = [
-    DataWidgetWrapperComponent,
-    DatepickerWrapperComponent,
-    CardComponent,
-    CardStateWrapperComponent,
-    CardTextItemComponent,
-    DvExampleLayoutComponent,
-    DvCardExampleLayoutComponent
-];
-class N7BoilerplateDatavizModule {
-}
-N7BoilerplateDatavizModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: N7BoilerplateDatavizModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-N7BoilerplateDatavizModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: N7BoilerplateDatavizModule, declarations: [DataWidgetWrapperComponent,
-        DatepickerWrapperComponent,
-        CardComponent,
-        CardStateWrapperComponent,
-        CardTextItemComponent,
-        DvExampleLayoutComponent,
-        DvCardExampleLayoutComponent], imports: [CommonModule,
-        DvComponentsLibModule,
-        N7BoilerplateCommonModule], exports: [DataWidgetWrapperComponent,
-        DatepickerWrapperComponent,
-        CardComponent,
-        CardStateWrapperComponent,
-        CardTextItemComponent,
-        DvExampleLayoutComponent,
-        DvCardExampleLayoutComponent] });
-N7BoilerplateDatavizModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: N7BoilerplateDatavizModule, imports: [CommonModule,
-        DvComponentsLibModule,
-        N7BoilerplateCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: N7BoilerplateDatavizModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: COMPONENTS,
-                    imports: [
-                        CommonModule,
-                        DvComponentsLibModule,
-                        N7BoilerplateCommonModule,
-                    ],
-                    providers: [],
-                    exports: COMPONENTS
-                }]
-        }] });
-
-// example layout
-
-/*
- * Public API Surface of n7-boilerplate-dataviz
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ApexChartItemDS, ApexHandler, CardComponent, CardDS, CardEH, CardLoader, CardState, CardStateWrapperComponent, CardTextItemComponent, DataWidgetItemDS, DataWidgetWrapperComponent, DatepickerWrapperComponent, DvCardExampleLayoutComponent, DvCardExampleLayoutConfig, DvCardExampleLayoutDS, DvCardExampleLayoutEH, DvDataWidgetDS, DvDatepickerWrapperDS, DvDatepickerWrapperEH, DvExampleLayoutComponent, DvExampleLayoutConfig, DvExampleLayoutDS, DvExampleLayoutEH, DvGraphDS, DvInnerTitleDS, DvWidgetDS, InnerTitleItemDS, MapItemDS, N7BoilerplateDatavizModule, SelectItemDS, TableItemDS, TextItemDS, apexHandler };
-//# sourceMappingURL=net7-boilerplate-dataviz.mjs.map