@aquera/nile-visualization 2.9.8 → 2.9.10

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

@@ -8,6 +8,13 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     /** When set, the host (e.g. nile-chart) is already rendering the control's label/description
      *  in its own header — skip the in-body copies to avoid duplication. */
     hideControlHeaders: boolean;
+    /**
+     * Visual appearance. `'minimal'` collapses control padding to 6px for
+     * compact layouts; default (`'default'` or omitted) keeps the standard
+     * 16px / 20px. Set via the reflected `appearance` attribute, the
+     * `.appearance` property, or `config.chart.appearance`.
+     */
+    appearance: 'default' | 'minimal';
     selectedValues: Map<string, unknown>;
     private collapsedGroups;
     /** Currently displayed (animated) placeholder text per prompt-variant control id. */
@@ -21,8 +28,17 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     /** Id of the prompt control whose input currently has focus (drives the
      *  nile-dropdown panel open state). null when no prompt is focused. */
     promptFocusedId: string | null;
-    /** Active typewriter timers per prompt control id (so we can stop them). */
+    /** Pixel width of each prompt control's bordered field — kept in sync with
+     *  the rendered `.fc-prompt__field` via a ResizeObserver attached in
+     *  prompt.ts. Consumed by the suggestion tooltip so its popup matches the
+     *  input box width and wraps long content onto multiple lines. */
+    promptFieldWidth: Map<string, number>;
+    /** Active rtypewiter timers per prompt control id (so we can stop them). */
     private _promptTimers;
+    /** Per-control typewriter tick fn — retained so the animation can be resumed
+     *  from its preserved closure state (phrase index, char index, deleting flag)
+     *  after a pause-at-rest-point. */
+    private _promptTickFns;
     /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
     private _promptEvaluators;
     /** Parsed AST per prompt control id (strict-mode successes). */
@@ -60,6 +76,7 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     submitPrompt(ctrl: NormalizedFilterControl): void;
     setPromptActiveIndex(id: string, idx: number): void;
     setPromptFocused(id: string, focused: boolean): void;
+    setPromptFieldWidth(id: string, width: number): void;
     private _validateOrClear;
     private _clearPromptValidation;
     private _syncPromptAnimations;
@@ -80,8 +97,8 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     private _renderControl;
     /**
      * If any prompt control in `controls` has its toggle enabled and is currently
-     * in NQL mode, collapse the visible set down to just that prompt — Basic mode
-     * shows everything, JQL mode shows only the expression input.
+     * in Expression mode, collapse the visible set down to just that prompt —
+     * Prompt mode shows everything, Expression mode shows only the expression input.
      */
     private _filterByPromptMode;
     private _renderGroup;

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

@@ -24,6 +24,13 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         /** When set, the host (e.g. nile-chart) is already rendering the control's label/description
          *  in its own header — skip the in-body copies to avoid duplication. */
         this.hideControlHeaders = false;
+        /**
+         * Visual appearance. `'minimal'` collapses control padding to 6px for
+         * compact layouts; default (`'default'` or omitted) keeps the standard
+         * 16px / 20px. Set via the reflected `appearance` attribute, the
+         * `.appearance` property, or `config.chart.appearance`.
+         */
+        this.appearance = 'default';
         this.selectedValues = new Map();
         this.collapsedGroups = new Set();
         /** Currently displayed (animated) placeholder text per prompt-variant control id. */
@@ -37,8 +44,17 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         /** Id of the prompt control whose input currently has focus (drives the
          *  nile-dropdown panel open state). null when no prompt is focused. */
         this.promptFocusedId = null;
-        /** Active typewriter timers per prompt control id (so we can stop them). */
+        /** Pixel width of each prompt control's bordered field — kept in sync with
+         *  the rendered `.fc-prompt__field` via a ResizeObserver attached in
+         *  prompt.ts. Consumed by the suggestion tooltip so its popup matches the
+         *  input box width and wraps long content onto multiple lines. */
+        this.promptFieldWidth = new Map();
+        /** Active rtypewiter timers per prompt control id (so we can stop them). */
         this._promptTimers = new Map();
+        /** Per-control typewriter tick fn — retained so the animation can be resumed
+         *  from its preserved closure state (phrase index, char index, deleting flag)
+         *  after a pause-at-rest-point. */
+        this._promptTickFns = new Map();
         /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
         this._promptEvaluators = new Map();
         /** Parsed AST per prompt control id (strict-mode successes). */
@@ -71,6 +87,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             this._normalizeIds();
             this._initValues();
             this._syncPromptAnimations();
