@masterteam/components 0.0.175 → 0.0.176

package/fesm2022/masterteam-components-color-picker-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-color-picker-field.mjs","sources":["../../../../packages/masterteam/components/color-picker-field/color-picker-field.ts","../../../../packages/masterteam/components/color-picker-field/color-picker-field.html","../../../../packages/masterteam/components/color-picker-field/masterteam-components-color-picker-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  output,\r\n  inject,\r\n  effect,\r\n} from '@angular/core';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport {\r\n  ColorPickerModule,\r\n  ColorPicker,\r\n  ColorPickerChangeEvent,\r\n} from 'primeng/colorpicker';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { TextField } from '@masterteam/components/text-field';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { TranslocoModule } from '@jsverse/transloco';\r\n\r\n@Component({\r\n  selector: 'mt-color-picker-field',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    ColorPickerModule,\r\n    FieldValidation,\r\n    TextField,\r\n    TranslocoModule,\r\n  ],\r\n  templateUrl: './color-picker-field.html',\r\n  styleUrls: ['./color-picker-field.scss'],\r\n  host: {\r\n    '[class]': 'class()',\r\n  },\r\n})\r\nexport class ColorPickerField implements ControlValueAccessor {\r\n  @ViewChild('colorPicker', { static: true })\r\n  colorPicker: ColorPicker;\r\n  label = input<string>();\r\n  appendTo = input<string>('body');\r\n  placeholder = input<string>();\r\n  class = input<string>('');\r\n  variant = input<'outlined' | 'filled'>('outlined');\r\n  readonly = input<boolean>(false);\r\n  pInputs = input<Partial<ColorPicker>>();\r\n  required = input<boolean>(false);\r\n\r\n  onChange = output<ColorPickerChangeEvent>();\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<string | null>(null);\r\n  disabled = signal<boolean>(false);\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: string | null) => void = () => {};\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    if (this.ngControl) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n\r\n    // Effect to apply pInputs reactively when the pInputs signal changes\r\n    effect(() => {\r\n      const currentPInputs = this.pInputs();\r\n      // Ensure colorPicker ViewChild is initialized and pInputs has a value\r\n      // @ViewChild with static: true makes 'colorPicker' available during construction/ngOnInit\r\n      if (this.colorPicker && currentPInputs) {\r\n        this.applyInputsToColorPicker();\r\n      }\r\n    });\r\n\r\n    // Effect to add required validator if required input is true\r\n    effect(() => {\r\n      if (this.ngControl.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n      if (this.ngControl.control) {\r\n        this.ngControl.control.addValidators(\r\n          Validators.pattern(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/),\r\n        );\r\n      }\r\n    });\r\n  }\r\n\r\n  applyInputsToColorPicker() {\r\n    const currentPInputs = this.pInputs();\r\n    if (currentPInputs) {\r\n      Object.assign(this.colorPicker, currentPInputs);\r\n    }\r\n  }\r\n\r\n  onValueChange(value: string | null) {\r\n    this.onModelChange(value);\r\n    this.onTouched();\r\n    this.value.set(value);\r\n  }\r\n\r\n  writeValue(value: string | null) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","<div class=\"flex w-full min-w-0 flex-col gap-1\">\r\n  @if (label()) {\r\n    <label\r\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n      [for]=\"ngControl?.name || label()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div\r\n    class=\"flex w-full min-w-0 items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\r\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\r\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\r\n      ngControl?.control?.invalid && ngControl?.control?.touched\r\n    \"\r\n  >\r\n    <p-colorpicker\r\n      #colorPicker=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      (onChange)=\"onChange.emit($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n      class=\"leading-none\"\r\n      [appendTo]=\"appendTo()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n    ></p-colorpicker>\r\n    <div class=\"ms-2 w-full min-w-0\">\r\n      <mt-text-field\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        (change)=\"onChange.emit($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n        [placeholder]=\"'components.colorPickerField.placeholder' | transloco\"\r\n        class=\"leading-none p-0 input-no-border px-0 w-full\"\r\n        [hint]=\"'components.colorPickerField.hint' | transloco\"\r\n      ></mt-text-field>\r\n    </div>\r\n  </div>\r\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-color-picker-field.mjs","sources":["../../../../packages/masterteam/components/color-picker-field/color-picker-field.ts","../../../../packages/masterteam/components/color-picker-field/color-picker-field.html","../../../../packages/masterteam/components/color-picker-field/masterteam-components-color-picker-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  output,\r\n  inject,\r\n  effect,\r\n} from '@angular/core';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport {\r\n  ColorPickerModule,\r\n  ColorPicker,\r\n  ColorPickerChangeEvent,\r\n} from 'primeng/colorpicker';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { TextField } from '@masterteam/components/text-field';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { TranslocoModule } from '@jsverse/transloco';\r\n\r\n@Component({\r\n  selector: 'mt-color-picker-field',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    ColorPickerModule,\r\n    FieldValidation,\r\n    TextField,\r\n    TranslocoModule,\r\n  ],\r\n  templateUrl: './color-picker-field.html',\r\n  styleUrls: ['./color-picker-field.scss'],\r\n  host: {\r\n    '[class]': 'class()',\r\n  },\r\n})\r\nexport class ColorPickerField implements ControlValueAccessor {\r\n  @ViewChild('colorPicker', { static: true })\r\n  colorPicker: ColorPicker;\r\n  label = input<string>();\r\n  appendTo = input<string>('body');\r\n  placeholder = input<string>();\r\n  class = input<string>('');\r\n  variant = input<'outlined' | 'filled'>('outlined');\r\n  readonly = input<boolean>(false);\r\n  pInputs = input<Partial<ColorPicker>>();\r\n  required = input<boolean>(false);\r\n\r\n  onChange = output<ColorPickerChangeEvent>();\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<string | null>(null);\r\n  disabled = signal<boolean>(false);\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: string | null) => void = () => {};\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    if (this.ngControl) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n\r\n    // Effect to apply pInputs reactively when the pInputs signal changes\r\n    effect(() => {\r\n      const currentPInputs = this.pInputs();\r\n      // Ensure colorPicker ViewChild is initialized and pInputs has a value\r\n      // @ViewChild with static: true makes 'colorPicker' available during construction/ngOnInit\r\n      if (this.colorPicker && currentPInputs) {\r\n        this.applyInputsToColorPicker();\r\n      }\r\n    });\r\n\r\n    // Effect to add required validator if required input is true\r\n    effect(() => {\r\n      if (this.ngControl.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n      if (this.ngControl.control) {\r\n        this.ngControl.control.addValidators(\r\n          Validators.pattern(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/),\r\n        );\r\n      }\r\n    });\r\n  }\r\n\r\n  applyInputsToColorPicker() {\r\n    const currentPInputs = this.pInputs();\r\n    if (currentPInputs) {\r\n      Object.assign(this.colorPicker, currentPInputs);\r\n    }\r\n  }\r\n\r\n  onValueChange(value: string | null) {\r\n    this.onModelChange(value);\r\n    this.onTouched();\r\n    this.value.set(value);\r\n  }\r\n\r\n  writeValue(value: string | null) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","<div class=\"flex w-full min-w-0 flex-col gap-1\">\r\n  @if (label()) {\r\n    <label\r\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n      [for]=\"ngControl?.name || label()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div\r\n    class=\"flex w-full min-w-0 items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\r\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\r\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\r\n      ngControl?.control?.invalid && ngControl?.control?.touched\r\n    \"\r\n  >\r\n    <p-colorpicker\r\n      #colorPicker=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      (onChange)=\"onChange.emit($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n      [class.mt-color-picker-empty]=\"!value()\"\r\n      class=\"leading-none\"\r\n      [appendTo]=\"appendTo()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n    ></p-colorpicker>\r\n    <div class=\"ms-2 w-full min-w-0\">\r\n      <mt-text-field\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        (change)=\"onChange.emit($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n        [placeholder]=\"'components.colorPickerField.placeholder' | transloco\"\r\n        class=\"leading-none p-0 input-no-border px-0 w-full\"\r\n        [hint]=\"'components.colorPickerField.hint' | transloco\"\r\n      ></mt-text-field>\r\n    </div>\r\n  </div>\r\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-field-validation.mjs

