@ogidor/dashboard 1.0.0

package/README.md

@@ -0,0 +1,103 @@
+# @ogidor/dashboard
+
+A professional, high-performance financial dashboard for Angular. Highly customizable, themeable via CSS variables, and powered by `angular-gridster2` and `ApexCharts`.
+
+## Features
+
+- **Drag & Drop Layout:** Responsive grid system using `angular-gridster2`.
+- **Interactive Charts:** Beautiful Line, Bar, and Donut charts via `ng-apexcharts`.
+- **Multi-Workspace Support:** Manage multiple dashboard pages (workspaces).
+- **Deeply Themeable:** Customize every color and font using simple CSS variables or a configuration object.
+- **Standalone Ready:** Sidebar removed for easy integration into your own application's navigation.
+
+## Installation
+
+```bash
+npm install @ogidor/dashboard angular-gridster2 apexcharts ng-apexcharts line-awesome
+```
+
+Ensure you have `line-awesome` icons included in your global styles (e.g., `angular.json` or `styles.scss`):
+
+```scss
+@import "line-awesome/dist/line-awesome/css/line-awesome.css";
+```
+
+## Usage
+
+Import the `DashboardModule` in your `AppModule`:
+
+```typescript
+import { DashboardModule } from '@ogidor/dashboard';
+
+@NgModule({
+  imports: [
+    DashboardModule,
+    // ...
+  ]
+})
+export class AppModule { }
+```
+
+Use the component in your template:
+
+```html
+<app-dashboard 
+  [initialLayout]="savedLayout"
+  [theme]="myCustomTheme"
+></app-dashboard>
+```
+
+## API Reference
+
+### Inputs
+
+| Input | Type | Description |
+|---|---|---|
+| `initialLayout` | `string` | A JSON string representing a previously exported layout. |
+| `theme` | `DashboardTheme` | An object to override default colors and fonts programmatically. |
+
+### DashboardTheme Interface
+
+```typescript
+export interface DashboardTheme {
+  backgroundColor?: string;
+  panelColor?: string;
+  widgetCardColor?: string;
+  chartForeColor?: string;
+  accentColor?: string;
+  dangerColor?: string;
+  chartColors?: string[];
+  fontFamily?: string;
+}
+```
+
+## Customization (Theming)
+
+You can customize the dashboard's look and feel by overriding the following CSS variables in your global stylesheet:
+
+```css
+:root {
+  --dash-bg: #000000;           /* Overall background */
+  --dash-panel-bg: #1c1c1e;     /* Main content panel */
+  --dash-card-bg: #2c2c2e;      /* Widget card background */
+  --dash-fore-color: #8e8e93;    /* Primary text/chart labels */
+  --dash-accent-color: #0a84ff;  /* Action buttons & active states */
+  --dash-danger-color: #ff453a;  /* Delete/Close actions */
+  --dash-font-family: 'Inter', sans-serif;
+}
+```
+
+## Methods (Public API)
+
+Access the dashboard instance via `@ViewChild` to trigger actions:
+
+```typescript
+@ViewChild(DashboardComponent) dashboard!: DashboardComponent;
+
+// Export the current layout as a JSON string
+const layout = this.dashboard.serializeLayout();
+```
+
+## License
+
+MIT

package/app/app.module.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dashboard.component";
+import * as i2 from "./widget-renderer.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "angular-gridster2";
+import * as i6 from "ng-apexcharts";
+import * as i7 from "@angular/platform-browser";
+export declare class DashboardModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DashboardModule, [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.GridsterModule, typeof i6.NgApexchartsModule], [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DashboardModule>;
+}
+/**
+ * Root module for local demo / testing purposes.
+ * In the final NPM package, users would only import the `DashboardModule`.
+ */
+export declare class AppModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AppModule, never, [typeof i7.BrowserModule, typeof DashboardModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AppModule>;
+}

package/app/dashboard-state.service.d.ts