+            const cfgAppearance = this.config?.chart?.appearance;
+            if (cfgAppearance === 'minimal' || cfgAppearance === 'default')
+                this.appearance = cfgAppearance;
         }
         // Keep portaled suggestion panels in sync with the latest panel content.
         // nile-dropdown clones the panel once at open-time and never re-clones,
@@ -125,6 +144,10 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             clearTimeout(pending);
             this._promptDebounce.delete(ctrl.id);
         }
+        if (this._promptTimers.has(ctrl.id)) {
+            this._stopPromptAnimation(ctrl.id);
+            this._startPromptAnimation(ctrl);
+        }
         const value = String(this.selectedValues.get(ctrl.id) ?? '');
         this._validateOrClear(ctrl, value, { explicit: true });
     }
@@ -147,13 +170,42 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     setPromptFocused(id, focused) {
         if (focused) {
             this.promptFocusedId = id;
+            const t = this._promptTimers.get(id);
+            if (t) {
+                clearTimeout(t);
+                this._promptTimers.delete(id);
+            }
+            if (this.promptPlaceholder.get(id) !== '') {
+                this.promptPlaceholder = new Map(this.promptPlaceholder).set(id, '');
+            }
         }
         else if (this.promptFocusedId === id) {
             this.promptFocusedId = null;
+            // Resume from the preserved closure state. Guard against re-entry: if
+            // a timer somehow exists (shouldn't, but defensive), don't double-tick.
+            const tickFn = this._promptTickFns.get(id);
+            if (tickFn && !this._promptTimers.has(id)) {
+                tickFn();
+            }
+        }
+    }
+    setPromptFieldWidth(id, width) {
+        const rounded = Math.round(width);
+        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) === 'nql';
+        const isNql = this.promptModes.get(ctrl.id) === 'expression';
         if (value.trim() === '') {
             this._clearPromptValidation(ctrl.id);
             this._emitChange();
@@ -187,7 +239,6 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             // expressions); NQL surfaces them so the user sees what's wrong.
             const errs = new Map(this.promptErrors);
             if (isNql) {
-                console.error(`[nile-filter-chart] "${ctrl.id}" parse error:`, error.message);
                 errs.set(ctrl.id, error.message);
             }
             else {
@@ -213,7 +264,7 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     _syncPromptAnimations() {
         const wanted = new Set();
         for (const ctrl of this._flatControls()) {
-            if (ctrl.variant === 'prompt') {
+            if (ctrl.variant === 'prompt' || ctrl.variant === 'hybrid' || ctrl.variant === 'expression') {
                 wanted.add(ctrl.id);
                 if (!this._promptTimers.has(ctrl.id))
                     this._startPromptAnimation(ctrl);
@@ -226,9 +277,18 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         }
     }
     _startPromptAnimation(ctrl) {
-        const phrases = ctrl.placeholders && ctrl.placeholders.length
-            ? ctrl.placeholders
-            : ['Ask anything…'];
+        const getPhrases = () => {
+            const mode = this.promptModes.get(ctrl.id);
+            if (ctrl.variant === 'hybrid' || ctrl.variant === 'expression') {
+                if (mode === 'expression' && ctrl.expressionPlaceholders?.length)
+                    return ctrl.expressionPlaceholders;
+                if (mode === 'prompt' && ctrl.promptPlaceholders?.length)
+                    return ctrl.promptPlaceholders;
+            }
+            return ctrl.placeholders && ctrl.placeholders.length
+                ? ctrl.placeholders
+                : ['Ask anything…'];
+        };
         const typeSpeed = ctrl.typeSpeedMs ?? 60;
         const pauseAfterType = ctrl.pauseBeforeDeleteMs ?? 1400;
         const pauseBetween = ctrl.pauseBetweenMs ?? 400;
@@ -236,6 +296,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         let charIdx = 0;
         let deleting = false;
         const tick = () => {
+            const phrases = getPhrases();
+            if (phraseIdx >= phrases.length)
+                phraseIdx = 0;
             const phrase = phrases[phraseIdx];
             let nextDelay;
             if (!deleting) {
@@ -265,15 +328,18 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             }
             this._promptTimers.set(ctrl.id, setTimeout(tick, nextDelay));
         };
-        // Kick it off
+        this._promptTickFns.set(ctrl.id, tick);
         this.promptPlaceholder = new Map(this.promptPlaceholder).set(ctrl.id, '');
-        this._promptTimers.set(ctrl.id, setTimeout(tick, 100));
+        if (this.promptFocusedId !== 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);
+        this._promptTickFns.delete(id);
         const next = new Map(this.promptPlaceholder);
         next.delete(id);
         this.promptPlaceholder = next;
@@ -357,8 +423,8 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
                 || ctrl.variant === 'expression'
                 || ctrl.variant === 'hybrid') {
                 const initialMode = ctrl.variant === 'expression'
-                    ? 'nql'
-                    : (ctrl.queryLanguage?.mode ?? 'strict') === 'strict' ? 'nql' : 'basic';
+                    ? 'expression'
+                    : (ctrl.queryLanguage?.mode ?? 'strict') === 'strict' ? 'expression' : 'prompt';
                 modes.set(ctrl.id, initialMode);
             }
             if (ctrl.value !== undefined) {
@@ -403,12 +469,12 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         this.selectedValues.forEach((val, id) => {
             // Prompt controls in NQL mode with a successful parse emit the
             // structured `{ source, ast }` payload so downstream consumers get
-            // both the typed text and the parsed shape. Basic mode (and NQL
+            // both the typed text and the parsed shape. Prompt mode (and Expression
             // pre-validation / parse-failure) emit the raw string — the same
             // shape every other variant uses.
             const mode = this.promptModes.get(id);
             const ast = this._promptAsts.get(id);
-            if (mode === 'nql' && ast && typeof val === 'string' && val.trim() !== '') {
+            if (mode === 'expression' && ast && typeof val === 'string' && val.trim() !== '') {
                 filters[id] = { source: val, ast };
             }
             else {
@@ -422,13 +488,13 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             detail.errors = errors;
         }
         if (this._promptEvaluators.size > 0) {
-            // Only surface evaluators for controls whose active mode is NQL.
-            // In Basic / Prompt mode the consumer expects a plain-string payload
-            // — leaking the cached evaluator from the last NQL pass would lie
-            // about what the user has selected.
+            // Only surface evaluators for controls whose active mode is Expression.
+            // In Prompt mode the consumer expects a plain-string payload — leaking
+            // the cached evaluator from the last Expression pass would lie about
+            // what the user has selected.
             const evaluators = {};
             this._promptEvaluators.forEach((fn, id) => {
-                if (this.promptModes.get(id) === 'nql')
+                if (this.promptModes.get(id) === 'expression')
                     evaluators[id] = fn;
             });
             if (Object.keys(evaluators).length > 0)
@@ -488,8 +554,8 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
                         enabled: true,
                         mode: ctrl.queryLanguage?.mode ?? 'strict',
                         toggle: {
-                            basic: { label: ctrl.queryLanguage?.toggle?.basic?.label ?? 'Prompt' },
-                            nql: { label: ctrl.queryLanguage?.toggle?.nql?.label ?? 'Expression' },
+                            prompt: { label: ctrl.queryLanguage?.toggle?.prompt?.label ?? 'Prompt' },
+                            expression: { label: ctrl.queryLanguage?.toggle?.expression?.label ?? 'Expression' },
                         },
                     },
                 });
@@ -506,15 +572,15 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     }
     /**
      * If any prompt control in `controls` has its toggle enabled and is currently
-     * in NQL mode, collapse the visible set down to just that prompt — Basic mode
-     * shows everything, JQL mode shows only the expression input.
+     * in Expression mode, collapse the visible set down to just that prompt —
+     * Prompt mode shows everything, Expression mode shows only the expression input.
      */
     _filterByPromptMode(controls) {
-        const nqlPrompt = controls.find(c => ((c.variant === 'prompt' && c.queryLanguage?.enabled)
+        const expressionPrompt = controls.find(c => ((c.variant === 'prompt' && c.queryLanguage?.enabled)
             || c.variant === 'hybrid'
             || c.variant === 'expression')
-            && this.promptModes.get(c.id) === 'nql');
-        return nqlPrompt ? [nqlPrompt] : controls;
+            && this.promptModes.get(c.id) === 'expression');
+        return expressionPrompt ? [expressionPrompt] : controls;
     }
     _renderGroup(group) {
         const collapsed = this.collapsedGroups.has(group.label);
@@ -573,6 +639,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'hide-control-headers', reflect: true })
 ], NileFilterChart.prototype, "hideControlHeaders", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileFilterChart.prototype, "appearance", void 0);
 __decorate([
     state()
 ], NileFilterChart.prototype, "selectedValues", void 0);
@@ -594,6 +663,9 @@ __decorate([
 __decorate([
     state()
 ], NileFilterChart.prototype, "promptFocusedId", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptFieldWidth", void 0);
 NileFilterChart = NileFilterChart_1 = __decorate([
     customElement('nile-filter-chart')
 ], NileFilterChart);