@aquera/nile-visualization 2.3.0 → 2.5.0

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

@@ -1584,6 +1584,7 @@ let NileChart = class NileChart extends NileElement {
                 const kpiOptions = deepMerge(k.options ?? {}, this.buildExportingOptions());
                 return html `<nile-kpi-chart
           embed-in-nile-chart
+          ?fit=${this.hasAttribute('fit')}
           .config=${{
                     chart: {
                         type: 'kpi',
@@ -1642,7 +1643,7 @@ let NileChart = class NileChart extends NileElement {
                         tooltipEnabled: k.tooltipEnabled,
                         loading: k.loading,
                         options: kpiOptions,
-                        height: k.height,
+                        height: this.hasAttribute('fit') ? undefined : k.height,
                         valueFormat: k.valueFormat,
                         precision: k.precision,
                         unit: k.unit,

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

@@ -357,5 +357,73 @@ export const styles = css `
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     line-height: 1;
   }
+
+ 
+  .fc-prompt {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
+    padding: 2px;
+    background: var(
+      --fc-prompt-gradient,
+      linear-gradient(
+        90deg,
+        #2563eb 0%,
+        #3b82f6 18%,
+        #06b6d4 36%,
+        #6366f1 54%,
+        #8b5cf6 72%,
+        #2563eb 100%
+      )
+    );
+    background-size: 300% 100%;
+    animation: fc-prompt-gradient var(--fc-prompt-gradient-speed, 4.5s) linear infinite;
+    box-shadow: 0 6px 6px -6px rgba(59, 130, 246, 0.45);
+  }
+
+  
+  .fc-prompt:focus-within {
+    box-shadow: 0 8px 8px -6px rgba(59, 130, 246, 0.6);
+  }
+
+  .fc-prompt__inner {
+    position: relative;
+    display: block;
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .fc-prompt__input {
+    display: block;
+    width: 100%;
+    border: 0;
+    outline: none;
+    background: transparent;
+    border-radius: inherit;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    line-height: 1.4;
+    box-sizing: border-box;
+  }
+
+  .fc-prompt__input::placeholder {
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    opacity: 0.85;
+  }
+
+  @keyframes fc-prompt-gradient {
+    0%   { background-position:   0% 50%; }
+    100% { background-position: 300% 50%; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fc-prompt {
+      /* Respect any consumer-supplied gradient — just stop animating it. */
+      animation: none;
+    }
+  }
 `;
 //# sourceMappingURL=nile-filter-chart.css.js.map

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

@@ -1,14 +1,5 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import '@aquera/nile-elements/nile-select';
-import '@aquera/nile-elements/nile-option';
-import '@aquera/nile-elements/nile-input';
-import '@aquera/nile-elements/nile-slide-toggle';
-import '@aquera/nile-elements/nile-radio-group';
-import '@aquera/nile-elements/nile-radio';
-import '@aquera/nile-elements/nile-tag';
-import '@aquera/nile-elements/nile-button-toggle-group';
-import '@aquera/nile-elements/nile-button-toggle';
 export type NileTagVariant = 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
 export interface FilterOption {
     label: string;
@@ -32,7 +23,7 @@ export interface FilterControl {
     /** Optional subtitle shown below the label. */
     description?: string;
     selection: 'single' | 'multi';
-    variant: 'badge' | 'dropdown' | 'segmented' | 'radio' | 'toggle' | 'slider' | 'search' | 'comparison' | 'threshold' | 'tree' | 'preset';
+    variant: 'badge' | 'dropdown' | 'segmented' | 'radio' | 'toggle' | 'slider' | 'search' | 'comparison' | 'threshold' | 'tree' | 'preset' | 'prompt';
     options?: FilterOption[];
     value?: string | string[] | number[] | boolean;
     min?: number;
@@ -41,6 +32,47 @@ export interface FilterControl {
     prefix?: string;
     suffix?: string;
     placeholder?: string;
+    placeholders?: string[];
+    /** Typewriter speed in ms per character (default 60). */
+    typeSpeedMs?: number;
+    /** Pause before deleting a typed phrase (default 1400). */
+    pauseBeforeDeleteMs?: number;
+    /** Pause between phrases after deletion (default 400). */
+    pauseBetweenMs?: number;
+    /**
+     * Prompt variant only. Inline callback invoked on every keystroke with
+     * the current value of the input (the typed string) and the control id.
+     * Called *in addition to* the `nile-prompt-input` event — use whichever
+     * suits the consumer's wiring style.
+     */
+    onType?: (value: string, id: string) => void;
+    /**
+     * Prompt variant only. Inline callback invoked when the user presses
+     * Enter inside the prompt input. Called in addition to the
+     * `nile-prompt-submit` event.
+     */
+    onSubmit?: (value: string, id: string) => void;
+    /**
+     * Prompt variant only. Colors used for the animated border gradient.
+     * Pass any number of CSS color strings (hex / rgb / hsl / named); they
+     * are evenly distributed across the gradient by default. To control
+     * stops explicitly, include positions in the strings themselves
+     * (e.g. `'#2563eb 0%'`, `'#06b6d4 50%'`).
+     *
+     * Example: `['#ec4899', '#f97316', '#facc15', '#ec4899']`
+     * Default: an indigo → cyan → violet → indigo blue palette.
+     */
+    gradientColors?: string[];
+    /**
+     * Prompt variant only. Linear-gradient direction (e.g. `'90deg'`,
+     * `'to right'`, `'45deg'`). Default: `'90deg'`.
+     */
+    gradientDirection?: string;
+    /**
+     * Prompt variant only. Animation duration in milliseconds for one full
+     * gradient sweep. Default: 4500.
+     */
+    gradientSpeedMs?: number;
     valueB?: string;
     operator?: string;
     thresholdValue?: number | string;
@@ -68,9 +100,17 @@ export declare class NileFilterChart extends NileElement {
     config: FilterChartSeparatedPayload | null;
     private selectedValues;
     private collapsedGroups;
+    /** Currently displayed (animated) placeholder text per prompt-variant control id. */
+    private _promptPlaceholder;
+    /** Active typewriter timers per prompt control id (so we can stop them). */
+    private _promptTimers;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    private _syncPromptAnimations;
+    private _startPromptAnimation;
+    private _stopPromptAnimation;
+    private _stopAllPromptAnimations;
     private _flatControls;
     private _initValues;
     private _set;
@@ -84,6 +124,7 @@ export declare class NileFilterChart extends NileElement {
     private _renderComparison;
     private _renderThreshold;
     private _renderPreset;
+    private _renderPrompt;
     private _renderControl;
     private _renderGroup;
     render(): TemplateResult;

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

@@ -3,22 +3,16 @@ import { html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './nile-filter-chart.css.js';
 import NileElement from '../internal/nile-element.js';
-import '@aquera/nile-elements/nile-select';
-import '@aquera/nile-elements/nile-option';
-import '@aquera/nile-elements/nile-input';
-import '@aquera/nile-elements/nile-slide-toggle';
-// import '@aquera/nile-elements/nile-slider';
-import '@aquera/nile-elements/nile-radio-group';
-import '@aquera/nile-elements/nile-radio';
-import '@aquera/nile-elements/nile-tag';
-import '@aquera/nile-elements/nile-button-toggle-group';
-import '@aquera/nile-elements/nile-button-toggle';
 let NileFilterChart = class NileFilterChart extends NileElement {
     constructor() {
         super(...arguments);
         this.config = null;
         this.selectedValues = new Map();
         this.collapsedGroups = new Set();
+        /** Currently displayed (animated) placeholder text per prompt-variant control id. */
+        this._promptPlaceholder = new Map();
+        /** Active typewriter timers per prompt control id (so we can stop them). */
+        this._promptTimers = new Map();
     }
     static get styles() {
         return [styles];
@@ -30,14 +24,89 @@ let NileFilterChart = class NileFilterChart extends NileElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this._stopAllPromptAnimations();
         this.emit('nile-destroy');
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has('config')) {
             this._initValues();
+            this._syncPromptAnimations();
         }
     }
+    // ── Prompt typewriter ────────────────────────────────────────────────────────
+    _syncPromptAnimations() {
+        const wanted = new Set();
+        for (const ctrl of this._flatControls()) {
+            if (ctrl.variant === 'prompt') {
+                wanted.add(ctrl.id);
+                if (!this._promptTimers.has(ctrl.id))
+                    this._startPromptAnimation(ctrl);
+            }
+        }
+        // Stop animations whose controls were removed from the config
+        for (const id of [...this._promptTimers.keys()]) {
+            if (!wanted.has(id))
+                this._stopPromptAnimation(id);
+        }
+    }
+    _startPromptAnimation(ctrl) {
+        const phrases = (ctrl.placeholders && ctrl.placeholders.length
+            ? ctrl.placeholders
+            : [ctrl.placeholder ?? 'Ask anything…']);
+        const typeSpeed = ctrl.typeSpeedMs ?? 60;
+        const pauseAfterType = ctrl.pauseBeforeDeleteMs ?? 1400;
+        const pauseBetween = ctrl.pauseBetweenMs ?? 400;
+        let phraseIdx = 0;
+        let charIdx = 0;
+        let deleting = false;
+        const tick = () => {
+            const phrase = phrases[phraseIdx];
+            let nextDelay;
+            if (!deleting) {
+                charIdx++;
+                const next = new Map(this._promptPlaceholder).set(ctrl.id, phrase.slice(0, charIdx));
+                this._promptPlaceholder = next;
+                if (charIdx >= phrase.length) {
+                    deleting = true;
+                    nextDelay = pauseAfterType;
+                }
+                else {
+                    nextDelay = typeSpeed;
+                }
+            }
+            else {
+                charIdx--;
+                const next = new Map(this._promptPlaceholder).set(ctrl.id, phrase.slice(0, Math.max(0, charIdx)));
+                this._promptPlaceholder = next;
+                if (charIdx <= 0) {
+                    deleting = false;
+                    phraseIdx = (phraseIdx + 1) % phrases.length;
+                    nextDelay = pauseBetween;
+                }
+                else {
+                    nextDelay = Math.max(20, typeSpeed / 2);
+                }
+            }
+            this._promptTimers.set(ctrl.id, setTimeout(tick, nextDelay));
+        };
+        // Kick it off
+        this._promptPlaceholder = new Map(this._promptPlaceholder).set(ctrl.id, '');
+        this._promptTimers.set(ctrl.id, setTimeout(tick, 100));
+    }
+    _stopPromptAnimation(id) {
+        const t = this._promptTimers.get(id);
+        if (t)
+            clearTimeout(t);
+        this._promptTimers.delete(id);
+        const next = new Map(this._promptPlaceholder);
+        next.delete(id);
+        this._promptPlaceholder = next;
+    }
+    _stopAllPromptAnimations() {
+        for (const id of [...this._promptTimers.keys()])
+            this._stopPromptAnimation(id);
+    }
     _flatControls() {
         const entries = this.config?.chart?.controls ?? [];
         const out = [];
@@ -356,6 +425,75 @@ let NileFilterChart = class NileFilterChart extends NileElement {
           </button>`)}
       </div>`;
     }
+    // ── Prompt ───────────────────────────────────────────────────────────────────
+    //
+    // Renders a free-text input wrapped in a div whose border is an animated
+    // multi-stop blue gradient (CSS @keyframes — purely visual, no JS in the
+    // animation loop). The placeholder is driven by a typewriter that cycles
+    // through `ctrl.placeholders`. Each keystroke fires `nile-change` with the
+    // current string; pressing Enter additionally fires `nile-prompt-submit`
+    // for AI-style "ask" UIs.
+    _renderPrompt(ctrl) {
+        const value = String(this.selectedValues.get(ctrl.id) ?? '');
+        const animated = this._promptPlaceholder.get(ctrl.id) ?? '';
+        // Build the inline style overrides as CSS custom properties — these
+        // are picked up by the .fc-prompt rule via var(--fc-prompt-gradient,
+        // <default>) / var(--fc-prompt-gradient-speed, 4.5s). Only emit a
+        // declaration when the consumer actually supplied an override.
+        const styleParts = [];
+        if (ctrl.gradientColors && ctrl.gradientColors.length > 0) {
+            const dir = ctrl.gradientDirection ?? '90deg';
+            styleParts.push(`--fc-prompt-gradient: linear-gradient(${dir}, ${ctrl.gradientColors.join(', ')})`);
+        }
+        else if (ctrl.gradientDirection) {
+            // Direction-only override: keep the default palette but rotate it.
+            styleParts.push(`--fc-prompt-gradient: linear-gradient(${ctrl.gradientDirection},` +
+                ' #2563eb 0%, #3b82f6 18%, #06b6d4 36%, #6366f1 54%,' +
+                ' #8b5cf6 72%, #2563eb 100%)');
+        }
+        if (typeof ctrl.gradientSpeedMs === 'number' && ctrl.gradientSpeedMs > 0) {
+            styleParts.push(`--fc-prompt-gradient-speed: ${ctrl.gradientSpeedMs}ms`);
+        }
+        const inlineStyle = styleParts.length ? styleParts.join('; ') + ';' : '';
+        return html `
+      <div class="fc-prompt" part="filter-prompt" style="${inlineStyle}">
+        <div class="fc-prompt__inner">
+          <input
+            class="fc-prompt__input"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
+            .value="${value}"
+            placeholder="${animated}"
+            @input="${(e) => {
+            const t = e.target;
+            // Update the internal map (also fires the bulk `nile-change`
+            // event with every control's value).
+            this._set(ctrl.id, t.value);
+            // Dedicated, prompt-specific stream — every keystroke emits
+            // just this control's typed string so consumers don't have to
+            // sift through the full filters map for live updates (e.g.
+            // debounced AI suggestions, auto-complete, character counters).
+            this.emit('nile-prompt-input', { id: ctrl.id, value: t.value });
+            // Optional inline callback supplied via the config — same
+            // payload, shaped as a function call instead of an event.
+            if (typeof ctrl.onType === 'function') {
+                ctrl.onType(t.value, ctrl.id);
+            }
+        }}"
+            @keydown="${(e) => {
+            if (e.key === 'Enter') {
+                const t = e.target;
+                this.emit('nile-prompt-submit', { id: ctrl.id, value: t.value });
+                if (typeof ctrl.onSubmit === 'function') {
+                    ctrl.onSubmit(t.value, ctrl.id);
+                }
+            }
+        }}"
+          />
+        </div>
+      </div>`;
+    }
     // ── Card wrapper ─────────────────────────────────────────────────────────────
     _renderControl(ctrl) {
         let body;
@@ -389,6 +527,9 @@ let NileFilterChart = class NileFilterChart extends NileElement {
             case 'preset':
                 body = this._renderPreset(ctrl);
                 break;
+            case 'prompt':
+                body = this._renderPrompt(ctrl);
+                break;
             default: body = html ``;
         }
         return html `
@@ -445,6 +586,9 @@ __decorate([
 __decorate([
     state()
 ], NileFilterChart.prototype, "collapsedGroups", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "_promptPlaceholder", void 0);
 NileFilterChart = __decorate([
     customElement('nile-filter-chart')
 ], NileFilterChart);

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

@@ -176,12 +176,6 @@ export const styles = css `
     white-space: nowrap;
   }
 
-  @container (max-width: 240px) {
-    .kpi-trend {
-      display: none;
-    }
-  }
-
   .kpi-trend--up {
     background: none;
     color: var(--nile-kpi-trend-up-color);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
+ 
   "exports": {
     ".": "./dist/src/index.js",
     "./nile-bar-chart": "./dist/src/nile-bar-chart/index.js",
@@ -60,11 +61,15 @@
   },
   "peerDependencies": {
     "highcharts": ">=10.0.0",
+    "@aquera/nile-elements": ">=0.1.0",
     "@aquera/nile-data-grid": ">=0.1.0"
   },
   "peerDependenciesMeta": {
+    "@aquera/nile-elements": {
+      "optional": true
+    },
     "@aquera/nile-data-grid": {
-    "optional": true
+      "optional": true
     }
   },
   "devDependencies": {