@luzmo/analytics-components-kit 1.0.6 → 1.0.8-beta.1

package/angular/components/dataset-selector-row.ts

@@ -0,0 +1,157 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/dataset-selector-row';
+import type { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowHostElement, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
+export type { Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
+
+@Component({
+  selector: 'luzmo-dataset-selector-row',
+  exportAs: 'luzmoDatasetSelectorRow',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-dataset-selector-row>
+ */
+export class LuzmoDatasetSelectorRow implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDatasetSelectorRowHostElement>>(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(): LuzmoDatasetSelectorRowHostElement {
+    return this.host;
+  }
+
+  /** Array of selected datasets */
+  @Input({ alias: 'selectedDatasets' })
+  selectedDatasets?: Dataset[];
+
+  /** Accessible label and hover tooltip text for the dataset search trigger */
+  @Input({ alias: 'buttonLabel' })
+  buttonLabel?: string;
+
+  /** Auth key for DataBroker authentication */
+  @Input({ alias: 'authKey' })
+  authKey?: string;
+
+  /** Auth token for DataBroker authentication */
+  @Input({ alias: 'authToken' })
+  authToken?: string;
+
+  /** API URL for DataBroker */
+  @Input({ alias: 'apiUrl' })
+  apiUrl?: string;
+
+  /** The URL of the app server for thumbnails and assets */
+  @Input({ alias: 'appServer' })
+  appServer?: string;
+
+  /** When true, restricts results to public datasets (opendata parity) */
+  @Input({ alias: 'flagOpendata', transform: booleanAttribute })
+  flagOpendata?: boolean;
+
+  /** When true, disables all interactions: disables the add button, removes dataset pill delete buttons, and makes tags non-interactive */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** When true, disables dataset search and removal while leaving informational controls interactive. */
+  @Input({ alias: 'disableDatasetModification', transform: booleanAttribute })
+  disableDatasetModification?: boolean;
+
+  /** When true, hides dataset icons in selected tags and search options */
+  @Input({ alias: 'hideDatasetIcons', transform: booleanAttribute })
+  hideDatasetIcons?: boolean;
+
+  /** Maximum number of selected dataset tags shown before the overflow control; unset shows all tags. */
+  @Input({ alias: 'maxVisibleSelectedDatasets' })
+  maxVisibleSelectedDatasets?: number;
+
+  /** Fired when a dataset is selected */
+  readonly datasetSelected = output<CustomEvent<Dataset>>({ alias: 'datasetSelected' });
+
+  /** Fired when a dataset is removed */
+  readonly datasetRemoved = output<CustomEvent<Dataset>>({ alias: 'datasetRemoved' });
+
+  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 'selectedDatasets':
+          this.setHostProperty('selectedDatasets', changes['selectedDatasets'].currentValue);
+          break;
+        case 'buttonLabel':
+          this.setHostProperty('buttonLabel', changes['buttonLabel'].currentValue);
+          break;
+        case 'authKey':
+          this.setHostProperty('authKey', changes['authKey'].currentValue);
+          break;
+        case 'authToken':
+          this.setHostProperty('authToken', changes['authToken'].currentValue);
+          break;
+        case 'apiUrl':
+          this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+          break;
+        case 'appServer':
+          this.setHostProperty('appServer', changes['appServer'].currentValue);
+          break;
+        case 'flagOpendata':
+          this.setHostProperty('flagOpendata', changes['flagOpendata'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'disableDatasetModification':
+          this.setHostProperty('disableDatasetModification', changes['disableDatasetModification'].currentValue);
+          break;
+        case 'hideDatasetIcons':
+          this.setHostProperty('hideDatasetIcons', changes['hideDatasetIcons'].currentValue);
+          break;
+        case 'maxVisibleSelectedDatasets':
+          this.setHostProperty('maxVisibleSelectedDatasets', changes['maxVisibleSelectedDatasets'].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, 'dataset-selected', (event: Event) => {
+        const typed = event as CustomEvent<Dataset>;
+        this.datasetSelected.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'dataset-removed', (event: Event) => {
+        const typed = event as CustomEvent<Dataset>;
+        this.datasetRemoved.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoDatasetSelectorRow */
+export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowHostElement;

package/angular/components/display-settings-binning.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings-binning';
+import type { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-display-settings-binning',
+  exportAs: 'luzmoDisplaySettingsBinning',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings-binning>
+ */
+export class LuzmoDisplaySettingsBinning implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsBinningHostElement>>(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(): LuzmoDisplaySettingsBinningHostElement {
+    return this.host;
+  }
+
+  /** The slot content whose binning configuration (enabled state and bin width) is edited. */
+  @Input({ alias: 'slotContent' })
+  slotContent?: GenericSlotContent;
+
+  /** 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 '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 LuzmoDisplaySettingsBinning */
+export type LuzmoDisplaySettingsBinningElement = LuzmoDisplaySettingsBinningHostElement;

package/angular/components/display-settings-datetime.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings-datetime';
+import type { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-datetime';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-datetime';
+import type { ElementSize } from '@luzmo/analytics-components-kit/types';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-display-settings-datetime',
+  exportAs: 'luzmoDisplaySettingsDatetime',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings-datetime>
+ */
+export class LuzmoDisplaySettingsDatetime implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsDatetimeHostElement>>(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(): LuzmoDisplaySettingsDatetimeHostElement {
+    return this.host;
+  }
+
+  /** The language to use for locale-aware formatting */
+  @Input({ alias: 'contentLanguage' })
+  contentLanguage?: string;
+
+  /** The size variant of the datetime settings controls (`s`, `m`, `l`, `xl`). */
+  @Input({ alias: 'size' })
+  size?: ElementSize;
+
+  /** The slot content whose datetime display mode and format options are edited. */
+  @Input({ alias: 'slotContent' })
+  slotContent?: GenericSlotContent;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+  @Input({ alias: 'language' })
+  language?: string;
+
+  /** 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 'contentLanguage':
+          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
+        case 'slotContent':
+          this.setHostProperty('slotContent', changes['slotContent'].currentValue);
+          break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].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 LuzmoDisplaySettingsDatetime */
+export type LuzmoDisplaySettingsDatetimeElement = LuzmoDisplaySettingsDatetimeHostElement;

package/angular/components/display-settings-grand-totals.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings-grand-totals';
+import type { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+@Component({
+  selector: 'luzmo-display-settings-grand-totals',
+  exportAs: 'luzmoDisplaySettingsGrandTotals',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings-grand-totals>
+ */
+export class LuzmoDisplaySettingsGrandTotals implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsGrandTotalsHostElement>>(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(): LuzmoDisplaySettingsGrandTotalsHostElement {
+    return this.host;
+  }
+
+  /** The slotContent that is passed to the settings */
+  @Input({ alias: 'slotContent' })
+  slotContent?: GenericSlotContent;
+
+  /** 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 '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 LuzmoDisplaySettingsGrandTotals */
+export type LuzmoDisplaySettingsGrandTotalsElement = LuzmoDisplaySettingsGrandTotalsHostElement;

package/angular/components/display-settings-numeric.ts

@@ -0,0 +1,113 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/display-settings-numeric';
+import type { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericHostElement, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-numeric';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-numeric';
+import type { MeasureColumnsItem } from '@luzmo/analytics-components-kit/slot-menu';
+
+@Component({
+  selector: 'luzmo-display-settings-numeric',
+  exportAs: 'luzmoDisplaySettingsNumeric',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-display-settings-numeric>
+ */
+export class LuzmoDisplaySettingsNumeric implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoDisplaySettingsNumericHostElement>>(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(): LuzmoDisplaySettingsNumericHostElement {
+    return this.host;
+  }
+
+  /** The slotContent that is passed to the settings */
+  @Input({ alias: 'slotContent' })
+  slotContent?: any;
+
+  /** The list of measure columns grouped by dataset that can be used for the rate aggregation. Shape: [{ datasetId, datasetName, columns: Column[] }] */
+  @Input({ alias: 'measureColumns' })
+  measureColumns?: MeasureColumnsItem[];
+
+  /** Whether or not to show the aggregation options */
+  @Input({ alias: 'isAggregationDisabled', transform: booleanAttribute })
+  isAggregationDisabled?: boolean;
+
+  /** Whether or not to show the cumulative sum options */
+  @Input({ alias: 'isCumulativeSumEnabled', transform: booleanAttribute })
+  isCumulativeSumEnabled?: 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';
+
+  /** 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 'measureColumns':
+          this.setHostProperty('measureColumns', changes['measureColumns'].currentValue);
+          break;
+        case 'isAggregationDisabled':
+          this.setHostProperty('isAggregationDisabled', changes['isAggregationDisabled'].currentValue);
+          break;
+        case 'isCumulativeSumEnabled':
+          this.setHostProperty('isCumulativeSumEnabled', changes['isCumulativeSumEnabled'].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 LuzmoDisplaySettingsNumeric */
+export type LuzmoDisplaySettingsNumericElement = LuzmoDisplaySettingsNumericHostElement;

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;