@aquera/nile-visualization 1.5.0 → 1.6.0

package/dist/src/nile-column-pyramid-chart/nile-column-pyramid-chart.js

@@ -20,6 +20,40 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
         this.options = {};
         this.loading = false;
         this.height = '400px';
+        // ── Container styling ──
+        this.chartBg = '';
+        this.chartBorderRadius = '';
+        this.chartBorder = '';
+        this.chartShadow = '';
+        this.chartPadding = '';
+        this.chartMinHeight = '';
+        // ── Loading ──
+        this.loadingText = 'Loading...';
+        this.loadingColor = '';
+        this.loadingFontSize = '';
+        this.loadingFontFamily = '';
+        this.loadingBg = '';
+    }
+    _syncCssVars() {
+        const set = (prop, val) => {
+            const s = typeof val === 'number'
+                ? (Number.isFinite(val) ? `${val}px` : '')
+                : String(val ?? '').trim();
+            if (s)
+                this.style.setProperty(prop, s);
+            else
+                this.style.removeProperty(prop);
+        };
+        set('--nile-chart-bg', this.chartBg);
+        set('--nile-chart-border-radius', this.chartBorderRadius);
+        set('--nile-chart-border', this.chartBorder);
+        set('--nile-chart-shadow', this.chartShadow);
+        set('--nile-chart-padding', this.chartPadding);
+        set('--nile-chart-min-height', this.chartMinHeight);
+        set('--nile-chart-loading-color', this.loadingColor);
+        set('--nile-chart-loading-font-size', this.loadingFontSize);
+        set('--nile-chart-loading-font-family', this.loadingFontFamily);
+        set('--nile-chart-loading-bg', this.loadingBg);
     }
     applyConfig(cfg) {
         applySeparatedChartConfig(this, cfg);
@@ -36,6 +70,7 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -44,6 +79,10 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -115,7 +154,7 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
     }
     render() {
         if (this.loading) {
-            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+            return html `<div class="chart-loading" style="height:${this.height}">${this.loadingText}</div>`;
         }
         return html `<div class="chart-container"></div>`;
     }
@@ -148,6 +187,39 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileColumnPyramidChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileColumnPyramidChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileColumnPyramidChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileColumnPyramidChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileColumnPyramidChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileColumnPyramidChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileColumnPyramidChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileColumnPyramidChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileColumnPyramidChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileColumnPyramidChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileColumnPyramidChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileColumnPyramidChart.prototype, "loadingBg", void 0);
 NileColumnPyramidChart = __decorate([
     customElement('nile-column-pyramid-chart')
 ], NileColumnPyramidChart);

package/dist/src/nile-column-range-chart/nile-column-range-chart.css.js

@@ -1,6 +1,16 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
+    --nile-chart-min-height: var(--nile-height-200px, var(--ng-height-200px));
+    --nile-chart-bg: transparent;
+    --nile-chart-border-radius: 0;
+    --nile-chart-border: none;
+    --nile-chart-shadow: none;
+    --nile-chart-padding: 0;
+    --nile-chart-loading-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    --nile-chart-loading-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-chart-loading-font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
     position: relative;
