@aquera/nile-visualization 1.1.0 → 1.3.0

package/dist/src/internal/types/chart-config.type.d.ts

@@ -13,6 +13,7 @@ import type { ChartRadarConfigType } from './chart-radar-config.type.js';
 import type { ChartGaugeConfigType } from './chart-gauge-config.type.js';
 import type { ChartWaterfallConfigType } from './chart-waterfall-config.type.js';
 import type { ChartMapConfigType } from './chart-map-config.type.js';
+import type { ChartGridConfigType } from './chart-grid-config.type.js';
 import type { PrimitiveChartConfigType } from './primitive-chart-config.type.js';
 /** Core chart configs (bar, pie, …) plus all primitive series types — use with `<nile-chart>` via `chart.type`. */
-export type ChartConfigType = ChartBarConfigType | ChartPieConfigType | ChartTrendlineConfigType | ChartAnomalyConfigType | ChartLineConfigType | ChartAreaConfigType | ChartColumnConfigType | ChartDonutConfigType | ChartScatterConfigType | ChartBubbleConfigType | ChartSplineConfigType | ChartRadarConfigType | ChartGaugeConfigType | ChartWaterfallConfigType | ChartMapConfigType | PrimitiveChartConfigType;
+export type ChartConfigType = ChartBarConfigType | ChartPieConfigType | ChartTrendlineConfigType | ChartAnomalyConfigType | ChartLineConfigType | ChartAreaConfigType | ChartColumnConfigType | ChartDonutConfigType | ChartScatterConfigType | ChartBubbleConfigType | ChartSplineConfigType | ChartRadarConfigType | ChartGaugeConfigType | ChartWaterfallConfigType | ChartMapConfigType | ChartGridConfigType | PrimitiveChartConfigType;

package/dist/src/internal/types/chart-grid-config.type.d.ts

@@ -0,0 +1,16 @@
+import type { Options } from 'highcharts';
+import type { NileDataGridColumn } from '@aquera/nile-data-grid';
+/** Tabular grid variant of `<nile-chart>`, renders a `<nile-data-grid>`. */
+export interface ChartGridConfigType {
+    type: 'grid';
+    data: unknown[];
+    columns: NileDataGridColumn[];
+    loading?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    noMatchMessage?: string;
+    height?: string;
+    options?: Options;
+}

package/dist/src/internal/types/chart-grid-config.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chart-grid-config.type.js.map

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

@@ -16,6 +16,7 @@ import type { RadarChartSeriesData } from '../nile-radar-chart/nile-radar-chart.
 import type { GaugeBand } from '../nile-gauge-chart/nile-gauge-chart.js';
 import type { WaterfallDataPoint } from '../nile-waterfall-chart/nile-waterfall-chart.js';
 import type { MapChartDataPoint } from '../nile-map-chart/nile-map-chart.js';
