@aquera/nile-visualization 1.5.0 → 1.7.0

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

@@ -19,6 +19,40 @@ let NileEulerChart = class NileEulerChart 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);
@@ -35,6 +69,7 @@ let NileEulerChart = class NileEulerChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -44,6 +79,10 @@ let NileEulerChart = class NileEulerChart extends NileElement {
             return;
         }
         const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -112,7 +151,7 @@ let NileEulerChart = class NileEulerChart 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>`;
     }
@@ -142,6 +181,39 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileEulerChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileEulerChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileEulerChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileEulerChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileEulerChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileEulerChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileEulerChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileEulerChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileEulerChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileEulerChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileEulerChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileEulerChart.prototype, "loadingBg", void 0);
 NileEulerChart = __decorate([
     customElement('nile-euler-chart')
 ], NileEulerChart);

package/dist/src/nile-fan-chart/nile-fan-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-fan-chart.css.js.map

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

@@ -46,6 +46,18 @@ export declare class NileFanChart extends NileElement {
      */
     forecastStartIndex: number;
     forecastBandLabel: 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;
     /** Apply `{ chart, aq }` config to individual properties. */
     private applyConfig;
     connectedCallback(): void;

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

@@ -32,6 +32,40 @@ let NileFanChart = class NileFanChart extends NileElement {
          */
         this.forecastStartIndex = -1;
         this.forecastBandLabel = '';
+        // ── 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,7 @@ let NileFanChart = class NileFanChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -72,6 +107,10 @@ let NileFanChart = class NileFanChart extends NileElement {
             'forecastBandLabel',
             'loading',
         ];
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -199,7 +238,7 @@ let NileFanChart = class NileFanChart 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>`;
     }
@@ -250,6 +289,39 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'forecast-band-label' })
 ], NileFanChart.prototype, "forecastBandLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileFanChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileFanChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileFanChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileFanChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileFanChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileFanChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileFanChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileFanChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileFanChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileFanChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileFanChart.prototype, "loadingBg", void 0);
 NileFanChart = __decorate([
     customElement('nile-fan-chart')
 ], NileFanChart);

package/dist/src/nile-flame-chart/nile-flame-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-flame-chart.css.js.map

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

@@ -39,6 +39,18 @@ export declare class NileFlameChart extends NileElement {
     options: Highcharts.Options;
     loading: boolean;
     height: 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;
     /** Apply `{ chart, aq }` config to individual properties. */
     private applyConfig;
     connectedCallback(): void;

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

@@ -46,6 +46,40 @@ let NileFlameChart = class NileFlameChart extends NileElement {
         this.options = {};
         this.loading = false;
         this.height = '480px';
+        // ── 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) {
@@ -63,6 +97,7 @@ let NileFlameChart = class NileFlameChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -81,6 +116,10 @@ let NileFlameChart = class NileFlameChart extends NileElement {
             'height',
             'loading',
         ];
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -268,7 +307,7 @@ let NileFlameChart = class NileFlameChart 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>`;
     }
@@ -304,6 +343,39 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileFlameChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileFlameChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileFlameChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileFlameChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileFlameChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileFlameChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileFlameChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileFlameChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileFlameChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileFlameChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileFlameChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileFlameChart.prototype, "loadingBg", void 0);
 NileFlameChart = __decorate([
     customElement('nile-flame-chart')
 ], NileFlameChart);

package/dist/src/nile-funnel-chart/nile-funnel-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-funnel-chart.css.js.map

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

@@ -23,6 +23,18 @@ export declare class NileFunnelChart extends NileElement {
     height: string;
     seriesName: string;
     showDataLabels: 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-funnel-chart/nile-funnel-chart.js

@@ -22,6 +22,40 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
         this.height = '400px';
         this.seriesName = '';
         this.showDataLabels = 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) {
@@ -39,6 +73,7 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -57,6 +92,10 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
             'showDataLabels',
             'loading',
         ];
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -146,7 +185,7 @@ let NileFunnelChart = class NileFunnelChart 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 +221,39 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-data-labels' })
 ], NileFunnelChart.prototype, "showDataLabels", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileFunnelChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileFunnelChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileFunnelChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileFunnelChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileFunnelChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileFunnelChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileFunnelChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileFunnelChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileFunnelChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileFunnelChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileFunnelChart.prototype, "loadingBg", void 0);
 NileFunnelChart = __decorate([
     customElement('nile-funnel-chart')
 ], NileFunnelChart);

package/dist/src/nile-gauge-chart/nile-gauge-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-gauge-chart.css.js.map