@luzmo/analytics-components-kit 1.0.7 → 1.0.8-beta.2

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

@@ -1,126 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-import type { LuzmoItemOptionColorPalettePicker as LuzmoItemOptionColorPalettePickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
-
-@Component({
-  selector: 'luzmo-item-option-color-palette-picker',
-  exportAs: 'luzmoItemOptionColorPalettePicker',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-color-palette-picker>
- */
-export class LuzmoItemOptionColorPalettePicker implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorPalettePickerHostElement>>(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(): LuzmoItemOptionColorPalettePickerHostElement {
-    return this.host;
-  }
-
-  /** The selected color palette key of the picker */
-  @Input({ alias: 'value' })
-  value?: string;
-
-  /** The default color palette key of the picker */
-  @Input({ alias: 'default' })
-  default?: string;
-
-  /** The color palette keys of the picker */
-  @Input({ alias: 'values' })
-  values?: string[];
-
-  /** Whether the picker is disabled */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Whether the picker is horizontal */
-  @Input({ alias: 'horizontal', transform: booleanAttribute })
-  horizontal?: boolean;
-
-  /** The function to parse the value */
-  @Input({ alias: 'parseValue' })
-  parseValue?: unknown;
-
-  /** The function to convert the value to a string */
-  @Input({ alias: 'toValue' })
-  toValue?: unknown;
-
-  /** The number of colors to display */
-  @Input({ alias: 'numberOfColors' })
-  numberOfColors?: number;
-
-  /** 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 'values':
-          this.setHostProperty('values', changes['values'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'horizontal':
-          this.setHostProperty('horizontal', changes['horizontal'].currentValue);
-          break;
-        case 'parseValue':
-          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
-          break;
-        case 'toValue':
-          this.setHostProperty('toValue', changes['toValue'].currentValue);
-          break;
-        case 'numberOfColors':
-          this.setHostProperty('numberOfColors', changes['numberOfColors'].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 LuzmoItemOptionColorPalettePicker */
-export type LuzmoItemOptionColorPalettePickerElement = LuzmoItemOptionColorPalettePickerHostElement;

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

@@ -1,134 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-color-picker';
-import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
-import type { Placement } from '@luzmo/lucero';
-
-@Component({
-  selector: 'luzmo-item-option-color-picker',
-  exportAs: 'luzmoItemOptionColorPicker',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-color-picker>
- */
-export class LuzmoItemOptionColorPicker implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorPickerHostElement>>(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(): LuzmoItemOptionColorPickerHostElement {
-    return this.host;
-  }
-
-  /** Preset colors offered as quick-pick swatches. */
-  @Input({ alias: 'swatches' })
-  swatches?: string[];
-
-  /** Corner rounding of the color swatch: `full`, `light`, or `none`. */
-  @Input({ alias: 'rounding' })
-  rounding?: 'full' | 'light' | 'none';
-
-  /** Shape of the color swatch: `circle` or `rectangle`. */
-  @Input({ alias: 'shape' })
-  shape?: 'circle' | 'rectangle';
-
-  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
-  @Input({ alias: 'debounce' })
-  debounce?: number;
-
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
-  /** The current color value. */
-  @Input({ alias: 'value' })
-  value?: string;
-
-  /** Whether the control is disabled (non-interactive). */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Disables the alpha (opacity) channel in the color picker. */
-  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
-  noAlphaChannel?: boolean;
-
-  /** Placement of the color picker dropdown relative to its trigger. */
-  @Input({ alias: 'placement' })
-  placement?: Placement;
-
-  /** 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 'swatches':
-          this.setHostProperty('swatches', changes['swatches'].currentValue);
-          break;
-        case 'rounding':
-          this.setHostProperty('rounding', changes['rounding'].currentValue);
-          break;
-        case 'shape':
-          this.setHostProperty('shape', changes['shape'].currentValue);
-          break;
-        case 'debounce':
-          this.setHostProperty('debounce', changes['debounce'].currentValue);
-          break;
-        case 'debounceTimeout':
-          this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-          break;
-        case 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'noAlphaChannel':
-          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
-          break;
-        case 'placement':
-          this.setHostProperty('placement', changes['placement'].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 LuzmoItemOptionColorPicker */
-export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerHostElement;

package/angular/components/item-option-color-range.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/item-option-color-range';
-import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
-
-@Component({
-  selector: 'luzmo-item-option-color-range',
-  exportAs: 'luzmoItemOptionColorRange',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-color-range>
- */
-export class LuzmoItemOptionColorRange implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionColorRangeHostElement>>(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(): LuzmoItemOptionColorRangeHostElement {
-    return this.host;
-  }
-
-  /** The color range */
-  @Input({ alias: 'value' })
-  value?: unknown;
-
-  /** The default color range */
-  @Input({ alias: 'default' })
-  default?: unknown;
-
-  /** Whether the color-range is disabled */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Range with percentage values */
-  @Input({ alias: 'percentage', transform: booleanAttribute })
-  percentage?: boolean;
-
-  /** Range colors can have alpha values */
-  @Input({ alias: 'noAlphaChannel', transform: booleanAttribute })
-  noAlphaChannel?: boolean;
-
-  /** The number of values in the range can be changed */
-  @Input({ alias: 'editRangeSize', transform: booleanAttribute })
-  editRangeSize?: boolean;
-
-  /** The values in the range can be changed by the user in the input field */
-  @Input({ alias: 'noValues', transform: booleanAttribute })
-  noValues?: boolean;
-
-  /** The minimum range size */
-  @Input({ alias: 'minimumRangeSize' })
-  minimumRangeSize?: number;
-
-  /** Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded */
-  @Input({ alias: 'negativeInfinityValue', transform: booleanAttribute })
-  negativeInfinityValue?: boolean;
-
-  /** The color pickers can be read-only */
-  @Input({ alias: 'readOnlyColorPicker', transform: booleanAttribute })
-  readOnlyColorPicker?: boolean;
-
-  /** Whether the colors are reversed */
-  @Input({ alias: 'reverse', transform: booleanAttribute })
-  reverse?: boolean;
-
-  /** The debounce time in milliseconds */
-  @Input({ alias: 'debounce' })
-  debounce?: number;
-
-  /** The function to parse the value */
-  @Input({ alias: 'parseValue' })
-  parseValue?: unknown;
-
-  /** The function to convert the value */
-  @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 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].currentValue);
-          break;
-        case 'percentage':
-          this.setHostProperty('percentage', changes['percentage'].currentValue);
-          break;
-        case 'noAlphaChannel':
-          this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
-          break;
-        case 'editRangeSize':
-          this.setHostProperty('editRangeSize', changes['editRangeSize'].currentValue);
-          break;
-        case 'noValues':
-          this.setHostProperty('noValues', changes['noValues'].currentValue);
-          break;
-        case 'minimumRangeSize':
-          this.setHostProperty('minimumRangeSize', changes['minimumRangeSize'].currentValue);
-          break;
-        case 'negativeInfinityValue':
-          this.setHostProperty('negativeInfinityValue', changes['negativeInfinityValue'].currentValue);
-          break;
-        case 'readOnlyColorPicker':
-          this.setHostProperty('readOnlyColorPicker', changes['readOnlyColorPicker'].currentValue);
-          break;
-        case 'reverse':
-          this.setHostProperty('reverse', changes['reverse'].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 LuzmoItemOptionColorRange */
-export type LuzmoItemOptionColorRangeElement = LuzmoItemOptionColorRangeHostElement;

package/angular/components/item-option-multi-language-field.ts

@@ -1,133 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-option-multi-language-field';
-import type { LuzmoItemOptionMultiLangField as LuzmoItemOptionMultiLangFieldHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-multi-language-field';
-export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-multi-language-field';
-
-@Component({
-  selector: 'luzmo-item-option-multi-language-field',
-  exportAs: 'luzmoItemOptionMultiLanguageField',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-option-multi-language-field>
- */
-export class LuzmoItemOptionMultiLanguageField implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemOptionMultiLangFieldHostElement>>(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(): LuzmoItemOptionMultiLangFieldHostElement {
-    return this.host;
-  }
-
-  /** Internal timer handle used to debounce change events. */
-  @Input({ alias: 'debounceTimeout' })
-  debounceTimeout?: any;
-
-  /** The current value per language (language code → text). */
-  @Input({ alias: 'value' })
-  value?: Record<string, string>;
-
-  /** Whether the control is shown in an invalid state. */
-  @Input({ alias: 'invalid', transform: booleanAttribute })
-  invalid?: boolean;
-
-  /** Whether the control is read-only. */
-  @Input({ alias: 'readonly', transform: booleanAttribute })
-  readonly?: boolean;
-
-  /** The active language whose value is currently edited. */
-  @Input({ alias: 'language' })
-  language?: string;
-
-  /** Placeholder text per language (language code → text) shown when empty. */
-  @Input({ alias: 'placeholder' })
-  placeholder?: Record<string, 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;
-
-  /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
-  @Input({ alias: 'debounce' })
-  debounce?: number;
-
-  /** 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 'value':
-          this.setHostProperty('value', changes['value'].currentValue);
-          break;
-        case 'invalid':
-          this.setHostProperty('invalid', changes['invalid'].currentValue);
-          break;
-        case 'readonly':
-          this.setHostProperty('readonly', changes['readonly'].currentValue);
-          break;
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
-          break;
-        case 'placeholder':
-          this.setHostProperty('placeholder', changes['placeholder'].currentValue);
-          break;
-        case 'parseValue':
-          this.setHostProperty('parseValue', changes['parseValue'].currentValue);
-          break;
-        case 'toValue':
-          this.setHostProperty('toValue', changes['toValue'].currentValue);
-          break;
-        case 'debounce':
-          this.setHostProperty('debounce', changes['debounce'].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 LuzmoItemOptionMultiLanguageField */
-export type LuzmoItemOptionMultiLanguageFieldElement = LuzmoItemOptionMultiLangFieldHostElement;