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

package/angular/components/display-settings-period-over-period.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings-period-over-period';
+import type { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
+import type { PeriodOverPeriodCondition } from '@luzmo/analytics-components-kit/types';
+import type { Column } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-display-settings-period-over-period',
+  exportAs: 'luzmoDisplaySettingsPeriodOverPeriod',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings-period-over-period>
+ */
+export class LuzmoDisplaySettingsPeriodOverPeriod implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsPeriodOverPeriodHostElement>>(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(): LuzmoDisplaySettingsPeriodOverPeriodHostElement {
+    return this.host;
+  }
+
+  /** The slotContent that is passed to the settings */
+  @Input({ alias: 'slotContent' })
+  slotContent?: any;
+
+  /** Which period-over-period UI variant to render, based on available datetime columns and comparison filters. */
+  @Input({ alias: 'periodOverPeriodType' })
+  periodOverPeriodUiType?: PeriodOverPeriodCondition;
+
+  /** Datetime columns from the linked dataset available as offset/comparison date columns. */
+  @Input({ alias: 'linkedDatasetDatetimeColumns' })
+  linkedDatasetDatetimeColumns?: (Column & { datasetId: string; })[];
+
+  /** 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';
+
+  /** Event that is fired when the slot content is changed */
+  readonly luzmoSlotContentChanged = output<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>({ alias: 'luzmoSlotContentChanged' });
+
+  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 'slotContent':
+          this.setHostProperty('slotContent', changes['slotContent'].currentValue);
+          break;
+        case 'periodOverPeriodUiType':
+          this.setHostProperty('periodOverPeriodUiType', changes['periodOverPeriodUiType'].currentValue);
+          break;
+        case 'linkedDatasetDatetimeColumns':
+          this.setHostProperty('linkedDatasetDatetimeColumns', changes['linkedDatasetDatetimeColumns'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].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-slot-content-changed', (event: Event) => {
+        const typed = event as CustomEvent<DisplaySettingsSlotContentChangedEventDetail>;
+        this.luzmoSlotContentChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoDisplaySettingsPeriodOverPeriod */
+export type LuzmoDisplaySettingsPeriodOverPeriodElement = LuzmoDisplaySettingsPeriodOverPeriodHostElement;

package/angular/components/display-settings.ts

@@ -0,0 +1,227 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings';
+import type { LuzmoDisplaySettings as LuzmoDisplaySettingsHostElement, DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
+export type { DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
+import type { DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
+import type { MeasureColumnsItem } from '@luzmo/analytics-components-kit/slot-menu';
+import type { PeriodOverPeriodCondition, SlotContent } from '@luzmo/analytics-components-kit/types';
+import type { SlotName } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-display-settings',
+  exportAs: 'luzmoDisplaySettings',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings>
+ */
+export class LuzmoDisplaySettings implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsHostElement>>(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(): LuzmoDisplaySettingsHostElement {
+    return this.host;
+  }
+
+  /** The language of the settings interface */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** The language to use for locale-aware formatting and labels */
+  @Input({ alias: 'contentLanguage' })
+  contentLanguage?: string;
+
+  /** Whether to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns */
+  @Input({ alias: 'hideDisplaySettings', transform: booleanAttribute })
+  hideDisplaySettings?: boolean;
+
+  /** Whether to show the binning in numeric */
+  @Input({ alias: 'isBinningDisabled', transform: booleanAttribute })
+  isBinningDisabled?: boolean;
+
+  /** Whether to show the datetime options */
+  @Input({ alias: 'areDatetimeOptionsEnabled', transform: booleanAttribute })
+  areDatetimeOptionsEnabled?: boolean;
+
+  /** Whether to show the grand totals */
+  @Input({ alias: 'areGrandTotalsEnabled', transform: booleanAttribute })
+  areGrandTotalsEnabled?: boolean;
+
+  /** Whether to show the aggregation options */
+  @Input({ alias: 'isAggregationDisabled', transform: booleanAttribute })
+  isAggregationDisabled?: boolean;
+
+  /** Whether to show the cumulative sum options */
+  @Input({ alias: 'isCumulativeSumEnabled', transform: booleanAttribute })
+  isCumulativeSumEnabled?: boolean;
+
+  /** Whether to show the period-over-period in numeric */
+  @Input({ alias: 'periodOverPeriodUiType' })
+  periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
+
+  /** Whether to show the trash button next to the label */
+  @Input({ alias: 'showRemoveButton', transform: booleanAttribute })
+  showRemoveButton?: boolean;
+
+  /** The slot type */
+  @Input({ alias: 'slotType' })
+  slotType?: string;
+
+  /** The slot name used to distinguish measure and dimension calculations. */
+  @Input({ alias: 'slotName' })
+  slotName?: SlotName;
+
+  /** The slot content model (label, formatting, aggregation, etc.) for the field being configured. */
+  @Input({ alias: 'slotContent' })
+  slotContent?: SlotContent;
+
+  /** Datasets used to resolve column names in ad-hoc calculation previews. */
+  @Input({ alias: 'datasetsDataFields' })
+  datasetsDataFields?: DatasetDataFields[];
+
+  /** The API URL used when resolving calculation previews by dataset id. */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** The auth key used when resolving calculation previews by dataset id. */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** The auth token used when resolving calculation previews by dataset id. */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** The list of columns that can be used for the rate aggregation */
+  @Input({ alias: 'measureColumns' })
+  measureColumns?: MeasureColumnsItem[];
+
+  /** The size of the element */
+  @Input({ alias: 'size' })
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /** Event that is fired when the slot content is changed */
+  readonly luzmoSlotContentChanged = output<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>({ alias: 'luzmoSlotContentChanged' });
+
+  /** Event that is fired when the remove button is clicked */
+  readonly luzmoRemoveSlotContent = output<CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>>({ alias: 'luzmoRemoveSlotContent' });
+
+  /** Event that is fired when the info button is clicked, includes the visibility state and ID values */
+  readonly luzmoInfoVisibilityChanged = output<CustomEvent<InfoVisibilityChangedEventDetail>>({ alias: 'luzmoInfoVisibilityChanged' });
+
+  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 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'contentLanguage':
+          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+          break;
+        case 'hideDisplaySettings':
+          this.setHostProperty('hideDisplaySettings', changes['hideDisplaySettings'].currentValue);
+          break;
+        case 'isBinningDisabled':
+          this.setHostProperty('isBinningDisabled', changes['isBinningDisabled'].currentValue);
+          break;
+        case 'areDatetimeOptionsEnabled':
+          this.setHostProperty('areDatetimeOptionsEnabled', changes['areDatetimeOptionsEnabled'].currentValue);
+          break;
+        case 'areGrandTotalsEnabled':
+          this.setHostProperty('areGrandTotalsEnabled', changes['areGrandTotalsEnabled'].currentValue);
+          break;
+        case 'isAggregationDisabled':
+          this.setHostProperty('isAggregationDisabled', changes['isAggregationDisabled'].currentValue);
+          break;
+        case 'isCumulativeSumEnabled':
+          this.setHostProperty('isCumulativeSumEnabled', changes['isCumulativeSumEnabled'].currentValue);
+          break;
+        case 'periodOverPeriodUiType':
+          this.setHostProperty('periodOverPeriodUiType', changes['periodOverPeriodUiType'].currentValue);
+          break;
+        case 'showRemoveButton':
+          this.setHostProperty('showRemoveButton', changes['showRemoveButton'].currentValue);
+          break;
+        case 'slotType':
+          this.setHostProperty('slotType', changes['slotType'].currentValue);
+          break;
+        case 'slotName':
+          this.setHostProperty('slotName', changes['slotName'].currentValue);
+          break;
+        case 'slotContent':
+          this.setHostProperty('slotContent', changes['slotContent'].currentValue);
+          break;
+        case 'datasetsDataFields':
+          this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].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 'measureColumns':
+          this.setHostProperty('measureColumns', changes['measureColumns'].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-slot-content-changed', (event: Event) => {
+        const typed = event as CustomEvent<DisplaySettingsSlotContentChangedEventDetail>;
+        this.luzmoSlotContentChanged.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-remove-slot-content', (event: Event) => {
+        const typed = event as CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>;
+        this.luzmoRemoveSlotContent.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-info-visibility-changed', (event: Event) => {
+        const typed = event as CustomEvent<InfoVisibilityChangedEventDetail>;
+        this.luzmoInfoVisibilityChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoDisplaySettings */
+export type LuzmoDisplaySettingsElement = LuzmoDisplaySettingsHostElement;

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

@@ -0,0 +1,168 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/filter-expression-picker';
+import type { LuzmoFilterExpressionPicker as LuzmoFilterExpressionPickerHostElement } from '@luzmo/analytics-components-kit/filter-expression-picker';
+import type { ColumnSubtype, ColumnType } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-filter-expression-picker',
+  exportAs: 'luzmoFilterExpressionPicker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-filter-expression-picker>
+ */
+export class LuzmoFilterExpressionPicker implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoFilterExpressionPickerHostElement>>(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(): LuzmoFilterExpressionPickerHostElement {
+    return this.host;
+  }
+
+  /** The filter object */
+  @Input({ alias: 'filter' })
+  filter?: any;
+
+  /** Whether the picker has a label */
+  @Input({ alias: 'hasLabel', transform: booleanAttribute })
+  hasLabel?: boolean;
+
+  /** The label for the picker, if hasLabel is true */
+  @Input({ alias: 'label' })
+  label?: string;
+
+  /** Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item. */
+  @Input({ alias: 'allowEmpty', transform: booleanAttribute })
+  allowEmpty?: boolean;
+
+  /** The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label. */
+  @Input({ alias: 'placeholder' })
+  placeholder?: string;
+
+  /** Whether the picker is disabled */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** The type of the column */
+  @Input({ alias: 'type' })
+  type?: ColumnType;
+
+  /** The subtype of the column */
+  @Input({ alias: 'subtype' })
+  subtype?: ColumnSubtype;
+
+  /** Whether the expression is invalid */
+  @Input({ alias: 'invalid', transform: booleanAttribute })
+  invalid?: boolean;
+
+  /** Whether the column is a formula */
+  @Input({ alias: 'isFormula', transform: booleanAttribute })
+  isFormula?: boolean;
+
+  /** 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';
+
+  /** 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 user selects a filter expression (operator); `detail.expression` holds the chosen expression. */
+  readonly luzmoExpressionSelected = output<CustomEvent<unknown>>({ alias: 'luzmoExpressionSelected' });
+
+  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 'filter':
+          this.setHostProperty('filter', changes['filter'].currentValue);
+          break;
+        case 'hasLabel':
+          this.setHostProperty('hasLabel', changes['hasLabel'].currentValue);
+          break;
+        case 'label':
+          this.setHostProperty('label', changes['label'].currentValue);
+          break;
+        case 'allowEmpty':
+          this.setHostProperty('allowEmpty', changes['allowEmpty'].currentValue);
+          break;
+        case 'placeholder':
+          this.setHostProperty('placeholder', changes['placeholder'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'type':
+          this.setHostProperty('type', changes['type'].currentValue);
+          break;
+        case 'subtype':
+          this.setHostProperty('subtype', changes['subtype'].currentValue);
+          break;
+        case 'invalid':
+          this.setHostProperty('invalid', changes['invalid'].currentValue);
+          break;
+        case 'isFormula':
+          this.setHostProperty('isFormula', changes['isFormula'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].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-expression-selected', (event: Event) => {
+        const typed = event as CustomEvent<unknown>;
+        this.luzmoExpressionSelected.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoFilterExpressionPicker */
+export type LuzmoFilterExpressionPickerElement = LuzmoFilterExpressionPickerHostElement;

package/angular/components/filter-item.ts

@@ -0,0 +1,175 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/filter-item';
+import type { LuzmoFilterItem as LuzmoFilterItemHostElement } from '@luzmo/analytics-components-kit/filter-item';
+import type { FilterParameter } from '@luzmo/analytics-components-kit/filters';
+
+@Component({
+  selector: 'luzmo-filter-item',
+  exportAs: 'luzmoFilterItem',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-filter-item>
+ */
+export class LuzmoFilterItem implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoFilterItemHostElement>>(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(): LuzmoFilterItemHostElement {
+    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 of the content */
+  @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 to display */
+  @Input({ alias: 'filter' })
+  filter?: any;
+
+  /** Whether parameter-backed filter values can be created and selected. */
+  @Input({ alias: 'allowParameters', transform: booleanAttribute })
+  allowParameters?: boolean;
+
+  /** Consumer-owned parameter definitions available for selection. */
+  @Input({ alias: 'parameters' })
+  parameters?: FilterParameter[];
+
+  /** 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 any part of the filter changes; `detail.filter` holds the updated filter. */
+  readonly luzmoFilterChanged = output<CustomEvent<unknown>>({ alias: 'luzmoFilterChanged' });
+
+  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 'filter':
+          this.setHostProperty('filter', changes['filter'].currentValue);
+          break;
+        case 'allowParameters':
+          this.setHostProperty('allowParameters', changes['allowParameters'].currentValue);
+          break;
+        case 'parameters':
+          this.setHostProperty('parameters', changes['parameters'].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-changed', (event: Event) => {
+        const typed = event as CustomEvent<unknown>;
+        this.luzmoFilterChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoFilterItem */
+export type LuzmoFilterItemElement = LuzmoFilterItemHostElement;