@@ -12,7 +22,12 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
-    min-height: var(--nile-height-200px, var(--ng-height-200px));
+    min-height: var(--nile-chart-min-height);
+    background: var(--nile-chart-bg);
+    border-radius: var(--nile-chart-border-radius);
+    border: var(--nile-chart-border);
+    box-shadow: var(--nile-chart-shadow);
+    padding: var(--nile-chart-padding);
   }
 
   .chart-loading {
@@ -20,9 +35,10 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     min-height: inherit;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-chart-loading-color);
+    font-family: var(--nile-chart-loading-font-family);
+    font-size: var(--nile-chart-loading-font-size);
+    background: var(--nile-chart-loading-bg);
   }
 `;
 //# sourceMappingURL=nile-column-range-chart.css.js.map

package/dist/src/nile-column-range-chart/nile-column-range-chart.d.ts

@@ -22,6 +22,18 @@ export declare class NileColumnRangeChart extends NileElement {
     loading: boolean;
     height: string;
     yAxisTitle: string;
+    chartBg: string;
+    chartBorderRadius: string | number;
+    chartBorder: string;
+    chartShadow: string;
+    chartPadding: string | number;
+    chartMinHeight: string | number;
+    loadingText: string;
+    loadingColor: string;
+    loadingFontSize: string | number;
+    loadingFontFamily: string;
+    loadingBg: string;
+    private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/src/nile-column-range-chart/nile-column-range-chart.js

@@ -21,6 +21,40 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
         this.loading = false;
         this.height = '400px';
         this.yAxisTitle = '';
+        // ── Container styling ──
+        this.chartBg = '';
+        this.chartBorderRadius = '';
+        this.chartBorder = '';
+        this.chartShadow = '';
+        this.chartPadding = '';
+        this.chartMinHeight = '';
+        // ── Loading ──
+        this.loadingText = 'Loading...';
+        this.loadingColor = '';
+        this.loadingFontSize = '';
+        this.loadingFontFamily = '';
+        this.loadingBg = '';
+    }
+    _syncCssVars() {
+        const set = (prop, val) => {
+            const s = typeof val === 'number'
+                ? (Number.isFinite(val) ? `${val}px` : '')
+                : String(val ?? '').trim();
+            if (s)
+                this.style.setProperty(prop, s);
+            else
+                this.style.removeProperty(prop);
+        };
+        set('--nile-chart-bg', this.chartBg);
+        set('--nile-chart-border-radius', this.chartBorderRadius);
+        set('--nile-chart-border', this.chartBorder);
+        set('--nile-chart-shadow', this.chartShadow);
+        set('--nile-chart-padding', this.chartPadding);
+        set('--nile-chart-min-height', this.chartMinHeight);
+        set('--nile-chart-loading-color', this.loadingColor);
+        set('--nile-chart-loading-font-size', this.loadingFontSize);
+        set('--nile-chart-loading-font-family', this.loadingFontFamily);
+        set('--nile-chart-loading-bg', this.loadingBg);
     }
     applyConfig(cfg) {
         applySeparatedChartConfig(this, cfg);
@@ -37,6 +71,7 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -45,6 +80,10 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         const props = [
             'data',
             'categories',
@@ -126,7 +165,7 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
     }
     render() {
         if (this.loading) {
-            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+            return html `<div class="chart-loading" style="height:${this.height}">${this.loadingText}</div>`;
         }
         return html `<div class="chart-container"></div>`;
     }
@@ -162,6 +201,39 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'y-axis-title' })
 ], NileColumnRangeChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileColumnRangeChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileColumnRangeChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileColumnRangeChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileColumnRangeChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileColumnRangeChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileColumnRangeChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileColumnRangeChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileColumnRangeChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileColumnRangeChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileColumnRangeChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileColumnRangeChart.prototype, "loadingBg", void 0);
 NileColumnRangeChart = __decorate([
     customElement('nile-column-range-chart')
 ], NileColumnRangeChart);

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.css.js

@@ -14,11 +14,21 @@ export const styles = css `
     width: 100%;
   }
 
+  .dashboard-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
   .dashboard-cell {
     min-height: 0;
     min-width: 0;
   }
 
