@luzmo/analytics-components-kit 1.0.8-beta.4 → 1.0.8-beta.6

package/angular/components/filter-value-picker.ts

@@ -0,0 +1,160 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/filter-value-picker';
+import type { LuzmoFilterValuePicker as LuzmoFilterValuePickerHostElement } from '@luzmo/analytics-components-kit/filter-value-picker';
+
+@Component({
+  selector: 'luzmo-filter-value-picker',
+  exportAs: 'luzmoFilterValuePicker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-filter-value-picker>
+ */
+export class LuzmoFilterValuePicker implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoFilterValuePickerHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoFilterValuePickerHostElement {
+    return this.host;
+  }
+
+  /** The API URL of the databroker */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** The auth key of the databroker */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** The auth token of the databroker */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** The cache time of the databroker */
+  @Input({ alias: 'cacheTime' })
+  cacheTime?: number;
+
+  /** The language to use for locale-aware formatting and labels */
+  @Input({ alias: 'contentLanguage' })
+  contentLanguage?: string;
+
+  /** The time zone to use for the date picker */
+  @Input({ alias: 'timeZone' })
+  timeZone?: string;
+
+  /** The type value picker to render */
+  @Input({ alias: 'valueType' })
+  valueType?: 'hierarchy' | 'numeric' | 'datetime';
+
+  /** The filter for which to render the value picker */
+  @Input({ alias: 'filter' })
+  filter?: any;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Disable this control. It will not receive focus or events */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** When this control is rendered, focus it automatically */
+  @Input({ alias: 'autofocus', transform: booleanAttribute })
+  autofocus?: boolean;
+
+  /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
+  @Input({ alias: 'tabIndex' })
+  tabIndex?: number;
+
+  /** Fired when the filter value changes; `detail.value` holds the new value. */
+  readonly luzmoFilterValueChanged = output<CustomEvent<unknown>>({ alias: 'luzmoFilterValueChanged' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'cacheTime':
+          this.setHostProperty('cacheTime', changes['cacheTime'].currentValue);
+          break;
+        case 'contentLanguage':
+          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+          break;
+        case 'timeZone':
+          this.setHostProperty('timeZone', changes['timeZone'].currentValue);
+          break;
+        case 'valueType':
+          this.setHostProperty('valueType', changes['valueType'].currentValue);
+          break;
+        case 'filter':
+          this.setHostProperty('filter', changes['filter'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'autofocus':
+          this.setHostProperty('autofocus', changes['autofocus'].currentValue);
+          break;
+        case 'tabIndex':
+          this.setHostProperty('tabIndex', changes['tabIndex'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-filter-value-changed', (event: Event) => {
+        const typed = event as CustomEvent<unknown>;
+        this.luzmoFilterValueChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoFilterValuePicker */
+export type LuzmoFilterValuePickerElement = LuzmoFilterValuePickerHostElement;

package/angular/components/filters.ts

@@ -0,0 +1,209 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/filters';
+import type { LuzmoFilters as LuzmoFiltersHostElement, FilterParameter, FiltersChangedEventDetail, FiltersFormat, FiltersInput } from '@luzmo/analytics-components-kit/filters';
+export type { CleanFilter, CleanFilterClauseGroup, CleanFilterGroup, CleanRetrievedFilterGroup, DashboardFilterOutput, DetectedFiltersFormat, FilterClause, FilterCondition, FilterGroup, FilterParameter, FilterParameterEventDetail, FilterParameterType, FiltersChangedEventDetail, FiltersFormat, FiltersInput, FiltersOutput, ItemFilterOutput, TransformFiltersOptions } from '@luzmo/analytics-components-kit/filters';
+
+@Component({
+  selector: 'luzmo-filters',
+  exportAs: 'luzmoFilters',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-filters>
+ */
+export class LuzmoFilters implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoFiltersHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoFiltersHostElement {
+    return this.host;
+  }
+
+  /** The API URL of the databroker */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** The auth key of the databroker */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** The auth token of the databroker */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** The cache time of the databroker */
+  @Input({ alias: 'cacheTime' })
+  cacheTime?: number;
+
+  /** The language to use for locale-aware formatting and labels */
+  @Input({ alias: 'contentLanguage' })
+  contentLanguage?: string;
+
+  /** The time zone to use for the date picker */
+  @Input({ alias: 'timeZone' })
+  timeZone?: string;
+
+  /** The dataset ids to fetch columns & formulas */
+  @Input({ alias: 'datasetIds' })
+  datasetIds?: string[];
+
+  /** The filter groups to display.  Accepts both halves of the public `ItemFilterOutput` / `DashboardFilterOutput` unions: canonical `ItemFilterGroup[]` and clean clause groups with flattened leaves. Nested `and` / `or` groups are preserved either way. */
+  @Input({ alias: 'filters' })
+  filters?: FiltersInput;
+
+  /** Output format for the `luzmo-filters-changed` event.  `canonical` emits `ItemFilterGroup[]`; `clean` emits the clean clause groups that aligned hosts consume. A tree that cannot be represented cleanly falls back to canonical output, and the event says which format it carries. */
+  @Input({ alias: 'format' })
+  format?: FiltersFormat;
+
+  /** Whether parameter-backed filter values can be created and selected. */
+  @Input({ alias: 'allowParameters', transform: booleanAttribute })
+  allowParameters?: boolean;
+
+  /** Consumer-owned parameter definitions available to filter rows. */
+  @Input({ alias: 'parameters' })
+  parameters?: FilterParameter[];
+
+  /** Debounce time in milliseconds for the filters-changed event */
+  @Input({ alias: 'debounce' })
+  debounce?: number;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Disable this control. It will not receive focus or events */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** When this control is rendered, focus it automatically */
+  @Input({ alias: 'autofocus', transform: booleanAttribute })
+  autofocus?: boolean;
+
+  /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
+  @Input({ alias: 'tabIndex' })
+  tabIndex?: number;
+
+  /** Announces that the filters have changed, carrying the emitted groups and the format they are in */
+  readonly luzmoFiltersChanged = output<CustomEvent<FiltersChangedEventDetail>>({ alias: 'luzmoFiltersChanged' });
+
+  /** Announces that a parameter was created and added to `parameters`. */
+  readonly luzmoParameterCreated = output<CustomEvent<{ parameter: FilterParameter }>>({ alias: 'luzmoParameterCreated' });
+
+  /** Announces that a parameter was detached from a filter. */
+  readonly luzmoParameterRemoved = output<CustomEvent<{ parameter: FilterParameter }>>({ alias: 'luzmoParameterRemoved' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'cacheTime':
+          this.setHostProperty('cacheTime', changes['cacheTime'].currentValue);
+          break;
+        case 'contentLanguage':
+          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+          break;
+        case 'timeZone':
+          this.setHostProperty('timeZone', changes['timeZone'].currentValue);
+          break;
+        case 'datasetIds':
+          this.setHostProperty('datasetIds', changes['datasetIds'].currentValue);
+          break;
+        case 'filters':
+          this.setHostProperty('filters', changes['filters'].currentValue);
+          break;
+        case 'format':
+          this.setHostProperty('format', changes['format'].currentValue);
+          break;
+        case 'allowParameters':
+          this.setHostProperty('allowParameters', changes['allowParameters'].currentValue);
+          break;
+        case 'parameters':
+          this.setHostProperty('parameters', changes['parameters'].currentValue);
+          break;
+        case 'debounce':
+          this.setHostProperty('debounce', changes['debounce'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'autofocus':
+          this.setHostProperty('autofocus', changes['autofocus'].currentValue);
+          break;
+        case 'tabIndex':
+          this.setHostProperty('tabIndex', changes['tabIndex'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-filters-changed', (event: Event) => {
+        const typed = event as CustomEvent<FiltersChangedEventDetail>;
+        this.luzmoFiltersChanged.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-created', (event: Event) => {
+        const typed = event as CustomEvent<{ parameter: FilterParameter }>;
+        this.luzmoParameterCreated.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-removed', (event: Event) => {
+        const typed = event as CustomEvent<{ parameter: FilterParameter }>;
+        this.luzmoParameterRemoved.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoFilters */
+export type LuzmoFiltersElement = LuzmoFiltersHostElement;

package/angular/components/formula-editor.ts

@@ -0,0 +1,229 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/formula-editor';
+import type { LuzmoFormulaEditor as LuzmoFormulaEditorHostElement } from '@luzmo/analytics-components-kit/formula-editor';
+export type { LuzmoFormulaCodeMirror } from '@luzmo/analytics-components-kit/formula-editor';
+import type { ValidityChangedEventDetail } from '@luzmo/analytics-components-kit/types';
+
+@Component({
+  selector: 'luzmo-formula-editor',
+  exportAs: 'luzmoFormulaEditor',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-formula-editor>
+ *
+ * @csspart formula-editor - Root editor layout (input, validation feedback, lists).
+ * @csspart validating - In-flight validation status row (spinner + "Validating…" text).
+ * @csspart error - Validation error message row shown after a settled invalid result.
+ * @csspart lists - Side panel hosting aggregations, datasets, functions (and optional description).
+ */
+export class LuzmoFormulaEditor implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoFormulaEditorHostElement>>(ElementRef);
+  private readonly renderer = inject<Renderer2>(Renderer2);
+  private readonly destroyRef = inject<DestroyRef>(DestroyRef);
+  private readonly host = this.elementRef.nativeElement;
+  private readonly listenerCleanup: Array<() => void> = [];
+
+  /** The underlying custom element instance. Use to call imperative methods. */
+  get nativeElement(): LuzmoFormulaEditorHostElement {
+    return this.host;
+  }
+
+  /** Whether the expression is validated as a column or a formula. */
+  @Input({ alias: 'expressionResource' })
+  expressionResource?: 'column' | 'formula';
+
+  /** How function / aggregation explanations are surfaced: as hover `tooltip`s on the list items (default), or in a dedicated `description` region. With `tooltip` there is no description, so the remaining lists spread across the full width. */
+  @Input({ alias: 'explanationDisplay' })
+  explanationDisplay?: 'tooltip' | 'description';
+
+  /** Renders the field display-only (no editing). */
+  @Input({ alias: 'readonly', transform: booleanAttribute })
+  readonly?: boolean;
+
+  /** Placeholder text shown in the editable input when the expression is empty. */
+  @Input({ alias: 'placeholder' })
+  placeholder?: string;
+
+  /** Number of text lines the input is sized to start with. Defaults to 3. */
+  @Input({ alias: 'rows' })
+  rows?: number;
+
+  /** Maximum number of text lines before a scrollbar appears (only when `grows`). */
+  @Input({ alias: 'maxRows' })
+  maxRows?: number;
+
+  /** Whether the input grows in height with its content (up to `maxRows` if set). */
+  @Input({ alias: 'grows', transform: booleanAttribute })
+  grows?: boolean;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** The formula expression (function syntax), e.g. `SUM({datasetId:columnId})`. */
+  @Input({ alias: 'expression' })
+  expression?: string;
+
+  /** Datasets and their data fields, provided directly (takes preference over `datasetIds`). */
+  @Input({ alias: 'datasetsDataFields' })
+  datasetsDataFields?: unknown;
+
+  /** Dataset ids to fetch from the Luzmo API (auth attributes optional for public datasets). */
+  @Input({ alias: 'datasetIds' })
+  datasetIds?: string[];
+
+  /** Base URL of the Luzmo API used to fetch datasets by id. */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** Luzmo API authorization key, used with `authToken` to fetch datasets by id. */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** Luzmo API authorization token, used with `authKey` to fetch datasets by id. */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** Whether aggregation functions are offered (in the autocompletion, and - for the editor - via the aggregations list and pills). Defaults to `true`.  Note: as a boolean attribute defaulting to `true` it cannot be turned off via markup (an absent attribute keeps the default); set the `.showAggregations` property to `false` to disable. */
+  @Input({ alias: 'showAggregations', transform: booleanAttribute })
+  showAggregations?: boolean;
+
+  /** Language used for data labels (column / dataset names). */
+  @Input({ alias: 'contentLanguage' })
+  contentLanguage?: string;
+
+  /** When true, aggregations render as multi-stage nested widgets. */
+  @Input({ alias: 'multiStageAggregation', transform: booleanAttribute })
+  multiStageAggregation?: boolean;
+
+  /** When true, aggregations can be nested inside other aggregations. */
+  @Input({ alias: 'nestedAggregation', transform: booleanAttribute })
+  nestedAggregation?: boolean;
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Fired when expression validity changes, including when backend validation starts (`detail.validating`) or settles. */
+  readonly luzmoValidityChanged = output<CustomEvent<ValidityChangedEventDetail>>({ alias: 'luzmoValidityChanged' });
+
+  /** Fired (debounced) when the expression changes. */
+  readonly luzmoExpressionChanged = output<CustomEvent<unknown>>({ alias: 'luzmoExpressionChanged' });
+
+  /** Fired when fetching datasets by id fails. */
+  readonly luzmoDatasetsError = output<CustomEvent<unknown>>({ alias: 'luzmoDatasetsError' });
+
+  constructor() {
+    this.bindEvents();
+    this.destroyRef.onDestroy(() => {
+      for (const cleanup of this.listenerCleanup) {
+        cleanup();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const key of Object.keys(changes)) {
+      switch (key) {
+        case 'expressionResource':
+          this.setHostProperty('expressionResource', changes['expressionResource'].currentValue);
+          break;
+        case 'explanationDisplay':
+          this.setHostProperty('explanationDisplay', changes['explanationDisplay'].currentValue);
+          break;
+        case 'readonly':
+          this.setHostProperty('readonly', changes['readonly'].currentValue);
+          break;
+        case 'placeholder':
+          this.setHostProperty('placeholder', changes['placeholder'].currentValue);
+          break;
+        case 'rows':
+          this.setHostProperty('rows', changes['rows'].currentValue);
+          break;
+        case 'maxRows':
+          this.setHostProperty('maxRows', changes['maxRows'].currentValue);
+          break;
+        case 'grows':
+          this.setHostProperty('grows', changes['grows'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'expression':
+          this.setHostProperty('expression', changes['expression'].currentValue);
+          break;
+        case 'datasetsDataFields':
+          this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].currentValue);
+          break;
+        case 'datasetIds':
+          this.setHostProperty('datasetIds', changes['datasetIds'].currentValue);
+          break;
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'showAggregations':
+          this.setHostProperty('showAggregations', changes['showAggregations'].currentValue);
+          break;
+        case 'contentLanguage':
+          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+          break;
+        case 'multiStageAggregation':
+          this.setHostProperty('multiStageAggregation', changes['multiStageAggregation'].currentValue);
+          break;
+        case 'nestedAggregation':
+          this.setHostProperty('nestedAggregation', changes['nestedAggregation'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Forward a wrapper @Input to the underlying host element via Renderer2 so
+   * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+   * Unlike a "skip undefined" guard, this lets consumers reset values back to
+   * undefined / null by clearing their bindings.
+   */
+  private setHostProperty(key: string, value: unknown): void {
+    this.renderer.setProperty(this.host, key, value);
+  }
+
+  private bindEvents(): void {
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-validity-changed', (event: Event) => {
+        const typed = event as CustomEvent<ValidityChangedEventDetail>;
+        this.luzmoValidityChanged.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-expression-changed', (event: Event) => {
+        const typed = event as CustomEvent<unknown>;
+        this.luzmoExpressionChanged.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-datasets-error', (event: Event) => {
+        const typed = event as CustomEvent<unknown>;
+        this.luzmoDatasetsError.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoFormulaEditor */
+export type LuzmoFormulaEditorElement = LuzmoFormulaEditorHostElement;