@ogidor/dashboard 1.0.9 → 1.0.11

package/README.md

@@ -68,6 +68,28 @@ export class AppModule {}
 
 ### 2. Add the component to your template
 
+`app-dashboard` fills whatever container you place it in — **you control the size**. Give its parent a defined height and the dashboard will fill it completely.
+
+```html
+<!-- Full-page example -->
+<div style="width: 100vw; height: 100vh;">
+  <app-dashboard ...></app-dashboard>
+</div>
+
+<!-- Embedded in a layout example -->
+<div class="dashboard-container">
+  <app-dashboard ...></app-dashboard>
+</div>
+```
+
+```css
+/* your global stylesheet */
+.dashboard-container {
+  width: 100%;
+  height: calc(100vh - 60px); /* e.g. subtract a top nav */
+}
+```
+
 ```html
 <app-dashboard
   (addWidgetRequested)="onAddWidget()"

package/app/app.module.d.ts

@@ -6,7 +6,7 @@ import * as i4 from "@angular/common";
 import * as i5 from "@angular/platform-browser";
 export declare class DashboardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DashboardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DashboardModule, [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective], [typeof i4.CommonModule], [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DashboardModule, [typeof i1.DashboardComponent, typeof i1.OverflowActivePipe, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective], [typeof i4.CommonModule], [typeof i1.DashboardComponent, typeof i1.OverflowActivePipe, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DashboardModule>;
 }
 /**

package/app/dashboard.component.d.ts

@@ -1,38 +1,37 @@
-import { OnInit, OnDestroy, OnChanges, SimpleChanges, EventEmitter, TemplateRef } from '@angular/core';
+import { OnInit, OnDestroy, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, TemplateRef, ElementRef, ChangeDetectorRef, NgZone, PipeTransform } from '@angular/core';
 import { DashboardStateService } from './dashboard-state.service';
 import { Page, Widget, DashboardTheme } from './models';
 import * as i0 from "@angular/core";
-export declare class DashboardComponent implements OnInit, OnDestroy, OnChanges {
+export declare class OverflowActivePipe implements PipeTransform {
+    transform(pages: Page[], activePageId: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverflowActivePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<OverflowActivePipe, "overflowActive", false>;
+}
+export declare class DashboardComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
     stateService: DashboardStateService;
+    private cdr;
+    private zone;
     initialLayout?: string;
     theme?: DashboardTheme;
-    /**
-     * Emits when the user clicks "Add Widget".
-     * The consumer should open their own dialog and call `stateService.addWidget(...)`.
-     */
     addWidgetRequested: EventEmitter<void>;
-    /**
-     * Emits the Widget when the user clicks the edit (pen) icon on a card.
-     * The consumer should open their own edit UI and call `stateService.updateWidget(...)`.
-     */
     editWidgetRequested: EventEmitter<Widget>;
-    /**
-     * Optional: consumer can provide an `<ng-template widgetCell let-widget="widget">` child
-     * to render custom content inside every card body.
-     */
     cellTemplate?: TemplateRef<{
         widget: Widget;
     }>;
+    tabsContainerRef: ElementRef<HTMLDivElement>;
     resolvedTheme: Required<DashboardTheme>;
     wrapperStyles: Record<string, string>;
     pages: Page[];
     activePageId: string;
     activePage?: Page;
     isPoppedOut: boolean;
+    tabsOverflow: boolean;
     private subs;
-    constructor(stateService: DashboardStateService);
+    private resizeObserver?;
+    constructor(stateService: DashboardStateService, cdr: ChangeDetectorRef, zone: NgZone);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onItemChanged(widget: Widget): void;
     onRemoveWidget(widgetId: string): void;
@@ -41,6 +40,7 @@ export declare class DashboardComponent implements OnInit, OnDestroy, OnChanges
     onRemovePage(event: Event, id: string): void;
     onPopOut(event: Event, pageId: string): void;
     serializeLayout(): string;
+    private checkOverflow;
     private applyTheme;
     private updateActivePage;
     static ɵfac: i0.ɵɵFactoryDeclaration<DashboardComponent, never>;

package/esm2020/app/app.module.mjs

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
-import { DashboardComponent } from './dashboard.component';
+import { DashboardComponent, OverflowActivePipe } from './dashboard.component';
 import { WidgetRendererComponent } from './widget-renderer.component';
 import { CustomGridComponent, GridCellDirective } from './custom-grid.component';
 import { DashboardStateService } from './dashboard-state.service';
@@ -10,9 +10,11 @@ export class DashboardModule {
 }
 DashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent,
+        OverflowActivePipe,
         WidgetRendererComponent,
         CustomGridComponent,
         GridCellDirective], imports: [CommonModule], exports: [DashboardComponent,
+        OverflowActivePipe,
         WidgetRendererComponent,
         CustomGridComponent,
         GridCellDirective] });
@@ -22,6 +24,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{
                     declarations: [
                         DashboardComponent,
+                        OverflowActivePipe,
                         WidgetRendererComponent,
                         CustomGridComponent,
                         GridCellDirective,
@@ -32,6 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     providers: [DashboardStateService],
                     exports: [
                         DashboardComponent,
+                        OverflowActivePipe,
                         WidgetRendererComponent,
                         CustomGridComponent,
                         GridCellDirective,
@@ -54,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     bootstrap: [DashboardComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9hcHAvYXBwLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDM0QsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDakYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBb0JsRSxNQUFNLE9BQU8sZUFBZTs7NkdBQWYsZUFBZTs4R0FBZixlQUFlLGlCQWhCeEIsa0JBQWtCO1FBQ2xCLHVCQUF1QjtRQUN2QixtQkFBbUI7UUFDbkIsaUJBQWlCLGFBR2pCLFlBQVksYUFJWixrQkFBa0I7UUFDbEIsdUJBQXVCO1FBQ3ZCLG1CQUFtQjtRQUNuQixpQkFBaUI7OEdBR1IsZUFBZSxhQVJmLENBQUMscUJBQXFCLENBQUMsWUFGaEMsWUFBWTs0RkFVSCxlQUFlO2tCQWxCM0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osa0JBQWtCO3dCQUNsQix1QkFBdUI7d0JBQ3ZCLG1CQUFtQjt3QkFDbkIsaUJBQWlCO3FCQUNsQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTtxQkFDYjtvQkFDRCxTQUFTLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQztvQkFDbEMsT0FBTyxFQUFFO3dCQUNQLGtCQUFrQjt3QkFDbEIsdUJBQXVCO3dCQUN2QixtQkFBbUI7d0JBQ25CLGlCQUFpQjtxQkFDbEI7aUJBQ0Y7O0FBR0Q7OztHQUdHO0FBS0gsTUFBTSxPQUFPLFNBQVM7O3VHQUFULFNBQVM7d0dBQVQsU0FBUyxjQUZSLGtCQUFrQixhQURwQixhQUFhLEVBUFosZUFBZTt3R0FVZixTQUFTLFlBSFYsYUFBYSxFQUFFLGVBQWU7NEZBRzdCLFNBQVM7a0JBSnJCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsYUFBYSxFQUFFLGVBQWUsQ0FBQztvQkFDekMsU0FBUyxFQUFFLENBQUMsa0JBQWtCLENBQUM7aUJBQ2hDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJyb3dzZXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmltcG9ydCB7IERhc2hib2FyZENvbXBvbmVudCB9IGZyb20gJy4vZGFzaGJvYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBXaWRnZXRSZW5kZXJlckNvbXBvbmVudCB9IGZyb20gJy4vd2lkZ2V0LXJlbmRlcmVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDdXN0b21HcmlkQ29tcG9uZW50LCBHcmlkQ2VsbERpcmVjdGl2ZSB9IGZyb20gJy4vY3VzdG9tLWdyaWQuY29tcG9uZW50JztcbmltcG9ydCB7IERhc2hib2FyZFN0YXRlU2VydmljZSB9IGZyb20gJy4vZGFzaGJvYXJkLXN0YXRlLnNlcnZpY2UnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBEYXNoYm9hcmRDb21wb25lbnQsXG4gICAgV2lkZ2V0UmVuZGVyZXJDb21wb25lbnQsXG4gICAgQ3VzdG9tR3JpZENvbXBvbmVudCxcbiAgICBHcmlkQ2VsbERpcmVjdGl2ZSxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgXSxcbiAgcHJvdmlkZXJzOiBbRGFzaGJvYXJkU3RhdGVTZXJ2aWNlXSxcbiAgZXhwb3J0czogW1xuICAgIERhc2hib2FyZENvbXBvbmVudCxcbiAgICBXaWRnZXRSZW5kZXJlckNvbXBvbmVudCxcbiAgICBDdXN0b21HcmlkQ29tcG9uZW50LFxuICAgIEdyaWRDZWxsRGlyZWN0aXZlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBEYXNoYm9hcmRNb2R1bGUge31cblxuLyoqXG4gKiBSb290IG1vZHVsZSBmb3IgbG9jYWwgZGVtbyAvIHRlc3RpbmcgcHVycG9zZXMgb25seS5cbiAqIExpYnJhcnkgY29uc3VtZXJzIGltcG9ydCBEYXNoYm9hcmRNb2R1bGUsIG5vdCBBcHBNb2R1bGUuXG4gKi9cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtCcm93c2VyTW9kdWxlLCBEYXNoYm9hcmRNb2R1bGVdLFxuICBib290c3RyYXA6IFtEYXNoYm9hcmRDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBBcHBNb2R1bGUge31cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9hcHAvYXBwLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDL0UsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDakYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBc0JsRSxNQUFNLE9BQU8sZUFBZTs7NkdBQWYsZUFBZTs4R0FBZixlQUFlLGlCQWxCeEIsa0JBQWtCO1FBQ2xCLGtCQUFrQjtRQUNsQix1QkFBdUI7UUFDdkIsbUJBQW1CO1FBQ25CLGlCQUFpQixhQUdqQixZQUFZLGFBSVosa0JBQWtCO1FBQ2xCLGtCQUFrQjtRQUNsQix1QkFBdUI7UUFDdkIsbUJBQW1CO1FBQ25CLGlCQUFpQjs4R0FHUixlQUFlLGFBVGYsQ0FBQyxxQkFBcUIsQ0FBQyxZQUZoQyxZQUFZOzRGQVdILGVBQWU7a0JBcEIzQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixrQkFBa0I7d0JBQ2xCLGtCQUFrQjt3QkFDbEIsdUJBQXVCO3dCQUN2QixtQkFBbUI7d0JBQ25CLGlCQUFpQjtxQkFDbEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsU0FBUyxFQUFFLENBQUMscUJBQXFCLENBQUM7b0JBQ2xDLE9BQU8sRUFBRTt3QkFDUCxrQkFBa0I7d0JBQ2xCLGtCQUFrQjt3QkFDbEIsdUJBQXVCO3dCQUN2QixtQkFBbUI7d0JBQ25CLGlCQUFpQjtxQkFDbEI7aUJBQ0Y7O0FBR0Q7OztHQUdHO0FBS0gsTUFBTSxPQUFPLFNBQVM7O3VHQUFULFNBQVM7d0dBQVQsU0FBUyxjQUZSLGtCQUFrQixhQURwQixhQUFhLEVBUFosZUFBZTt3R0FVZixTQUFTLFlBSFYsYUFBYSxFQUFFLGVBQWU7NEZBRzdCLFNBQVM7a0JBSnJCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsYUFBYSxFQUFFLGVBQWUsQ0FBQztvQkFDekMsU0FBUyxFQUFFLENBQUMsa0JBQWtCLENBQUM7aUJBQ2hDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJyb3dzZXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmltcG9ydCB7IERhc2hib2FyZENvbXBvbmVudCwgT3ZlcmZsb3dBY3RpdmVQaXBlIH0gZnJvbSAnLi9kYXNoYm9hcmQuY29tcG9uZW50JztcbmltcG9ydCB7IFdpZGdldFJlbmRlcmVyQ29tcG9uZW50IH0gZnJvbSAnLi93aWRnZXQtcmVuZGVyZXIuY29tcG9uZW50JztcbmltcG9ydCB7IEN1c3RvbUdyaWRDb21wb25lbnQsIEdyaWRDZWxsRGlyZWN0aXZlIH0gZnJvbSAnLi9jdXN0b20tZ3JpZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGFzaGJvYXJkU3RhdGVTZXJ2aWNlIH0gZnJvbSAnLi9kYXNoYm9hcmQtc3RhdGUuc2VydmljZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIERhc2hib2FyZENvbXBvbmVudCxcbiAgICBPdmVyZmxvd0FjdGl2ZVBpcGUsXG4gICAgV2lkZ2V0UmVuZGVyZXJDb21wb25lbnQsXG4gICAgQ3VzdG9tR3JpZENvbXBvbmVudCxcbiAgICBHcmlkQ2VsbERpcmVjdGl2ZSxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgXSxcbiAgcHJvdmlkZXJzOiBbRGFzaGJvYXJkU3RhdGVTZXJ2aWNlXSxcbiAgZXhwb3J0czogW1xuICAgIERhc2hib2FyZENvbXBvbmVudCxcbiAgICBPdmVyZmxvd0FjdGl2ZVBpcGUsXG4gICAgV2lkZ2V0UmVuZGVyZXJDb21wb25lbnQsXG4gICAgQ3VzdG9tR3JpZENvbXBvbmVudCxcbiAgICBHcmlkQ2VsbERpcmVjdGl2ZSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRGFzaGJvYXJkTW9kdWxlIHt9XG5cbi8qKlxuICogUm9vdCBtb2R1bGUgZm9yIGxvY2FsIGRlbW8gLyB0ZXN0aW5nIHB1cnBvc2VzIG9ubHkuXG4gKiBMaWJyYXJ5IGNvbnN1bWVycyBpbXBvcnQgRGFzaGJvYXJkTW9kdWxlLCBub3QgQXBwTW9kdWxlLlxuICovXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQnJvd3Nlck1vZHVsZSwgRGFzaGJvYXJkTW9kdWxlXSxcbiAgYm9vdHN0cmFwOiBbRGFzaGJvYXJkQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgQXBwTW9kdWxlIHt9XG4iXX0=