@luzmo/analytics-components-kit 1.0.5-beta.1 → 1.0.5-beta.3

package/angular/components/item-option-picker.ts

@@ -0,0 +1,120 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-picker';
+import type { LuzmoItemOptionPicker as LuzmoItemOptionPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-picker';
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-picker';
+import type { Placement } from '@luzmo/lucero';
+
+@Component({
+  selector: 'luzmo-item-option-picker',
+  exportAs: 'luzmoItemOptionPicker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-picker>
+ */
+export class LuzmoItemOptionPicker implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionPickerHostElement>>(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(): LuzmoItemOptionPickerHostElement {
+    return this.host;
+  }
+
+  /** The available options to choose from (key → label). */
+  @Input({ alias: 'values' })
+  values?: Record<string, string>;
+
+  /** Whether the control is disabled (non-interactive). */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** Placement of the picker dropdown relative to its trigger. */
+  @Input({ alias: 'placement' })
+  placement?: Placement;
+
+  /** The currently selected option key. */
+  @Input({ alias: 'value' })
+  value?: string;
+
+  /** Optional transform applied to the stored value before it is displayed in the control. */
+  @Input({ alias: 'parseValue' })
+  parseValue?: unknown;
+
+  /** Optional transform applied to the control's value before it is emitted in the change event. */
+  @Input({ alias: 'toValue' })
+  toValue?: unknown;
+
+  /** The default option key used when no value is set. */
+  @Input({ alias: 'default' })
+  default?: string;
+
+  /** Emitted when the option value changes. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  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 'values':
+          this.setHostProperty('values', changes['values'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'placement':
+          this.setHostProperty('placement', changes['placement'].currentValue);
+          break;
+        case 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'parseValue':
+          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
+          break;
+        case 'toValue':
+          this.setHostProperty('toValue', changes['toValue'].currentValue);
+          break;
+        case 'default':
+          this.setHostProperty('default', changes['default'].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-option-changed', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
+        this.luzmoOptionChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionPicker */
+export type LuzmoItemOptionPickerElement = LuzmoItemOptionPickerHostElement;

package/angular/components/item-option-position-picker.ts

@@ -0,0 +1,98 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-position-picker';
+import type { LuzmoItemOptionPositionPicker as LuzmoItemOptionPositionPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-position-picker';
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-position-picker';
+
+@Component({
+  selector: 'luzmo-item-option-position-picker',
+  exportAs: 'luzmoItemOptionPositionPicker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-position-picker>
+ */
+export class LuzmoItemOptionPositionPicker implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionPositionPickerHostElement>>(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(): LuzmoItemOptionPositionPickerHostElement {
+    return this.host;
+  }
+
+  /** The currently selected position. */
+  @Input({ alias: 'value' })
+  value?: string;
+
+  /** The default position used when no value is set (e.g. `topRight`). */
+  @Input({ alias: 'defaultPosition' })
+  default?: string;
+
+  /** The set of positions offered for selection. */
+  @Input({ alias: 'positions' })
+  positions?: string[];
+
+  /** Whether the control is read-only. */
+  @Input({ alias: 'readonly', transform: booleanAttribute })
+  readonly?: boolean;
+
+  /** Emitted when the option value changes. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  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 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'default':
+          this.setHostProperty('default', changes['default'].currentValue);
+          break;
+        case 'positions':
+          this.setHostProperty('positions', changes['positions'].currentValue);
+          break;
+        case 'readonly':
+          this.setHostProperty('readonly', changes['readonly'].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-option-changed', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
+        this.luzmoOptionChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionPositionPicker */
+export type LuzmoItemOptionPositionPickerElement = LuzmoItemOptionPositionPickerHostElement;

package/angular/components/item-option-positions-number-field.ts

@@ -0,0 +1,140 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-positions-number-field';
+import type { LuzmoItemOptionPositionsNumberField as LuzmoItemOptionPositionsNumberFieldHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-positions-number-field';
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-positions-number-field';
+
+@Component({
+  selector: 'luzmo-item-option-positions-number-field',
+  exportAs: 'luzmoItemOptionPositionsNumberField',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-positions-number-field>
+ */
+export class LuzmoItemOptionPositionsNumberField implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionPositionsNumberFieldHostElement>>(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(): LuzmoItemOptionPositionsNumberFieldHostElement {
+    return this.host;
+  }
+
+  /** The value applied to all positions when sync is enabled. */
+  @Input({ alias: 'syncedValue' })
+  syncedValue?: number;
+
+  /** Internal timer handle used to debounce change events. */
+  @Input({ alias: 'debounceTimeout' })
+  debounceTimeout?: any;
+
+  /** Which positions to render input fields for (e.g. top/right/bottom/left, or corners and center). */
+  @Input({ alias: 'positions' })
+  positions?: ('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center')[];
+
+  /** The current numeric value for each position. */
+  @Input({ alias: 'values' })
+  values?: Record<('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'), number >;
+
+  /** Whether the center lock control is shown to sync all positions to a single value. */
+  @Input({ alias: 'canSync', transform: booleanAttribute })
+  canSync?: boolean;
+
+  /** Per-position min/max/step/default constraints for the number inputs. */
+  @Input({ alias: 'positionConfiguration' })
+  positionConfiguration?: unknown;
+
+  /** Whether the inputs are shown in an invalid state. */
+  @Input({ alias: 'invalid', transform: booleanAttribute })
+  invalid?: boolean;
+
+  /** Whether the inputs are read-only. */
+  @Input({ alias: 'readonly', transform: booleanAttribute })
+  readonly?: boolean;
+
+  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+  @Input({ alias: 'debounce' })
+  debounce?: number;
+
+  /** Whether all positions are currently synced to a single value. */
+  @Input({ alias: 'sync', transform: booleanAttribute })
+  sync?: boolean;
+
+  /** Emitted when the option value changes. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  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 'syncedValue':
+          this.setHostProperty('syncedValue', changes['syncedValue'].currentValue);
+          break;
+        case 'debounceTimeout':
+          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+          break;
+        case 'positions':
+          this.setHostProperty('positions', changes['positions'].currentValue);
+          break;
+        case 'values':
+          this.setHostProperty('values', changes['values'].currentValue);
+          break;
+        case 'canSync':
+          this.setHostProperty('canSync', changes['canSync'].currentValue);
+          break;
+        case 'positionConfiguration':
+          this.setHostProperty('positionConfiguration', changes['positionConfiguration'].currentValue);
+          break;
+        case 'invalid':
+          this.setHostProperty('invalid', changes['invalid'].currentValue);
+          break;
+        case 'readonly':
+          this.setHostProperty('readonly', changes['readonly'].currentValue);
+          break;
+        case 'debounce':
+          this.setHostProperty('debounce', changes['debounce'].currentValue);
+          break;
+        case 'sync':
+          this.setHostProperty('sync', changes['sync'].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-option-changed', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
+        this.luzmoOptionChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionPositionsNumberField */
+export type LuzmoItemOptionPositionsNumberFieldElement = LuzmoItemOptionPositionsNumberFieldHostElement;

package/angular/components/item-option-radio-button-group.ts

@@ -0,0 +1,119 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-radio-button-group';
+import type { LuzmoItemOptionRadioButtonGroup as LuzmoItemOptionRadioButtonGroupHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-radio-button-group';
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-radio-button-group';
+
+@Component({
+  selector: 'luzmo-item-option-radio-button-group',
+  exportAs: 'luzmoItemOptionRadioButtonGroup',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-radio-button-group>
+ */
+export class LuzmoItemOptionRadioButtonGroup implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionRadioButtonGroupHostElement>>(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(): LuzmoItemOptionRadioButtonGroupHostElement {
+    return this.host;
+  }
+
+  /** Internal timer handle used to debounce change events. */
+  @Input({ alias: 'debounceTimeout' })
+  debounceTimeout?: any;
+
+  /** The available options to choose from (key → label). */
+  @Input({ alias: 'values' })
+  values?: Record<string, string>;
+
+  /** Whether the control is disabled (non-interactive). */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** The currently selected option key. */
+  @Input({ alias: 'value' })
+  value?: string;
+
+  /** The default option key used when no value is set. */
+  @Input({ alias: 'default' })
+  default?: string;
+
+  /** Optional transform applied to the stored value before it is displayed in the control. */
+  @Input({ alias: 'parseValue' })
+  parseValue?: unknown;
+
+  /** Optional transform applied to the control's value before it is emitted in the change event. */
+  @Input({ alias: 'toValue' })
+  toValue?: unknown;
+
+  /** Emitted when the option value changes. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  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 'debounceTimeout':
+          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+          break;
+        case 'values':
+          this.setHostProperty('values', changes['values'].currentValue);
+          break;
+        case 'disabled':
+          this.setHostProperty('disabled', changes['disabled'].currentValue);
+          break;
+        case 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'default':
+          this.setHostProperty('default', changes['default'].currentValue);
+          break;
+        case 'parseValue':
+          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
+          break;
+        case 'toValue':
+          this.setHostProperty('toValue', changes['toValue'].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-option-changed', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
+        this.luzmoOptionChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionRadioButtonGroup */
+export type LuzmoItemOptionRadioButtonGroupElement = LuzmoItemOptionRadioButtonGroupHostElement;

package/angular/components/item-option-slider.ts

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-slider';
+import type { LuzmoItemOptionSlider as LuzmoItemOptionSliderHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+
+@Component({
+  selector: 'luzmo-item-option-slider',
+  exportAs: 'luzmoItemOptionSlider',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />'
+})
+/**
+ * Angular wrapper component for <luzmo-item-option-slider>
+ */
+export class LuzmoItemOptionSlider implements OnChanges {
+  private readonly elementRef = inject<ElementRef<LuzmoItemOptionSliderHostElement>>(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(): LuzmoItemOptionSliderHostElement {
+    return this.host;
+  }
+
+  /** The current slider value. */
+  @Input({ alias: 'value' })
+  value?: number;
+
+  /** The default slider value used when no value is set. */
+  @Input({ alias: 'default' })
+  default?: number;
+
+  /** The minimum slider value. */
+  @Input({ alias: 'min' })
+  min?: number;
+
+  /** The maximum slider value. */
+  @Input({ alias: 'max' })
+  max?: number;
+
+  /** The increment between slider values. */
+  @Input({ alias: 'step' })
+  step?: number;
+
+  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+  @Input({ alias: 'debounce' })
+  debounce?: number;
+
+  /** Optional transform applied to the stored value before it is displayed in the control. */
+  @Input({ alias: 'parseValue' })
+  parseValue?: unknown;
+
+  /** Optional transform applied to the control's value before it is emitted in the change event. */
+  @Input({ alias: 'toValue' })
+  toValue?: unknown;
+
+  /** Emitted when the option value changes. */
+  readonly luzmoOptionChanged = output<CustomEvent<ItemOptionChangedEventDetail>>({ alias: 'luzmoOptionChanged' });
+
+  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 'value':
+          this.setHostProperty('value', changes['value'].currentValue);
+          break;
+        case 'default':
+          this.setHostProperty('default', changes['default'].currentValue);
+          break;
+        case 'min':
+          this.setHostProperty('min', changes['min'].currentValue);
+          break;
+        case 'max':
+          this.setHostProperty('max', changes['max'].currentValue);
+          break;
+        case 'step':
+          this.setHostProperty('step', changes['step'].currentValue);
+          break;
+        case 'debounce':
+          this.setHostProperty('debounce', changes['debounce'].currentValue);
+          break;
+        case 'parseValue':
+          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
+          break;
+        case 'toValue':
+          this.setHostProperty('toValue', changes['toValue'].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-option-changed', (event: Event) => {
+        const typed = event as CustomEvent<ItemOptionChangedEventDetail>;
+        this.luzmoOptionChanged.emit(typed);
+      })
+    );
+  }
+}
+
+/** The underlying custom element type for LuzmoItemOptionSlider */
+export type LuzmoItemOptionSliderElement = LuzmoItemOptionSliderHostElement;