@@ -0,0 +1,49 @@
+import { Page, WidgetType, LineBarData, DonutData } from './models';
+import * as i0 from "@angular/core";
+export declare class DashboardStateService {
+    private readonly STORAGE_KEY;
+    private initialPages;
+    private pagesSubject;
+    private activePageIdSubject;
+    /**
+     * Emits whenever a widget's data is updated programmatically.
+     * Key = widget id, value = new data payload.
+     */
+    private widgetDataSubject;
+    widgetData$: import("rxjs").Observable<{
+        widgetId: string;
+        data: LineBarData | DonutData;
+    }>;
+    pages$: import("rxjs").Observable<Page[]>;
+    activePageId$: import("rxjs").Observable<string>;
+    constructor();
+    getActivePage(): Page | undefined;
+    setActivePage(id: string): void;
+    addPage(name: string): void;
+    removePage(id: string): void;
+    addWidget(type: WidgetType): void;
+    addWidgetWithData(type: WidgetType, title: string, data: LineBarData | DonutData): void;
+    private getDefaultDataForType;
+    updateWidgetPosition(pageId: string, widgetId: string, x: number, y: number, cols: number, rows: number): void;
+    removeWidget(widgetId: string): void;
+    /**
+     * 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: string, data: LineBarData | DonutData): void;
+    updateWidgetMeta(widgetId: string, meta: {
+        title?: string;
+        colors?: string[];
+        cardColor?: string;
+        data?: LineBarData | DonutData;
+    }): void;
+    private updatePages;
+    serializeLayout(): string;
+    loadLayout(config: any): void;
+    private saveToLocalStorage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DashboardStateService>;
+}

package/app/dashboard.component.d.ts

@@ -0,0 +1,80 @@
+import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { GridsterConfig } from 'angular-gridster2';
+import { DashboardStateService } from './dashboard-state.service';
+import { Page, Widget, WidgetType, DashboardTheme, LineBarData, DonutData } from './models';
+import * as i0 from "@angular/core";
+export declare class DashboardComponent implements OnInit, OnDestroy, OnChanges {
+    private stateService;
+    initialLayout?: string;
+    theme?: DashboardTheme;
+    resolvedTheme: Required<DashboardTheme>;
+    wrapperStyles: Record<string, string>;
+    options: GridsterConfig;
+    pages: Page[];
+    activePageId: string;
+    activePage?: Page;
+    dialogOpen: boolean;
+    dialogType: WidgetType;
+    dialogTitle: string;
+    dialogCategories: string;
+    dialogSeries: {
+        name: string;
+        dataRaw: string;
+    }[];
+    dialogSlices: {
+        label: string;
+        value: number | null;
+    }[];
+    readonly widgetTypes: {
+        value: WidgetType;
+        label: string;
+        icon: string;
+    }[];
+    private subs;
+    constructor(stateService: DashboardStateService);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private applyTheme;
+    private updateActivePage;
+    onSelectPage(id: string): void;
+    onAddPage(): void;
+    onRemovePage(event: Event, id: string): void;
+    openDialog(): void;
+    closeDialog(): void;
+    addSeries(): void;
+    removeSeries(i: number): void;
+    addSlice(): void;
+    removeSlice(i: number): void;
+    confirmAddWidget(): void;
+    editDialogOpen: boolean;
+    editingWidget?: Widget;
+    editWidgetType: WidgetType;
+    editTitle: string;
+    editCardColor: string;
+    editColors: string[];
+    editSeries: {
+        name: string;
+        dataRaw: string;
+    }[];
+    editCategories: string;
+    editSlices: {
+        label: string;
+        value: number | null;
+    }[];
+    private readonly DEFAULT_COLORS;
+    openEditDialog(widget: Widget): void;
+    closeEditDialog(): void;
+    getEditSeriesLabel(i: number): string;
+    addEditSeries(): void;
+    removeEditSeries(i: number): void;
+    addEditSlice(): void;
+    removeEditSlice(i: number): void;
+    confirmEditWidget(): void;
+    onAddWidget(type: WidgetType): void;
+    updateWidgetData(widgetId: string, data: LineBarData | DonutData): void;
+    removeWidgetHandler: (id: string) => void;
+    serializeLayout(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DashboardComponent, "app-dashboard", never, { "initialLayout": "initialLayout"; "theme": "theme"; }, {}, never, never, false, never>;
+}

package/app/models.d.ts

@@ -0,0 +1,73 @@
+export type WidgetType = 'DONUT' | 'LINE' | 'BAR';
+/** A single named series for LINE and BAR charts */
+export interface ChartSeries {
+    /** Label shown in the legend */
+    name: string;
+    /** Array of numeric data points */
+    data: number[];
+    /** Optional per-series x-axis category labels */
+    categories?: string[];
+}
+/** Data shape for LINE and BAR widgets */
+export interface LineBarData {
+    /** One or more data series */
+    series: ChartSeries[];
+    /** X-axis category labels shared across all series */
+    categories?: string[];
+}
+/** Data shape for DONUT widgets */
+export interface DonutData {
+    /** Numeric slice values — must match the length of `labels` */
+    series: number[];
+    /** Label for each slice */
+    labels?: string[];
+}
+export interface Widget {
+    id: string;
+    type: WidgetType;
+    x: number;
+    y: number;
+    cols: number;
+    rows: number;
+    /** Typed as LineBarData | DonutData depending on `type` */
+    data: LineBarData | DonutData;
+    title: string;
+    /** Optional per-widget series colors. Overrides the global theme chartColors. */
+    colors?: string[];
+    /** Optional per-widget card background color. Overrides the global theme widgetCardColor. */
+    cardColor?: string;
+}
+export interface Page {
+    id: string;
+    name: string;
+    widgets: Widget[];
+}
+export interface DashboardConfig {
+    pages: Page[];
+    activePageId: string;
+}
+/**
+ * Theme configuration for the dashboard.
+ * All properties are optional — any values not provided will fall back to defaults.
+ */
+export interface DashboardTheme {
+    /** Background color of the overall dashboard wrapper. Default: `#000000` */
+    backgroundColor?: string;
+    /** Background color of the main content panel. Default: `#1c1c1e` */
+    panelColor?: string;
+    /** Background color of individual widget cards. Default: `#2c2c2e` */
+    widgetCardColor?: string;
+    /** Primary text / foreground color used inside charts. Default: `#8e8e93` */
+    chartForeColor?: string;
+    /** Primary accent color (active tabs, add-page button hover, etc.). Default: `#0a84ff` */
+    accentColor?: string;
+    /** Danger/close color used on the remove-widget button hover. Default: `#ff453a` */
+    dangerColor?: string;
+    /**
+     * Array of colors fed to ApexCharts series.
+     * Default: `['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a']`
+     */
+    chartColors?: string[];
+    /** Font family applied to the whole dashboard. Default: system-ui stack */
+    fontFamily?: string;
+}

package/app/widget-renderer.component.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Widget, DashboardTheme } from './models';
+import { DashboardStateService } from './dashboard-state.service';
+import { ApexAxisChartSeries, ApexChart, ApexXAxis, ApexDataLabels, ApexStroke, ApexYAxis, ApexTitleSubtitle, ApexLegend, ApexPlotOptions, ApexTooltip, ApexTheme } from 'ng-apexcharts';
+import * as i0 from "@angular/core";
+export type ChartOptions = {
+    series: ApexAxisChartSeries | number[];
+    chart: ApexChart;
+    xaxis: ApexXAxis;
+    stroke: ApexStroke;
+    dataLabels: ApexDataLabels;
+    yaxis: ApexYAxis;
+    title: ApexTitleSubtitle;
+    labels: string[];
+    legend: ApexLegend;
+    plotOptions: ApexPlotOptions;
+    tooltip: ApexTooltip;
+    theme: ApexTheme;
+    colors: string[];
+};
+export declare class WidgetRendererComponent implements OnInit, OnChanges, OnDestroy {
+    private stateService;
+    widget: Widget;
+    onRemoveWidget: (id: string) => void;
+    theme?: Required<DashboardTheme>;
+    editRequested: EventEmitter<Widget>;
+    chartOptions: Partial<ChartOptions>;
+    cardStyles: Record<string, string>;
+    private subs;
+    constructor(stateService: DashboardStateService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private applyStyles;
+    private resolvedColors;
+    private initChart;
+    onRemove(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WidgetRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WidgetRendererComponent, "app-widget-renderer", never, { "widget": "widget"; "onRemoveWidget": "onRemoveWidget"; "theme": "theme"; }, { "editRequested": "editRequested"; }, never, never, false, never>;
+}

package/esm2020/app/app.module.mjs

@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { GridsterModule } from 'angular-gridster2';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { DashboardComponent } from './dashboard.component';
+import { WidgetRendererComponent } from './widget-renderer.component';
+import { DashboardStateService } from './dashboard-state.service';
+import * as i0 from "@angular/core";
+export class DashboardModule {
+}
+DashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent,
+        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`.
+ */
+export 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]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9hcHAvYXBwLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbkQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDM0QsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBbUJsRSxNQUFNLE9BQU8sZUFBZTs7NkdBQWYsZUFBZTs4R0FBZixlQUFlLGlCQWZ4QixrQkFBa0I7UUFDbEIsdUJBQXVCLGFBR3ZCLFlBQVk7UUFDWixXQUFXO1FBQ1gsY0FBYztRQUNkLGtCQUFrQixhQUlsQixrQkFBa0I7UUFDbEIsdUJBQXVCOzhHQUdkLGVBQWUsYUFOZixDQUFDLHFCQUFxQixDQUFDLFlBTGhDLFlBQVk7UUFDWixXQUFXO1FBQ1gsY0FBYztRQUNkLGtCQUFrQjs0RkFRVCxlQUFlO2tCQWpCM0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osa0JBQWtCO3dCQUNsQix1QkFBdUI7cUJBQ3hCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsY0FBYzt3QkFDZCxrQkFBa0I7cUJBQ25CO29CQUNELFNBQVMsRUFBRSxDQUFDLHFCQUFxQixDQUFDO29CQUNsQyxPQUFPLEVBQUU7d0JBQ1Asa0JBQWtCO3dCQUNsQix1QkFBdUI7cUJBQ3hCO2lCQUNGOztBQUdEOzs7R0FHRztBQVFILE1BQU0sT0FBTyxTQUFTOzt1R0FBVCxTQUFTO3dHQUFULFNBQVMsY0FGUixrQkFBa0IsYUFINUIsYUFBYSxFQVJKLGVBQWU7d0dBYWYsU0FBUyxZQUxsQixhQUFhO1FBQ2IsZUFBZTs0RkFJTixTQUFTO2tCQVByQixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRTt3QkFDUCxhQUFhO3dCQUNiLGVBQWU7cUJBQ2hCO29CQUNELFNBQVMsRUFBRSxDQUFDLGtCQUFrQixDQUFDO2lCQUNoQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCcm93c2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBHcmlkc3Rlck1vZHVsZSB9IGZyb20gJ2FuZ3VsYXItZ3JpZHN0ZXIyJztcbmltcG9ydCB7IE5nQXBleGNoYXJ0c01vZHVsZSB9IGZyb20gJ25nLWFwZXhjaGFydHMnO1xuXG5pbXBvcnQgeyBEYXNoYm9hcmRDb21wb25lbnQgfSBmcm9tICcuL2Rhc2hib2FyZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgV2lkZ2V0UmVuZGVyZXJDb21wb25lbnQgfSBmcm9tICcuL3dpZGdldC1yZW5kZXJlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGFzaGJvYXJkU3RhdGVTZXJ2aWNlIH0gZnJvbSAnLi9kYXNoYm9hcmQtc3RhdGUuc2VydmljZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIERhc2hib2FyZENvbXBvbmVudCxcbiAgICBXaWRnZXRSZW5kZXJlckNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIEdyaWRzdGVyTW9kdWxlLFxuICAgIE5nQXBleGNoYXJ0c01vZHVsZVxuICBdLFxuICBwcm92aWRlcnM6IFtEYXNoYm9hcmRTdGF0ZVNlcnZpY2VdLFxuICBleHBvcnRzOiBbXG4gICAgRGFzaGJvYXJkQ29tcG9uZW50LFxuICAgIFdpZGdldFJlbmRlcmVyQ29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgRGFzaGJvYXJkTW9kdWxlIHsgfVxuXG4vKipcbiAqIFJvb3QgbW9kdWxlIGZvciBsb2NhbCBkZW1vIC8gdGVzdGluZyBwdXJwb3Nlcy5cbiAqIEluIHRoZSBmaW5hbCBOUE0gcGFja2FnZSwgdXNlcnMgd291bGQgb25seSBpbXBvcnQgdGhlIGBEYXNoYm9hcmRNb2R1bGVgLlxuICovXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgQnJvd3Nlck1vZHVsZSxcbiAgICBEYXNoYm9hcmRNb2R1bGVcbiAgXSxcbiAgYm9vdHN0cmFwOiBbRGFzaGJvYXJkQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBBcHBNb2R1bGUgeyB9XG4iXX0=