@ogidor/dashboard 1.0.0

package/fesm2015/ogidor-dashboard.mjs

@@ -0,0 +1,1153 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, NgModule } 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", "forecastDataPoints", "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
+                    ]
+                }]
+        }] });
+/**
+ * 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