npm - @net7/boilerplate-dataviz - Versions diffs - 4.9.7 → 5.0.0 - Mend

@net7/boilerplate-dataviz 4.9.7 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/{fesm2020 → fesm2022}/net7-boilerplate-dataviz.mjs RENAMED Viewed

@@ -13,10 +13,10 @@ import { BehaviorSubject, forkJoin } from 'rxjs';
 import * as i2$1 from '@angular/router';
 class DataWidgetWrapperComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DataWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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>" }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: [{
@@ -34,10 +34,10 @@ class DatepickerWrapperComponent {
             return;
         this.emit('toggle', payload);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatepickerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"] }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: [{
@@ -75,10 +75,10 @@ class CardStateWrapperComponent {
             }
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CardStateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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" }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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$: [{
@@ -105,10 +105,10 @@ class CardTextItemComponent {
             return;
         this.emit('click', payload);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CardTextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"] }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: [{
@@ -118,10 +118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 class CardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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" }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: [{
@@ -619,20 +619,20 @@ class MapItemDS extends DataSource {
 // 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
+    __proto__: null,
+    ApexChartItemDS: ApexChartItemDS,
+    CardDS: CardDS,
+    DataWidgetItemDS: DataWidgetItemDS,
+    DvDataWidgetDS: DvDataWidgetDS,
+    DvDatepickerWrapperDS: DvDatepickerWrapperDS,
+    DvGraphDS: DvGraphDS,
+    DvInnerTitleDS: DvInnerTitleDS,
+    DvWidgetDS: DvWidgetDS,
+    InnerTitleItemDS: InnerTitleItemDS,
+    MapItemDS: MapItemDS,
+    SelectItemDS: SelectItemDS,
+    TableItemDS: TableItemDS,
+    TextItemDS: TextItemDS
 });
 class DvDatepickerWrapperEH extends EventHandler {
@@ -673,9 +673,9 @@ class CardEH extends EventHandler {
 // Data Widget
 var EH = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        DvDatepickerWrapperEH: DvDatepickerWrapperEH,
-        CardEH: CardEH
+    __proto__: null,
+    CardEH: CardEH,
+    DvDatepickerWrapperEH: DvDatepickerWrapperEH
 });
 const DvExampleLayoutConfig = {
@@ -716,13 +716,13 @@ class DvExampleLayoutComponent extends AbstractLayout {
     ngOnDestroy() {
         this.onDestroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DvExampleLayoutComponent, deps: [{ token: i1$1.CommunicationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"] }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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 }]; } });
+        }], ctorParameters: () => [{ type: i1$1.CommunicationService }] });
 /**
  * All possible states of a card item.
@@ -986,13 +986,13 @@ class DvCardExampleLayoutComponent extends AbstractLayout {
     ngOnDestroy() {
         this.onDestroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"] }] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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 }]; } });
+        }], ctorParameters: () => [{ type: i1$1.LayoutsConfigurationService }, { type: i1$1.ConfigurationService }, { type: i1$1.CommunicationService }, { type: i2$1.ActivatedRoute }] });
 // MODULES
 const COMPONENTS = [
@@ -1005,27 +1005,27 @@ const COMPONENTS = [
     DvCardExampleLayoutComponent
 ];
 class N7BoilerplateDatavizModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: N7BoilerplateDatavizModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: N7BoilerplateDatavizModule, declarations: [DataWidgetWrapperComponent,
+            DatepickerWrapperComponent,
+            CardComponent,
+            CardStateWrapperComponent,
+            CardTextItemComponent,
+            DvExampleLayoutComponent,
+            DvCardExampleLayoutComponent], imports: [CommonModule,
+            DvComponentsLibModule,
+            N7BoilerplateCommonModule], exports: [DataWidgetWrapperComponent,
+            DatepickerWrapperComponent,
+            CardComponent,
+            CardStateWrapperComponent,
+            CardTextItemComponent,
+            DvExampleLayoutComponent,
+            DvCardExampleLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: N7BoilerplateDatavizModule, imports: [CommonModule,
+            DvComponentsLibModule,
+            N7BoilerplateCommonModule] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: N7BoilerplateDatavizModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: COMPONENTS,
@@ -1044,6 +1044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 /*
  * Public API Surface of n7-boilerplate-dataviz
  */
+// dataviz
 /**
  * Generated bundle index. Do not edit.