@@ -25,6 +25,10 @@ class ErrorMessagePipe {
             const { requiredLength } = errors['maxlength'];
             return t('maxLength', { requiredLength });
         }
+        if (errors['characterLimit']) {
+            const { requiredLength } = errors['characterLimit'];
+            return t('maxLength', { requiredLength });
+        }
         if (errors['min']) {
             const { min } = errors['min'];
             return t('min', { min });
@@ -96,9 +100,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     } }]
         }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
 
+const characterLimitValidator = (maxLength) => (control) => {
+    const value = control.value;
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const length = String(value).length;
+    return length > maxLength
+        ? {
+            characterLimit: {
+                requiredLength: maxLength,
+                actualLength: length,
+            },
+        }
+        : null;
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FieldValidation };
+export { FieldValidation, characterLimitValidator };
 //# sourceMappingURL=masterteam-components-field-validation.mjs.map

package/fesm2022/masterteam-components-field-validation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-field-validation.mjs","sources":["../../../../packages/masterteam/components/field-validation/error-message.pipe.ts","../../../../packages/masterteam/components/field-validation/field-validation.ts","../../../../packages/masterteam/components/field-validation/masterteam-components-field-validation.ts"],"sourcesContent":["import { inject, Pipe, PipeTransform } from '@angular/core';\r\nimport { ValidationErrors } from '@angular/forms';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\n\r\n@Pipe({\r\n  name: 'errorMessage',\r\n  standalone: true,\r\n  pure: false,\r\n})\r\nexport class ErrorMessagePipe implements PipeTransform {\r\n  private readonly translocoService = inject(TranslocoService);\r\n\r\n  transform(errors: ValidationErrors | null): string {\r\n    if (!errors) {\r\n      return '';\r\n    }\r\n\r\n    const t = (key: string, params?: object) =>\r\n      this.translocoService.translate(`components.validation.${key}`, params);\r\n\r\n    if (errors['required']) {\r\n      return t('required');\r\n    }\r\n    if (errors['email']) {\r\n      return t('email');\r\n    }\r\n    if (errors['minlength']) {\r\n      const { requiredLength } = errors['minlength'];\r\n      return t('minLength', { requiredLength });\r\n    }\r\n    if (errors['maxlength']) {\r\n      const { requiredLength } = errors['maxlength'];\r\n      return t('maxLength', { requiredLength });\r\n    }\r\n    if (errors['min']) {\r\n      const { min } = errors['min'];\r\n      return t('min', { min });\r\n    }\r\n    if (errors['max']) {\r\n      const { max } = errors['max'];\r\n      return t('max', { max });\r\n    }\r\n    if (errors['pattern']) {\r\n      return t('pattern');\r\n    }\r\n    if (errors['fileSizeLimited']) {\r\n      return t('fileSizeLimited');\r\n    }\r\n\r\n    // Handle custom errors that provide their own message\r\n    for (const key in errors) {\r\n      const errorValue = errors[key];\r\n      if (errorValue && typeof errorValue === 'object' && errorValue.message) {\r\n        return errorValue.message;\r\n      }\r\n    }\r\n\r\n    // Fallback for any other error\r\n    const firstErrorKey = Object.keys(errors)[0];\r\n    return t('invalid', { key: firstErrorKey });\r\n  }\r\n}\r\n","import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { Message } from 'primeng/message';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { ErrorMessagePipe } from './error-message.pipe';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-field-validation',\r\n  standalone: true,\r\n  imports: [Message, ErrorMessagePipe],\r\n  template: `\r\n    @if (isInvalid(control())) {\r\n      <p-message\r\n        severity=\"error\"\r\n        variant=\"simple\"\r\n        size=\"small\"\r\n        [text]=\"control().errors | errorMessage\"\r\n      >\r\n      </p-message>\r\n    }\r\n  `,\r\n  host: {\r\n    '[class.hidden]': '!isInvalid(control())',\r\n  },\r\n  styles: [],\r\n})\r\nexport class FieldValidation {\r\n  readonly control = input<AbstractControl | null>(null);\r\n  readonly touched = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  isInvalid = isInvalid;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-field-validation.mjs","sources":["../../../../packages/masterteam/components/field-validation/error-message.pipe.ts","../../../../packages/masterteam/components/field-validation/field-validation.ts","../../../../packages/masterteam/components/field-validation/character-limit.validator.ts","../../../../packages/masterteam/components/field-validation/masterteam-components-field-validation.ts"],"sourcesContent":["import { inject, Pipe, PipeTransform } from '@angular/core';\r\nimport { ValidationErrors } from '@angular/forms';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\n\r\n@Pipe({\r\n  name: 'errorMessage',\r\n  standalone: true,\r\n  pure: false,\r\n})\r\nexport class ErrorMessagePipe implements PipeTransform {\r\n  private readonly translocoService = inject(TranslocoService);\r\n\r\n  transform(errors: ValidationErrors | null): string {\r\n    if (!errors) {\r\n      return '';\r\n    }\r\n\r\n    const t = (key: string, params?: object) =>\r\n      this.translocoService.translate(`components.validation.${key}`, params);\r\n\r\n    if (errors['required']) {\r\n      return t('required');\r\n    }\r\n    if (errors['email']) {\r\n      return t('email');\r\n    }\r\n    if (errors['minlength']) {\r\n      const { requiredLength } = errors['minlength'];\r\n      return t('minLength', { requiredLength });\r\n    }\r\n    if (errors['maxlength']) {\r\n      const { requiredLength } = errors['maxlength'];\r\n      return t('maxLength', { requiredLength });\r\n    }\r\n    if (errors['characterLimit']) {\r\n      const { requiredLength } = errors['characterLimit'];\r\n      return t('maxLength', { requiredLength });\r\n    }\r\n    if (errors['min']) {\r\n      const { min } = errors['min'];\r\n      return t('min', { min });\r\n    }\r\n    if (errors['max']) {\r\n      const { max } = errors['max'];\r\n      return t('max', { max });\r\n    }\r\n    if (errors['pattern']) {\r\n      return t('pattern');\r\n    }\r\n    if (errors['fileSizeLimited']) {\r\n      return t('fileSizeLimited');\r\n    }\r\n\r\n    // Handle custom errors that provide their own message\r\n    for (const key in errors) {\r\n      const errorValue = errors[key];\r\n      if (errorValue && typeof errorValue === 'object' && errorValue.message) {\r\n        return errorValue.message;\r\n      }\r\n    }\r\n\r\n    // Fallback for any other error\r\n    const firstErrorKey = Object.keys(errors)[0];\r\n    return t('invalid', { key: firstErrorKey });\r\n  }\r\n}\r\n","import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { Message } from 'primeng/message';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { ErrorMessagePipe } from './error-message.pipe';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-field-validation',\r\n  standalone: true,\r\n  imports: [Message, ErrorMessagePipe],\r\n  template: `\r\n    @if (isInvalid(control())) {\r\n      <p-message\r\n        severity=\"error\"\r\n        variant=\"simple\"\r\n        size=\"small\"\r\n        [text]=\"control().errors | errorMessage\"\r\n      >\r\n      </p-message>\r\n    }\r\n  `,\r\n  host: {\r\n    '[class.hidden]': '!isInvalid(control())',\r\n  },\r\n  styles: [],\r\n})\r\nexport class FieldValidation {\r\n  readonly control = input<AbstractControl | null>(null);\r\n  readonly touched = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  isInvalid = isInvalid;\r\n}\r\n","import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\r\n\r\nexport const characterLimitValidator =\r\n  (maxLength: number): ValidatorFn =>\r\n  (control: AbstractControl): ValidationErrors | null => {\r\n    const value = control.value;\r\n\r\n    if (value === null || value === undefined) {\r\n      return null;\r\n    }\r\n\r\n    const length = String(value).length;\r\n\r\n    return length > maxLength\r\n      ? {\r\n          characterLimit: {\r\n            requiredLength: maxLength,\r\n            actualLength: length,\r\n          },\r\n        }\r\n      : null;\r\n  };\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-formula.mjs

@@ -2261,10 +2261,27 @@ class FormulaToolbar {
             groups.get(type).push(op);
         });
         return Array.from(groups.entries()).map(([type, operators]) => ({
-            type: type.charAt(0).toUpperCase() + type.slice(1),
+            type,
             operators,
         }));
     }, ...(ngDevMode ? [{ debugName: "operatorGroups" }] : /* istanbul ignore next */ []));
