@aquera/nile-visualization 2.9.14 → 2.9.16

package/README.md

@@ -0,0 +1,169 @@
+# \<nile-visualization>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @aquera/nile-visualization
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@aquera/nile-visualization/nile-bar-chart';
+</script>
+
+<nile-bar-chart></nile-bar-chart>
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`
+
+## Release Notes
+
+In this section, you can find the updates for each release of `nile-visualization`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+
+#### Version 2.9.16 (June 03, 2026)
+- Nile Chart: Added Portal Property in Menu. (UIF-1253)
+
+#### Version 2.9.15 (June 02, 2026)
+- Nile Filter Chart: Filter chip fixes (UIF-1250)
+
+#### Version 2.9.14 (May 29, 2026)
+- Nile Chart: Fixes and improvements
+
+#### Version 2.9.13 (May 29, 2026)
+- Nile Chart: Fixes and improvements
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.12 (May 26, 2026)
+- Nile Chart: Fixes and improvements
+
+#### Version 2.9.11 (May 21, 2026)
+- Nile Chart: Fixes and improvements
+- Nile KPI Chart: Fixes and improvements
+
+#### Version 2.9.10 (May 20, 2026)
+- Nile Chart: Fixes and improvements
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.9 (May 19, 2026)
+- Nile Chart: Fixes and improvements
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.7 (May 13, 2026)
+- Nile KPI Chart: Fixes and improvements
+
+#### Version 2.9.6 (May 12, 2026)
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.5 (May 11, 2026)
+- Nile Chart: Fixes and improvements
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.4 (May 11, 2026)
+- Nile KPI Chart: Fixes and improvements
+
+#### Version 2.9.3 (May 09, 2026)
+- Nile Chart: Fixes and improvements
+- Nile Filter Chart: Fixes and improvements
+
+#### Version 2.9.2 (May 07, 2026)
+- Nile Chart: Fixes and improvements
+- Nile KPI Chart: Fixes and improvements
+
+#### Version 2.8.0 (May 04, 2026)
+- Internal and type updates
+
+#### Version 2.7.0 (May 04, 2026)
+- Nile Filter Chart: Updates and improvements
+
+#### Version 2.6.0 (April 30, 2026)
+- Dependency and build updates
+
+#### Version 2.3.0 (April 28, 2026)
+- Nile Filter Chart: Added New Component
+- Nile Chart: Updates and improvements
+
+#### Version 2.2.0 (April 24, 2026)
+- Nile Chart: Updates and improvements
+
+#### Version 2.1.0 (April 23, 2026)
+- Updates across all chart components
+
+#### Version 1.9.0 (April 22, 2026)
+- Nile Chart: Updates and improvements
+- Nile KPI Chart: Updates and improvements
+- Internal and type updates
+
+#### Version 1.6.0 (April 21, 2026)
+- Updates across all chart components and internals
+
+#### Version 1.4.0 (April 20, 2026)
+- Nile Chart: Updates and improvements
+
+#### Version 1.3.0 (April 17, 2026)
+- Nile Chart: Updates and improvements
+- Internal updates
+
+#### Version 1.2.0 (April 17, 2026)
+- Nile Executive Summary: Updates and improvements
+
+#### Version 1.1.0 (April 17, 2026)
+- Nile Executive Summary: Updates and improvements
+
+#### Version 1.0.0 (April 17, 2026)
+- First stable release
+- Nile Chart: Updates and improvements
+
+#### Version 0.9.0 (April 16, 2026)
+- Nile AI Panel: Updates and improvements
+- Nile Dashboard Viewer: Updates and improvements
+
+#### Version 0.8.0 (April 16, 2026)
+- Nile Executive Summary: Added New Component
+- Nile Chart: Updates and improvements
+- Nile KPI Chart: Updates and improvements
+
+#### Version 0.7.0 (April 15, 2026)
+- Nile Chart: Updates and improvements
+- Nile KPI Chart: Updates and improvements
+
+#### Version 0.6.0 (April 15, 2026)
+- Nile Widget Viewer: Added New Component
+- Nile Dashboard Viewer: Added New Component
+
+#### Version 0.5.0 (April 14, 2026)
+- Nile KPI Chart: Added New Component with KPI configuration
+- Nile AI Panel: Updates and improvements
+- Nile Chart: Updates and improvements
+
+#### Version 0.4.0 (April 14, 2026)
+- Nile Heatmap Chart: Added New Component
+- Nile Line Column Chart: Added New Component
+- Nile Organization Chart: Added New Component
+- Nile Bellcurve Chart, Nile Donut Chart, Nile Histogram Chart: Updates and improvements
+
+#### Version 0.3.0 (April 13, 2026)
+- Added chart variants: Nile Area Negative Chart, Nile Area Range Chart, Nile Area Spline Chart, Nile Column Drilldown Chart, Nile Column Pyramid Chart, Nile Column Range Chart, Nile Dumbbell Lower Chart, Nile Dumbbell Upper Chart, Nile Euler Chart, Nile Inverted Area Chart, Nile Lollipop Chart, Nile Polygon Chart, Nile Radial Bar Chart, Nile Variable Pie Chart, Nile Vector Chart, Nile XRange Chart
+
+#### Version 0.2.0 (April 10, 2026)
+- Expanded the chart catalog: Nile Anomaly Chart, Nile Area Chart, Nile Bar Chart, Nile Bellcurve Chart, Nile Boxplot Chart, Nile Bubble Chart, Nile Cluster Chart, Nile Column Chart, Nile Donut Chart, Nile Dumbbell Chart, Nile Fan Chart, Nile Flame Chart, Nile Funnel Chart, Nile Gauge Chart, Nile Histogram Chart, and more
+- Nile AI Panel: Added New Component
+- Nile AI Sender: Added New Component
+
+#### Version 0.1.0 (April 09, 2026)
+- Initial release of the Nile Visualization package

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

@@ -1,2 +1,3 @@
 export declare const tooltipCss = "\n  .nile-chart-header-tooltip {\n    position: fixed;\n    display: none;\n    transform: translate(-50%, calc(-100% - 10px));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 1.4;\n    padding: 4px 10px;\n    border-radius: 6px;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    pointer-events: none;\n    white-space: nowrap;\n    z-index: 2147483647;\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));\n  }\n  .nile-chart-header-tooltip::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 5px solid transparent;\n    border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n";
+export declare function injectGlobalChartMenuOverrides(): void;
 export declare const styles: import("lit").CSSResult;

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

@@ -28,6 +28,58 @@ export const tooltipCss = `
     border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;
