@ogidor/dashboard 1.0.10 → 1.0.12

package/fesm2020/ogidor-dashboard.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, NgModule } from '@angular/core';
+import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, Pipe, HostListener, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -885,43 +885,54 @@ const DEFAULT_THEME = {
     accentColor: '#0a84ff',
     dangerColor: '#ff453a',
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-    // Header / Tabs
     tabsContainerColor: 'rgba(44,44,46,0.6)',
     tabActiveColor: '#3a3a3c',
     tabActiveTextColor: '#ffffff',
     tabHoverTextColor: '#e5e5ea',
     addWidgetButtonTextColor: '#ffffff',
-    // Pop-out
     popoutTitleColor: '#ffffff',
-    // Widget card
     widgetTitleColor: '#ffffff',
     dragHandleColor: 'rgba(255,255,255,0.2)',
     widgetBorderColor: 'rgba(255,255,255,0.07)',
     widgetButtonBgColor: 'rgba(255,255,255,0.07)',
     widgetButtonColor: 'rgba(255,255,255,0.5)',
-    // Grid
     placeholderColor: '#0a84ff',
     resizeHandleColor: 'rgba(255,255,255,0.25)',
 };
+class OverflowActivePipe {
+    transform(pages, activePageId) {
+        return pages.some(p => p.id === activePageId);
+    }
+}
+OverflowActivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverflowActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+OverflowActivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OverflowActivePipe, name: "overflowActive" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverflowActivePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'overflowActive' }]
+        }] });
 class DashboardComponent {
-    constructor(stateService) {
+    constructor(stateService, cdr, zone) {
         this.stateService = stateService;
-        /**
-         * Emits when the user clicks "Add Widget".
-         * The consumer should open their own dialog and call `stateService.addWidget(...)`.
-         */
+        this.cdr = cdr;
+        this.zone = zone;
         this.addWidgetRequested = new EventEmitter();
-        /**
-         * 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(...)`.
-         */
         this.editWidgetRequested = new EventEmitter();
         this.resolvedTheme = { ...DEFAULT_THEME };
         this.wrapperStyles = {};
         this.pages = [];
+        this.visiblePages = [];
+        this.hiddenCount = 0;
         this.activePageId = '';
         this.isPoppedOut = false;
+        this.tabSwitcherOpen = false;
         this.subs = new Subscription();
+        // Reserved space for the overflow "+N" button and the add "+" button (px)
+        this.OVERFLOW_BTN_W = 80;
+        this.ADD_BTN_W = 52;
+        this.GAP = 6;
+        this.PADDING = 12; // 6px each side
+        // Cache of measured tab widths (including gap) indexed by page position
+        this._tabWidthCache = [];
     }
     ngOnChanges(changes) {
         if (changes['theme'] || changes['initialLayout'])
@@ -942,19 +953,37 @@ class DashboardComponent {
             this.isPoppedOut = true;
         this.subs.add(this.stateService.pages$.subscribe(pages => {
             this.pages = pages;
+            this._tabWidthCache = []; // invalidate cache — page list changed
             if (this.isPoppedOut && hash) {
-                const target = pages.find(p => p.id === hash);
-                if (target)
+                if (pages.find(p => p.id === hash))
                     this.stateService.setActivePage(hash);
             }
             this.updateActivePage();
+            this.recalcVisibleTabs();
+            // Second pass after Angular has rendered the updated tab elements
+            setTimeout(() => this.recalcVisibleTabs());
         }));
         this.subs.add(this.stateService.activePageId$.subscribe(id => {
             this.activePageId = id;
             this.updateActivePage();
         }));
     }
-    ngOnDestroy() { this.subs.unsubscribe(); }
+    ngAfterViewInit() {
+        if (!this.tabsTrackRef)
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.zone.run(() => this.recalcVisibleTabs());
+            });
+            this.resizeObserver.observe(this.tabsTrackRef.nativeElement);
+        });
+        // Initial measurement pass now that the DOM is ready
+        setTimeout(() => this.recalcVisibleTabs());
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+        this.resizeObserver?.disconnect();
+    }
     onItemChanged(widget) {
         this.stateService.updateWidgetPosition(this.activePageId, widget.id, widget.x, widget.y, widget.cols, widget.rows);
     }
