@masterteam/components 0.0.134 → 0.0.136

package/fesm2022/masterteam-components-formula.mjs

@@ -172,6 +172,21 @@ function createLiteralToken(value, depth = 0, functionId, argIndex) {
         dragBehavior: 'single',
     };
 }
+/**
+ * Create a raw text token for identifiers or syntax fragments that are not
+ * properties, literals, or operators.
+ */
+function createTextToken(value, depth = 0, functionId, argIndex) {
+    return {
+        id: generateTokenId(),
+        type: 'text',
+        value,
+        depth,
+        functionId,
+        argIndex,
+        dragBehavior: 'single',
+    };
+}
 // ============ TOKEN ARRAY OPERATIONS ============
 /**
  * Find the complete range of a function in the token array
@@ -237,20 +252,34 @@ function isValidDropPosition(tokens, dropIndex, draggedTokens) {
 function serializeTokens(tokens) {
     const parts = [];
     let lastType = null;
+    let lastValue = '';
     for (const token of tokens) {
-        // Add space between tokens (except after fn-open, before fn-close, after separator)
-        if (lastType &&
-            lastType !== 'fn-open' &&
-            token.type !== 'fn-close' &&
-            token.type !== 'fn-separator' &&
-            lastType !== 'fn-separator') {
+        if (shouldInsertSpace(lastType, lastValue, token)) {
             parts.push(' ');
         }
         parts.push(token.value);
         lastType = token.type;
+        lastValue = token.value;
     }
     return parts.join('');
 }
+function shouldInsertSpace(previousType, previousValue, current) {
+    if (!previousType)
+        return false;
+    if (previousType === 'fn-open')
+        return false;
+    if (current.type === 'fn-close')
+        return false;
+    if (current.type === 'fn-separator')
+        return false;
+    if (previousType === 'fn-separator')
+        return true;
+    if (current.value === ':')
+        return false;
+    if (previousValue === ':')
+        return true;
+    return true;
+}
 /**
  * Clone a token with new ID
  */
@@ -299,6 +328,226 @@ function recalculateDepths(tokens) {
     }
     return result;
 }