+const MENU_OVERRIDE_CSS = `
+  nile-menu.nile-chart-actions-menu {
+    min-width: var(--nile-width-140px, var(--ng-height-140px, 140px));
+  }
+
+  nile-menu.nile-chart-actions-menu nile-menu-item.nile-chart-actions-menu-item::part(base) {
+    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));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  nile-menu.nile-chart-actions-menu nile-menu-item.nile-chart-actions-menu-item[active]::part(label) {
+    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    font-weight: 600;
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-glyph {
+    flex-shrink: 0;
+    display: inline-flex;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-separator {
+    height: var(--nile-border-width-1, var(--ng-stroke-width-1, 1px));
+    background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    margin: var(--nile-spacing-md, var(--ng-spacing-md, 8px));
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-group-header {
+    display: block;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md, 8px)) var(--nile-spacing-14px, var(--ng-spacing-3-5, 14px)) var(--nile-spacing-xs, var(--ng-spacing-xs, 4px));
+    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));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    pointer-events: none;
+    user-select: none;
+  }
+`;
+export function injectGlobalChartMenuOverrides() {
+    if (typeof document === 'undefined')
+        return;
+    const STYLE_ID = 'nile-chart-actions-menu-overrides';
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = MENU_OVERRIDE_CSS;
+    document.head?.appendChild(style);
+}
+injectGlobalChartMenuOverrides();
 export const styles = css `
   :host {
     display: block;
@@ -321,7 +373,7 @@ export const styles = css `
   /* ── Actions Menu (in header) ── */
 
   .nile-chart-menu-anchor {
-    position: relative;
+    display: inline-flex;
   }
 
   .nile-chart-menu-trigger {
@@ -349,76 +401,7 @@ export const styles = css `
     outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
   }
 
-  .nile-chart-menu-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
-    min-width: var(--nile-width-140px, var(--ng-height-140px));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
-    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
-    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
-    overflow: hidden;
-    z-index: 10;
-  }
-
-  .nile-chart-menu-item {
-    display: flex;
-    align-items: center;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
-    width: 100%;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
-    border: none;
-    background: none;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    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));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    text-align: left;
-    cursor: pointer;
-    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
-  }
-
-  .nile-chart-menu-item-glyph {
-    flex-shrink: 0;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
-  }
-
-  .nile-chart-menu-item:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-  }
-
-  .nile-chart-menu-item.active {
-    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
-    font-weight: 600;
-  }
-
-  .nile-chart-menu-item: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: calc(var(--nile-spacing-2px, var(--ng-outline-offset-2)) * -1);
-  }
-
-  .nile-chart-menu-separator {
-    height: var(--nile-border-width-1, var(--ng-stroke-width-1));
-    background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
-    margin: var(--nile-spacing-md, var(--ng-spacing-md));
-  }
-
-  .nile-chart-menu-group-header {
-    display: block;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5)) var(--nile-spacing-xs, var(--ng-spacing-xs));
-    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));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
-    pointer-events: none;
-    user-select: none;
-  }
-
-  /* ── AI Chat Trigger (in header) ── */
+ 
 
   .nile-ai-trigger {
     display: inline-flex;

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

@@ -88,7 +88,6 @@ export declare class NileChart extends NileElement {
     menu: NileChartMenuConfig | null;
     private activeType;
     private activeConfig;
-    private menuOpen;
     private chatOpen;
     private _hcChart;
     /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
@@ -108,7 +107,7 @@ export declare class NileChart extends NileElement {
     private resolveConfig;
     private resolvedConfig;
     protected updated(changedProperties: PropertyValues): void;
-    private toggleMenu;
+    private closeMenu;
     private toggleChat;
     /** Push an AI response into the chat panel. Call this from your AI handler. */
     addAiResponse(text: string): void;

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import { styles, tooltipCss } from './nile-chart.css.js';
+import { styles, tooltipCss, injectGlobalChartMenuOverrides } from './nile-chart.css.js';
 import { nileChartConfig } from './nile-chart-config-builder.js';
 import { renderChartSkeleton } from './nile-chart-skeleton.js';
 import { convertConfig } from '../internal/chart-adapters.js';
@@ -158,7 +158,6 @@ let NileChart = class NileChart extends NileElement {
         this.menu = null;
         this.activeType = null;
         this.activeConfig = null;
-        this.menuOpen = false;
         this.chatOpen = false;
         this._hcChart = null;
         /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
@@ -168,7 +167,6 @@ let NileChart = class NileChart extends NileElement {
         this.handleOutsideClick = (e) => {
             const path = e.composedPath();
             if (!path.includes(this)) {
-                this.menuOpen = false;
                 this.chatOpen = false;
                 return;
             }
@@ -210,6 +208,7 @@ let NileChart = class NileChart extends NileElement {
     connectedCallback() {
         super.connectedCallback();
         ensureHeaderTooltipStyles();
+        injectGlobalChartMenuOverrides();
         const tip = document.createElement('div');
         tip.className = 'nile-chart-header-tooltip';
         document.body.appendChild(tip);
@@ -262,9 +261,9 @@ let NileChart = class NileChart extends NileElement {
                 this.appearance = resolved.appearance;
         }
     }
-    toggleMenu(e) {
-        e.stopPropagation();
-        this.menuOpen = !this.menuOpen;
+    closeMenu() {
+        const dropdown = this.shadowRoot?.querySelector('.nile-chart-menu-anchor');
+        dropdown?.hide?.();
     }
     toggleChat(e) {
         e.stopPropagation();
@@ -291,7 +290,7 @@ let NileChart = class NileChart extends NileElement {
         const converted = convertConfig(this.resolvedConfig, toType);
         this.activeType = toType;
         this.activeConfig = converted;
-        this.menuOpen = false;
+        this.closeMenu();
         this.emit('nile-chart-type-change', {
             fromType,
             toType,
@@ -401,7 +400,7 @@ let NileChart = class NileChart extends NileElement {
         }
     }
     async viewFullscreen() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         if (this._hcChart?.fullscreen?.open) {
             this._hcChart.fullscreen.open();
@@ -411,25 +410,26 @@ let NileChart = class NileChart extends NileElement {
         target.requestFullscreen?.();
     }
     async printChart() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         this._hcChart?.print?.();
     }
     async exportChart(type) {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         const filename = (this.headerTitle || 'chart').replace(/[^a-z0-9_-]+/gi, '_');
         this._hcChart?.exportChartLocal?.({ type, filename, local: true });
     }
     async downloadCsv() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         this._hcChart?.downloadCSV?.();
     }
     _renderMenuItem(item, hasChart) {
         const glyph = item.glyph
             ? html `<nile-glyph
-          class="nile-chart-menu-item-glyph"
+          slot="prefix"
+          class="nile-chart-actions-menu-glyph"
           name=${item.glyph}
           method=${item.method ?? 'stroke'}
           color=${item.color ?? 'var(--nile-colors-dark-500,var(--ng-colors-fg-secondary-700))'}
@@ -438,22 +438,22 @@ let NileChart = class NileChart extends NileElement {
             : nothing;
         if (item.type === 'custom') {
             return html `
-        ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-        <button type="button" class="nile-chart-menu-item" role="menuitem"
-          @click=${() => { this.menuOpen = false; this.emit('nile-menu-change', { id: item.id }); }}>
+        ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+        <nile-menu-item class="nile-chart-actions-menu-item" value=${`custom:${item.id}`}
+          @click=${() => { this.closeMenu(); this.emit('nile-menu-change', { id: item.id }); }}>
           ${glyph}${item.label}
-        </button>
+        </nile-menu-item>
       `;
         }
         if (!hasChart)
             return nothing;
         return html `
-      ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-      ${item.fullscreen ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.viewFullscreen()}>${glyph}${item.label ?? 'Fullscreen'}</button>` : nothing}
-      ${item.print ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.printChart()}>${glyph}${item.label ?? 'Print'}</button>` : nothing}
-      ${item.downloadPng ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/png')}>${glyph}${item.label ?? 'Download PNG'}</button>` : nothing}
-      ${item.downloadSvg ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/svg+xml')}>${glyph}${item.label ?? 'Download SVG'}</button>` : nothing}
-      ${item.downloadCsv ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.downloadCsv()}>${glyph}${item.label ?? 'Download CSV'}</button>` : nothing}
+      ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+      ${item.fullscreen ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="fullscreen" @click=${() => this.viewFullscreen()}>${glyph}${item.label ?? 'Fullscreen'}</nile-menu-item>` : nothing}
+      ${item.print ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="print" @click=${() => this.printChart()}>${glyph}${item.label ?? 'Print'}</nile-menu-item>` : nothing}
+      ${item.downloadPng ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-png" @click=${() => this.exportChart('image/png')}>${glyph}${item.label ?? 'Download PNG'}</nile-menu-item>` : nothing}
+      ${item.downloadSvg ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-svg" @click=${() => this.exportChart('image/svg+xml')}>${glyph}${item.label ?? 'Download SVG'}</nile-menu-item>` : nothing}
+      ${item.downloadCsv ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-csv" @click=${() => this.downloadCsv()}>${glyph}${item.label ?? 'Download CSV'}</nile-menu-item>` : nothing}
     `;
     }
     renderActionsMenu() {
@@ -469,41 +469,44 @@ let NileChart = class NileChart extends NileElement {
         ];
         const hasChart = !!this._hcChart;
         const hasAnyItems = !!(types?.length || allItems.length);
+        if (!hasAnyItems) {
+            return html `
+        <button type="button" class="nile-chart-menu-trigger" aria-label="Chart actions">
+          <nile-glyph name="options" size="16"></nile-glyph>
+        </button>
+      `;
+        }
         return html `
-      <div class="nile-chart-menu-anchor">
+      <nile-dropdown class="nile-chart-menu-anchor" placement="bottom-end" distance="4" portal>
         <button
           type="button"
+          slot="trigger"
           class="nile-chart-menu-trigger"
-          aria-haspopup="true"
-          aria-expanded=${this.menuOpen ? 'true' : 'false'}
           aria-label="Chart actions"
-          @click=${(e) => this.toggleMenu(e)}
         >
           <nile-glyph name="options" size="16"></nile-glyph>
         </button>
-        ${this.menuOpen && hasAnyItems ? html `
-          <div class="nile-chart-menu-dropdown" role="menu">
-            ${types?.length ? html `
-              ${types.map(type => html `
-                <button type="button" class="nile-chart-menu-item ${type === this.activeType ? 'active' : ''}" role="menuitem" @click=${() => this.switchType(type)}>
-                  ${chartTypeLabel(type)}
-                </button>
-              `)}
-              ${allItems.length ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-            ` : nothing}
-            ${allItems.map(item => {
+        <nile-menu class="nile-chart-actions-menu" part="dropdown">
+          ${types?.length ? html `
+            ${types.map(type => html `
+              <nile-menu-item class="nile-chart-actions-menu-item" value=${`type:${type}`} ?active=${type === this.activeType} @click=${() => this.switchType(type)}>
+                ${chartTypeLabel(type)}
+              </nile-menu-item>
+            `)}
+            ${allItems.length ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+          ` : nothing}
+          ${allItems.map(item => {
             if (item.type === 'group') {
                 return html `
-                  ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-                  <span class="nile-chart-menu-group-header" role="presentation">${item.label}</span>
-                  ${item.items.map(child => this._renderMenuItem(child, hasChart))}
-                `;
+                ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator" part="seperator"></div>` : nothing}
+                <span class="nile-chart-actions-menu-group-header" role="presentation" part="header">${item.label}</span>
+                ${item.items.map(child => this._renderMenuItem(child, hasChart))}
+              `;
             }
             return this._renderMenuItem(item, hasChart);
         })}
-          </div>
-        ` : nothing}
-      </div>
+        </nile-menu>
+      </nile-dropdown>
     `;
     }
     renderAiTrigger() {
@@ -1805,9 +1808,6 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "activeConfig", void 0);
-__decorate([
-    state()
-], NileChart.prototype, "menuOpen", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);

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

@@ -180,15 +180,6 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         if (this.promptFieldWidth.get(id) === rounded)
             return;
         this.promptFieldWidth = new Map(this.promptFieldWidth).set(id, rounded);
-        // Tippy popups are portaled to document.body so component-scoped styles
-        // can't reach them, and nile-lite-tooltip's `maxWidth` only takes effect
-        // at attach time (its updated() hook doesn't re-attach for maxWidth
-        // changes). Mirror the live width onto a document-level CSS variable
-        // the global .tippy-box rule reads — wrapping then always reflects
-        // the current input width.
-        if (typeof document !== 'undefined') {
-            document.documentElement.style.setProperty('--fc-prompt-tooltip-max-width', `${rounded}px`);
-        }
     }
     _validateOrClear(ctrl, value, opts = {}) {
         const isNql = this.promptModes.get(ctrl.id) === 'expression';

package/dist/src/nile-filter-chart/utils/prompt.js

@@ -276,70 +276,35 @@ function renderModeToggle(host, ctrl, mode) {
     </nile-button-toggle-group>
   `;
 }
-const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout-v4';
-function ensureSuggestionLayoutStyles() {
+const PROMPT_TIPPY_STYLE_ID = 'fc-prompt-tippy-styles-v1';
+function ensurePromptTippyStyles() {
     if (typeof document === 'undefined')
         return;
-    if (document.getElementById(SUGGESTION_LAYOUT_STYLE_ID))
+    if (document.getElementById(PROMPT_TIPPY_STYLE_ID))
         return;
     const el = document.createElement('style');
-    el.id = SUGGESTION_LAYOUT_STYLE_ID;
+    el.id = PROMPT_TIPPY_STYLE_ID;
     el.textContent = `
-    .fc-prompt__menu nile-menu-item::part(label) {
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-    }
-
-    .fc-prompt__suggestion-label {
-      display: block;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-   
-    .fc-prompt__suggestion-tooltip {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-    }
- 
-   
-   
-    [data-tippy-root] {
+    [data-tippy-root].fc-prompt-tippy {
       max-width: var(--fc-prompt-tooltip-max-width, 320px);
     }
-    [data-tippy-root] > .tippy-box,
-    .tippy-box[data-theme~='lite'] {
+    [data-tippy-root].fc-prompt-tippy > .tippy-box {
       max-width: var(--fc-prompt-tooltip-max-width, 320px);
       white-space: normal;
       overflow-wrap: anywhere;
       word-break: break-word;
     }
-    [data-tippy-root] > .tippy-box > .tippy-content {
+    [data-tippy-root].fc-prompt-tippy > .tippy-box > .tippy-content {
       white-space: normal;
       overflow-wrap: anywhere;
       word-break: break-word;
       max-width: 100%;
     }
-    .fc-prompt__suggestion-tag {
-      flex-shrink: 0;
-      padding: 1px 8px;
-      border-radius: 999px;
-      background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-      color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
-      font-size: 10px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
   `;
     document.head.appendChild(el);
 }
 export function renderPrompt(host, ctrl) {
-    ensureSuggestionLayoutStyles();
+    ensurePromptTippyStyles();
     const value = String(host.selectedValues.get(ctrl.id) ?? '');
     const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
     const error = host.promptErrors.get(ctrl.id);
@@ -859,6 +824,13 @@ export function renderPrompt(host, ctrl) {
                           content="${item.label}"
                           class="fc-prompt__suggestion-tooltip"
                           .maxWidth=${fieldWidth}
+                          @nile-show="${(e) => {
+                const popper = e.detail?.instance?.popper;
+                if (!popper)
+                    return;
+                popper.classList.add('fc-prompt-tippy');
+                popper.style.setProperty('--fc-prompt-tooltip-max-width', `${host.promptFieldWidth.get(ctrl.id) ?? 320}px`);
+            }}"
                         >
                           <span class="fc-prompt__suggestion-label">${item.label}</span>
                         </nile-lite-tooltip>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.9.14",
+  "version": "2.9.16",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",