+import type { NileDataGridColumn } from '@aquera/nile-data-grid';
 export type SwitchAggregation = 'by-category' | 'by-series' | 'flatten';
 export interface NileAiConfig {
     /** Show the AI chat icon on the chart. Default: false. */
@@ -157,6 +158,16 @@ export interface NileMapChartConfig extends NileChartConfigBase {
     /** Enable mouse-wheel zoom, double-click zoom, and +/− buttons. Default: true. */
     zoom?: boolean;
 }
+export interface NileGridChartConfig extends NileChartConfigBase {
+    type: 'grid';
+    data: unknown[];
+    columns: NileDataGridColumn[];
+    striped?: boolean;
+    hoverable?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    noMatchMessage?: string;
+}
 /** Flat config for `<nile-chart>`: discriminated `chart` fields plus merged `aq` / card chrome. */
 export type NileChartConfig = ChartConfigType & NileChartConfigBase;
 export type NileKpiChartConfig = Extract<NileChartConfig, {

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

@@ -278,38 +278,37 @@ export const styles = css `
   /* ── AI Chat Trigger (in header) ── */
 
   .ai-trigger {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-width-28px, var(--ng-height-28px));
-    height: var(--nile-width-28px, var(--ng-height-28px));
+    width: 28px;
+    height: 28px;
     padding: 0;
-    border: none;
-    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
-    background: transparent;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    border-radius: var(--ng-radius-md, 10px);
+    background: var(--ng-componentcolors-utility-brand-50, #EFF4FF);
+    border: 1.5px solid var(--ng-componentcolors-utility-brand-200, #C7D7FE);
+    box-shadow: 0 4px 20px rgba(41, 112, 255, 0.12);
+    color: var(--ng-componentcolors-utility-brand-600, #2970FF);
     cursor: pointer;
-    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+    transition: background 150ms ease;
+    flex-shrink: 0;
+    outline: none;
   }
 
-  .ai-trigger:hover {
-    background: transparent;
-    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+  .ai-trigger:hover,
+  .ai-trigger:focus-visible {
+    background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
+
   .chart-inner--kpi {
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     contain: none;
   }
-  .ai-trigger.active {
-    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
-    color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
-  }
 
-  .ai-trigger:focus-visible {
-    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
-    outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
+  .ai-trigger.active {
+    background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
 
   /* ── AI Chat Panel Overlay ── */

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

@@ -48,6 +48,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;

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

@@ -51,6 +51,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 const CORE_CHART_LABELS = {
     bar: 'Bar',
@@ -88,6 +89,7 @@ const CORE_CHART_LABELS = {
     lollipop: 'Lollipop',
     'line-column': 'Line + column',
     kpi: 'KPI',
+    grid: 'Grid',
 };
 function chartTypeLabel(type) {
     const hit = CORE_CHART_LABELS[type];
@@ -890,6 +892,27 @@ let NileChart = class NileChart extends NileElement {
                     },
                 }}
         ></nile-kpi-chart>`;
+            }
+            case 'grid': {
+                const gridChrome = '--nile-data-grid-radius:0;' +
+                    '--nile-data-grid-border-color:transparent;' +
+                    '--nile-data-grid-shadow:none;' +
+                    'display:block;';
+                const gridStyle = config.height
+                    ? `${gridChrome}height:${config.height};`
+                    : gridChrome;
+                return html `<nile-data-grid
+          class="nile-chart-grid"
+          .data=${config.data}
+          .columns=${config.columns}
+          .loading=${config.loading ?? false}
+          .striped=${config.striped ?? false}
+          .hoverable=${config.hoverable ?? false}
+          .emptyMessage=${config.emptyMessage ?? 'No data'}
+          .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
+          .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
+          style=${gridStyle}
+        ></nile-data-grid>`;
             }
             default: {
                 const _exhaustive = config;

package/dist/src/nile-executive-summary/nile-executive-summary-config.d.ts

@@ -36,4 +36,6 @@ export interface NileExecutiveSummaryConfig {
     closeOnEscape?: boolean;
     /** Prevent the drawer from closing when the overlay is clicked. Default: false */
     preventOverlayClose?: boolean;
+    zIndex?: number;
+    hideOverlay?: boolean;
 }

package/dist/src/nile-executive-summary/nile-executive-summary.css.js

@@ -11,8 +11,7 @@ export const styles = css `
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
-    display: inline-block;
-    position: relative;
+    display: contents;
   }
 
   :host *,

package/dist/src/nile-executive-summary/nile-executive-summary.d.ts

@@ -78,6 +78,8 @@ export declare class NileExecutiveSummary extends NileElement {
      * typewriter animation begins if the drawer is already open.
      */
     loading: boolean;
+    zIndex: number | null;
+    hideOverlay: boolean;
     /** @internal Characters revealed so far during typing. */
     private displayedText;
     /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -91,6 +93,7 @@ export declare class NileExecutiveSummary extends NileElement {
     private lockScroll;
     private unlockScroll;
     private animatePanel;
+    private get overlayHidden();
     private animateOverlay;
     private requestClose;
     private startTyping;

package/dist/src/nile-executive-summary/nile-executive-summary.js

@@ -7,6 +7,7 @@
 import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import NileElement from '../internal/nile-element.js';
@@ -79,6 +80,8 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
          * typewriter animation begins if the drawer is already open.
          */
         this.loading = false;
+        this.zIndex = null;
+        this.hideOverlay = false;
         /** @internal Characters revealed so far during typing. */
         this.displayedText = '';
         /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -133,7 +136,12 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         const to = show ? { opacity: '1', translate: '0' } : { opacity: '0', translate: '100%' };
         await this.panel.animate([from, to], { duration: 250, easing: 'ease', fill: 'forwards' }).finished;
     }
+    get overlayHidden() {
+        return this.hideOverlay || (this.config?.hideOverlay ?? false);
+    }
     async animateOverlay(show) {
+        if (!this.overlay)
+            return;
         const from = show ? { opacity: '0' } : { opacity: '1' };
         const to = show ? { opacity: '1' } : { opacity: '0' };
         await this.overlay.animate([from, to], { duration: 250, fill: 'forwards' }).finished;
@@ -226,6 +234,10 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         const buttonLabel = this.config?.buttonLabel ?? 'Executive Summary';
         const buttonVariant = this.config?.buttonVariant ?? 'primary';
         const drawerLabel = this.config?.drawerLabel ?? 'Executive Summary';
+        const resolvedZ = this.zIndex ?? this.config?.zIndex;
+        const backdropStyles = resolvedZ != null
+            ? { '--executive-summary-z-index': String(resolvedZ), zIndex: String(resolvedZ) }
+            : {};
         return html `
       <div part="base">
 
@@ -240,14 +252,18 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         >${buttonLabel}</nile-button>
 
         <!-- Fixed backdrop: overlay + panel -->
-        <div class="es-backdrop">
+        <div class="es-backdrop" style=${styleMap(backdropStyles)}>
 
-          <div
-            part="overlay"
-            class="es-overlay"
-            @click=${() => this.requestClose('overlay')}
-            tabindex="-1"
-          ></div>
+          ${this.overlayHidden
+            ? ''
+            : html `
+                <div
+                  part="overlay"
+                  class="es-overlay"
+                  @click=${() => this.requestClose('overlay')}
+                  tabindex="-1"
+                ></div>
+              `}
 
           <div
             part="panel"
@@ -323,6 +339,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileExecutiveSummary.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'z-index' })
+], NileExecutiveSummary.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-overlay' })
+], NileExecutiveSummary.prototype, "hideOverlay", void 0);
 __decorate([
     state()
 ], NileExecutiveSummary.prototype, "displayedText", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -59,7 +59,13 @@
     "lit": "^3.0.0"
   },
   "peerDependencies": {
-    "highcharts": ">=10.0.0"
+    "highcharts": ">=10.0.0",
+    "@aquera/nile-data-grid": "0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@aquera/nile-data-grid": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.3",