@ogidor/dashboard 1.0.3 → 1.0.4

package/dist-lib/fesm2015/ogidor-dashboard.mjs

@@ -1,1154 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { BehaviorSubject, Subject, Subscription } from 'rxjs';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i4 from 'angular-gridster2';
-import { GridsterModule } from 'angular-gridster2';
-import * as i3 from 'ng-apexcharts';
-import { NgApexchartsModule } from 'ng-apexcharts';
-import { BrowserModule } from '@angular/platform-browser';
-
-class DashboardStateService {
-    constructor() {
-        this.STORAGE_KEY = 'xtb_dashboard_layout';
-        this.initialPages = [
-            {
-                id: 'page-1',
-                name: 'Default Workspace',
-                widgets: [
-                    {
-                        id: 'w-1',
-                        type: 'LINE',
-                        x: 0,
-                        y: 0,
-                        cols: 4,
-                        rows: 4,
-                        title: 'Market Trend',
-                        data: { series: [{ name: 'Price', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }] }
-                    },
-                    {
-                        id: 'w-2',
-                        type: 'DONUT',
-                        x: 4,
-                        y: 0,
-                        cols: 2,
-                        rows: 4,
-                        title: 'Asset Allocation',
-                        data: { series: [44, 55, 41, 17, 15] }
-                    }
-                ]
-            }
-        ];
-        this.pagesSubject = new BehaviorSubject(this.initialPages);
-        this.activePageIdSubject = new BehaviorSubject(this.initialPages[0].id);
-        /**
-         * Emits whenever a widget's data is updated programmatically.
-         * Key = widget id, value = new data payload.
-         */
-        this.widgetDataSubject = new Subject();
-        this.widgetData$ = this.widgetDataSubject.asObservable();
-        this.pages$ = this.pagesSubject.asObservable();
-        this.activePageId$ = this.activePageIdSubject.asObservable();
-        const saved = localStorage.getItem(this.STORAGE_KEY);
-        if (saved) {
-            try {
-                this.loadLayout(JSON.parse(saved));
-            }
-            catch (e) {
-                console.error('Failed to load saved layout', e);
-            }
-        }
-    }
-    getActivePage() {
-        return this.pagesSubject.value.find(p => p.id === this.activePageIdSubject.value);
-    }
-    setActivePage(id) {
-        this.activePageIdSubject.next(id);
-    }
-    addPage(name) {
-        const newPage = {
-            id: `page-${Date.now()}`,
-            name,
-            widgets: []
-        };
-        const updatedPages = [...this.pagesSubject.value, newPage];
-        this.pagesSubject.next(updatedPages);
-        this.activePageIdSubject.next(newPage.id);
-        this.saveToLocalStorage();
-    }
-    removePage(id) {
-        const pages = this.pagesSubject.value;
-        if (pages.length <= 1)
-            return;
-        const updatedPages = pages.filter(p => p.id !== id);
-        this.pagesSubject.next(updatedPages);
-        if (this.activePageIdSubject.value === id) {
-            this.activePageIdSubject.next(updatedPages[0].id);
-        }
-        this.saveToLocalStorage();
-    }
-    addWidget(type) {
-        const activePage = this.getActivePage();
-        if (!activePage)
-            return;
-        const newWidget = {
-            id: `widget-${Date.now()}`,
-            type,
-            x: 0, y: 0,
-            cols: type === 'DONUT' ? 2 : 4,
-            rows: 4,
-            title: `${type.charAt(0) + type.slice(1).toLowerCase()} Chart`,
-            data: this.getDefaultDataForType(type)
-        };
-        activePage.widgets.push(newWidget);
-        this.updatePages(this.pagesSubject.value);
-    }
-    addWidgetWithData(type, title, data) {
-        const activePage = this.getActivePage();
-        if (!activePage)
-            return;
-        const newWidget = {
-            id: `widget-${Date.now()}`,
-            type,
-            x: 0, y: 0,
-            cols: type === 'DONUT' ? 3 : 6,
-            rows: 4,
-            title,
-            data
-        };
-        activePage.widgets.push(newWidget);
-        this.updatePages(this.pagesSubject.value);
-    }
-    getDefaultDataForType(type) {
-        if (type === 'DONUT') {
-            return { series: [30, 20, 50] };
-        }
-        return {
-            series: [{
-                    name: 'Sample Data',
-                    data: Array.from({ length: 10 }, () => Math.floor(Math.random() * 100))
-                }]
-        };
-    }
-    updateWidgetPosition(pageId, widgetId, x, y, cols, rows) {
-        const pages = this.pagesSubject.value;
-        const page = pages.find(p => p.id === pageId);
-        if (page) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                widget.x = x;
-                widget.y = y;
-                widget.cols = cols;
-                widget.rows = rows;
-                this.updatePages(pages);
-            }
-        }
-    }
-    removeWidget(widgetId) {
-        const activePage = this.getActivePage();
-        if (activePage) {
-            activePage.widgets = activePage.widgets.filter(w => w.id !== widgetId);
-            this.updatePages(this.pagesSubject.value);
-        }
-    }
-    /**
-     * Push new data into a widget by its id.
-     * The widget's chart will re-render immediately.
-     *
-     * @param widgetId  The `id` of the target widget.
-     * @param data      New data — `LineBarData` for LINE/BAR, `DonutData` for DONUT.
-     */
-    updateWidgetData(widgetId, data) {
-        const pages = this.pagesSubject.value;
-        for (const page of pages) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                widget.data = data;
-                this.widgetDataSubject.next({ widgetId, data });
-                this.updatePages(pages);
-                return;
-            }
-        }
-        console.warn(`[Dashboard] updateWidgetData: widget "${widgetId}" not found.`);
-    }
-    updateWidgetMeta(widgetId, meta) {
-        const pages = this.pagesSubject.value;
-        for (const page of pages) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                if (meta.title !== undefined)
-                    widget.title = meta.title;
-                if (meta.colors !== undefined)
-                    widget.colors = meta.colors;
-                if (meta.cardColor !== undefined)
-                    widget.cardColor = meta.cardColor;
-                if (meta.data !== undefined) {
-                    widget.data = meta.data;
-                    this.widgetDataSubject.next({ widgetId, data: meta.data });
-                }
-                this.updatePages(pages);
-                return;
-            }
-        }
-    }
-    updatePages(pages) {
-        this.pagesSubject.next([...pages]);
-        this.saveToLocalStorage();
-    }
-    serializeLayout() {
-        const config = {
-            pages: this.pagesSubject.value,
-            activePageId: this.activePageIdSubject.value
-        };
-        return JSON.stringify(config);
-    }
-    loadLayout(config) {
-        if (config && config.pages) {
-            this.pagesSubject.next(config.pages);
-            if (config.activePageId) {
-                this.activePageIdSubject.next(config.activePageId);
-            }
-        }
-    }
-    saveToLocalStorage() {
-        localStorage.setItem(this.STORAGE_KEY, this.serializeLayout());
-    }
-}
-DashboardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-const DEFAULT_CHART_COLORS = ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'];
-const DEFAULT_FORECOLOR = '#8e8e93';
-const DEFAULT_CARD_BG = '#2c2c2e';
-class WidgetRendererComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.editRequested = new EventEmitter();
-        this.cardStyles = {};
-        this.subs = new Subscription();
-    }
-    ngOnInit() {
-        this.applyStyles();
-        this.initChart();
-        this.subs.add(this.stateService.widgetData$.subscribe(({ widgetId, data }) => {
-            if (widgetId === this.widget.id) {
-                this.widget = Object.assign(Object.assign({}, this.widget), { data });
-                this.initChart();
-            }
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes['theme']) {
-            this.applyStyles();
-            this.initChart();
-        }
-        if (changes['widget'] && !changes['widget'].firstChange) {
-            this.applyStyles();
-            this.initChart();
-        }
-    }
-    ngOnDestroy() { this.subs.unsubscribe(); }
-    applyStyles() {
-        var _a;
-        this.cardStyles = {
-            background: (_a = this.widget.cardColor) !== null && _a !== void 0 ? _a : 'var(--dash-card-bg)'
-        };
-    }
-    resolvedColors() {
-        var _a, _b, _c;
-        return (_c = (_a = this.widget.colors) !== null && _a !== void 0 ? _a : (_b = this.theme) === null || _b === void 0 ? void 0 : _b.chartColors) !== null && _c !== void 0 ? _c : DEFAULT_CHART_COLORS;
-    }
-    initChart() {
-        var _a, _b, _c, _d;
-        const isDonut = this.widget.type === 'DONUT';
-        const colors = this.resolvedColors();
-        const foreColor = (_b = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.chartForeColor) !== null && _b !== void 0 ? _b : DEFAULT_FORECOLOR;
-        const lineBarData = !isDonut ? this.widget.data : null;
-        const donutData = isDonut ? this.widget.data : null;
-        const categories = (_c = lineBarData === null || lineBarData === void 0 ? void 0 : lineBarData.categories) !== null && _c !== void 0 ? _c : [];
-        const donutLabels = (_d = donutData === null || donutData === void 0 ? void 0 : donutData.labels) !== null && _d !== void 0 ? _d : ['A', 'B', 'C', 'D', 'E'];
-        this.chartOptions = {
-            series: this.widget.data.series,
-            chart: {
-                width: '100%', height: '100%',
-                type: this.widget.type.toLowerCase(),
-                toolbar: { show: false },
-                animations: { enabled: true, speed: 400 },
-                background: 'transparent', foreColor,
-                parentHeightOffset: 0, sparkline: { enabled: false },
-            },
-            theme: { mode: 'dark' },
-            colors,
-            stroke: { curve: 'smooth', width: isDonut ? 0 : 3 },
-            dataLabels: { enabled: false },
-            legend: { position: 'bottom', labels: { colors: foreColor } },
-            tooltip: { theme: 'dark' },
-            plotOptions: {
-                pie: { donut: { size: '70%', labels: { show: true, total: { show: true, label: 'Total', color: '#fff' } } } },
-                bar: { borderRadius: 8, columnWidth: '50%' }
-            },
-            xaxis: {
-                categories: categories.length ? categories : undefined,
-                labels: { style: { colors: foreColor } },
-                axisBorder: { show: false }, axisTicks: { show: false }
-            },
-            yaxis: { labels: { style: { colors: foreColor } } },
-            labels: isDonut ? donutLabels : undefined,
-        };
-    }
-    onRemove() { this.onRemoveWidget(this.widget.id); }
-}
-WidgetRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetRendererComponent, deps: [{ token: DashboardStateService }], target: i0.ɵɵFactoryTarget.Component });
-WidgetRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: { widget: "widget", onRemoveWidget: "onRemoveWidget", theme: "theme" }, outputs: { editRequested: "editRequested" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="widget-container" [ngStyle]="cardStyles">
-      <div class="widget-header">
-        <span class="widget-title">{{ widget.title }}</span>
-        <div class="header-actions">
-          <button class="btn-icon btn-edit" (click)="editRequested.emit(widget)" title="Edit widget">
-            <i class="la la-pen"></i>
-          </button>
-          <button class="btn-icon btn-close-widget" (click)="onRemove()" title="Remove widget">
-            <i class="la la-times"></i>
-          </button>
-        </div>
-      </div>
-      <div class="widget-body">
-        <apx-chart
-          *ngIf="chartOptions.chart"
-          style="display:block;width:100%;height:100%;"
-          [series]="chartOptions.series!"
-          [chart]="chartOptions.chart!"
-          [xaxis]="chartOptions.xaxis!"
-          [stroke]="chartOptions.stroke!"
-          [dataLabels]="chartOptions.dataLabels!"
-          [plotOptions]="chartOptions.plotOptions!"
-          [yaxis]="chartOptions.yaxis!"
-          [labels]="chartOptions.labels!"
-          [legend]="chartOptions.legend!"
-          [colors]="chartOptions.colors!"
-          [theme]="chartOptions.theme!"
-          [tooltip]="chartOptions.tooltip!"
-        ></apx-chart>
-      </div>
-    </div>
-  `, isInline: true, styles: [".widget-container{height:100%;width:100%;display:flex;flex-direction:column;border-radius:30px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.08);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg)}.widget-container:hover{box-shadow:0 12px 32px #00000059}.widget-header{padding:14px 16px 4px;display:flex;justify-content:space-between;align-items:center;cursor:move;flex-shrink:0}.widget-title{color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px}.header-actions{display:flex;gap:6px;align-items:center}.btn-icon{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);cursor:pointer;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.btn-close-widget:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.widget-body{flex:1;min-height:0;padding:4px 12px 12px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-widget-renderer', template: `
-    <div class="widget-container" [ngStyle]="cardStyles">
-      <div class="widget-header">
-        <span class="widget-title">{{ widget.title }}</span>
-        <div class="header-actions">
-          <button class="btn-icon btn-edit" (click)="editRequested.emit(widget)" title="Edit widget">
-            <i class="la la-pen"></i>
-          </button>
-          <button class="btn-icon btn-close-widget" (click)="onRemove()" title="Remove widget">
-            <i class="la la-times"></i>
-          </button>
-        </div>
-      </div>
-      <div class="widget-body">
-        <apx-chart
-          *ngIf="chartOptions.chart"
-          style="display:block;width:100%;height:100%;"
-          [series]="chartOptions.series!"
-          [chart]="chartOptions.chart!"
-          [xaxis]="chartOptions.xaxis!"
-          [stroke]="chartOptions.stroke!"
-          [dataLabels]="chartOptions.dataLabels!"
-          [plotOptions]="chartOptions.plotOptions!"
-          [yaxis]="chartOptions.yaxis!"
-          [labels]="chartOptions.labels!"
-          [legend]="chartOptions.legend!"
-          [colors]="chartOptions.colors!"
-          [theme]="chartOptions.theme!"
-          [tooltip]="chartOptions.tooltip!"
-        ></apx-chart>
-      </div>
-    </div>
-  `, styles: [".widget-container{height:100%;width:100%;display:flex;flex-direction:column;border-radius:30px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.08);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg)}.widget-container:hover{box-shadow:0 12px 32px #00000059}.widget-header{padding:14px 16px 4px;display:flex;justify-content:space-between;align-items:center;cursor:move;flex-shrink:0}.widget-title{color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px}.header-actions{display:flex;gap:6px;align-items:center}.btn-icon{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);cursor:pointer;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.btn-close-widget:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.widget-body{flex:1;min-height:0;padding:4px 12px 12px;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: DashboardStateService }]; }, propDecorators: { widget: [{
-                type: Input
-            }], onRemoveWidget: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], editRequested: [{
-                type: Output
-            }] } });
-
-const DEFAULT_THEME = {
-    backgroundColor: '#000000',
-    panelColor: '#1c1c1e',
-    widgetCardColor: '#2c2c2e',
-    chartForeColor: '#8e8e93',
-    accentColor: '#0a84ff',
-    dangerColor: '#ff453a',
-    chartColors: ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'],
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-};
-class DashboardComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.resolvedTheme = Object.assign({}, DEFAULT_THEME);
-        this.wrapperStyles = {};
-        this.pages = [];
-        this.activePageId = '';
-        // ── Dialog state ──
-        this.dialogOpen = false;
-        this.dialogType = 'LINE';
-        this.dialogTitle = '';
-        this.dialogCategories = '';
-        this.dialogSeries = [{ name: 'Series 1', dataRaw: '' }];
-        this.dialogSlices = [
-            { label: 'Slice A', value: null },
-            { label: 'Slice B', value: null },
-            { label: 'Slice C', value: null },
-        ];
-        this.widgetTypes = [
-            { value: 'LINE', label: 'Line', icon: 'la-chart-area' },
-            { value: 'BAR', label: 'Bar', icon: 'la-chart-bar' },
-            { value: 'DONUT', label: 'Donut', icon: 'la-chart-pie' },
-        ];
-        this.subs = new Subscription();
-        // ── Edit dialog state ──
-        this.editDialogOpen = false;
-        this.editWidgetType = 'LINE';
-        this.editTitle = '';
-        this.editCardColor = '';
-        this.editColors = [];
-        this.editSeries = [];
-        this.editCategories = '';
-        this.editSlices = [];
-        this.DEFAULT_COLORS = ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'];
-        this.removeWidgetHandler = (id) => { this.stateService.removeWidget(id); };
-    }
-    ngOnChanges(changes) {
-        if (changes['theme'] || changes['initialLayout'])
-            this.applyTheme();
-    }
-    ngOnInit() {
-        this.applyTheme();
-        if (this.initialLayout) {
-            try {
-                this.stateService.loadLayout(JSON.parse(this.initialLayout));
-            }
-            catch (e) {
-                console.error('[Dashboard] Failed to parse initialLayout', e);
-            }
-        }
-        this.options = {
-            gridType: 'fit',
-            displayGrid: 'none',
-            pushItems: true,
-            draggable: { enabled: true },
-            resizable: { enabled: true },
-            minCols: 12, maxCols: 12,
-            minRows: 12, maxRows: 50,
-            margin: 20, outerMargin: true,
-            itemChangeCallback: (item) => {
-                this.stateService.updateWidgetPosition(this.activePageId, item.id, item.x, item.y, item.cols, item.rows);
-            }
-        };
-        this.subs.add(this.stateService.pages$.subscribe(pages => {
-            this.pages = pages;
-            this.updateActivePage();
-        }));
-        this.subs.add(this.stateService.activePageId$.subscribe(id => {
-            this.activePageId = id;
-            this.updateActivePage();
-        }));
-    }
-    ngOnDestroy() { this.subs.unsubscribe(); }
-    applyTheme() {
-        var _a;
-        this.resolvedTheme = Object.assign(Object.assign({}, DEFAULT_THEME), ((_a = this.theme) !== null && _a !== void 0 ? _a : {}));
-        this.wrapperStyles = {
-            '--dash-bg': this.resolvedTheme.backgroundColor,
-            '--dash-panel-bg': this.resolvedTheme.panelColor,
-            '--dash-card-bg': this.resolvedTheme.widgetCardColor,
-            '--dash-fore-color': this.resolvedTheme.chartForeColor,
-            '--dash-accent-color': this.resolvedTheme.accentColor,
-            '--dash-danger-color': this.resolvedTheme.dangerColor,
-            '--dash-font-family': this.resolvedTheme.fontFamily,
-        };
-    }
-    updateActivePage() {
-        this.activePage = this.pages.find(p => p.id === this.activePageId);
-    }
-    // ── Page actions ──
-    onSelectPage(id) { this.stateService.setActivePage(id); }
-    onAddPage() {
-        const name = prompt('Enter workspace name:', `Workspace ${this.pages.length + 1}`);
-        if (name)
-            this.stateService.addPage(name);
-    }
-    onRemovePage(event, id) {
-        event.stopPropagation();
-        if (confirm('Remove this workspace?'))
-            this.stateService.removePage(id);
-    }
-    // ── Dialog ──
-    openDialog() {
-        this.dialogType = 'LINE';
-        this.dialogTitle = '';
-        this.dialogCategories = '';
-        this.dialogSeries = [{ name: 'Series 1', dataRaw: '' }];
-        this.dialogSlices = [
-            { label: 'Slice A', value: null },
-            { label: 'Slice B', value: null },
-            { label: 'Slice C', value: null },
-        ];
-        this.dialogOpen = true;
-    }
-    closeDialog() { this.dialogOpen = false; }
-    addSeries() { this.dialogSeries.push({ name: `Series ${this.dialogSeries.length + 1}`, dataRaw: '' }); }
-    removeSeries(i) { this.dialogSeries.splice(i, 1); }
-    addSlice() { this.dialogSlices.push({ label: `Slice ${this.dialogSlices.length + 1}`, value: null }); }
-    removeSlice(i) { this.dialogSlices.splice(i, 1); }
-    confirmAddWidget() {
-        const title = this.dialogTitle.trim();
-        if (!title)
-            return;
-        let data;
-        if (this.dialogType === 'DONUT') {
-            const validSlices = this.dialogSlices.filter(s => s.value !== null && s.label.trim());
-            data = {
-                series: validSlices.length
-                    ? validSlices.map(s => Number(s.value))
-                    : [30, 20, 50],
-                labels: validSlices.length
-                    ? validSlices.map(s => s.label)
-                    : ['A', 'B', 'C'],
-            };
-        }
-        else {
-            const parseNums = (raw) => raw.split(',').map(v => parseFloat(v.trim())).filter(n => !isNaN(n));
-            data = {
-                series: this.dialogSeries.map(s => ({
-                    name: s.name || 'Series',
-                    data: s.dataRaw.trim()
-                        ? parseNums(s.dataRaw)
-                        : Array.from({ length: 8 }, () => Math.floor(Math.random() * 100)),
-                })),
-                categories: this.dialogCategories.trim()
-                    ? this.dialogCategories.split(',').map(c => c.trim())
-                    : undefined,
-            };
-        }
-        this.stateService.addWidgetWithData(this.dialogType, title, data);
-        this.closeDialog();
-    }
-    openEditDialog(widget) {
-        var _a, _b, _c, _d;
-        this.editingWidget = widget;
-        this.editWidgetType = widget.type;
-        this.editTitle = widget.title;
-        this.editCardColor = (_a = widget.cardColor) !== null && _a !== void 0 ? _a : this.resolvedTheme.widgetCardColor;
-        this.editColors = ((_b = widget.colors) === null || _b === void 0 ? void 0 : _b.length)
-            ? [...widget.colors]
-            : [...this.resolvedTheme.chartColors];
-        if (widget.type === 'DONUT') {
-            const d = widget.data;
-            this.editSlices = d.series.map((v, i) => {
-                var _a, _b;
-                return ({
-                    label: (_b = (_a = d.labels) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : `Slice ${i + 1}`,
-                    value: v,
-                });
-            });
-            this.editColors = this.editColors.slice(0, this.editSlices.length);
-            while (this.editColors.length < this.editSlices.length) {
-                this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-            }
-        }
-        else {
-            const d = widget.data;
-            this.editSeries = d.series.map((s) => ({ name: s.name, dataRaw: s.data.join(',') }));
-            this.editCategories = (_d = (_c = d.categories) === null || _c === void 0 ? void 0 : _c.join(',')) !== null && _d !== void 0 ? _d : '';
-            this.editColors = this.editColors.slice(0, this.editSeries.length);
-            while (this.editColors.length < this.editSeries.length) {
-                this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-            }
-        }
-        this.editDialogOpen = true;
-    }
-    closeEditDialog() { this.editDialogOpen = false; this.editingWidget = undefined; }
-    getEditSeriesLabel(i) {
-        var _a, _b;
-        if (this.editWidgetType === 'DONUT')
-            return ((_a = this.editSlices[i]) === null || _a === void 0 ? void 0 : _a.label) || `Slice ${i + 1}`;
-        return ((_b = this.editSeries[i]) === null || _b === void 0 ? void 0 : _b.name) || `Series ${i + 1}`;
-    }
-    addEditSeries() {
-        this.editSeries.push({ name: `Series ${this.editSeries.length + 1}`, dataRaw: '' });
-        this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-    }
-    removeEditSeries(i) { this.editSeries.splice(i, 1); this.editColors.splice(i, 1); }
-    addEditSlice() {
-        this.editSlices.push({ label: `Slice ${this.editSlices.length + 1}`, value: null });
-        this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-    }
-    removeEditSlice(i) { this.editSlices.splice(i, 1); this.editColors.splice(i, 1); }
-    confirmEditWidget() {
-        if (!this.editingWidget)
-            return;
-        const parseNums = (raw) => raw.split(',').map(v => parseFloat(v.trim())).filter(n => !isNaN(n));
-        let data;
-        if (this.editWidgetType === 'DONUT') {
-            data = {
-                series: this.editSlices.map(s => Number(s.value) || 0),
-                labels: this.editSlices.map(s => s.label),
-            };
-        }
-        else {
-            data = {
-                series: this.editSeries.map(s => ({
-                    name: s.name || 'Series',
-                    data: s.dataRaw.trim() ? parseNums(s.dataRaw) : [],
-                })),
-                categories: this.editCategories.trim()
-                    ? this.editCategories.split(',').map(c => c.trim())
-                    : undefined,
-            };
-        }
-        this.stateService.updateWidgetMeta(this.editingWidget.id, {
-            title: this.editTitle.trim() || this.editingWidget.title,
-            colors: [...this.editColors],
-            cardColor: this.editCardColor,
-            data,
-        });
-        this.closeEditDialog();
-    }
-    // ── Widget actions ──
-    onAddWidget(type) { this.stateService.addWidget(type); }
-    updateWidgetData(widgetId, data) {
-        this.stateService.updateWidgetData(widgetId, data);
-    }
-    serializeLayout() { return this.stateService.serializeLayout(); }
-}
-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" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
-      <main class="main-content">
-
-        <!-- ── Header ── -->
-        <header class="dashboard-header">
-          <!-- Tabs -->
-          <div class="tabs-container">
-            <div
-              *ngFor="let page of pages"
-              class="tab"
-              [class.active]="page.id === activePageId"
-              (click)="onSelectPage(page.id)"
-            >
-              <span class="tab-name">{{ page.name }}</span>
-              <button class="tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)">
-                <i class="la la-times"></i>
-              </button>
-            </div>
-            <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-              <i class="la la-plus"></i>
-            </button>
-          </div>
-
-          <!-- Add Widget button -->
-          <button class="btn-add-widget" (click)="openDialog()" title="Add widget">
-            <i class="la la-plus"></i>
-            <span>Add Widget</span>
-          </button>
-        </header>
-
-        <!-- ── Grid ── -->
-        <div class="grid-container">
-          <gridster [options]="options">
-            <gridster-item [item]="widget" *ngFor="let widget of activePage?.widgets">
-              <app-widget-renderer
-                [widget]="widget"
-                [onRemoveWidget]="removeWidgetHandler"
-                [theme]="resolvedTheme"
-                (editRequested)="openEditDialog($event)"
-              ></app-widget-renderer>
-            </gridster-item>
-          </gridster>
-        </div>
-      </main>
-    </div>
-
-    <!-- ── Add Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="dialogOpen" (click)="closeDialog()"></div>
-    <div class="dialog" *ngIf="dialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Add Widget</span>
-        <button class="dialog-close" (click)="closeDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Chart type picker -->
-        <div class="field-group">
-          <label class="field-label">Chart type</label>
-          <div class="type-picker">
-            <button
-              *ngFor="let t of widgetTypes"
-              class="type-btn"
-              [class.selected]="dialogType === t.value"
-              (click)="dialogType = t.value"
-            >
-              <i [class]="'la ' + t.icon"></i>
-              <span>{{ t.label }}</span>
-            </button>
-          </div>
-        </div>
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="dialogTitle" placeholder="My Chart" />
-        </div>
-
-        <!-- Series (LINE / BAR) -->
-        <ng-container *ngIf="dialogType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series</label>
-              <button class="btn-link" (click)="addSeries()"><i class="la la-plus"></i> Add series</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of dialogSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Series name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw"
-                       placeholder="Comma-separated values, e.g. 10,25,40" />
-                <button class="btn-remove-series" *ngIf="dialogSeries.length > 1" (click)="removeSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="dialogCategories" placeholder="Jan,Feb,Mar,Apr" />
-          </div>
-        </ng-container>
-
-        <!-- Slices (DONUT) -->
-        <ng-container *ngIf="dialogType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addSlice()"><i class="la la-plus"></i> Add slice</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of dialogSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="dialogSlices.length > 1" (click)="removeSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmAddWidget()" [disabled]="!dialogTitle.trim()">
-          <i class="la la-check"></i> Add Widget
-        </button>
-      </div>
-    </div>
-    <!-- ── Edit Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="editDialogOpen" (click)="closeEditDialog()"></div>
-    <div class="dialog" *ngIf="editDialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Edit Widget</span>
-        <button class="dialog-close" (click)="closeEditDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="editTitle" placeholder="Chart title" />
-        </div>
-
-        <!-- Card background -->
-        <div class="field-group">
-          <label class="field-label">Card color</label>
-          <div class="color-row">
-            <input type="color" class="color-swatch" [(ngModel)]="editCardColor" />
-            <input class="field-input" [(ngModel)]="editCardColor" placeholder="#2c2c2e" />
-          </div>
-        </div>
-
-        <!-- Series colors -->
-        <div class="field-group">
-          <label class="field-label">Series colors</label>
-          <div class="color-list">
-            <div class="color-item" *ngFor="let c of editColors; let i = index">
-              <input type="color" class="color-swatch" [(ngModel)]="editColors[i]" />
-              <input class="field-input color-hex" [(ngModel)]="editColors[i]" placeholder="#0a84ff" />
-              <span class="color-label">{{ getEditSeriesLabel(i) }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Data: LINE / BAR -->
-        <ng-container *ngIf="editWidgetType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series data</label>
-              <button class="btn-link" (click)="addEditSeries()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of editSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw" placeholder="10,20,30" />
-                <button class="btn-remove-series" *ngIf="editSeries.length > 1" (click)="removeEditSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="editCategories" placeholder="Jan,Feb,Mar" />
-          </div>
-        </ng-container>
-
-        <!-- Data: DONUT -->
-        <ng-container *ngIf="editWidgetType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addEditSlice()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of editSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="editSlices.length > 1" (click)="removeEditSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeEditDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmEditWidget()">
-          <i class="la la-check"></i> Save
-        </button>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{--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}.dashboard-wrapper{display:flex;height:100vh;width:100vw;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);box-shadow:0 10px 30px #00000080;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:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;padding:8px 20px;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:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{margin-right:8px}.tab-close{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:12px;cursor:pointer;opacity:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.tab:hover .tab-close{opacity:1}.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:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}gridster{background:transparent;height:100%!important}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:900}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:901;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--dash-panel-bg);border-radius:28px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px #000000b3;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.dialog-title{font-size:17px;font-weight:700;color:#fff}.dialog-close{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}.dialog-close:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.dialog-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}.field-group{display:flex;flex-direction:column;gap:8px}.field-label{font-size:13px;font-weight:600;color:var(--dash-fore-color);text-transform:uppercase;letter-spacing:.5px}.field-input{background:var(--dash-card-bg);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;color:#fff;font-size:14px;outline:none;width:100%;box-sizing:border-box}.field-input:focus{border-color:var(--dash-accent-color)}.type-picker{display:flex;gap:10px}.type-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--dash-card-bg);border:2px solid transparent;border-radius:16px;color:var(--dash-fore-color);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.type-btn.selected{border-color:var(--dash-accent-color);color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.btn-link{background:transparent;border:none;color:var(--dash-accent-color);font-size:13px;font-weight:600;cursor:pointer}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.07)}.btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--dash-fore-color);padding:10px 20px;border-radius:20px;cursor:pointer}.btn-confirm{background:var(--dash-accent-color);border:none;color:#fff;padding:10px 22px;border-radius:20px;font-weight:600;cursor:pointer}.btn-confirm:disabled{opacity:.4;cursor:not-allowed}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i4.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "onRemoveWidget", "theme"], outputs: ["editRequested"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-dashboard', template: `
-    <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
-      <main class="main-content">
-
-        <!-- ── Header ── -->
-        <header class="dashboard-header">
-          <!-- Tabs -->
-          <div class="tabs-container">
-            <div
-              *ngFor="let page of pages"
-              class="tab"
-              [class.active]="page.id === activePageId"
-              (click)="onSelectPage(page.id)"
-            >
-              <span class="tab-name">{{ page.name }}</span>
-              <button class="tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)">
-                <i class="la la-times"></i>
-              </button>
-            </div>
-            <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-              <i class="la la-plus"></i>
-            </button>
-          </div>
-
-          <!-- Add Widget button -->
-          <button class="btn-add-widget" (click)="openDialog()" title="Add widget">
-            <i class="la la-plus"></i>
-            <span>Add Widget</span>
-          </button>
-        </header>
-
-        <!-- ── Grid ── -->
-        <div class="grid-container">
-          <gridster [options]="options">
-            <gridster-item [item]="widget" *ngFor="let widget of activePage?.widgets">
-              <app-widget-renderer
-                [widget]="widget"
-                [onRemoveWidget]="removeWidgetHandler"
-                [theme]="resolvedTheme"
-                (editRequested)="openEditDialog($event)"
-              ></app-widget-renderer>
-            </gridster-item>
-          </gridster>
-        </div>
-      </main>
-    </div>
-
-    <!-- ── Add Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="dialogOpen" (click)="closeDialog()"></div>
-    <div class="dialog" *ngIf="dialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Add Widget</span>
-        <button class="dialog-close" (click)="closeDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Chart type picker -->
-        <div class="field-group">
-          <label class="field-label">Chart type</label>
-          <div class="type-picker">
-            <button
-              *ngFor="let t of widgetTypes"
-              class="type-btn"
-              [class.selected]="dialogType === t.value"
-              (click)="dialogType = t.value"
-            >
-              <i [class]="'la ' + t.icon"></i>
-              <span>{{ t.label }}</span>
-            </button>
-          </div>
-        </div>
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="dialogTitle" placeholder="My Chart" />
-        </div>
-
-        <!-- Series (LINE / BAR) -->
-        <ng-container *ngIf="dialogType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series</label>
-              <button class="btn-link" (click)="addSeries()"><i class="la la-plus"></i> Add series</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of dialogSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Series name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw"
-                       placeholder="Comma-separated values, e.g. 10,25,40" />
-                <button class="btn-remove-series" *ngIf="dialogSeries.length > 1" (click)="removeSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="dialogCategories" placeholder="Jan,Feb,Mar,Apr" />
-          </div>
-        </ng-container>
-
-        <!-- Slices (DONUT) -->
-        <ng-container *ngIf="dialogType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addSlice()"><i class="la la-plus"></i> Add slice</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of dialogSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="dialogSlices.length > 1" (click)="removeSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmAddWidget()" [disabled]="!dialogTitle.trim()">
-          <i class="la la-check"></i> Add Widget
-        </button>
-      </div>
-    </div>
-    <!-- ── Edit Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="editDialogOpen" (click)="closeEditDialog()"></div>
-    <div class="dialog" *ngIf="editDialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Edit Widget</span>
-        <button class="dialog-close" (click)="closeEditDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="editTitle" placeholder="Chart title" />
-        </div>
-
-        <!-- Card background -->
-        <div class="field-group">
-          <label class="field-label">Card color</label>
-          <div class="color-row">
-            <input type="color" class="color-swatch" [(ngModel)]="editCardColor" />
-            <input class="field-input" [(ngModel)]="editCardColor" placeholder="#2c2c2e" />
-          </div>
-        </div>
-
-        <!-- Series colors -->
-        <div class="field-group">
-          <label class="field-label">Series colors</label>
-          <div class="color-list">
-            <div class="color-item" *ngFor="let c of editColors; let i = index">
-              <input type="color" class="color-swatch" [(ngModel)]="editColors[i]" />
-              <input class="field-input color-hex" [(ngModel)]="editColors[i]" placeholder="#0a84ff" />
-              <span class="color-label">{{ getEditSeriesLabel(i) }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Data: LINE / BAR -->
-        <ng-container *ngIf="editWidgetType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series data</label>
-              <button class="btn-link" (click)="addEditSeries()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of editSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw" placeholder="10,20,30" />
-                <button class="btn-remove-series" *ngIf="editSeries.length > 1" (click)="removeEditSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="editCategories" placeholder="Jan,Feb,Mar" />
-          </div>
-        </ng-container>
-
-        <!-- Data: DONUT -->
-        <ng-container *ngIf="editWidgetType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addEditSlice()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of editSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="editSlices.length > 1" (click)="removeEditSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeEditDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmEditWidget()">
-          <i class="la la-check"></i> Save
-        </button>
-      </div>
-    </div>
-  `, styles: [":host{--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}.dashboard-wrapper{display:flex;height:100vh;width:100vw;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);box-shadow:0 10px 30px #00000080;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:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;padding:8px 20px;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:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{margin-right:8px}.tab-close{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:12px;cursor:pointer;opacity:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.tab:hover .tab-close{opacity:1}.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:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}gridster{background:transparent;height:100%!important}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:900}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:901;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--dash-panel-bg);border-radius:28px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px #000000b3;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.dialog-title{font-size:17px;font-weight:700;color:#fff}.dialog-close{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}.dialog-close:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.dialog-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}.field-group{display:flex;flex-direction:column;gap:8px}.field-label{font-size:13px;font-weight:600;color:var(--dash-fore-color);text-transform:uppercase;letter-spacing:.5px}.field-input{background:var(--dash-card-bg);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;color:#fff;font-size:14px;outline:none;width:100%;box-sizing:border-box}.field-input:focus{border-color:var(--dash-accent-color)}.type-picker{display:flex;gap:10px}.type-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--dash-card-bg);border:2px solid transparent;border-radius:16px;color:var(--dash-fore-color);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.type-btn.selected{border-color:var(--dash-accent-color);color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.btn-link{background:transparent;border:none;color:var(--dash-accent-color);font-size:13px;font-weight:600;cursor:pointer}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.07)}.btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--dash-fore-color);padding:10px 20px;border-radius:20px;cursor:pointer}.btn-confirm{background:var(--dash-accent-color);border:none;color:#fff;padding:10px 22px;border-radius:20px;font-weight:600;cursor:pointer}.btn-confirm:disabled{opacity:.4;cursor:not-allowed}\n"] }]
-        }], ctorParameters: function () { return [{ type: DashboardStateService }]; }, propDecorators: { initialLayout: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }] } });
-
-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,
-        WidgetRendererComponent], imports: [CommonModule,
-        FormsModule,
-        GridsterModule,
-        NgApexchartsModule], exports: [DashboardComponent,
-        WidgetRendererComponent] });
-DashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, providers: [DashboardStateService], imports: [CommonModule,
-        FormsModule,
-        GridsterModule,
-        NgApexchartsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DashboardComponent,
-                        WidgetRendererComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        GridsterModule,
-                        NgApexchartsModule
-                    ],
-                    providers: [DashboardStateService],
-                    exports: [
-                        DashboardComponent,
-                        WidgetRendererComponent
-                    ],
-                    schemas: [NO_ERRORS_SCHEMA]
-                }]
-        }] });
-/**
- * Root module for local demo / testing purposes.
- * In the final NPM package, users would only import the `DashboardModule`.
- */
-class AppModule {
-}
-AppModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AppModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AppModule, bootstrap: [DashboardComponent], imports: [BrowserModule, DashboardModule] });
-AppModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, imports: [BrowserModule,
-        DashboardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        BrowserModule,
-                        DashboardModule
-                    ],
-                    bootstrap: [DashboardComponent]
-                }]
-        }] });
-
-/*
- * Public API Surface of the dashboard library
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AppModule, DashboardComponent, DashboardModule, DashboardStateService, WidgetRendererComponent };
-//# sourceMappingURL=ogidor-dashboard.mjs.map