+    /** Translate an operator group header, falling back to a capitalized label */
+    operatorTypeLabel(type) {
+        const key = `components.formula.toolbar.operatorTypes.${type}`;
+        const translated = this.transloco.translate(key);
+        return translated && translated !== key
+            ? translated
+            : type.charAt(0).toUpperCase() + type.slice(1);
+    }
+    /** Translate a function category header, falling back to its display name */
+    categoryLabel(category) {
+        const display = category.displayName || String(category.name ?? '');
+        // Normalize to a slug so "Phase Gate", "PhaseGate" and "phase-gate" all match.
+        const slug = display.toLowerCase().replace(/[^a-z0-9]/g, '');
+        const key = `components.formula.toolbar.categories.${slug}`;
+        const translated = this.transloco.translate(key);
+        return translated && translated !== key ? translated : display;
+    }
     /** Total item count for current tab */
     itemCount = computed(() => {
         switch (this.activeTab()) {
@@ -2364,11 +2381,11 @@ class FormulaToolbar {
         this.customValue.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormulaToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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                        {{ categoryLabel(category) }}\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                        {{ operatorTypeLabel(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.2.8", ngImport: i0, type: FormulaToolbar, decorators: [{
             type: Component,
-            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" }]
+            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                        {{ categoryLabel(category) }}\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                        {{ operatorTypeLabel(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"] }] } });