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

package/angular/components/item-slot-drop-panel.ts

@@ -1,236 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-slot-drop-panel';
-import type { LuzmoItemSlotDropPanel as LuzmoItemSlotDropPanelHostElement, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
-export type { DatasetConstraintTriggeredEventDetail, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
-import type { Placement } from '@floating-ui/dom';
-import type { SlotConfig, SlotPositioningConfig, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
-
-@Component({
-  selector: 'luzmo-item-slot-drop-panel',
-  exportAs: 'luzmoItemSlotDropPanel',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-slot-drop-panel>
- */
-export class LuzmoItemSlotDropPanel implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemSlotDropPanelHostElement>>(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(): LuzmoItemSlotDropPanelHostElement {
-    return this.host;
-  }
-
-  /** The type of the item (e.g., 'bar-chart', 'line-chart', 'area-chart') */
-  @Input({ alias: 'itemType' })
-  itemType?: VizItemType | string;
-
-  /** The language to use for locale-aware formatting and labels */
-  @Input({ alias: 'contentLanguage' })
-  contentLanguage?: string;
-
-  /** Optional custom slots configuration (overrides loaded config from item-type). Each slot defines what data types it accepts and its behavior. */
-  @Input({ alias: 'slotsConfiguration' })
-  slotsConfiguration?: SlotConfig[];
-
-  /** Optional custom positioning configuration for grid layout (overrides loaded config). Only used when `positioned` attribute is true. */
-  @Input({ alias: 'positioningConfiguration' })
-  positioningConfiguration?: SlotPositioningConfig;
-
-  /** The contents of all slots. Each entry maps a slot name to its content items. Content items typically contain column/formula references and dataset IDs. */
-  @Input({ alias: 'slotsContents' })
-  slotsContents?: VizItemSlot[];
-
-  /** Whether to use grid-based positioning for slots When true, loads the positioning config and renders slots in a CSS grid */
-  @Input({ alias: 'positioned', transform: booleanAttribute })
-  positioned?: boolean;
-
-  /** Boundary element selector for drag operations */
-  @Input({ alias: 'dragBoundary' })
-  dragBoundary?: string;
-
-  /** Placement of the slot menu popover */
-  @Input({ alias: 'slotMenuPlacement' })
-  slotMenuPlacement?: Placement;
-
-  /** Whether to hide the delete button on item slot drop targets */
-  @Input({ alias: 'hideDelete', transform: booleanAttribute })
-  hideDelete?: boolean;
-
-  /** Whether to hide the configuration button on item slot drop targets */
-  @Input({ alias: 'hideConfiguration', transform: booleanAttribute })
-  hideConfiguration?: boolean;
-
-  /** Whether the item slot drop targets grow to full width */
-  @Input({ alias: 'grows', transform: booleanAttribute })
-  grows?: boolean;
-
-  /** Controls how slot constraints are handled - 'auto': Constraints are applied immediately (default) - 'event-only': Emit event with constraint details, let consumer decide */
-  @Input({ alias: 'constraintMode' })
-  constraintMode?: 'auto' | 'event-only';
-
-  /** The type of menu interaction for item slot drop targets */
-  @Input({ alias: 'slotMenuMode' })
-  slotMenuMode?: 'default' | 'draggable' | 'event-only';
-
-  /** The API URL of the databroker */
-  @Input({ alias: 'apiUrl' })
-  apiUrl?: string;
-
-  /** The auth key of the databroker */
-  @Input({ alias: 'authKey' })
-  authKey?: string;
-
-  /** The auth token of the databroker */
-  @Input({ alias: 'authToken' })
-  authToken?: string;
-
-  /** The main container for all slots */
-  @Input({ alias: 'slotsPanel' })
-  slotspanel?: string;
-
-  /** The grid container when positioned mode is enabled */
-  @Input({ alias: 'slotsGrid' })
-  slotsgrid?: string;
-
-  /** The grid cell wrapper for each slot when positioned */
-  @Input({ alias: 'slotCell' })
-  slotcell?: string;
-
-  /** The item slot drop element */
-  @Input({ alias: 'itemSlotDrop' })
-  itemslotdrop?: 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';
-
-  /** Emitted when constraint-mode is 'event-only' and a change would trigger constraints */
-  readonly luzmoSlotConstraintTriggered = output<CustomEvent<SlotConstraintTriggeredEventDetail>>({ alias: 'luzmoSlotConstraintTriggered' });
-
-  /** Announces that the slots contents have changed */
-  readonly luzmoSlotsContentsChanged = output<CustomEvent<SlotsContentsChangedEventDetail>>({ alias: 'luzmoSlotsContentsChanged' });
-
-  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 'itemType':
-          this.setHostProperty('itemType', changes['itemType'].currentValue);
-          break;
-        case 'contentLanguage':
-          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
-          break;
-        case 'slotsConfiguration':
-          this.setHostProperty('slotsConfiguration', changes['slotsConfiguration'].currentValue);
-          break;
-        case 'positioningConfiguration':
-          this.setHostProperty('positioningConfiguration', changes['positioningConfiguration'].currentValue);
-          break;
-        case 'slotsContents':
-          this.setHostProperty('slotsContents', changes['slotsContents'].currentValue);
-          break;
-        case 'positioned':
-          this.setHostProperty('positioned', changes['positioned'].currentValue);
-          break;
-        case 'dragBoundary':
-          this.setHostProperty('dragBoundary', changes['dragBoundary'].currentValue);
-          break;
-        case 'slotMenuPlacement':
-          this.setHostProperty('slotMenuPlacement', changes['slotMenuPlacement'].currentValue);
-          break;
-        case 'hideDelete':
-          this.setHostProperty('hideDelete', changes['hideDelete'].currentValue);
-          break;
-        case 'hideConfiguration':
-          this.setHostProperty('hideConfiguration', changes['hideConfiguration'].currentValue);
-          break;
-        case 'grows':
-          this.setHostProperty('grows', changes['grows'].currentValue);
-          break;
-        case 'constraintMode':
-          this.setHostProperty('constraintMode', changes['constraintMode'].currentValue);
-          break;
-        case 'slotMenuMode':
-          this.setHostProperty('slotMenuMode', changes['slotMenuMode'].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 'slotspanel':
-          this.setHostProperty('slots-panel', changes['slotspanel'].currentValue);
-          break;
-        case 'slotsgrid':
-          this.setHostProperty('slots-grid', changes['slotsgrid'].currentValue);
-          break;
-        case 'slotcell':
-          this.setHostProperty('slot-cell', changes['slotcell'].currentValue);
-          break;
-        case 'itemslotdrop':
-          this.setHostProperty('item-slot-drop', changes['itemslotdrop'].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-constraint-triggered', (event: Event) => {
-        const typed = event as CustomEvent<SlotConstraintTriggeredEventDetail>;
-        this.luzmoSlotConstraintTriggered.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-slots-contents-changed', (event: Event) => {
-        const typed = event as CustomEvent<SlotsContentsChangedEventDetail>;
-        this.luzmoSlotsContentsChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemSlotDropPanel */
-export type LuzmoItemSlotDropPanelElement = LuzmoItemSlotDropPanelHostElement;

package/angular/components/item-slot-drop.ts

@@ -1,231 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/item-slot-drop';
-import type { LuzmoItemSlotDrop as LuzmoItemSlotDropHostElement, InfoVisibilityChangedEventDetail, SlotConfig, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
-export type { InfoVisibilityChangedEventDetail, SlotConfig, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
-import type { SlotName, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
-import type { Placement } from '@luzmo/lucero';
-
-@Component({
-  selector: 'luzmo-item-slot-drop',
-  exportAs: 'luzmoItemSlotDrop',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-item-slot-drop>
- */
-export class LuzmoItemSlotDrop implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoItemSlotDropHostElement>>(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(): LuzmoItemSlotDropHostElement {
-    return this.host;
-  }
-
-  /** The visualization item type that determines the available slots and their configuration. */
-  @Input({ alias: 'itemType' })
-  itemType?: VizItemType;
-
-  /** The name of the slot this drop target represents. */
-  @Input({ alias: 'slotName' })
-  slotName?: SlotName;
-
-  /** The configuration for this slot (accepted field types, options, label, etc.). */
-  @Input({ alias: 'slotConfiguration' })
-  slotConfiguration?: SlotConfig;
-
-  /** The full set of slot contents for the item; the entry matching `slotName` is rendered here. */
-  @Input({ alias: 'slotsContents' })
-  slotsContents?: VizItemSlot[];
-
-  /** Overrides the slot's default label. */
-  @Input({ alias: 'label' })
-  label?: string;
-
-  /** The language to use for locale-aware formatting of content labels (e.g. column names). When different from `language`, UI chrome uses `language` while data labels use `contentLanguage`. */
-  @Input({ alias: 'contentLanguage' })
-  contentLanguage?: string;
-
-  /** CSS selector for the boundary element that constrains dragging within the slot menu. */
-  @Input({ alias: 'dragBoundary' })
-  dragBoundary?: string;
-
-  /** Renders the slot vertically. */
-  @Input({ alias: 'rotate', transform: booleanAttribute })
-  rotate?: boolean;
-
-  /** The API URL of the databroker */
-  @Input({ alias: 'apiUrl' })
-  apiUrl?: string;
-
-  /** The auth key of the databroker */
-  @Input({ alias: 'authKey' })
-  authKey?: string;
-
-  /** The auth token of the databroker */
-  @Input({ alias: 'authToken' })
-  authToken?: string;
-
-  /** The type of config interaction */
-  @Input({ alias: 'menu' })
-  menu?: 'default' | 'draggable' | 'event-only';
-
-  /** Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type */
-  @Input({ alias: 'placement' })
-  placement?: Placement;
-
-  /** Hides the delete button on filled slots. */
-  @Input({ alias: 'hideDelete', transform: booleanAttribute })
-  hideDelete?: boolean;
-
-  /** Hides the edit/configuration button and disables opening the slot menu. */
-  @Input({ alias: 'hideConfiguration', transform: booleanAttribute })
-  hideConfiguration?: 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';
-
-  /** Emitted when the slot menu overlay closes / becomes inactive. */
-  readonly luzmoSlotMenuInactive = output<CustomEvent<unknown>>({ alias: 'luzmoSlotMenuInactive' });
-
-  /** Emitted when the slot menu overlay opens for a slot */
-  readonly luzmoSlotMenuActive = output<CustomEvent<SlotMenuActiveEventDetail>>({ alias: 'luzmoSlotMenuActive' });
-
-  /** Emitted to highlight the active column or formula in the slot menu */
-  readonly luzmoSlotMenuHighlight = output<CustomEvent<SlotMenuHighlightEventDetail>>({ alias: 'luzmoSlotMenuHighlight' });
-
-  /** Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values */
-  readonly luzmoInfoVisibilityChanged = output<CustomEvent<InfoVisibilityChangedEventDetail>>({ alias: 'luzmoInfoVisibilityChanged' });
-
-  /** Announces that the slot contents has changed */
-  readonly luzmoSlotContentsChanged = output<CustomEvent<SlotContentsChangedEventDetail>>({ alias: 'luzmoSlotContentsChanged' });
-
-  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 'itemType':
-          this.setHostProperty('itemType', changes['itemType'].currentValue);
-          break;
-        case 'slotName':
-          this.setHostProperty('slotName', changes['slotName'].currentValue);
-          break;
-        case 'slotConfiguration':
-          this.setHostProperty('slotConfiguration', changes['slotConfiguration'].currentValue);
-          break;
-        case 'slotsContents':
-          this.setHostProperty('slotsContents', changes['slotsContents'].currentValue);
-          break;
-        case 'label':
-          this.setHostProperty('label', changes['label'].currentValue);
-          break;
-        case 'contentLanguage':
-          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
-          break;
-        case 'dragBoundary':
-          this.setHostProperty('dragBoundary', changes['dragBoundary'].currentValue);
-          break;
-        case 'rotate':
-          this.setHostProperty('rotate', changes['rotate'].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 'menu':
-          this.setHostProperty('menu', changes['menu'].currentValue);
-          break;
-        case 'placement':
-          this.setHostProperty('placement', changes['placement'].currentValue);
-          break;
-        case 'hideDelete':
-          this.setHostProperty('hideDelete', changes['hideDelete'].currentValue);
-          break;
-        case 'hideConfiguration':
-          this.setHostProperty('hideConfiguration', changes['hideConfiguration'].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-menu-inactive', (event: Event) => {
-        const typed = event as CustomEvent<unknown>;
-        this.luzmoSlotMenuInactive.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-slot-menu-active', (event: Event) => {
-        const typed = event as CustomEvent<SlotMenuActiveEventDetail>;
-        this.luzmoSlotMenuActive.emit(typed);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-slot-menu-highlight', (event: Event) => {
-        const typed = event as CustomEvent<SlotMenuHighlightEventDetail>;
-        this.luzmoSlotMenuHighlight.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);
-      })
-    );
-
-    this.listenerCleanup.push(
-      this.renderer.listen(this.host, 'luzmo-slot-contents-changed', (event: Event) => {
-        const typed = event as CustomEvent<SlotContentsChangedEventDetail>;
-        this.luzmoSlotContentsChanged.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoItemSlotDrop */
-export type LuzmoItemSlotDropElement = LuzmoItemSlotDropHostElement;