@zentto/report-designer 1.6.4 → 1.6.6

package/dist/data-panel/formula-editor.js

@@ -0,0 +1,656 @@
+// @zentto/report-designer — Formula Editor with field autocomplete
+// Visual editor for Crystal Reports-style expressions: {ds.field}, functions, operators
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+const FUNCTIONS = [
+    // String
+    { name: 'UPPER', args: 'value', desc: 'Convert to uppercase', category: 'String' },
+    { name: 'LOWER', args: 'value', desc: 'Convert to lowercase', category: 'String' },
+    { name: 'LEN', args: 'value', desc: 'String length', category: 'String' },
+    { name: 'TRIM', args: 'value', desc: 'Remove whitespace', category: 'String' },
+    { name: 'SUBSTR', args: 'value, start, length', desc: 'Extract substring', category: 'String' },
+    { name: 'REPLACE', args: 'value, search, replace', desc: 'Replace text', category: 'String' },
+    { name: 'CONCAT', args: 'a, b, ...', desc: 'Concatenate strings', category: 'String' },
+    { name: 'LEFT', args: 'value, n', desc: 'Left N characters', category: 'String' },
+    { name: 'RIGHT', args: 'value, n', desc: 'Right N characters', category: 'String' },
+    // Math
+    { name: 'ABS', args: 'value', desc: 'Absolute value', category: 'Math' },
+    { name: 'ROUND', args: 'value, decimals', desc: 'Round to decimals', category: 'Math' },
+    { name: 'FLOOR', args: 'value', desc: 'Round down', category: 'Math' },
+    { name: 'CEIL', args: 'value', desc: 'Round up', category: 'Math' },
+    { name: 'SQRT', args: 'value', desc: 'Square root', category: 'Math' },
+    { name: 'POW', args: 'base, exp', desc: 'Power', category: 'Math' },
+    { name: 'MIN', args: 'a, b', desc: 'Minimum', category: 'Math' },
+    { name: 'MAX', args: 'a, b', desc: 'Maximum', category: 'Math' },
+    // Aggregate
+    { name: 'SUM', args: 'field', desc: 'Sum of values', category: 'Aggregate' },
+    { name: 'AVG', args: 'field', desc: 'Average', category: 'Aggregate' },
+    { name: 'COUNT', args: 'field', desc: 'Count records', category: 'Aggregate' },
+    { name: 'DISTINCT_COUNT', args: 'field', desc: 'Count distinct', category: 'Aggregate' },
+    // Date
+    { name: 'TODAY', args: '', desc: 'Current date', category: 'Date' },
+    { name: 'NOW', args: '', desc: 'Current date/time', category: 'Date' },
+    { name: 'YEAR', args: 'date', desc: 'Extract year', category: 'Date' },
+    { name: 'MONTH', args: 'date', desc: 'Extract month', category: 'Date' },
+    { name: 'DAY', args: 'date', desc: 'Extract day', category: 'Date' },
+    { name: 'FORMAT_DATE', args: 'date, format', desc: 'Format date', category: 'Date' },
+    { name: 'DATE_ADD', args: 'date, days', desc: 'Add days', category: 'Date' },
+    // Logic
+    { name: 'IF', args: 'condition, then, else', desc: 'Conditional', category: 'Logic' },
+    { name: 'ISNULL', args: 'value, default', desc: 'Null check', category: 'Logic' },
+    { name: 'ISBLANK', args: 'value', desc: 'Blank check', category: 'Logic' },
+    // Type
+    { name: 'CAST', args: 'value, type', desc: 'Type conversion', category: 'Type' },
+    { name: 'TYPEOF', args: 'value', desc: 'Get type name', category: 'Type' },
+];
+const OPERATORS = [
+    { op: '+', desc: 'Add' }, { op: '-', desc: 'Subtract' },
+    { op: '*', desc: 'Multiply' }, { op: '/', desc: 'Divide' },
+    { op: '%', desc: 'Modulo' }, { op: '&', desc: 'Concat' },
+    { op: '==', desc: 'Equals' }, { op: '!=', desc: 'Not equals' },
+    { op: '<', desc: 'Less' }, { op: '>', desc: 'Greater' },
+    { op: '<=', desc: 'Less/eq' }, { op: '>=', desc: 'Greater/eq' },
+    { op: 'AND', desc: 'And' }, { op: 'OR', desc: 'Or' }, { op: 'NOT', desc: 'Not' },
+];
+// ─── Component ────────────────────────────────────────────────────
+let FormulaEditor = class FormulaEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.dataSources = [];
+        this.existingFormulas = [];
+        this.initialName = '';
+        this.initialExpression = '';
+        /** Which data source this formula belongs to (optional) */
+        this.dataSourceId = '';
+        this._name = '';
+        this._expression = '';
+        this._cursorPos = 0;
+        this._showAutocomplete = false;
+        this._autocompleteItems = [];
+        this._autocompleteFilter = '';
+        this._selectedAutoIdx = 0;
+        this._activeTab = 'fields';
+        this._fnCategoryFilter = '';
+        this._preview = '';
+        this._error = '';
+        this._expandedDs = new Set();
+    }
+    static { this.styles = css `
+    :host {
+      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
+      font-size: 12px; display: block;
+    }
+
+    .overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+      z-index: 10000; display: flex; align-items: center; justify-content: center;
+      backdrop-filter: blur(2px);
+    }
+
+    .dialog {
+      background: var(--zrd-panel-bg, #fff); border-radius: 10px;
+      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
+      width: 700px; min-width: 400px; max-width: 95vw;
+      height: 75vh; min-height: 400px; max-height: 90vh;
+      display: flex; flex-direction: column;
+      overflow: hidden; resize: both;
+    }
+
+    .dialog-header {
+      padding: 16px 20px; border-bottom: 1px solid var(--zrd-border, #eee);
+      display: flex; justify-content: space-between; align-items: center;
+    }
+    .dialog-title { font-size: 15px; font-weight: 600; }
+    .close-btn {
+      background: none; border: none; font-size: 18px; cursor: pointer;
+      color: var(--zrd-text-muted, #999); width: 28px; height: 28px;
+      border-radius: 4px; display: flex; align-items: center; justify-content: center;
+    }
+    .close-btn:hover { background: var(--zrd-hover, #f5f5f5); }
+
+    .dialog-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
+
+    /* ─── Name field ──────────────────────────── */
+    .name-row { display: flex; gap: 8px; align-items: center; }
+    .name-label { font-weight: 600; font-size: 11px; min-width: 60px; }
+    .name-input {
+      flex: 1; padding: 6px 10px; border: 1px solid var(--zrd-border, #ddd);
+      border-radius: 5px; font-size: 12px; box-sizing: border-box;
+    }
+    .name-input:focus { outline: none; border-color: #1976d2; }
+
+    /* ─── Expression Editor ───────────────────── */
+    .expr-container { position: relative; }
+    .expr-textarea {
+      width: 100%; min-height: 80px; padding: 10px 12px;
+      border: 2px solid var(--zrd-border, #ddd); border-radius: 6px;
+      font-family: 'Consolas', 'Monaco', monospace; font-size: 13px;
+      resize: vertical; box-sizing: border-box; line-height: 1.5;
+      background: #fafafa;
+    }
+    .expr-textarea:focus { outline: none; border-color: #1976d2; background: #fff; }
+
+    /* ─── Autocomplete Dropdown ───────────────── */
+    .autocomplete {
+      position: absolute; top: 100%; left: 0; right: 0;
+      background: var(--zrd-panel-bg, #fff); border: 1px solid var(--zrd-border, #ddd);
+      border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      max-height: 200px; overflow-y: auto; z-index: 100;
+    }
+    .ac-item {
+      padding: 5px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px;
+      font-size: 11px;
+    }
+    .ac-item:hover, .ac-item.selected { background: #e3f2fd; }
+    .ac-label { flex: 1; font-weight: 500; }
+    .ac-type { font-size: 9px; color: var(--zrd-text-muted, #999); }
+    .ac-detail { font-size: 9px; color: #888; }
+
+    /* ─── Bottom Panels (tabs) ────────────────── */
+    .panel-tabs {
+      display: flex; border-bottom: 1px solid var(--zrd-border, #eee); gap: 0;
+    }
+    .panel-tab {
+      padding: 6px 14px; cursor: pointer; font-size: 11px; font-weight: 500;
+      border-bottom: 2px solid transparent; color: var(--zrd-text-muted, #999);
+    }
+    .panel-tab:hover { color: var(--zrd-text, #333); }
+    .panel-tab.active { color: #1976d2; border-bottom-color: #1976d2; }
+
+    .panel-content { max-height: 200px; overflow-y: auto; }
+
+    /* ─── Fields List ─────────────────────────── */
+    .ds-header {
+      padding: 4px 8px; font-weight: 600; font-size: 11px; cursor: pointer;
+      display: flex; align-items: center; gap: 4px;
+      background: var(--zrd-hover, #f9f9f9);
+    }
+    .ds-header:hover { background: #eef3f8; }
+    .field-item {
+      padding: 3px 8px 3px 24px; cursor: pointer; display: flex;
+      align-items: center; gap: 4px; font-size: 11px;
+    }
+    .field-item:hover { background: #e3f2fd; }
+    .field-item-icon { color: #1976d2; font-size: 10px; }
+    .field-item-name { flex: 1; }
+    .field-item-type { font-size: 9px; color: #999; }
+
+    /* ─── Functions List ──────────────────────── */
+    .fn-categories { display: flex; gap: 4px; padding: 6px 8px; flex-wrap: wrap; }
+    .fn-cat-btn {
+      padding: 2px 8px; border: 1px solid var(--zrd-border, #ddd); border-radius: 3px;
+      background: none; cursor: pointer; font-size: 10px;
+    }
+    .fn-cat-btn:hover { background: #f0f7ff; }
+    .fn-cat-btn.active { background: #1976d2; color: #fff; border-color: #1976d2; }
+
+    .fn-item {
+      padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px;
+      font-size: 11px;
+    }
+    .fn-item:hover { background: #e3f2fd; }
+    .fn-name { font-weight: 600; color: #e65100; font-family: monospace; }
+    .fn-args { color: #888; font-family: monospace; font-size: 10px; }
+    .fn-desc { flex: 1; text-align: right; font-size: 10px; color: #aaa; }
+
+    /* ─── Operators ───────────────────────────── */
+    .op-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
+    .op-btn {
+      padding: 4px 10px; border: 1px solid var(--zrd-border, #ddd); border-radius: 4px;
+      background: var(--zrd-panel-bg, #fff); cursor: pointer;
+      font-family: monospace; font-size: 12px; font-weight: 600;
+    }
+    .op-btn:hover { background: #e3f2fd; border-color: #1976d2; }
+
+    /* ─── Preview / Error ─────────────────────── */
+    .preview-bar {
+      padding: 6px 10px; font-size: 11px; border-radius: 4px;
+    }
+    .preview-bar.ok { background: #e8f5e9; color: #2e7d32; }
+    .preview-bar.err { background: #ffebee; color: #c62828; }
+
+    /* ─── Footer ──────────────────────────────── */
+    .dialog-footer {
+      padding: 12px 20px; border-top: 1px solid var(--zrd-border, #eee);
+      display: flex; justify-content: flex-end; gap: 8px;
+    }
+    .btn {
+      padding: 7px 18px; border-radius: 5px; border: 1px solid var(--zrd-border, #ddd);
+      cursor: pointer; font-size: 12px; font-weight: 500;
+      background: var(--zrd-panel-bg, #fff);
+    }
+    .btn:hover { background: #f5f5f5; }
+    .btn-primary { background: #1976d2; color: #fff; border-color: #1976d2; }
+    .btn-primary:hover { background: #1565c0; }
+    .btn-primary:disabled { opacity: 0.5; }
+  `; }
+    // ─── Lifecycle ────────────────────────────────────────────────
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            this._name = this.initialName || `formula_${Date.now()}`;
+            this._expression = this.initialExpression || '=';
+            this._error = '';
+            this._preview = '';
+        }
+    }
+    // ─── Autocomplete ─────────────────────────────────────────────
+    _onExprInput(e) {
+        const ta = e.target;
+        this._expression = ta.value;
+        this._cursorPos = ta.selectionStart || 0;
+        this._checkAutocomplete(ta);
+    }
+    _onExprKeyDown(e) {
+        if (!this._showAutocomplete)
+            return;
+        const items = this._getFilteredAutocomplete();
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this._selectedAutoIdx = Math.min(this._selectedAutoIdx + 1, items.length - 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this._selectedAutoIdx = Math.max(this._selectedAutoIdx - 1, 0);
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            if (items[this._selectedAutoIdx]) {
+                e.preventDefault();
+                this._insertAutocomplete(items[this._selectedAutoIdx].insert);
+            }
+        }
+        else if (e.key === 'Escape') {
+            this._showAutocomplete = false;
+        }
+    }
+    _checkAutocomplete(ta) {
+        const pos = ta.selectionStart || 0;
+        const textBefore = this._expression.substring(0, pos);
+        // Check if we're after a { (field reference)
+        const lastBrace = textBefore.lastIndexOf('{');
+        const lastClose = textBefore.lastIndexOf('}');
+        if (lastBrace > lastClose) {
+            this._autocompleteFilter = textBefore.substring(lastBrace + 1).toLowerCase();
+            this._buildFieldAutocomplete();
+            this._showAutocomplete = true;
+            this._selectedAutoIdx = 0;
+            return;
+        }
+        // Check if we're typing a function name (after = or operator)
+        const wordMatch = textBefore.match(/([A-Z_]+)$/i);
+        if (wordMatch && wordMatch[1].length >= 2) {
+            this._autocompleteFilter = wordMatch[1].toLowerCase();
+            this._buildFunctionAutocomplete();
+            this._showAutocomplete = true;
+            this._selectedAutoIdx = 0;
+            return;
+        }
+        this._showAutocomplete = false;
+    }
+    _buildFieldAutocomplete() {
+        const items = [];
+        // Data source fields
+        for (const ds of this.dataSources) {
+            for (const f of (ds.fields || [])) {
+                items.push({
+                    label: `${ds.name}.${f.label || f.name}`,
+                    insert: `${ds.id}.${f.name}}`,
+                    type: f.type,
+                    detail: ds.name,
+                });
+                // Also without ds prefix for the active dataSource
+                if (ds.id === this.dataSourceId) {
+                    items.push({
+                        label: f.label || f.name,
+                        insert: `${f.name}}`,
+                        type: f.type,
+                    });
+                }
+            }
+        }
+        // Existing formulas
+        for (const formula of this.existingFormulas) {
+            items.push({
+                label: `@${formula.name}`,
+                insert: `@${formula.name}}`,
+                type: 'formula',
+                detail: formula.expression,
+            });
+        }
+        this._autocompleteItems = items;
+    }
+    _buildFunctionAutocomplete() {
+        this._autocompleteItems = FUNCTIONS.map(fn => ({
+            label: fn.name,
+            insert: `${fn.name}(`,
+            type: 'function',
+            detail: `${fn.args} — ${fn.desc}`,
+        }));
+    }
+    _getFilteredAutocomplete() {
+        if (!this._autocompleteFilter)
+            return this._autocompleteItems.slice(0, 15);
+        return this._autocompleteItems
+            .filter(i => i.label.toLowerCase().includes(this._autocompleteFilter))
+            .slice(0, 15);
+    }
+    _insertAutocomplete(text) {
+        const ta = this.renderRoot.querySelector('.expr-textarea');
+        if (!ta)
+            return;
+        const pos = ta.selectionStart || 0;
+        const before = this._expression.substring(0, pos);
+        // Find start of current token
+        const lastBrace = before.lastIndexOf('{');
+        const lastClose = before.lastIndexOf('}');
+        let replaceFrom = pos;
+        if (lastBrace > lastClose) {
+            replaceFrom = lastBrace + 1;
+        }
+        else {
+            const wordMatch = before.match(/([A-Z_]+)$/i);
+            if (wordMatch)
+                replaceFrom = pos - wordMatch[1].length;
+        }
+        this._expression = this._expression.substring(0, replaceFrom) + text + this._expression.substring(pos);
+        this._showAutocomplete = false;
+        requestAnimationFrame(() => {
+            ta.focus();
+            const newPos = replaceFrom + text.length;
+            ta.setSelectionRange(newPos, newPos);
+        });
+    }
+    // ─── Insert from panels ───────────────────────────────────────
+    _insertFieldRef(dsId, fieldName) {
+        this._insertAtCursor(`{${dsId}.${fieldName}}`);
+    }
+    _insertFunction(fnName) {
+        this._insertAtCursor(`${fnName}(`);
+    }
+    _insertOperator(op) {
+        this._insertAtCursor(` ${op} `);
+    }
+    _insertFormulaRef(name) {
+        this._insertAtCursor(`{@${name}}`);
+    }
+    _insertAtCursor(text) {
+        const ta = this.renderRoot.querySelector('.expr-textarea');
+        if (!ta) {
+            this._expression += text;
+            return;
+        }
+        const pos = ta.selectionStart || this._expression.length;
+        this._expression = this._expression.substring(0, pos) + text + this._expression.substring(pos);
+        requestAnimationFrame(() => {
+            ta.focus();
+            const newPos = pos + text.length;
+            ta.setSelectionRange(newPos, newPos);
+        });
+    }
+    // ─── Validate ─────────────────────────────────────────────────
+    _validate() {
+        if (!this._expression || this._expression === '=') {
+            this._error = 'Expression is empty';
+            this._preview = '';
+            return;
+        }
+        // Basic validation: check balanced braces and parens
+        let braces = 0, parens = 0;
+        for (const ch of this._expression) {
+            if (ch === '{')
+                braces++;
+            if (ch === '}')
+                braces--;
+            if (ch === '(')
+                parens++;
+            if (ch === ')')
+                parens--;
+            if (braces < 0 || parens < 0)
+                break;
+        }
+        if (braces !== 0) {
+            this._error = 'Unbalanced { } braces';
+            this._preview = '';
+            return;
+        }
+        if (parens !== 0) {
+            this._error = 'Unbalanced ( ) parentheses';
+            this._preview = '';
+            return;
+        }
+        this._error = '';
+        this._preview = `Formula valid: ${this._expression}`;
+    }
+    // ─── Events ───────────────────────────────────────────────────
+    _onSave() {
+        this._validate();
+        if (this._error)
+            return;
+        this.dispatchEvent(new CustomEvent('formula-save', {
+            detail: { name: this._name, expression: this._expression, dataSourceId: this.dataSourceId },
+            bubbles: true, composed: true,
+        }));
+    }
+    _onCancel() {
+        this.dispatchEvent(new CustomEvent('formula-cancel', { bubbles: true, composed: true }));
+    }
+    _toggleDs(dsId) {
+        const s = new Set(this._expandedDs);
+        if (s.has(dsId))
+            s.delete(dsId);
+        else
+            s.add(dsId);
+        this._expandedDs = s;
+    }
+    // ─── Render ───────────────────────────────────────────────────
+    render() {
+        if (!this.open)
+            return nothing;
+        const autoItems = this._getFilteredAutocomplete();
+        return html `
+      <div class="overlay" @click=${this._onCancel}>
+        <div class="dialog" @click=${(e) => e.stopPropagation()}>
+          <div class="dialog-header">
+            <span class="dialog-title">\u{1D465} Formula Editor</span>
+            <button class="close-btn" @click=${this._onCancel}>\u2715</button>
+          </div>
+
+          <div class="dialog-body">
+            <!-- Name -->
+            <div class="name-row">
+              <span class="name-label">Name:</span>
+              <input class="name-input" .value=${this._name}
+                     @input=${(e) => { this._name = e.target.value; }} />
+            </div>
+
+            <!-- Expression -->
+            <div class="expr-container">
+              <textarea class="expr-textarea"
+                        .value=${this._expression}
+                        @input=${(e) => this._onExprInput(e)}
+                        @keydown=${(e) => this._onExprKeyDown(e)}
+                        @blur=${() => { setTimeout(() => { this._showAutocomplete = false; }, 200); }}
+                        placeholder="={ds.field} * {ds.field2}"
+                        spellcheck="false"
+              ></textarea>
+              ${this._showAutocomplete && autoItems.length > 0 ? html `
+                <div class="autocomplete">
+                  ${autoItems.map((item, i) => html `
+                    <div class="ac-item ${i === this._selectedAutoIdx ? 'selected' : ''}"
+                         @mousedown=${(e) => { e.preventDefault(); this._insertAutocomplete(item.insert); }}>
+                      <span class="ac-label">${item.label}</span>
+                      <span class="ac-type">${item.type}</span>
+                      ${item.detail ? html `<span class="ac-detail">${item.detail}</span>` : nothing}
+                    </div>
+                  `)}
+                </div>
+              ` : nothing}
+            </div>
+
+            <!-- Preview / Error -->
+            ${this._error ? html `<div class="preview-bar err">\u26A0 ${this._error}</div>` : nothing}
+            ${this._preview && !this._error ? html `<div class="preview-bar ok">\u2713 ${this._preview}</div>` : nothing}
+
+            <!-- Bottom Panel: Fields / Functions / Operators -->
+            <div class="panel-tabs">
+              <div class="panel-tab ${this._activeTab === 'fields' ? 'active' : ''}"
+                   @click=${() => { this._activeTab = 'fields'; }}>Fields</div>
+              <div class="panel-tab ${this._activeTab === 'functions' ? 'active' : ''}"
+                   @click=${() => { this._activeTab = 'functions'; }}>Functions</div>
+              <div class="panel-tab ${this._activeTab === 'operators' ? 'active' : ''}"
+                   @click=${() => { this._activeTab = 'operators'; }}>Operators</div>
+            </div>
+            <div class="panel-content">
+              ${this._activeTab === 'fields' ? this._renderFieldsPanel() : nothing}
+              ${this._activeTab === 'functions' ? this._renderFunctionsPanel() : nothing}
+              ${this._activeTab === 'operators' ? this._renderOperatorsPanel() : nothing}
+            </div>
+          </div>
+
+          <div class="dialog-footer">
+            <button class="btn" @click=${this._onCancel}>Cancel</button>
+            <button class="btn" @click=${this._validate}>Validate</button>
+            <button class="btn btn-primary"
+                    ?disabled=${!this._name || !this._expression || this._expression === '='}
+                    @click=${this._onSave}>
+              Save Formula
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    _renderFieldsPanel() {
+        return html `
+      <!-- Existing formulas -->
+      ${this.existingFormulas.length > 0 ? html `
+        <div class="ds-header" style="color:#e65100">
+          \u{1D465} Formulas (${this.existingFormulas.length})
+        </div>
+        ${this.existingFormulas.map(f => html `
+          <div class="field-item" @click=${() => this._insertFormulaRef(f.name)}>
+            <span class="field-item-icon" style="color:#e65100">@</span>
+            <span class="field-item-name">${f.name}</span>
+            <span class="field-item-type">${f.expression}</span>
+          </div>
+        `)}
+      ` : nothing}
+
+      <!-- Data source fields -->
+      ${this.dataSources.map(ds => {
+            const isOpen = this._expandedDs.has(ds.id);
+            return html `
+          <div class="ds-header" @click=${() => this._toggleDs(ds.id)}>
+            <span style="font-size:8px;transition:transform 0.15s;${isOpen ? 'transform:rotate(90deg)' : ''}">\u25B6</span>
+            \u{1F4CB} ${ds.name} (${(ds.fields || []).length})
+          </div>
+          ${isOpen ? (ds.fields || []).map(f => html `
+            <div class="field-item" @click=${() => this._insertFieldRef(ds.id, f.name)}>
+              <span class="field-item-icon">\u{25C6}</span>
+              <span class="field-item-name">${f.label || f.name}</span>
+              <span class="field-item-type">${f.type}</span>
+            </div>
+          `) : nothing}
+        `;
+        })}
+    `;
+    }
+    _renderFunctionsPanel() {
+        const categories = [...new Set(FUNCTIONS.map(f => f.category))];
+        const filtered = this._fnCategoryFilter
+            ? FUNCTIONS.filter(f => f.category === this._fnCategoryFilter)
+            : FUNCTIONS;
+        return html `
+      <div class="fn-categories">
+        <button class="fn-cat-btn ${!this._fnCategoryFilter ? 'active' : ''}"
+                @click=${() => { this._fnCategoryFilter = ''; }}>All</button>
+        ${categories.map(cat => html `
+          <button class="fn-cat-btn ${this._fnCategoryFilter === cat ? 'active' : ''}"
+                  @click=${() => { this._fnCategoryFilter = cat; }}>${cat}</button>
+        `)}
+      </div>
+      ${filtered.map(fn => html `
+        <div class="fn-item" @click=${() => this._insertFunction(fn.name)}>
+          <span class="fn-name">${fn.name}</span>
+          <span class="fn-args">(${fn.args})</span>
+          <span class="fn-desc">${fn.desc}</span>
+        </div>
+      `)}
+    `;
+    }
+    _renderOperatorsPanel() {
+        return html `
+      <div class="op-grid">
+        ${OPERATORS.map(op => html `
+          <button class="op-btn" title=${op.desc}
+                  @click=${() => this._insertOperator(op.op)}>${op.op}</button>
+        `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], FormulaEditor.prototype, "open", void 0);
+__decorate([
+    property({ type: Array })
+], FormulaEditor.prototype, "dataSources", void 0);
+__decorate([
+    property({ type: Array })
+], FormulaEditor.prototype, "existingFormulas", void 0);
+__decorate([
+    property({ type: String })
+], FormulaEditor.prototype, "initialName", void 0);
+__decorate([
+    property({ type: String })
+], FormulaEditor.prototype, "initialExpression", void 0);
+__decorate([
+    property({ type: String })
+], FormulaEditor.prototype, "dataSourceId", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_name", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_expression", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_cursorPos", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_showAutocomplete", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_autocompleteItems", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_autocompleteFilter", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_selectedAutoIdx", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_fnCategoryFilter", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_preview", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_error", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_expandedDs", void 0);
+FormulaEditor = __decorate([
+    customElement('zrd-formula-editor')
+], FormulaEditor);
+export { FormulaEditor };
+//# sourceMappingURL=formula-editor.js.map