@@ -975,6 +1004,84 @@ class DashboardComponent {
         this.stateService.popOutPage(pageId);
     }
     serializeLayout() { return this.stateService.serializeLayout(); }
+    openTabSwitcher() { this.tabSwitcherOpen = true; }
+    closeTabSwitcher() { this.tabSwitcherOpen = false; }
+    onEscapeKey() { this.closeTabSwitcher(); }
+    onSwitcherSelect(pageId) {
+        this.stateService.setActivePage(pageId);
+        this.closeTabSwitcher();
+    }
+    onSwitcherPopOut(event, pageId) {
+        event.stopPropagation();
+        this.stateService.popOutPage(pageId);
+        this.closeTabSwitcher();
+    }
+    onSwitcherRemove(event, pageId) {
+        event.stopPropagation();
+        if (confirm('Remove this workspace?')) {
+            this.stateService.removePage(pageId);
+            if (this.pages.length <= 1)
+                this.closeTabSwitcher();
+        }
+    }
+    onSwitcherAdd() {
+        const name = prompt('Workspace name:', `Workspace ${this.pages.length + 1}`);
+        if (name)
+            this.stateService.addPage(name);
+    }
+    recalcVisibleTabs() {
+        if (!this.tabsTrackRef || !this.pages.length) {
+            this.visiblePages = this.pages;
+            this.hiddenCount = 0;
+            this.cdr.markForCheck();
+            return;
+        }
+        const track = this.tabsTrackRef.nativeElement;
+        const trackW = track.clientWidth;
+        // Space always consumed by the add "+" button + padding
+        const baseReserved = this.ADD_BTN_W + this.GAP + this.PADDING;
+        // Space needed for the overflow "+N" button when shown
+        const overflowSlot = this.OVERFLOW_BTN_W + this.GAP;
+        // Measure each real tab element currently in the DOM.
+        // The DOM always renders all visiblePages tabs, so we may not have all tabs
+        // measured yet — fall back to the previous measured cache or a generous estimate.
+        const tabEls = Array.from(track.querySelectorAll('.tab'));
+        // Build a width map by index (only covers currently visible tabs)
+        const measuredWidths = this.pages.map((_, i) => {
+            const el = tabEls[i];
+            return el ? el.getBoundingClientRect().width + this.GAP : this._tabWidthCache[i] ?? 150 + this.GAP;
+        });
+        // Update cache for next call
+        tabEls.forEach((el, i) => {
+            this._tabWidthCache[i] = el.getBoundingClientRect().width + this.GAP;
+        });
+        // How much space the tabs need in total (no overflow button)
+        const totalNeeded = measuredWidths.reduce((s, w) => s + w, 0) - this.GAP; // remove trailing gap
+        if (totalNeeded <= trackW - baseReserved) {
+            // Everything fits — show all
+            this.visiblePages = this.pages;
+            this.hiddenCount = 0;
+        }
+        else {
+            // Not everything fits — fill as many as possible while always leaving room for overflow btn
+            const budget = trackW - baseReserved - overflowSlot;
+            let used = 0;
+            let count = 0;
+            for (let i = 0; i < this.pages.length; i++) {
+                used += measuredWidths[i];
+                if (used - this.GAP <= budget) { // -GAP: last item has no trailing gap
+                    count++;
+                }
+                else {
+                    break;
+                }
+            }
+            count = Math.max(1, count);
+            this.visiblePages = this.pages.slice(0, count);
+            this.hiddenCount = this.pages.length - count;
+        }
+        this.cdr.markForCheck();
+    }
     applyTheme() {
         this.resolvedTheme = { ...DEFAULT_THEME, ...(this.theme ?? {}) };
         const t = this.resolvedTheme;
@@ -1005,48 +1112,41 @@ class DashboardComponent {
         this.activePage = this.pages.find(p => p.id === this.activePageId);
     }
 }
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: DashboardStateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, outputs: { addWidgetRequested: "addWidgetRequested", editWidgetRequested: "editWidgetRequested" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: `
-    <!-- ══════════════════════════════════════════════════════════
-         POPPED-OUT MODE
-         ══════════════════════════════════════════════════════════ -->
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: DashboardStateService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, outputs: { addWidgetRequested: "addWidgetRequested", editWidgetRequested: "editWidgetRequested" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "tabsTrackRef", first: true, predicate: ["tabsTrack"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <!-- POPPED-OUT MODE -->
     <ng-container *ngIf="isPoppedOut; else normalMode">
       <div class="popout-wrapper" [ngStyle]="wrapperStyles">
         <header class="popout-header">
           <span class="popout-title">{{ activePage?.name }}</span>
         </header>
-        <div class="grid-container">
-          <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
-            <ng-template gridCell let-widget="widget">
-              <app-widget-renderer
-                [widget]="widget"
-                [theme]="resolvedTheme"
-                (editRequested)="editWidgetRequested.emit($event)"
-                (removeRequested)="onRemoveWidget($event)"
-              >
-                <ng-container
-                  *ngIf="cellTemplate"
-                  [ngTemplateOutlet]="cellTemplate"
-                  [ngTemplateOutletContext]="{ widget: widget }">
-                </ng-container>
-              </app-widget-renderer>
-            </ng-template>
-          </app-grid>
-        </div>
+        <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+          <ng-template gridCell let-widget="widget">
+            <app-widget-renderer [widget]="widget" [theme]="resolvedTheme"
+              (editRequested)="editWidgetRequested.emit($event)"
+              (removeRequested)="onRemoveWidget($event)">
+              <ng-container *ngIf="cellTemplate"
+                [ngTemplateOutlet]="cellTemplate"
+                [ngTemplateOutletContext]="{ widget: widget }">
+              </ng-container>
+            </app-widget-renderer>
+          </ng-template>
+        </app-grid>
       </div>
     </ng-container>
 
-    <!-- ══════════════════════════════════════════════════════════
-         NORMAL MODE
-         ══════════════════════════════════════════════════════════ -->
+    <!-- NORMAL MODE -->
     <ng-template #normalMode>
       <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
         <main class="main-content">
 
           <header class="dashboard-header">
-            <div class="tabs-container">
+
+            <!-- Tab bar -->
+            <div class="tabs-track" #tabsTrack>
+              <!-- Visible tabs -->
               <div
-                *ngFor="let page of pages"
+                *ngFor="let page of visiblePages"
                 class="tab"
                 [class.active]="page.id === activePageId"
                 (click)="onSelectPage(page.id)"
@@ -1059,30 +1159,81 @@ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                   <i class="la la-times"></i>
                 </button>
               </div>
+
+              <!-- Overflow button — shown only when there are hidden tabs -->
+              <button
+                *ngIf="hiddenCount > 0"
+                class="btn-overflow"
+                (click)="openTabSwitcher()"
+                title="Show all workspaces"
+              >
+                <span>+{{ hiddenCount }}</span>
+                <i class="la la-th-large"></i>
+              </button>
+
+              <!-- Add page button -->
               <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
                 <i class="la la-plus"></i>
               </button>
             </div>
 
-            <!-- Add Widget button — consumer decides what happens -->
             <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
               <i class="la la-plus"></i>
               <span>Add Widget</span>
             </button>
+
           </header>
 
+          <!-- ── Tab-switcher overlay (Chrome mobile style) ── -->
+          <div class="tab-switcher-overlay" *ngIf="tabSwitcherOpen" (click)="closeTabSwitcher()">
+            <div class="tab-switcher-sheet" (click)="$event.stopPropagation()">
+
+              <div class="tab-switcher-header">
+                <span class="tab-switcher-title">{{ pages.length }} Workspace{{ pages.length !== 1 ? 's' : '' }}</span>
+                <button class="tab-switcher-close-btn" (click)="closeTabSwitcher()" title="Close">
+                  <i class="la la-times"></i>
+                </button>
+              </div>
+
+              <div class="tab-switcher-grid">
+                <div
+                  *ngFor="let page of pages"
+                  class="tab-card"
+                  [class.active]="page.id === activePageId"
+                  (click)="onSwitcherSelect(page.id)"
+                >
+                  <div class="tab-card-icon">
+                    <i class="la la-th-large"></i>
+                  </div>
+                  <span class="tab-card-name">{{ page.name }}</span>
+                  <div class="tab-card-actions">
+                    <button class="tab-card-btn tab-card-popout" (click)="onSwitcherPopOut($event, page.id)" title="Open in new window">
+                      <i class="la la-external-link-alt"></i>
+                    </button>
+                    <button class="tab-card-btn tab-card-remove" *ngIf="pages.length > 1" (click)="onSwitcherRemove($event, page.id)" title="Close">
+                      <i class="la la-times"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="tab-switcher-footer">
+                <button class="tab-switcher-add-btn" (click)="onSwitcherAdd()">
+                  <i class="la la-plus"></i>
+                  <span>New Workspace</span>
+                </button>
+              </div>
+
+            </div>
+          </div>
+
           <div class="grid-container">
             <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
               <ng-template gridCell let-widget="widget">
-                <app-widget-renderer
-                  [widget]="widget"
-                  [theme]="resolvedTheme"
+                <app-widget-renderer [widget]="widget" [theme]="resolvedTheme"
                   (editRequested)="editWidgetRequested.emit($event)"
-                  (removeRequested)="onRemoveWidget($event)"
-                >
-                  <!-- Stamp consumer's cell template (if provided) inside the card body -->
-                  <ng-container
-                    *ngIf="cellTemplate"
+                  (removeRequested)="onRemoveWidget($event)">
+                  <ng-container *ngIf="cellTemplate"
                     [ngTemplateOutlet]="cellTemplate"
                     [ngTemplateOutletContext]="{ widget: widget }">
                   </ng-container>
@@ -1094,50 +1245,43 @@ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         </main>
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0;background:var(--dash-panel-bg);padding:16px;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "theme"], outputs: ["editRequested", "removeRequested"] }, { kind: "component", type: CustomGridComponent, selector: "app-grid", inputs: ["widgets", "columns", "gap", "rowHeight", "minItemCols", "minItemRows"], outputs: ["itemChanged", "layoutChanged"] }, { kind: "directive", type: GridCellDirective, selector: "[gridCell]" }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05);position:relative}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-track{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow:hidden}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-overflow{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dash-tab-active-text);white-space:nowrap;flex-shrink:0;transition:background .2s,border-color .2s}.btn-overflow:hover{background:rgba(10,132,255,.18);border-color:var(--dash-accent-color);color:var(--dash-accent-color)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 14px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.tab-switcher-overlay{position:absolute;inset:0;z-index:1000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.tab-switcher-sheet{background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.08);border-radius:24px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 80px);display:flex;flex-direction:column;overflow:hidden;animation:sheet-in .22s cubic-bezier(.32,1.2,.5,1)}@keyframes sheet-in{0%{transform:translateY(-16px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.tab-switcher-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.tab-switcher-title{font-size:15px;font-weight:700;color:var(--dash-tab-active-text)}.tab-switcher-close-btn{background:rgba(255,255,255,.07);border:none;color:var(--dash-fore-color);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .15s,color .15s}.tab-switcher-close-btn:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.tab-switcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.tab-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 12px;border-radius:16px;background:var(--dash-card-bg);border:1.5px solid transparent;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;position:relative}.tab-card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}.tab-card.active{border-color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.tab-card-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dash-fore-color)}.tab-card.active .tab-card-icon{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.tab-card-name{font-size:13px;font-weight:500;color:var(--dash-tab-active-text);text-align:center;word-break:break-word;line-height:1.3}.tab-card-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.tab-card:hover .tab-card-actions{opacity:1}.tab-card-btn{background:rgba(255,255,255,.07);border:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--dash-fore-color);transition:background .15s,color .15s}.tab-card-popout:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.tab-card-remove:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.tab-switcher-footer{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.tab-switcher-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;border-radius:16px;background:rgba(10,132,255,.15);border:1.5px dashed rgba(10,132,255,.4);color:var(--dash-accent-color);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.tab-switcher-add-btn:hover{background:rgba(10,132,255,.25);border-color:var(--dash-accent-color)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "theme"], outputs: ["editRequested", "removeRequested"] }, { kind: "component", type: CustomGridComponent, selector: "app-grid", inputs: ["widgets", "columns", "gap", "rowHeight", "minItemCols", "minItemRows"], outputs: ["itemChanged", "layoutChanged"] }, { kind: "directive", type: GridCellDirective, selector: "[gridCell]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dashboard', template: `
-    <!-- ══════════════════════════════════════════════════════════
-         POPPED-OUT MODE
-         ══════════════════════════════════════════════════════════ -->
+    <!-- POPPED-OUT MODE -->
     <ng-container *ngIf="isPoppedOut; else normalMode">
       <div class="popout-wrapper" [ngStyle]="wrapperStyles">
         <header class="popout-header">
           <span class="popout-title">{{ activePage?.name }}</span>
         </header>
-        <div class="grid-container">
-          <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
-            <ng-template gridCell let-widget="widget">
-              <app-widget-renderer
-                [widget]="widget"
-                [theme]="resolvedTheme"
-                (editRequested)="editWidgetRequested.emit($event)"
-                (removeRequested)="onRemoveWidget($event)"
-              >
-                <ng-container
-                  *ngIf="cellTemplate"
-                  [ngTemplateOutlet]="cellTemplate"
-                  [ngTemplateOutletContext]="{ widget: widget }">
-                </ng-container>
-              </app-widget-renderer>
-            </ng-template>
-          </app-grid>
-        </div>
+        <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+          <ng-template gridCell let-widget="widget">
+            <app-widget-renderer [widget]="widget" [theme]="resolvedTheme"
+              (editRequested)="editWidgetRequested.emit($event)"
+              (removeRequested)="onRemoveWidget($event)">
+              <ng-container *ngIf="cellTemplate"
+                [ngTemplateOutlet]="cellTemplate"
+                [ngTemplateOutletContext]="{ widget: widget }">
+              </ng-container>
+            </app-widget-renderer>
+          </ng-template>
+        </app-grid>
       </div>
     </ng-container>
 
-    <!-- ══════════════════════════════════════════════════════════
-         NORMAL MODE
-         ══════════════════════════════════════════════════════════ -->
+    <!-- NORMAL MODE -->
     <ng-template #normalMode>
       <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
         <main class="main-content">
 
           <header class="dashboard-header">
-            <div class="tabs-container">
+
+            <!-- Tab bar -->
+            <div class="tabs-track" #tabsTrack>
+              <!-- Visible tabs -->
               <div
-                *ngFor="let page of pages"
+                *ngFor="let page of visiblePages"
                 class="tab"
                 [class.active]="page.id === activePageId"
                 (click)="onSelectPage(page.id)"
@@ -1150,30 +1294,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                   <i class="la la-times"></i>
                 </button>
               </div>
+
+              <!-- Overflow button — shown only when there are hidden tabs -->
+              <button
+                *ngIf="hiddenCount > 0"
+                class="btn-overflow"
+                (click)="openTabSwitcher()"
+                title="Show all workspaces"
+              >
+                <span>+{{ hiddenCount }}</span>
+                <i class="la la-th-large"></i>
+              </button>
+
+              <!-- Add page button -->
               <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
                 <i class="la la-plus"></i>
               </button>
             </div>
 
-            <!-- Add Widget button — consumer decides what happens -->
             <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
               <i class="la la-plus"></i>
               <span>Add Widget</span>
             </button>
+
           </header>
 
+          <!-- ── Tab-switcher overlay (Chrome mobile style) ── -->
+          <div class="tab-switcher-overlay" *ngIf="tabSwitcherOpen" (click)="closeTabSwitcher()">
+            <div class="tab-switcher-sheet" (click)="$event.stopPropagation()">
+
+              <div class="tab-switcher-header">
+                <span class="tab-switcher-title">{{ pages.length }} Workspace{{ pages.length !== 1 ? 's' : '' }}</span>
+                <button class="tab-switcher-close-btn" (click)="closeTabSwitcher()" title="Close">
+                  <i class="la la-times"></i>
+                </button>
+              </div>
+
+              <div class="tab-switcher-grid">
+                <div
+                  *ngFor="let page of pages"
+                  class="tab-card"
+                  [class.active]="page.id === activePageId"
+                  (click)="onSwitcherSelect(page.id)"
+                >
+                  <div class="tab-card-icon">
+                    <i class="la la-th-large"></i>
+                  </div>
+                  <span class="tab-card-name">{{ page.name }}</span>
+                  <div class="tab-card-actions">
+                    <button class="tab-card-btn tab-card-popout" (click)="onSwitcherPopOut($event, page.id)" title="Open in new window">
+                      <i class="la la-external-link-alt"></i>
+                    </button>
+                    <button class="tab-card-btn tab-card-remove" *ngIf="pages.length > 1" (click)="onSwitcherRemove($event, page.id)" title="Close">
+                      <i class="la la-times"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="tab-switcher-footer">
+                <button class="tab-switcher-add-btn" (click)="onSwitcherAdd()">
+                  <i class="la la-plus"></i>
+                  <span>New Workspace</span>
+                </button>
+              </div>
+
+            </div>
+          </div>
+
           <div class="grid-container">
             <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
               <ng-template gridCell let-widget="widget">
-                <app-widget-renderer
-                  [widget]="widget"
-                  [theme]="resolvedTheme"
+                <app-widget-renderer [widget]="widget" [theme]="resolvedTheme"
                   (editRequested)="editWidgetRequested.emit($event)"
-                  (removeRequested)="onRemoveWidget($event)"
-                >
-                  <!-- Stamp consumer's cell template (if provided) inside the card body -->
-                  <ng-container
-                    *ngIf="cellTemplate"
+                  (removeRequested)="onRemoveWidget($event)">
+                  <ng-container *ngIf="cellTemplate"
                     [ngTemplateOutlet]="cellTemplate"
                     [ngTemplateOutletContext]="{ widget: widget }">
                   </ng-container>
@@ -1185,8 +1380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </main>
       </div>
     </ng-template>
-  `, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0;background:var(--dash-panel-bg);padding:16px;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: DashboardStateService }]; }, propDecorators: { initialLayout: [{
+  `, styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--dash-tabs-container-color: rgba(44,44,46,.6);--dash-tab-active-color: #3a3a3c;--dash-tab-active-text: #ffffff;--dash-tab-hover-text: #e5e5ea;--dash-add-widget-text: #ffffff;--dash-popout-title-color: #ffffff;--dash-widget-title-color: #ffffff;--dash-drag-handle-color: rgba(255,255,255,.2);--dash-widget-border-color: rgba(255,255,255,.07);--dash-widget-btn-bg: rgba(255,255,255,.07);--dash-widget-btn-color: rgba(255,255,255,.5);--dash-placeholder-color: #0a84ff;--dash-resize-handle-color: rgba(255,255,255,.25)}.dashboard-wrapper{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.05);position:relative}.popout-wrapper{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:var(--dash-popout-title-color)}.popout-wrapper app-grid{flex:1;min-height:0;overflow:auto}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-shrink:0}.tabs-track{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:var(--dash-tabs-container-color);backdrop-filter:blur(10px);border-radius:25px;padding:6px;overflow:hidden}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}.tab.active{background:var(--dash-tab-active-color);color:var(--dash-tab-active-text)}.tab:hover:not(.active){color:var(--dash-tab-hover-text);background:rgba(255,255,255,.05)}.tab-name{white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-overflow{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dash-tab-active-text);white-space:nowrap;flex-shrink:0;transition:background .2s,border-color .2s}.btn-overflow:hover{background:rgba(10,132,255,.18);border-color:var(--dash-accent-color);color:var(--dash-accent-color)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 14px;cursor:pointer;border-radius:20px;flex-shrink:0;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.tab-switcher-overlay{position:absolute;inset:0;z-index:1000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.tab-switcher-sheet{background:var(--dash-panel-bg);border:1px solid rgba(255,255,255,.08);border-radius:24px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 80px);display:flex;flex-direction:column;overflow:hidden;animation:sheet-in .22s cubic-bezier(.32,1.2,.5,1)}@keyframes sheet-in{0%{transform:translateY(-16px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.tab-switcher-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.tab-switcher-title{font-size:15px;font-weight:700;color:var(--dash-tab-active-text)}.tab-switcher-close-btn{background:rgba(255,255,255,.07);border:none;color:var(--dash-fore-color);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .15s,color .15s}.tab-switcher-close-btn:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.tab-switcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.tab-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 12px;border-radius:16px;background:var(--dash-card-bg);border:1.5px solid transparent;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;position:relative}.tab-card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}.tab-card.active{border-color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.tab-card-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dash-fore-color)}.tab-card.active .tab-card-icon{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.tab-card-name{font-size:13px;font-weight:500;color:var(--dash-tab-active-text);text-align:center;word-break:break-word;line-height:1.3}.tab-card-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.tab-card:hover .tab-card-actions{opacity:1}.tab-card-btn{background:rgba(255,255,255,.07);border:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--dash-fore-color);transition:background .15s,color .15s}.tab-card-popout:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.tab-card-remove:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.tab-switcher-footer{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.tab-switcher-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;border-radius:16px;background:rgba(10,132,255,.15);border:1.5px dashed rgba(10,132,255,.4);color:var(--dash-accent-color);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.tab-switcher-add-btn:hover{background:rgba(10,132,255,.25);border-color:var(--dash-accent-color)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:var(--dash-add-widget-text);font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .15s}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: DashboardStateService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { initialLayout: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -1197,15 +1392,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [GridCellDirective, { read: TemplateRef }]
+            }], tabsTrackRef: [{
+                type: ViewChild,
+                args: ['tabsTrack']
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 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] });
@@ -1215,6 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{
                     declarations: [
                         DashboardComponent,
+                        OverflowActivePipe,
                         WidgetRendererComponent,
                         CustomGridComponent,
                         GridCellDirective,
@@ -1225,6 +1429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     providers: [DashboardStateService],
                     exports: [
                         DashboardComponent,
+                        OverflowActivePipe,
                         WidgetRendererComponent,
                         CustomGridComponent,
                         GridCellDirective,
@@ -1256,5 +1461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppModule, CustomGridComponent, DashboardComponent, DashboardModule, DashboardStateService, GridCellDirective, WidgetRendererComponent };
+export { AppModule, CustomGridComponent, DashboardComponent, DashboardModule, DashboardStateService, GridCellDirective, OverflowActivePipe, WidgetRendererComponent };
 //# sourceMappingURL=ogidor-dashboard.mjs.map