+  .dashboard-cell--fluid {
+    box-sizing: border-box;
+  }
+
   nile-widget-viewer {
     display: block;
     width: 100%;

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.d.ts

@@ -4,30 +4,26 @@ import NileElement from '../internal/nile-element.js';
 import type { NileDashboardConfig } from '../internal/types/dashboard-config.type.js';
 import '../nile-widget-viewer/index.js';
 /**
- * Renders a full dashboard grid of widgets. Each widget is positioned using CSS Grid
- * with the `layout: { x, y, w, h }` values from its config.
+ * Renders a full dashboard of widgets. Supports two layout variants:
  *
- * - `x` / `w` → `grid-column: (x+1) / span w`
- * - `y` / `h` → `grid-row: (y+1) / span h`
+ * - `grid` (default): positions each widget using CSS Grid with `layout: { x, y, w, h }`.
+ *   - `x` / `w` → `grid-column: (x+1) / span w`
+ *   - `y` / `h` → `grid-row: (y+1) / span h`
+ * - `fluid`: positions widgets with Flexbox. `x` / `y` are ignored; widgets flow in
+ *   declaration order and wrap as needed. `w` sets the proportional width (as a fraction
+ *   of `columns`) and `h` sets the height (in multiples of `cellHeight`).
  *
  * @example
  * ```html
- * <nile-dashboard-viewer columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
- * ```
- * ```js
- * el.config = {
- *   name: 'My Dashboard',
- *   widgets: [
- *     { type: 'chart', layout: { x: 0, y: 0, w: 6, h: 4 }, nileConfig: { chart: { type: 'pie', data: [...] } } },
- *     { type: 'kpi',   layout: { x: 0, y: 4, w: 3, h: 2 }, nileConfig: { chart: { type: 'kpi', label: 'Revenue', value: '$1.2M' } } },
- *   ]
- * };
+ * <nile-dashboard-viewer variant="fluid" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
  * ```
  */
 export declare class NileDashboardViewer extends NileElement {
     static styles: CSSResultGroup;
     /** Dashboard configuration containing all widget configs. */
     config: NileDashboardConfig | null;
+    /** Layout variant. `grid` uses x/y/w/h positioning; `fluid` flows widgets with Flexbox. Default: `grid`. */
+    variant: 'grid' | 'fluid';
     /** Total number of grid columns. Default: 12. */
     columns: number;
     /** Height of a single grid row in pixels. Default: 80. */

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.js

@@ -5,24 +5,18 @@ import NileElement from '../internal/nile-element.js';
 import { styles } from './nile-dashboard-viewer.css.js';
 import '../nile-widget-viewer/index.js';
 /**
- * Renders a full dashboard grid of widgets. Each widget is positioned using CSS Grid
- * with the `layout: { x, y, w, h }` values from its config.
+ * Renders a full dashboard of widgets. Supports two layout variants:
  *
- * - `x` / `w` → `grid-column: (x+1) / span w`
- * - `y` / `h` → `grid-row: (y+1) / span h`
+ * - `grid` (default): positions each widget using CSS Grid with `layout: { x, y, w, h }`.
+ *   - `x` / `w` → `grid-column: (x+1) / span w`
+ *   - `y` / `h` → `grid-row: (y+1) / span h`
+ * - `fluid`: positions widgets with Flexbox. `x` / `y` are ignored; widgets flow in
+ *   declaration order and wrap as needed. `w` sets the proportional width (as a fraction
+ *   of `columns`) and `h` sets the height (in multiples of `cellHeight`).
  *
  * @example
  * ```html
- * <nile-dashboard-viewer columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
- * ```
- * ```js
- * el.config = {
- *   name: 'My Dashboard',
- *   widgets: [
- *     { type: 'chart', layout: { x: 0, y: 0, w: 6, h: 4 }, nileConfig: { chart: { type: 'pie', data: [...] } } },
- *     { type: 'kpi',   layout: { x: 0, y: 4, w: 3, h: 2 }, nileConfig: { chart: { type: 'kpi', label: 'Revenue', value: '$1.2M' } } },
- *   ]
- * };
+ * <nile-dashboard-viewer variant="fluid" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
  * ```
  */
 let NileDashboardViewer = class NileDashboardViewer extends NileElement {
@@ -30,6 +24,8 @@ let NileDashboardViewer = class NileDashboardViewer extends NileElement {
         super(...arguments);
         /** Dashboard configuration containing all widget configs. */
         this.config = null;
+        /** Layout variant. `grid` uses x/y/w/h positioning; `fluid` flows widgets with Flexbox. Default: `grid`. */
+        this.variant = 'grid';
         /** Total number of grid columns. Default: 12. */
         this.columns = 12;
         /** Height of a single grid row in pixels. Default: 80. */
@@ -40,6 +36,29 @@ let NileDashboardViewer = class NileDashboardViewer extends NileElement {
     render() {
         if (!this.config?.widgets?.length)
             return nothing;
+        if (this.variant === 'fluid') {
+            return html `
+        <div class="dashboard-fluid" style="gap: ${this.gap}px;">
+          ${this.config.widgets.map((widget) => {
+                const { w, h } = widget.layout;
+                const widthPct = (Math.min(w, this.columns) / this.columns) * 100;
+                const basis = `calc(${widthPct}% - ${this.gap}px)`;
+                return html `
+              <div
+                class="dashboard-cell dashboard-cell--fluid"
+                style="
+                  flex: 1 1 ${basis};
+                  max-width: ${widthPct}%;
+                  min-height: ${h * this.cellHeight}px;
+                "
+              >
+                <nile-widget-viewer .config=${widget}></nile-widget-viewer>
+              </div>
+            `;
+            })}
+        </div>
+      `;
+        }
         return html `
       <div
         class="dashboard-grid"
@@ -68,6 +87,9 @@ NileDashboardViewer.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileDashboardViewer.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], NileDashboardViewer.prototype, "variant", void 0);
 __decorate([
     property({ type: Number })
 ], NileDashboardViewer.prototype, "columns", void 0);

package/dist/src/nile-donut-chart/nile-donut-chart.css.js

@@ -1,6 +1,16 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
+    --nile-chart-min-height: var(--nile-height-200px, var(--ng-height-200px));
+    --nile-chart-bg: transparent;
+    --nile-chart-border-radius: 0;
+    --nile-chart-border: none;
+    --nile-chart-shadow: none;
+    --nile-chart-padding: 0;
+    --nile-chart-loading-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    --nile-chart-loading-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-chart-loading-font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
     position: relative;
@@ -12,7 +22,12 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
-    min-height: var(--nile-height-200px, var(--ng-height-200px));
+    min-height: var(--nile-chart-min-height);
+    background: var(--nile-chart-bg);
+    border-radius: var(--nile-chart-border-radius);
+    border: var(--nile-chart-border);
+    box-shadow: var(--nile-chart-shadow);
+    padding: var(--nile-chart-padding);
   }
 
   .chart-loading {
@@ -20,9 +35,10 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     min-height: inherit;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-chart-loading-color);
+    font-family: var(--nile-chart-loading-font-family);
+    font-size: var(--nile-chart-loading-font-size);
+    background: var(--nile-chart-loading-bg);
   }
 `;
 //# sourceMappingURL=nile-donut-chart.css.js.map

package/dist/src/nile-donut-chart/nile-donut-chart.d.ts

@@ -29,6 +29,18 @@ export declare class NileDonutChart extends NileElement {
     height: string;
     showDataLabels: boolean;
     showLegend: boolean;
+    chartBg: string;
+    chartBorderRadius: string | number;
+    chartBorder: string;
+    chartShadow: string;
+    chartPadding: string | number;
+    chartMinHeight: string | number;
+    loadingText: string;
+    loadingColor: string;
+    loadingFontSize: string | number;
+    loadingFontFamily: string;
+    loadingBg: string;
+    private _syncCssVars;
     /** Apply { chart, aq } config to individual properties. */
     private applyConfig;
     connectedCallback(): void;

package/dist/src/nile-donut-chart/nile-donut-chart.js

@@ -25,6 +25,40 @@ let NileDonutChart = class NileDonutChart extends NileElement {
         this.height = '400px';
         this.showDataLabels = true;
         this.showLegend = true;
+        // ── Container styling ──
+        this.chartBg = '';
+        this.chartBorderRadius = '';
+        this.chartBorder = '';
+        this.chartShadow = '';
+        this.chartPadding = '';
+        this.chartMinHeight = '';
+        // ── Loading ──
+        this.loadingText = 'Loading...';
+        this.loadingColor = '';
+        this.loadingFontSize = '';
+        this.loadingFontFamily = '';
+        this.loadingBg = '';
+    }
+    _syncCssVars() {
+        const set = (prop, val) => {
+            const s = typeof val === 'number'
+                ? (Number.isFinite(val) ? `${val}px` : '')
+                : String(val ?? '').trim();
+            if (s)
+                this.style.setProperty(prop, s);
+            else
+                this.style.removeProperty(prop);
+        };
+        set('--nile-chart-bg', this.chartBg);
+        set('--nile-chart-border-radius', this.chartBorderRadius);
+        set('--nile-chart-border', this.chartBorder);
+        set('--nile-chart-shadow', this.chartShadow);
+        set('--nile-chart-padding', this.chartPadding);
+        set('--nile-chart-min-height', this.chartMinHeight);
+        set('--nile-chart-loading-color', this.loadingColor);
+        set('--nile-chart-loading-font-size', this.loadingFontSize);
+        set('--nile-chart-loading-font-family', this.loadingFontFamily);
+        set('--nile-chart-loading-bg', this.loadingBg);
     }
     /** Apply { chart, aq } config to individual properties. */
     applyConfig(cfg) {
@@ -49,6 +83,28 @@ let NileDonutChart = class NileDonutChart extends NileElement {
                 this.showDataLabels = donut.showDataLabels;
             if (donut.showLegend !== undefined)
                 this.showLegend = donut.showLegend;
+            if (donut.chartBg !== undefined)
+                this.chartBg = donut.chartBg;
+            if (donut.chartBorderRadius !== undefined)
+                this.chartBorderRadius = donut.chartBorderRadius;
+            if (donut.chartBorder !== undefined)
+                this.chartBorder = donut.chartBorder;
+            if (donut.chartShadow !== undefined)
+                this.chartShadow = donut.chartShadow;
+            if (donut.chartPadding !== undefined)
+                this.chartPadding = donut.chartPadding;
+            if (donut.chartMinHeight !== undefined)
+                this.chartMinHeight = donut.chartMinHeight;
+            if (donut.loadingText !== undefined)
+                this.loadingText = donut.loadingText;
+            if (donut.loadingColor !== undefined)
+                this.loadingColor = donut.loadingColor;
+            if (donut.loadingFontSize !== undefined)
+                this.loadingFontSize = donut.loadingFontSize;
+            if (donut.loadingFontFamily !== undefined)
+                this.loadingFontFamily = donut.loadingFontFamily;
+            if (donut.loadingBg !== undefined)
+                this.loadingBg = donut.loadingBg;
         }
         if (aq) {
             if (aq.chartTitle)
@@ -68,12 +124,20 @@ let NileDonutChart = class NileDonutChart extends NileElement {
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
     }
-    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    firstUpdated() {
+        this._syncCssVars();
+        this.initChart();
+        this.setupResizeObserver();
+    }
     updated(changedProperties) {
         if (changedProperties.has('config') && this.config) {
             this.applyConfig(this.config);
             return;
         }
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'seriesName', 'innerSize', 'semiCircle', 'loading', 'showDataLabels', 'showLegend'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -138,7 +202,7 @@ let NileDonutChart = class NileDonutChart extends NileElement {
     } }
     render() {
         if (this.loading)
-            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+            return html `<div class="chart-loading" style="height:${this.height}">${this.loadingText}</div>`;
         return html `<div class="chart-container"></div>`;
     }
 };
@@ -182,6 +246,39 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileDonutChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileDonutChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileDonutChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileDonutChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileDonutChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileDonutChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileDonutChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileDonutChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileDonutChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileDonutChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileDonutChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileDonutChart.prototype, "loadingBg", void 0);
 NileDonutChart = __decorate([
     customElement('nile-donut-chart')
 ], NileDonutChart);