@luzmo/analytics-components-kit 1.0.9-beta.7 → 1.0.9-beta.8

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

@@ -1,121 +0,0 @@
-import { booleanAttribute, 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;
-
-  /** Offer the "Periods" offset when there is no datetime category (an offset date column is needed). The item then shifts by the length of the period selected by its date filters. */
-  @Input({ alias: 'allowPeriodsWithoutDatetimeColumn', transform: booleanAttribute })
-  allowPeriodsWithoutDatetimeColumn?: boolean;
-
-  /** Hide the "Past value" comparison type, e.g. for items that only show the change. */
-  @Input({ alias: 'hidePastValue', transform: booleanAttribute })
-  hidePastValue?: boolean;
-
-  /** 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 'allowPeriodsWithoutDatetimeColumn':
-          this.setHostProperty('allowPeriodsWithoutDatetimeColumn', changes['allowPeriodsWithoutDatetimeColumn'].currentValue);
-          break;
-        case 'hidePastValue':
-          this.setHostProperty('hidePastValue', changes['hidePastValue'].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

@@ -1,227 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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;