+/**
+ * Convert a backend template or insertText into builder tokens while
+ * preserving the authored syntax as closely as the flat token model allows.
+ */
+function tokenizeFormulaTemplate(template) {
+    const source = template.trim();
+    if (!source)
+        return [];
+    let index = 0;
+    const parseExpression = (context) => {
+        const tokens = [];
+        while (index < source.length) {
+            skipWhitespace();
+            if (index >= source.length)
+                break;
+            const char = source[index];
+            if (char === ',' || char === ')') {
+                break;
+            }
+            if (char === '@') {
+                tokens.push(createPropertyToken(readPropertyPath(), 'current', context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            if (char === '"' || char === "'") {
+                tokens.push(createLiteralToken(readQuotedString(), context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            if (isDigit(char)) {
+                tokens.push(createLiteralToken(Number(readNumber()), context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            if (char === '-' &&
+                isDigit(source[index + 1] ?? '') &&
+                shouldReadNegativeNumber(tokens)) {
+                tokens.push(createLiteralToken(Number(readNumber()), context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            if (isIdentifierStart(char)) {
+                const identifier = readIdentifier();
+                skipWhitespace();
+                if (source[index] === '(') {
+                    tokens.push(...parseFunction(identifier, context.depth));
+                    continue;
+                }
+                if (identifier === 'true' || identifier === 'false') {
+                    tokens.push(createLiteralToken(identifier === 'true', context.depth, context.functionId, context.argIndex));
+                    continue;
+                }
+                if (identifier === 'null') {
+                    tokens.push(createTextToken(identifier, context.depth, context.functionId, context.argIndex));
+                    continue;
+                }
+                tokens.push(createTextToken(identifier, context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            const operator = readOperator();
+            if (operator) {
+                tokens.push(createOperatorToken(operator, context.depth, context.functionId, context.argIndex));
+                continue;
+            }
+            tokens.push(createTextToken(char, context.depth, context.functionId, context.argIndex));
+            index += 1;
+        }
+        return tokens;
+    };
+    const parseFunction = (name, depth) => {
+        const functionId = generateFunctionId();
+        const tokens = [
+            {
+                id: generateTokenId(),
+                type: 'fn-open',
+                value: `${name}(`,
+                functionId,
+                functionName: name,
+                depth,
+                dragBehavior: 'function',
+            },
+        ];
+        index += 1; // consume '('
+        let argIndex = 0;
+        while (index < source.length) {
+            skipWhitespace();
+            if (source[index] === ')') {
+                index += 1;
+                break;
+            }
+            tokens.push(...parseExpression({
+                depth: depth + 1,
+                functionId,
+                argIndex,
+            }));
+            skipWhitespace();
+            if (source[index] === ',') {
+                tokens.push({
+                    id: generateTokenId(),
+                    type: 'fn-separator',
+                    value: ',',
+                    functionId,
+                    depth,
+                    argIndex,
+                    dragBehavior: 'function',
+                });
+                argIndex += 1;
+                index += 1;
+                continue;
+            }
+            if (source[index] === ')') {
+                index += 1;
+                break;
+            }
+        }
+        tokens.push({
+            id: generateTokenId(),
+            type: 'fn-close',
+            value: ')',
+            functionId,
+            depth,
+            dragBehavior: 'function',
+        });
+        return tokens;
+    };
+    const skipWhitespace = () => {
+        while (index < source.length && /\s/.test(source[index])) {
+            index += 1;
+        }
+    };
+    const readQuotedString = () => {
+        const quote = source[index];
+        let value = quote;
+        index += 1;
+        while (index < source.length) {
+            const char = source[index];
+            value += char;
+            index += 1;
+            if (char === '\\' && index < source.length) {
+                value += source[index];
+                index += 1;
+                continue;
+            }
+            if (char === quote) {
+                break;
+            }
+        }
+        return value;
+    };
+    const readNumber = () => {
+        const start = index;
+        if (source[index] === '-') {
+            index += 1;
+        }
+        while (index < source.length && /[0-9.]/.test(source[index])) {
+            index += 1;
+        }
+        return source.slice(start, index);
+    };
+    const readIdentifier = () => {
+        const start = index;
+        index += 1;
+        while (index < source.length && /[\w]/.test(source[index])) {
+            index += 1;
+        }
+        return source.slice(start, index);
+    };
+    const readPropertyPath = () => {
+        const start = index;
+        index += 1;
+        while (index < source.length) {
+            const char = source[index];
+            const next = source[index + 1] ?? '';
+            if (/\s/.test(char) || char === ',' || char === ')' || char === '(') {
+                break;
+            }
+            if (/[+\-*/%<>=!&|?:]/.test(char) && !(char === ':' && next === ':')) {
+                break;
+            }
+            index += 1;
+        }
+        return source.slice(start, index);
+    };
+    const readOperator = () => {
+        const operators = [
+            '==',
+            '!=',
+            '>=',
+            '<=',
+            '&&',
+            '||',
+            ':',
+            '+',
+            '-',
+            '*',
+            '/',
+            '%',
+            '>',
+            '<',
+            '!',
+            '?',
+        ];
+        for (const operator of operators) {
+            if (source.startsWith(operator, index)) {
+                index += operator.length;
+                return operator;
+            }
+        }
+        return null;
+    };
+    return recalculateDepths(parseExpression({ depth: 0 }));
+}
+function isDigit(value) {
+    return /[0-9]/.test(value);
+}
+function isIdentifierStart(value) {
+    return /[A-Za-z_]/.test(value);
+}
+function shouldReadNegativeNumber(tokens) {
+    const previous = tokens[tokens.length - 1];
+    if (!previous)
+        return true;
+    return previous.type === 'operator' || previous.type === 'fn-open';
+}
 /**
  * Find which argument index a position belongs to within a function
  */
@@ -325,7 +574,7 @@ function generateSmartBlockId() {
     return `sb_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
 }
 /** Create a function block from signature */
-function createFunctionBlock(signature, name) {
+function createFunctionBlock(signature, name, insertText, cursorOffset) {
     const parsed = parseSignature(signature);
     return {
         id: generateSmartBlockId(),
@@ -333,6 +582,8 @@ function createFunctionBlock(signature, name) {
         value: parsed.name,
         functionName: name || parsed.name,
         signature,
+        insertText,
+        cursorOffset,
         arguments: parsed.args.map((arg) => ({
             id: generateSmartBlockId(),
             name: arg,
@@ -692,6 +943,8 @@ class FormulaEditor {
             case 'literal':
                 // Literal tokens - emerald colors
                 return `${base} bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-200 dark:hover:bg-emerald-900/50`;
+            case 'text':
+                return `${base} bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700`;
             default:
                 return base;
         }
@@ -703,7 +956,7 @@ class FormulaEditor {
     smartBlockToTokens(block) {
         switch (block.type) {
             case 'function':
-                return createFunctionTokens(block.signature || `${block.functionName}()`, 0);
+                return tokenizeFormulaTemplate(block.insertText || block.signature || `${block.functionName}()`);
             case 'property':
                 return [
                     createPropertyToken(block.propertyKey || block.value, block.propertyType, 0, undefined, undefined, block.display),
@@ -751,6 +1004,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], template: "<div\r\n  [class]=\"containerClasses()\"\r\n  [class.opacity-60]=\"disabled()\"\r\n  [class.pointer-events-none]=\"disabled()\"\r\n  (focus)=\"handleFocus()\"\r\n  (blur)=\"handleBlur()\"\r\n  tabindex=\"0\"\r\n>\r\n  <!-- Line Numbers -->\r\n  <div [class]=\"lineNumberClasses()\">\r\n    @for (line of lines(); track $index) {\r\n      <div class=\"text-surface-400 dark:text-surface-500 text-sm leading-6\">\r\n        {{ $index + 1 }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Editor Content - Single Drop Zone -->\r\n  <div\r\n    class=\"flex-1 p-2 flex flex-wrap gap-0.5 items-start content-start min-h-14 cursor-text\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"mixed\"\r\n    [cdkDropListData]=\"tokens()\"\r\n    [cdkDropListDisabled]=\"disabled()\"\r\n    (cdkDropListDropped)=\"onDrop($event)\"\r\n  >\r\n    @if (tokens().length === 0) {\r\n      <div class=\"text-surface-400 dark:text-surface-500 text-sm italic\">\r\n        {{ placeholder() }}\r\n      </div>\r\n    } @else {\r\n      @for (token of tokens(); track token.id; let i = $index) {\r\n        <div\r\n          class=\"relative inline-flex items-center group\"\r\n          cdkDrag\r\n          [cdkDragData]=\"token\"\r\n          [cdkDragDisabled]=\"disabled()\"\r\n          (cdkDragStarted)=\"onDragStart($event, token, i)\"\r\n          (cdkDragEnded)=\"onDragEnd()\"\r\n        >\r\n          <!-- Drag Placeholder (thin cursor line) -->\r\n          <div\r\n            *cdkDragPlaceholder\r\n            class=\"w-2 min-w-2 h-5 bg-primary rounded-sm opacity-80\"\r\n          ></div>\r\n\r\n          <!-- Token -->\r\n          <span\r\n            [class]=\"getTokenClasses(token)\"\r\n            [class.border-b-2]=\"!isDragging() && isHighlighted(token)\"\r\n            [class.border-primary]=\"!isDragging() && isHighlighted(token)\"\r\n            (mouseenter)=\"onTokenHover(token)\"\r\n            (mouseleave)=\"onTokenLeave()\"\r\n          >\r\n            {{ token.display ?? token.value }}\r\n          </span>\r\n\r\n          <!-- Delete Button (shows on hover, hidden during drag) -->\r\n          @if (!isDragging() && !disabled()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"absolute -top-1.5 -right-1.5 w-3.5 h-3.5 flex items-center justify-center bg-red-500 hover:bg-red-600 text-white rounded-full cursor-pointer scale-75 hover:scale-100 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto z-10\"\r\n              (click)=\"removeToken(token, i); $event.stopPropagation()\"\r\n              [title]=\"\r\n                token.dragBehavior === 'function' ? 'Remove function' : 'Remove'\r\n              \"\r\n            >\r\n              <svg\r\n                class=\"h-2.5 w-2.5\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"3\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M6 18L18 6M6 6l12 12\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".cdk-drag-preview{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;border-radius:4px;opacity:.9;overflow:hidden!important;cursor:grabbing}.cdk-drag-animating{transition:none!important}.cdk-drag-dragging{opacity:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], initialTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialTokens", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], formulaChange: [{ type: i0.Output, args: ["formulaChange"] }], tokensChange: [{ type: i0.Output, args: ["tokensChange"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }] } });
 
+function buildCompletionFilterText(suggestion) {
+    const candidates = [
+        suggestion.displayText,
+        suggestion.insertText,
+        suggestion.text,
+    ]
+        .map((value) => value?.trim() ?? '')
+        .filter((value) => value.length > 0);
+    return Array.from(new Set(candidates)).join(' ');
+}
+
+const FORMULA_REFERENCE_CHARACTER = /[@\w.:]/;
+function resolveCompletionRangeBounds(lineContent, column, wordStartColumn, wordEndColumn, suggestion) {
+    const referenceBounds = getReferenceCompletionBounds(lineContent, column, suggestion);
+    return (referenceBounds ?? {
+        startColumn: wordStartColumn,
+        endColumn: wordEndColumn,
+    });
+}
+function getReferenceCompletionBounds(lineContent, column, suggestion) {
+    const insertText = suggestion.insertText ?? suggestion.text;
+    if (suggestion.type !== 'Property' &&
+        suggestion.type !== 'Context' &&
+        !insertText.startsWith('@')) {
+        return null;
+    }
+    const cursorIndex = Math.max(0, Math.min(column - 1, lineContent.length));
+    let startIndex = cursorIndex;
+    while (startIndex > 0 &&
+        FORMULA_REFERENCE_CHARACTER.test(lineContent[startIndex - 1] ?? '')) {
+        startIndex--;
+    }
+    let endIndex = cursorIndex;
+    while (endIndex < lineContent.length &&
+        FORMULA_REFERENCE_CHARACTER.test(lineContent[endIndex] ?? '')) {
+        endIndex++;
+    }
+    return {
+        startColumn: startIndex + 1,
+        endColumn: endIndex + 1,
+    };
+}
+
 class FormulaEditorCode {
     placeholder = input('Enter formula...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     initialFormula = input('', ...(ngDevMode ? [{ debugName: "initialFormula" }] : []));
@@ -986,6 +1282,7 @@ class FormulaEditorCode {
             tokenizer: {
                 root: [
                     [/@[a-zA-Z_][\w.]*::[\w_]+/, 'type.identifier'],
+                    [/@[a-zA-Z_][\w.]*/, 'type.identifier'],
                     [/\b[A-Z_][A-Z0-9_]*\b/, 'function'],
                     [
                         /[a-zA-Z_][\w_]*/,
@@ -1257,8 +1554,6 @@ class FormulaEditorCode {
                         if (!response || requestId !== this.currentAutocompleteRequestId) {
                             return { suggestions: [] };
                         }
-                        const word = model.getWordUntilPosition(position);
-                        const range = new this.monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
                         return {
                             suggestions: (response.suggestions ?? []).map((suggestion, index) => {
                                 const insertText = suggestion.insertText ?? suggestion.text;
@@ -1269,9 +1564,9 @@ class FormulaEditorCode {
                                     insertText: text,
                                     insertTextRules: rule,
                                     detail: suggestion.description ?? suggestion.category,
-                                    range,
+                                    range: this.getCompletionRanges(model, position, suggestion),
                                     sortText: String(index).padStart(4, '0'),
-                                    filterText: suggestion.text,
+                                    filterText: buildCompletionFilterText(suggestion),
                                 };
                             }),
                         };
@@ -1314,6 +1609,14 @@ class FormulaEditorCode {
             rule: this.monaco?.languages.CompletionItemInsertTextRule.InsertAsSnippet,
         };
     }
+    getCompletionRanges(model, position, suggestion) {
+        const word = model.getWordUntilPosition(position);
+        const { startColumn, endColumn } = resolveCompletionRangeBounds(model.getLineContent(position.lineNumber), position.column, word.startColumn, Math.max(word.endColumn, position.column), suggestion);
+        return {
+            insert: new this.monaco.Range(position.lineNumber, startColumn, position.lineNumber, position.column),
+            replace: new this.monaco.Range(position.lineNumber, startColumn, position.lineNumber, endColumn),
+        };
+    }
     mapSuggestionKind(type) {
         if (!this.monaco) {
             return 17;
@@ -1325,6 +1628,8 @@ class FormulaEditorCode {
                 return this.monaco.languages.CompletionItemKind.Operator;
             case 'Property':
                 return this.monaco.languages.CompletionItemKind.Field;
+            case 'Context':
+                return this.monaco.languages.CompletionItemKind.Module;
             case 'Keyword':
                 return this.monaco.languages.CompletionItemKind.Keyword;
             default:
@@ -1343,9 +1648,11 @@ class FormulaEditorCode {
     smartBlockToText(block) {
         switch (block.type) {
             case 'function': {
-                const signature = block.signature ?? `${block.functionName ?? block.value}()`;
-                const cursorOffset = signature.endsWith(')') ? -1 : 0;
-                return { text: signature, cursorOffset };
+                const text = block.insertText ??
+                    block.signature ??
+                    `${block.functionName ?? block.value}()`;
+                const cursorOffset = block.cursorOffset ?? (text.endsWith(')') ? -1 : 0);
+                return { text, cursorOffset };
             }
             case 'property':
                 return { text: block.value ?? '', cursorOffset: 0 };
@@ -1421,29 +1728,84 @@ class FormulaToolbarItem {
     signature = input(...(ngDevMode ? [undefined, { debugName: "signature" }] : []));
     /** Function examples (for functions only) - can be strings or objects with code/description */
     examples = input([], ...(ngDevMode ? [{ debugName: "examples" }] : []));
+    /** Backend template to insert (preferred over signature) */
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : []));
+    /** Cursor offset relative to inserted template */
+    templateCursorOffset = input(...(ngDevMode ? [undefined, { debugName: "templateCursorOffset" }] : []));
+    /** Function hints from backend documentation */
+    hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : []));
+    /** Function return type */
+    returnType = input(...(ngDevMode ? [undefined, { debugName: "returnType" }] : []));
+    /** Function parameters */
+    parameters = input([], ...(ngDevMode ? [{ debugName: "parameters" }] : []));
+    /** Normalized description */
+    normalizedDescription = computed(() => this.description().trim(), ...(ngDevMode ? [{ debugName: "normalizedDescription" }] : []));
+    /** Normalized signature */
+    normalizedSignature = computed(() => this.signature()?.trim() ?? '', ...(ngDevMode ? [{ debugName: "normalizedSignature" }] : []));
+    /** Normalized template */
+    normalizedTemplate = computed(() => this.template()?.trim() ?? '', ...(ngDevMode ? [{ debugName: "normalizedTemplate" }] : []));
+    /** Normalized return type */
+    normalizedReturnType = computed(() => this.returnType()?.trim() ?? '', ...(ngDevMode ? [{ debugName: "normalizedReturnType" }] : []));
     /** Normalized examples as ExampleItem[] */
     normalizedExamples = computed(() => {
-        return this.examples().map((example) => {
-            if (typeof example === 'string') {
-                return { code: example };
-            }
-            return example;
-        });
+        return this.examples()
+            .map((example) => {
+            const normalized = typeof example === 'string' ? { code: example } : example;
+            return {
+                code: normalized.code.trim(),
+                description: normalized.description?.trim() || undefined,
+            };
+        })
+            .filter((example) => example.code.length > 0);
     }, ...(ngDevMode ? [{ debugName: "normalizedExamples" }] : []));
+    /** Normalized hints */
+    normalizedHints = computed(() => this.hints()
+        .map((hint) => hint.trim())
+        .filter((hint) => hint.length > 0), ...(ngDevMode ? [{ debugName: "normalizedHints" }] : []));
+    /** Normalized parameters */
+    normalizedParameters = computed(() => this.parameters()
+        .map((parameter) => ({
+        ...parameter,
+        name: parameter.name.trim(),
+        type: parameter.type.trim(),
+        description: parameter.description.trim(),
+    }))
+        .filter((parameter) => parameter.name.length > 0 ||
+        parameter.type.length > 0 ||
+        parameter.description.length > 0), ...(ngDevMode ? [{ debugName: "normalizedParameters" }] : []));
     /** Property type for properties */
     propertyType = input('current', ...(ngDevMode ? [{ debugName: "propertyType" }] : []));
     /** Insert event - emits SmartBlock */
     onInsert = output();
     /** Computed display value */
     displayValue = computed(() => this.display() ?? this.value(), ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    /** Check if has rich tooltip content (signature or examples) */
+    /** Whether function metadata should use the rich tooltip template */
     hasRichTooltip = computed(() => this.type() === 'function' &&
-        (this.signature() || this.normalizedExamples().length > 0), ...(ngDevMode ? [{ debugName: "hasRichTooltip" }] : []));
+        Boolean(this.normalizedSignature() ||
+            this.shouldShowTemplate() ||
+            this.normalizedDescription() ||
+            this.normalizedReturnType() ||
+            this.normalizedParameters().length > 0 ||
+            this.normalizedExamples().length > 0 ||
+            this.normalizedHints().length > 0), ...(ngDevMode ? [{ debugName: "hasRichTooltip" }] : []));
+    /** Keep lightweight tooltip behavior only for small descriptions */
+    simpleTooltip = computed(() => this.hasRichTooltip() ? '' : this.normalizedDescription(), ...(ngDevMode ? [{ debugName: "simpleTooltip" }] : []));
+    /** Show insert template when it adds useful information beyond the signature */
+    shouldShowTemplate = computed(() => {
+        const template = this.normalizedTemplate();
+        return template.length > 0 && template !== this.normalizedSignature();
+    }, ...(ngDevMode ? [{ debugName: "shouldShowTemplate" }] : []));
+    /** PrimeNG tooltip class to widen rich tooltip content */
+    tooltipStyleClass = computed(() => this.hasRichTooltip()
+        ? 'mt-formula-toolbar-item-tooltip mt-formula-toolbar-item-tooltip-rich'
+        : 'mt-formula-toolbar-item-tooltip', ...(ngDevMode ? [{ debugName: "tooltipStyleClass" }] : []));
     /** Build SmartBlock from item data */
     smartBlock = computed(() => {
         switch (this.type()) {
             case 'function':
-                return createFunctionBlock(this.signature() || `${this.value()}()`, this.value());
+                return createFunctionBlock(this.normalizedSignature() || `${this.value()}()`, this.value(), this.normalizedTemplate() ||
+                    this.normalizedSignature() ||
+                    `${this.value()}()`, this.templateCursorOffset());
             case 'property':
                 return createPropertyBlock(this.value(), this.propertyType(), this.display());
             case 'operator':
@@ -1470,14 +1832,14 @@ class FormulaToolbarItem {
         this.onInsert.emit(this.smartBlock());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaToolbarItem, isStandalone: true, selector: "mt-formula-toolbar-item", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, signature: { classPropertyName: "signature", publicName: "signature", isSignal: true, isRequired: false, transformFunction: null }, examples: { classPropertyName: "examples", publicName: "examples", isSignal: true, isRequired: false, transformFunction: null }, propertyType: { classPropertyName: "propertyType", publicName: "propertyType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInsert: "onInsert" }, host: { classAttribute: "inline-block" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"inline-flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm font-medium transition-colors hover:shadow-sm active:scale-95\"\r\n  [class]=\"itemClass()\"\r\n  [pTooltip]=\"hasRichTooltip() ? richTooltip : description()\"\r\n  [tooltipPosition]=\"'bottom'\"\r\n  [showDelay]=\"300\"\r\n  [hideDelay]=\"100\"\r\n  (click)=\"handleClick()\"\r\n>\r\n  @if (type() === \"function\") {\r\n    <span class=\"text-sm opacity-60\">\u0192</span>\r\n  }\r\n  {{ displayValue() }}\r\n</button>\r\n\r\n<!-- Rich tooltip template for functions -->\r\n<ng-template #richTooltip>\r\n  <div class=\"max-w-xs space-y-2.5 p-1\">\r\n    <!-- Signature (first) -->\r\n    @if (signature()) {\r\n      <div class=\"rounded bg-slate-700 px-2.5 py-1.5\">\r\n        <code class=\"font-mono text-sm text-emerald-400\">{{\r\n          signature()\r\n        }}</code>\r\n      </div>\r\n    }\r\n\r\n    <!-- Description -->\r\n    @if (description()) {\r\n      <p class=\"text-sm leading-relaxed text-slate-200\">{{ description() }}</p>\r\n    }\r\n\r\n    <!-- Examples -->\r\n    @if (normalizedExamples().length > 0) {\r\n      <div class=\"space-y-1.5 border-t border-slate-600 pt-2\">\r\n        <span\r\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n          >Examples</span\r\n        >\r\n        <div class=\"space-y-2\">\r\n          @for (example of normalizedExamples(); track $index) {\r\n            <div class=\"space-y-0.5\">\r\n              <div class=\"rounded bg-slate-800 px-2.5 py-1.5\">\r\n                <code class=\"font-mono text-xs text-amber-300\">{{\r\n                  example.code\r\n                }}</code>\r\n              </div>\r\n              @if (example.description) {\r\n                <p class=\"px-1 text-xs text-slate-400\">\r\n                  {{ example.description }}\r\n                </p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaToolbarItem, isStandalone: true, selector: "mt-formula-toolbar-item", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, signature: { classPropertyName: "signature", publicName: "signature", isSignal: true, isRequired: false, transformFunction: null }, examples: { classPropertyName: "examples", publicName: "examples", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, templateCursorOffset: { classPropertyName: "templateCursorOffset", publicName: "templateCursorOffset", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, returnType: { classPropertyName: "returnType", publicName: "returnType", isSignal: true, isRequired: false, transformFunction: null }, parameters: { classPropertyName: "parameters", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, propertyType: { classPropertyName: "propertyType", publicName: "propertyType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInsert: "onInsert" }, host: { classAttribute: "inline-block max-w-full" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm font-medium transition-colors hover:shadow-sm active:scale-95\"\n  [class]=\"itemClass()\"\n  [pTooltip]=\"hasRichTooltip() ? richTooltip : simpleTooltip()\"\n  [tooltipDisabled]=\"!hasRichTooltip() && !simpleTooltip()\"\n  [tooltipStyleClass]=\"tooltipStyleClass()\"\n  [tooltipPosition]=\"'bottom'\"\n  [showDelay]=\"300\"\n  [hideDelay]=\"100\"\n  [autoHide]=\"!hasRichTooltip()\"\n  (click)=\"handleClick()\"\n>\n  @if (type() === \"function\") {\n    <span class=\"text-sm opacity-60\">f</span>\n  }\n  <span class=\"truncate\">{{ displayValue() }}</span>\n</button>\n\n<ng-template #richTooltip>\n  <div class=\"space-y-3\">\n    @if (normalizedSignature()) {\n      <div class=\"rounded bg-slate-700 px-3 py-2\">\n        <code\n          class=\"block whitespace-pre-wrap break-words font-mono text-sm text-emerald-400\"\n          >{{ normalizedSignature() }}</code\n        >\n      </div>\n    }\n\n    @if (shouldShowTemplate()) {\n      <div class=\"space-y-1\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Insert</span\n        >\n        <div class=\"rounded bg-slate-800 px-3 py-2\">\n          <code\n            class=\"block whitespace-pre-wrap break-words font-mono text-xs text-amber-300\"\n            >{{ normalizedTemplate() }}</code\n          >\n        </div>\n      </div>\n    }\n\n    @if (normalizedDescription()) {\n      <p class=\"text-sm leading-relaxed text-slate-200\">\n        {{ normalizedDescription() }}\n      </p>\n    }\n\n    @if (normalizedReturnType()) {\n      <div class=\"flex items-center gap-2 text-xs text-slate-300\">\n        <span class=\"font-semibold uppercase tracking-wider text-slate-400\"\n          >Returns</span\n        >\n        <code class=\"rounded bg-slate-800 px-2 py-0.5 text-sky-300\">{{\n          normalizedReturnType()\n        }}</code>\n      </div>\n    }\n\n    @if (normalizedParameters().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Parameters</span\n        >\n        <div class=\"space-y-2\">\n          @for (\n            parameter of normalizedParameters();\n            track parameter.name + parameter.type\n          ) {\n            <div class=\"rounded bg-slate-800/70 px-3 py-2\">\n              <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n                @if (parameter.name) {\n                  <code class=\"font-mono text-emerald-300\">{{\n                    parameter.name\n                  }}</code>\n                }\n                @if (parameter.type) {\n                  <code class=\"text-sky-300\">{{ parameter.type }}</code>\n                }\n              </div>\n              @if (parameter.description) {\n                <p class=\"mt-1 text-xs leading-relaxed text-slate-400\">\n                  {{ parameter.description }}\n                </p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (normalizedExamples().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Examples</span\n        >\n        <div class=\"space-y-2\">\n          @for (example of normalizedExamples(); track example.code + $index) {\n            <div class=\"space-y-1\">\n              <div class=\"rounded bg-slate-800 px-3 py-2\">\n                <code\n                  class=\"block whitespace-pre-wrap break-words font-mono text-xs text-amber-300\"\n                  >{{ example.code }}</code\n                >\n              </div>\n              @if (example.description) {\n                <p class=\"px-1 text-xs leading-relaxed text-slate-400\">\n                  {{ example.description }}\n                </p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (normalizedHints().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Hints</span\n        >\n        <div class=\"space-y-1.5\">\n          @for (hint of normalizedHints(); track hint) {\n            <p\n              class=\"rounded bg-slate-800/70 px-3 py-2 text-xs leading-relaxed text-slate-300\"\n            >\n              {{ hint }}\n            </p>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".mt-formula-toolbar-item-tooltip.p-tooltip,.mt-formula-toolbar-item-tooltip .p-tooltip-text{max-width:min(32rem,92vw)}.mt-formula-toolbar-item-tooltip-rich .p-tooltip-text{width:min(32rem,92vw);max-height:min(70vh,36rem);overflow-y:auto;padding:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaToolbarItem, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-formula-toolbar-item', standalone: true, imports: [CommonModule, TooltipModule], host: {
-                        class: 'inline-block',
-                    }, template: "<button\r\n  type=\"button\"\r\n  class=\"inline-flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm font-medium transition-colors hover:shadow-sm active:scale-95\"\r\n  [class]=\"itemClass()\"\r\n  [pTooltip]=\"hasRichTooltip() ? richTooltip : description()\"\r\n  [tooltipPosition]=\"'bottom'\"\r\n  [showDelay]=\"300\"\r\n  [hideDelay]=\"100\"\r\n  (click)=\"handleClick()\"\r\n>\r\n  @if (type() === \"function\") {\r\n    <span class=\"text-sm opacity-60\">\u0192</span>\r\n  }\r\n  {{ displayValue() }}\r\n</button>\r\n\r\n<!-- Rich tooltip template for functions -->\r\n<ng-template #richTooltip>\r\n  <div class=\"max-w-xs space-y-2.5 p-1\">\r\n    <!-- Signature (first) -->\r\n    @if (signature()) {\r\n      <div class=\"rounded bg-slate-700 px-2.5 py-1.5\">\r\n        <code class=\"font-mono text-sm text-emerald-400\">{{\r\n          signature()\r\n        }}</code>\r\n      </div>\r\n    }\r\n\r\n    <!-- Description -->\r\n    @if (description()) {\r\n      <p class=\"text-sm leading-relaxed text-slate-200\">{{ description() }}</p>\r\n    }\r\n\r\n    <!-- Examples -->\r\n    @if (normalizedExamples().length > 0) {\r\n      <div class=\"space-y-1.5 border-t border-slate-600 pt-2\">\r\n        <span\r\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n          >Examples</span\r\n        >\r\n        <div class=\"space-y-2\">\r\n          @for (example of normalizedExamples(); track $index) {\r\n            <div class=\"space-y-0.5\">\r\n              <div class=\"rounded bg-slate-800 px-2.5 py-1.5\">\r\n                <code class=\"font-mono text-xs text-amber-300\">{{\r\n                  example.code\r\n                }}</code>\r\n              </div>\r\n              @if (example.description) {\r\n                <p class=\"px-1 text-xs text-slate-400\">\r\n                  {{ example.description }}\r\n                </p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], signature: [{ type: i0.Input, args: [{ isSignal: true, alias: "signature", required: false }] }], examples: [{ type: i0.Input, args: [{ isSignal: true, alias: "examples", required: false }] }], propertyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyType", required: false }] }], onInsert: [{ type: i0.Output, args: ["onInsert"] }] } });
+            args: [{ selector: 'mt-formula-toolbar-item', standalone: true, imports: [CommonModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'inline-block max-w-full',
+                    }, template: "<button\n  type=\"button\"\n  class=\"inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm font-medium transition-colors hover:shadow-sm active:scale-95\"\n  [class]=\"itemClass()\"\n  [pTooltip]=\"hasRichTooltip() ? richTooltip : simpleTooltip()\"\n  [tooltipDisabled]=\"!hasRichTooltip() && !simpleTooltip()\"\n  [tooltipStyleClass]=\"tooltipStyleClass()\"\n  [tooltipPosition]=\"'bottom'\"\n  [showDelay]=\"300\"\n  [hideDelay]=\"100\"\n  [autoHide]=\"!hasRichTooltip()\"\n  (click)=\"handleClick()\"\n>\n  @if (type() === \"function\") {\n    <span class=\"text-sm opacity-60\">f</span>\n  }\n  <span class=\"truncate\">{{ displayValue() }}</span>\n</button>\n\n<ng-template #richTooltip>\n  <div class=\"space-y-3\">\n    @if (normalizedSignature()) {\n      <div class=\"rounded bg-slate-700 px-3 py-2\">\n        <code\n          class=\"block whitespace-pre-wrap break-words font-mono text-sm text-emerald-400\"\n          >{{ normalizedSignature() }}</code\n        >\n      </div>\n    }\n\n    @if (shouldShowTemplate()) {\n      <div class=\"space-y-1\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Insert</span\n        >\n        <div class=\"rounded bg-slate-800 px-3 py-2\">\n          <code\n            class=\"block whitespace-pre-wrap break-words font-mono text-xs text-amber-300\"\n            >{{ normalizedTemplate() }}</code\n          >\n        </div>\n      </div>\n    }\n\n    @if (normalizedDescription()) {\n      <p class=\"text-sm leading-relaxed text-slate-200\">\n        {{ normalizedDescription() }}\n      </p>\n    }\n\n    @if (normalizedReturnType()) {\n      <div class=\"flex items-center gap-2 text-xs text-slate-300\">\n        <span class=\"font-semibold uppercase tracking-wider text-slate-400\"\n          >Returns</span\n        >\n        <code class=\"rounded bg-slate-800 px-2 py-0.5 text-sky-300\">{{\n          normalizedReturnType()\n        }}</code>\n      </div>\n    }\n\n    @if (normalizedParameters().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Parameters</span\n        >\n        <div class=\"space-y-2\">\n          @for (\n            parameter of normalizedParameters();\n            track parameter.name + parameter.type\n          ) {\n            <div class=\"rounded bg-slate-800/70 px-3 py-2\">\n              <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n                @if (parameter.name) {\n                  <code class=\"font-mono text-emerald-300\">{{\n                    parameter.name\n                  }}</code>\n                }\n                @if (parameter.type) {\n                  <code class=\"text-sky-300\">{{ parameter.type }}</code>\n                }\n              </div>\n              @if (parameter.description) {\n                <p class=\"mt-1 text-xs leading-relaxed text-slate-400\">\n                  {{ parameter.description }}\n                </p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (normalizedExamples().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Examples</span\n        >\n        <div class=\"space-y-2\">\n          @for (example of normalizedExamples(); track example.code + $index) {\n            <div class=\"space-y-1\">\n              <div class=\"rounded bg-slate-800 px-3 py-2\">\n                <code\n                  class=\"block whitespace-pre-wrap break-words font-mono text-xs text-amber-300\"\n                  >{{ example.code }}</code\n                >\n              </div>\n              @if (example.description) {\n                <p class=\"px-1 text-xs leading-relaxed text-slate-400\">\n                  {{ example.description }}\n                </p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (normalizedHints().length > 0) {\n      <div class=\"space-y-2 border-t border-slate-600 pt-3\">\n        <span\n          class=\"text-xs font-semibold uppercase tracking-wider text-slate-400\"\n          >Hints</span\n        >\n        <div class=\"space-y-1.5\">\n          @for (hint of normalizedHints(); track hint) {\n            <p\n              class=\"rounded bg-slate-800/70 px-3 py-2 text-xs leading-relaxed text-slate-300\"\n            >\n              {{ hint }}\n            </p>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".mt-formula-toolbar-item-tooltip.p-tooltip,.mt-formula-toolbar-item-tooltip .p-tooltip-text{max-width:min(32rem,92vw)}.mt-formula-toolbar-item-tooltip-rich .p-tooltip-text{width:min(32rem,92vw);max-height:min(70vh,36rem);overflow-y:auto;padding:.75rem}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], signature: [{ type: i0.Input, args: [{ isSignal: true, alias: "signature", required: false }] }], examples: [{ type: i0.Input, args: [{ isSignal: true, alias: "examples", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], templateCursorOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateCursorOffset", required: false }] }], hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], returnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnType", required: false }] }], parameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameters", required: false }] }], propertyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyType", required: false }] }], onInsert: [{ type: i0.Output, args: ["onInsert"] }] } });
 
 const DEFAULT_OPERATORS = [
     // Arithmetic
@@ -1703,15 +2065,21 @@ class FormulaToolbar {
     // ============ COMPUTED ============
     /** Filtered categories based on search */
     filteredCategories = computed(() => {
-        const query = this.searchQuery().toLowerCase();
-        const categories = this.functionCategories();
-        if (!query)
-            return categories;
-        return categories
+        const query = this.searchQuery().trim().toLowerCase();
+        return this.functionCategories()
             .map((cat) => ({
             ...cat,
-            functions: cat.functions.filter((fn) => fn.name.toLowerCase().includes(query) ||
-                fn.description.toLowerCase().includes(query)),
+            functions: cat.functions.filter((fn) => {
+                if (!query) {
+                    return true;
+                }
+                const functionName = fn.name.toLowerCase();
+                const description = fn.description.toLowerCase();
+                const categoryName = String(cat.displayName ?? cat.name).toLowerCase();
+                return (functionName.includes(query) ||
+                    description.includes(query) ||
+                    categoryName.includes(query));
+            }),
         }))
             .filter((cat) => cat.functions.length > 0);
     }, ...(ngDevMode ? [{ debugName: "filteredCategories" }] : []));
@@ -1879,11 +2247,11 @@ class FormulaToolbar {
         this.customValue.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaToolbar, isStandalone: true, selector: "mt-formula-toolbar", inputs: { knownProperties: { classPropertyName: "knownProperties", publicName: "knownProperties", isSignal: true, isRequired: false, transformFunction: null }, propertiesTemplate: { classPropertyName: "propertiesTemplate", publicName: "propertiesTemplate", isSignal: true, isRequired: false, transformFunction: null }, functionCategories: { classPropertyName: "functionCategories", publicName: "functionCategories", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, visibleTabs: { classPropertyName: "visibleTabs", publicName: "visibleTabs", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlockInsert: "onBlockInsert", onTabChange: "onTabChange" }, queries: [{ propertyName: "projectedPropertiesTemplate", first: true, predicate: ["properties"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\r\n  *transloco=\"let t; prefix: 'components.formula.toolbar'\"\r\n  class=\"flex flex-col border-b border-slate-200 dark:border-slate-700\"\r\n  [class.h-52]=\"activeTab() !== 'properties' || !resolvedPropertiesTemplate()\"\r\n>\r\n  <!-- Top Bar: Search + Quick Insert -->\r\n  <div\r\n    class=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\"\r\n  >\r\n    <!-- Search Field -->\r\n    <div class=\"relative flex-1\">\r\n      <svg\r\n        class=\"absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n        />\r\n      </svg>\r\n      <input\r\n        type=\"text\"\r\n        class=\"w-full rounded-lg border border-slate-300 bg-white py-1.5 ps-9 pe-8 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500\"\r\n        [placeholder]=\"searchPlaceholder() || t('search')\"\r\n        [(ngModel)]=\"searchQuery\"\r\n      />\r\n      @if (searchQuery()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-600 transition-all duration-200 dark:hover:bg-slate-700\"\r\n          (click)=\"clearSearch()\"\r\n        >\r\n          <svg\r\n            class=\"h-4 w-4\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <div class=\"h-6 w-px bg-slate-200 dark:bg-slate-600\"></div>\r\n\r\n    <!-- Quick Insert Input -->\r\n    <div class=\"relative flex items-center gap-2\">\r\n      <span\r\n        class=\"text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide\"\r\n        >{{ t(\"insertLabel\") }}:</span\r\n      >\r\n      <div class=\"relative\">\r\n        <input\r\n          #customValueInput\r\n          type=\"text\"\r\n          class=\"w-32 rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-700 placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:bg-slate-900\"\r\n          [placeholder]=\"t('customValuePlaceholder')\"\r\n          [(ngModel)]=\"customValue\"\r\n          (keydown.enter)=\"insertCustomValue()\"\r\n          (keydown.escape)=\"clearCustomValue()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Insert Button with Type Preview -->\r\n      @if (customValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 hover:shadow-sm active:scale-95\"\r\n          [class]=\"customValueTypeClass()\"\r\n          (click)=\"insertCustomValue()\"\r\n          [title]=\"t('insertType', { type: customValueType() })\"\r\n        >\r\n          @switch (customValueType()) {\r\n            @case (\"number\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"string\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M12 4.5v15m7.5-7.5h-15\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <span class=\"max-w-16 truncate\">{{ customValuePreview() }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Row -->\r\n  <div class=\"flex flex-1 overflow-hidden\">\r\n    <!-- Vertical Tabs -->\r\n    <div\r\n      class=\"flex w-44 flex-col border-e border-slate-200 dark:border-slate-700\"\r\n    >\r\n      @for (tab of resolvedTabOptions(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex cursor-pointer items-center gap-2 px-3 py-2.5 text-start text-sm font-medium transition-all duration-200\"\r\n          [class]=\"\r\n            activeTab() === tab.value\r\n              ? 'bg-white border-e-2 border-primary text-primary dark:bg-slate-900'\r\n              : searchQuery() && !tabHasResults(tab.value)\r\n                ? 'text-slate-300 dark:text-slate-600'\r\n                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'\r\n          \"\r\n          (click)=\"setActiveTab(tab.value)\"\r\n        >\r\n          <!-- Tab Icons -->\r\n          @switch (tab.value) {\r\n            @case (\"functions\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"properties\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z\"\r\n                />\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M6 6h.008v.008H6V6z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"operators\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <!-- Label (always visible) -->\r\n          <span class=\"truncate whitespace-nowrap text-sm\">{{\r\n            t(tab.value)\r\n          }}</span>\r\n          <!-- Count Badge -->\r\n          @if (tab.value !== \"properties\" || !resolvedPropertiesTemplate()) {\r\n            <span\r\n              class=\"ms-auto rounded-full px-1.5 py-0.5 text-xs font-semibold\"\r\n              [class]=\"\r\n                activeTab() === tab.value\r\n                  ? 'bg-primary/10 text-primary'\r\n                  : 'bg-slate-200 text-slate-600 dark:bg-slate-600 dark:text-slate-300'\r\n              \"\r\n            >\r\n              {{ getTabCount(tab.value) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Content Area -->\r\n    <div class=\"flex flex-1 flex-col overflow-hidden\">\r\n      <!-- Items Grid -->\r\n      <div\r\n        class=\"flex-1 p-2.5\"\r\n        [class.overflow-y-auto]=\"\r\n          activeTab() !== 'properties' || !resolvedPropertiesTemplate()\r\n        \"\r\n      >\r\n        @switch (activeTab()) {\r\n          @case (\"functions\") {\r\n            @if (filteredCategories().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noFunctionsFound ?? t(\"noFunctionsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (category of filteredCategories(); track category.name) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ category.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-sm text-slate-400 dark:text-slate-500\"\r\n                        >{{ category.functions.length }}</span\r\n                      >\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (fn of category.functions; track fn.name) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"function\"\r\n                          [value]=\"fn.name\"\r\n                          [description]=\"fn.description\"\r\n                          [signature]=\"fn.signature\"\r\n                          [examples]=\"fn.examples ?? []\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @case (\"properties\") {\r\n            @if (resolvedPropertiesTemplate(); as template) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"template\"\r\n                [ngTemplateOutletContext]=\"propertiesTemplateContext\"\r\n              />\r\n            } @else {\r\n              @if (filteredProperties().length === 0) {\r\n                <div\r\n                  class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n                >\r\n                  {{\r\n                    labels()?.noPropertiesAvailable ??\r\n                      t(\"noPropertiesAvailable\")\r\n                  }}\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-wrap gap-1.5\">\r\n                  @for (prop of filteredProperties(); track prop) {\r\n                    <mt-formula-toolbar-item\r\n                      type=\"property\"\r\n                      [value]=\"prop\"\r\n                      [description]=\"t('property') + ': ' + prop\"\r\n                      propertyType=\"current\"\r\n                      (onInsert)=\"insertBlock($event)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n          @case (\"operators\") {\r\n            @if (filteredOperators().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noOperatorsFound ?? t(\"noOperatorsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (group of operatorGroups(); track group.type) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ group.type }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of group.operators; track op.symbol) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"operator\"\r\n                          [value]=\"op.symbol\"\r\n                          [description]=\"op.description\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FormulaToolbarItem, selector: "mt-formula-toolbar-item", inputs: ["type", "value", "display", "description", "signature", "examples", "propertyType"], outputs: ["onInsert"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaToolbar, isStandalone: true, selector: "mt-formula-toolbar", inputs: { knownProperties: { classPropertyName: "knownProperties", publicName: "knownProperties", isSignal: true, isRequired: false, transformFunction: null }, propertiesTemplate: { classPropertyName: "propertiesTemplate", publicName: "propertiesTemplate", isSignal: true, isRequired: false, transformFunction: null }, functionCategories: { classPropertyName: "functionCategories", publicName: "functionCategories", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, visibleTabs: { classPropertyName: "visibleTabs", publicName: "visibleTabs", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlockInsert: "onBlockInsert", onTabChange: "onTabChange" }, queries: [{ propertyName: "projectedPropertiesTemplate", first: true, predicate: ["properties"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\r\n  *transloco=\"let t; prefix: 'components.formula.toolbar'\"\r\n  class=\"flex flex-col border-b border-slate-200 dark:border-slate-700\"\r\n  [class.h-52]=\"activeTab() !== 'properties' || !resolvedPropertiesTemplate()\"\r\n>\r\n  <!-- Top Bar: Search + Quick Insert -->\r\n  <div\r\n    class=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\"\r\n  >\r\n    <!-- Search Field -->\r\n    <div class=\"relative flex-1\">\r\n      <svg\r\n        class=\"absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n        />\r\n      </svg>\r\n      <input\r\n        type=\"text\"\r\n        class=\"w-full rounded-lg border border-slate-300 bg-white py-1.5 ps-9 pe-8 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500\"\r\n        [placeholder]=\"searchPlaceholder() || t('search')\"\r\n        [(ngModel)]=\"searchQuery\"\r\n      />\r\n      @if (searchQuery()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-600 transition-all duration-200 dark:hover:bg-slate-700\"\r\n          (click)=\"clearSearch()\"\r\n        >\r\n          <svg\r\n            class=\"h-4 w-4\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <div class=\"h-6 w-px bg-slate-200 dark:bg-slate-600\"></div>\r\n\r\n    <!-- Quick Insert Input -->\r\n    <div class=\"relative flex items-center gap-2\">\r\n      <span\r\n        class=\"text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide\"\r\n        >{{ t(\"insertLabel\") }}:</span\r\n      >\r\n      <div class=\"relative\">\r\n        <input\r\n          #customValueInput\r\n          type=\"text\"\r\n          class=\"w-32 rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-700 placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:bg-slate-900\"\r\n          [placeholder]=\"t('customValuePlaceholder')\"\r\n          [(ngModel)]=\"customValue\"\r\n          (keydown.enter)=\"insertCustomValue()\"\r\n          (keydown.escape)=\"clearCustomValue()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Insert Button with Type Preview -->\r\n      @if (customValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 hover:shadow-sm active:scale-95\"\r\n          [class]=\"customValueTypeClass()\"\r\n          (click)=\"insertCustomValue()\"\r\n          [title]=\"t('insertType', { type: customValueType() })\"\r\n        >\r\n          @switch (customValueType()) {\r\n            @case (\"number\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"string\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M12 4.5v15m7.5-7.5h-15\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <span class=\"max-w-16 truncate\">{{ customValuePreview() }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Row -->\r\n  <div class=\"flex flex-1 overflow-hidden\">\r\n    <!-- Vertical Tabs -->\r\n    <div\r\n      class=\"flex w-44 flex-col border-e border-slate-200 dark:border-slate-700\"\r\n    >\r\n      @for (tab of resolvedTabOptions(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex cursor-pointer items-center gap-2 px-3 py-2.5 text-start text-sm font-medium transition-all duration-200\"\r\n          [class]=\"\r\n            activeTab() === tab.value\r\n              ? 'bg-white border-e-2 border-primary text-primary dark:bg-slate-900'\r\n              : searchQuery() && !tabHasResults(tab.value)\r\n                ? 'text-slate-300 dark:text-slate-600'\r\n                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'\r\n          \"\r\n          (click)=\"setActiveTab(tab.value)\"\r\n        >\r\n          <!-- Tab Icons -->\r\n          @switch (tab.value) {\r\n            @case (\"functions\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"properties\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z\"\r\n                />\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M6 6h.008v.008H6V6z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"operators\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <!-- Label (always visible) -->\r\n          <span class=\"truncate whitespace-nowrap text-sm\">{{\r\n            t(tab.value)\r\n          }}</span>\r\n          <!-- Count Badge -->\r\n          @if (tab.value !== \"properties\" || !resolvedPropertiesTemplate()) {\r\n            <span\r\n              class=\"ms-auto rounded-full px-1.5 py-0.5 text-xs font-semibold\"\r\n              [class]=\"\r\n                activeTab() === tab.value\r\n                  ? 'bg-primary/10 text-primary'\r\n                  : 'bg-slate-200 text-slate-600 dark:bg-slate-600 dark:text-slate-300'\r\n              \"\r\n            >\r\n              {{ getTabCount(tab.value) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Content Area -->\r\n    <div class=\"flex flex-1 flex-col overflow-hidden\">\r\n      <!-- Items Grid -->\r\n      <div\r\n        class=\"flex-1 p-2.5\"\r\n        [class.overflow-y-auto]=\"\r\n          activeTab() !== 'properties' || !resolvedPropertiesTemplate()\r\n        \"\r\n      >\r\n        @switch (activeTab()) {\r\n          @case (\"functions\") {\r\n            @if (filteredCategories().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noFunctionsFound ?? t(\"noFunctionsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (category of filteredCategories(); track category.name) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ category.displayName || category.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-sm text-slate-400 dark:text-slate-500\"\r\n                        >{{ category.functions.length }}</span\r\n                      >\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (fn of category.functions; track fn.name) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"function\"\r\n                          [value]=\"fn.name\"\r\n                          [description]=\"fn.description\"\r\n                          [signature]=\"fn.signature\"\r\n                          [template]=\"fn.template\"\r\n                          [templateCursorOffset]=\"fn.templateCursorOffset\"\r\n                          [returnType]=\"fn.returnType\"\r\n                          [parameters]=\"fn.parameters ?? []\"\r\n                          [examples]=\"fn.examples ?? []\"\r\n                          [hints]=\"fn.hints ?? []\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @case (\"properties\") {\r\n            @if (resolvedPropertiesTemplate(); as template) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"template\"\r\n                [ngTemplateOutletContext]=\"propertiesTemplateContext\"\r\n              />\r\n            } @else {\r\n              @if (filteredProperties().length === 0) {\r\n                <div\r\n                  class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n                >\r\n                  {{\r\n                    labels()?.noPropertiesAvailable ??\r\n                      t(\"noPropertiesAvailable\")\r\n                  }}\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-wrap gap-1.5\">\r\n                  @for (prop of filteredProperties(); track prop) {\r\n                    <mt-formula-toolbar-item\r\n                      type=\"property\"\r\n                      [value]=\"prop\"\r\n                      [description]=\"t('property') + ': ' + prop\"\r\n                      propertyType=\"current\"\r\n                      (onInsert)=\"insertBlock($event)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n          @case (\"operators\") {\r\n            @if (filteredOperators().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noOperatorsFound ?? t(\"noOperatorsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (group of operatorGroups(); track group.type) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ group.type }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of group.operators; track op.symbol) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"operator\"\r\n                          [value]=\"op.symbol\"\r\n                          [description]=\"op.description\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FormulaToolbarItem, selector: "mt-formula-toolbar-item", inputs: ["type", "value", "display", "description", "signature", "examples", "template", "templateCursorOffset", "hints", "returnType", "parameters", "propertyType"], outputs: ["onInsert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaToolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-formula-toolbar', standalone: true, imports: [CommonModule, FormsModule, TranslocoModule, FormulaToolbarItem], template: "<div\r\n  *transloco=\"let t; prefix: 'components.formula.toolbar'\"\r\n  class=\"flex flex-col border-b border-slate-200 dark:border-slate-700\"\r\n  [class.h-52]=\"activeTab() !== 'properties' || !resolvedPropertiesTemplate()\"\r\n>\r\n  <!-- Top Bar: Search + Quick Insert -->\r\n  <div\r\n    class=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\"\r\n  >\r\n    <!-- Search Field -->\r\n    <div class=\"relative flex-1\">\r\n      <svg\r\n        class=\"absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n        />\r\n      </svg>\r\n      <input\r\n        type=\"text\"\r\n        class=\"w-full rounded-lg border border-slate-300 bg-white py-1.5 ps-9 pe-8 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500\"\r\n        [placeholder]=\"searchPlaceholder() || t('search')\"\r\n        [(ngModel)]=\"searchQuery\"\r\n      />\r\n      @if (searchQuery()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-600 transition-all duration-200 dark:hover:bg-slate-700\"\r\n          (click)=\"clearSearch()\"\r\n        >\r\n          <svg\r\n            class=\"h-4 w-4\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <div class=\"h-6 w-px bg-slate-200 dark:bg-slate-600\"></div>\r\n\r\n    <!-- Quick Insert Input -->\r\n    <div class=\"relative flex items-center gap-2\">\r\n      <span\r\n        class=\"text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide\"\r\n        >{{ t(\"insertLabel\") }}:</span\r\n      >\r\n      <div class=\"relative\">\r\n        <input\r\n          #customValueInput\r\n          type=\"text\"\r\n          class=\"w-32 rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-700 placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:bg-slate-900\"\r\n          [placeholder]=\"t('customValuePlaceholder')\"\r\n          [(ngModel)]=\"customValue\"\r\n          (keydown.enter)=\"insertCustomValue()\"\r\n          (keydown.escape)=\"clearCustomValue()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Insert Button with Type Preview -->\r\n      @if (customValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 hover:shadow-sm active:scale-95\"\r\n          [class]=\"customValueTypeClass()\"\r\n          (click)=\"insertCustomValue()\"\r\n          [title]=\"t('insertType', { type: customValueType() })\"\r\n        >\r\n          @switch (customValueType()) {\r\n            @case (\"number\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"string\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M12 4.5v15m7.5-7.5h-15\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <span class=\"max-w-16 truncate\">{{ customValuePreview() }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Row -->\r\n  <div class=\"flex flex-1 overflow-hidden\">\r\n    <!-- Vertical Tabs -->\r\n    <div\r\n      class=\"flex w-44 flex-col border-e border-slate-200 dark:border-slate-700\"\r\n    >\r\n      @for (tab of resolvedTabOptions(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex cursor-pointer items-center gap-2 px-3 py-2.5 text-start text-sm font-medium transition-all duration-200\"\r\n          [class]=\"\r\n            activeTab() === tab.value\r\n              ? 'bg-white border-e-2 border-primary text-primary dark:bg-slate-900'\r\n              : searchQuery() && !tabHasResults(tab.value)\r\n                ? 'text-slate-300 dark:text-slate-600'\r\n                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'\r\n          \"\r\n          (click)=\"setActiveTab(tab.value)\"\r\n        >\r\n          <!-- Tab Icons -->\r\n          @switch (tab.value) {\r\n            @case (\"functions\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"properties\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z\"\r\n                />\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M6 6h.008v.008H6V6z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"operators\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <!-- Label (always visible) -->\r\n          <span class=\"truncate whitespace-nowrap text-sm\">{{\r\n            t(tab.value)\r\n          }}</span>\r\n          <!-- Count Badge -->\r\n          @if (tab.value !== \"properties\" || !resolvedPropertiesTemplate()) {\r\n            <span\r\n              class=\"ms-auto rounded-full px-1.5 py-0.5 text-xs font-semibold\"\r\n              [class]=\"\r\n                activeTab() === tab.value\r\n                  ? 'bg-primary/10 text-primary'\r\n                  : 'bg-slate-200 text-slate-600 dark:bg-slate-600 dark:text-slate-300'\r\n              \"\r\n            >\r\n              {{ getTabCount(tab.value) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Content Area -->\r\n    <div class=\"flex flex-1 flex-col overflow-hidden\">\r\n      <!-- Items Grid -->\r\n      <div\r\n        class=\"flex-1 p-2.5\"\r\n        [class.overflow-y-auto]=\"\r\n          activeTab() !== 'properties' || !resolvedPropertiesTemplate()\r\n        \"\r\n      >\r\n        @switch (activeTab()) {\r\n          @case (\"functions\") {\r\n            @if (filteredCategories().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noFunctionsFound ?? t(\"noFunctionsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (category of filteredCategories(); track category.name) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ category.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-sm text-slate-400 dark:text-slate-500\"\r\n                        >{{ category.functions.length }}</span\r\n                      >\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (fn of category.functions; track fn.name) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"function\"\r\n                          [value]=\"fn.name\"\r\n                          [description]=\"fn.description\"\r\n                          [signature]=\"fn.signature\"\r\n                          [examples]=\"fn.examples ?? []\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @case (\"properties\") {\r\n            @if (resolvedPropertiesTemplate(); as template) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"template\"\r\n                [ngTemplateOutletContext]=\"propertiesTemplateContext\"\r\n              />\r\n            } @else {\r\n              @if (filteredProperties().length === 0) {\r\n                <div\r\n                  class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n                >\r\n                  {{\r\n                    labels()?.noPropertiesAvailable ??\r\n                      t(\"noPropertiesAvailable\")\r\n                  }}\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-wrap gap-1.5\">\r\n                  @for (prop of filteredProperties(); track prop) {\r\n                    <mt-formula-toolbar-item\r\n                      type=\"property\"\r\n                      [value]=\"prop\"\r\n                      [description]=\"t('property') + ': ' + prop\"\r\n                      propertyType=\"current\"\r\n                      (onInsert)=\"insertBlock($event)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n          @case (\"operators\") {\r\n            @if (filteredOperators().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noOperatorsFound ?? t(\"noOperatorsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (group of operatorGroups(); track group.type) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ group.type }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of group.operators; track op.symbol) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"operator\"\r\n                          [value]=\"op.symbol\"\r\n                          [description]=\"op.description\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-formula-toolbar', standalone: true, imports: [CommonModule, FormsModule, TranslocoModule, FormulaToolbarItem], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *transloco=\"let t; prefix: 'components.formula.toolbar'\"\r\n  class=\"flex flex-col border-b border-slate-200 dark:border-slate-700\"\r\n  [class.h-52]=\"activeTab() !== 'properties' || !resolvedPropertiesTemplate()\"\r\n>\r\n  <!-- Top Bar: Search + Quick Insert -->\r\n  <div\r\n    class=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\"\r\n  >\r\n    <!-- Search Field -->\r\n    <div class=\"relative flex-1\">\r\n      <svg\r\n        class=\"absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n        />\r\n      </svg>\r\n      <input\r\n        type=\"text\"\r\n        class=\"w-full rounded-lg border border-slate-300 bg-white py-1.5 ps-9 pe-8 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500\"\r\n        [placeholder]=\"searchPlaceholder() || t('search')\"\r\n        [(ngModel)]=\"searchQuery\"\r\n      />\r\n      @if (searchQuery()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-600 transition-all duration-200 dark:hover:bg-slate-700\"\r\n          (click)=\"clearSearch()\"\r\n        >\r\n          <svg\r\n            class=\"h-4 w-4\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <div class=\"h-6 w-px bg-slate-200 dark:bg-slate-600\"></div>\r\n\r\n    <!-- Quick Insert Input -->\r\n    <div class=\"relative flex items-center gap-2\">\r\n      <span\r\n        class=\"text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide\"\r\n        >{{ t(\"insertLabel\") }}:</span\r\n      >\r\n      <div class=\"relative\">\r\n        <input\r\n          #customValueInput\r\n          type=\"text\"\r\n          class=\"w-32 rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-700 placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all duration-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:bg-slate-900\"\r\n          [placeholder]=\"t('customValuePlaceholder')\"\r\n          [(ngModel)]=\"customValue\"\r\n          (keydown.enter)=\"insertCustomValue()\"\r\n          (keydown.escape)=\"clearCustomValue()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Insert Button with Type Preview -->\r\n      @if (customValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 hover:shadow-sm active:scale-95\"\r\n          [class]=\"customValueTypeClass()\"\r\n          (click)=\"insertCustomValue()\"\r\n          [title]=\"t('insertType', { type: customValueType() })\"\r\n        >\r\n          @switch (customValueType()) {\r\n            @case (\"number\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"string\") {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg\r\n                class=\"h-3 w-3\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M12 4.5v15m7.5-7.5h-15\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <span class=\"max-w-16 truncate\">{{ customValuePreview() }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Row -->\r\n  <div class=\"flex flex-1 overflow-hidden\">\r\n    <!-- Vertical Tabs -->\r\n    <div\r\n      class=\"flex w-44 flex-col border-e border-slate-200 dark:border-slate-700\"\r\n    >\r\n      @for (tab of resolvedTabOptions(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex cursor-pointer items-center gap-2 px-3 py-2.5 text-start text-sm font-medium transition-all duration-200\"\r\n          [class]=\"\r\n            activeTab() === tab.value\r\n              ? 'bg-white border-e-2 border-primary text-primary dark:bg-slate-900'\r\n              : searchQuery() && !tabHasResults(tab.value)\r\n                ? 'text-slate-300 dark:text-slate-600'\r\n                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'\r\n          \"\r\n          (click)=\"setActiveTab(tab.value)\"\r\n        >\r\n          <!-- Tab Icons -->\r\n          @switch (tab.value) {\r\n            @case (\"functions\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"properties\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z\"\r\n                />\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M6 6h.008v.008H6V6z\"\r\n                />\r\n              </svg>\r\n            }\r\n            @case (\"operators\") {\r\n              <svg\r\n                class=\"h-5 w-5 shrink-0\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  d=\"M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z\"\r\n                />\r\n              </svg>\r\n            }\r\n          }\r\n          <!-- Label (always visible) -->\r\n          <span class=\"truncate whitespace-nowrap text-sm\">{{\r\n            t(tab.value)\r\n          }}</span>\r\n          <!-- Count Badge -->\r\n          @if (tab.value !== \"properties\" || !resolvedPropertiesTemplate()) {\r\n            <span\r\n              class=\"ms-auto rounded-full px-1.5 py-0.5 text-xs font-semibold\"\r\n              [class]=\"\r\n                activeTab() === tab.value\r\n                  ? 'bg-primary/10 text-primary'\r\n                  : 'bg-slate-200 text-slate-600 dark:bg-slate-600 dark:text-slate-300'\r\n              \"\r\n            >\r\n              {{ getTabCount(tab.value) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Content Area -->\r\n    <div class=\"flex flex-1 flex-col overflow-hidden\">\r\n      <!-- Items Grid -->\r\n      <div\r\n        class=\"flex-1 p-2.5\"\r\n        [class.overflow-y-auto]=\"\r\n          activeTab() !== 'properties' || !resolvedPropertiesTemplate()\r\n        \"\r\n      >\r\n        @switch (activeTab()) {\r\n          @case (\"functions\") {\r\n            @if (filteredCategories().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noFunctionsFound ?? t(\"noFunctionsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (category of filteredCategories(); track category.name) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ category.displayName || category.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-sm text-slate-400 dark:text-slate-500\"\r\n                        >{{ category.functions.length }}</span\r\n                      >\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (fn of category.functions; track fn.name) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"function\"\r\n                          [value]=\"fn.name\"\r\n                          [description]=\"fn.description\"\r\n                          [signature]=\"fn.signature\"\r\n                          [template]=\"fn.template\"\r\n                          [templateCursorOffset]=\"fn.templateCursorOffset\"\r\n                          [returnType]=\"fn.returnType\"\r\n                          [parameters]=\"fn.parameters ?? []\"\r\n                          [examples]=\"fn.examples ?? []\"\r\n                          [hints]=\"fn.hints ?? []\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @case (\"properties\") {\r\n            @if (resolvedPropertiesTemplate(); as template) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"template\"\r\n                [ngTemplateOutletContext]=\"propertiesTemplateContext\"\r\n              />\r\n            } @else {\r\n              @if (filteredProperties().length === 0) {\r\n                <div\r\n                  class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n                >\r\n                  {{\r\n                    labels()?.noPropertiesAvailable ??\r\n                      t(\"noPropertiesAvailable\")\r\n                  }}\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-wrap gap-1.5\">\r\n                  @for (prop of filteredProperties(); track prop) {\r\n                    <mt-formula-toolbar-item\r\n                      type=\"property\"\r\n                      [value]=\"prop\"\r\n                      [description]=\"t('property') + ': ' + prop\"\r\n                      propertyType=\"current\"\r\n                      (onInsert)=\"insertBlock($event)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n          @case (\"operators\") {\r\n            @if (filteredOperators().length === 0) {\r\n              <div\r\n                class=\"flex h-full items-center justify-center text-sm text-slate-400 dark:text-slate-500\"\r\n              >\r\n                {{ labels()?.noOperatorsFound ?? t(\"noOperatorsFound\") }}\r\n              </div>\r\n            } @else {\r\n              <div class=\"space-y-3\">\r\n                @for (group of operatorGroups(); track group.type) {\r\n                  <div>\r\n                    <div class=\"mb-2 flex items-center gap-2\">\r\n                      <span\r\n                        class=\"text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        {{ group.type }}\r\n                      </span>\r\n                      <span\r\n                        class=\"h-px flex-1 bg-slate-200/60 dark:bg-slate-700/60\"\r\n                      ></span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of group.operators; track op.symbol) {\r\n                        <mt-formula-toolbar-item\r\n                          type=\"operator\"\r\n                          [value]=\"op.symbol\"\r\n                          [description]=\"op.description\"\r\n                          (onInsert)=\"insertBlock($event)\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { knownProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "knownProperties", required: false }] }], propertiesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesTemplate", required: false }] }], projectedPropertiesTemplate: [{ type: i0.ContentChild, args: ['properties', { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], functionCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "functionCategories", required: false }] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], initialTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialTab", required: false }] }], visibleTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleTabs", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], onBlockInsert: [{ type: i0.Output, args: ["onBlockInsert"] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }] } });
@@ -3112,5 +3480,5 @@ function createRuntimeError(code, error) {
  * Generated bundle index. Do not edit.
  */
 
-export { CONDITION_FUNCTION_CATEGORIES, CONDITION_OPERATORS, CONDITION_RUNTIME_CATALOG, DEFAULT_OPERATORS, FormulaEditor, FormulaEditorCode, FormulaRuntimeEngine, FormulaStatusBar, FormulaToolbar, FormulaToolbarItem, VALIDATION_FUNCTION_CATEGORIES, VALIDATION_OPERATORS, VALIDATION_RUNTIME_CATALOG, cloneBlock, cloneToken, cloneTokens, createFunctionBlock, createFunctionTokens, createLiteralBlock, createLiteralToken, createOperatorBlock, createOperatorToken, createPropertyBlock, createPropertyToken, findFunctionRange, generateFunctionId, generateSmartBlockId, generateTokenId, getArgumentIndexAtPosition, getFunctionTokens, isValidDropPosition, parseSignature, recalculateDepths, serializeTokens };
+export { CONDITION_FUNCTION_CATEGORIES, CONDITION_OPERATORS, CONDITION_RUNTIME_CATALOG, DEFAULT_OPERATORS, FormulaEditor, FormulaEditorCode, FormulaRuntimeEngine, FormulaStatusBar, FormulaToolbar, FormulaToolbarItem, VALIDATION_FUNCTION_CATEGORIES, VALIDATION_OPERATORS, VALIDATION_RUNTIME_CATALOG, cloneBlock, cloneToken, cloneTokens, createFunctionBlock, createFunctionTokens, createLiteralBlock, createLiteralToken, createOperatorBlock, createOperatorToken, createPropertyBlock, createPropertyToken, createTextToken, findFunctionRange, generateFunctionId, generateSmartBlockId, generateTokenId, getArgumentIndexAtPosition, getFunctionTokens, isValidDropPosition, parseSignature, recalculateDepths, serializeTokens, tokenizeFormulaTemplate };
 //# sourceMappingURL=masterteam-components-formula.mjs.map