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

package/components/slot-menu/slot-menu.d.ts

@@ -0,0 +1,148 @@
+import '@luzmo/lucero/divider';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import './../display-settings';
+import { SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+import type { SlotContent } from '../../types/slot.types';
+import type { DatasetDataFields } from '../data-field-panel/types';
+import { type LuzmoDisplaySettings } from './../display-settings/display-settings';
+import './../slot-menu-list';
+import { type LuzmoSlotMenuList } from './../slot-menu-list/slot-menu-list';
+import { type MeasureColumnsItem } from './types';
+declare const LuzmoSlotMenu_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-slot-menu
+ * @fires {CustomEvent<SlotContentsChangedEventDetail>} luzmo-slot-contents-changed - Emitted when the slot contents change
+ * @fires {CustomEvent<void>} luzmo-close - Emitted when the slot menu is closed
+ * @fires {CustomEvent<InfoVisibilityChangedEventDetail>} luzmo-info-visibility-changed - Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values
+ * @fires {CustomEvent<SlotMenuActiveEventDetail>} luzmo-slot-menu-active - Emitted when the slot menu becomes active for a dataset
+ * @fires {CustomEvent<SlotMenuHighlightEventDetail>} luzmo-slot-menu-highlight - Emitted to highlight a column or formula in the slot menu
+ * @fires {CustomEvent} luzmo-slot-menu-inactive - Emitted when the menu becomes inactive.
+ */
+export declare class LuzmoSlotMenu extends LuzmoSlotMenu_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The slot type
+     */
+    slotType?: 'numeric' | 'categorical' | 'mixed';
+    /** The name of the slot being edited. */
+    slotName: SlotName;
+    /** The visualization item type that provides slot and option configuration. */
+    itemType?: VizItemType;
+    /**
+     * Whether to show the drag handle and allow dragging
+     */
+    noDrag?: boolean;
+    /**
+     * Whether to show the close button
+     */
+    noClose?: boolean;
+    /**
+     * The variant to show
+     */
+    variant?: 'popup' | 'draggable' | 'default';
+    /**
+     * Whether to show the top menu label & delete button
+     */
+    noTopMenuLabel?: boolean;
+    private _consumedStore?;
+    private _ownStore?;
+    private get _store();
+    /** CSS selector for the boundary element that constrains dragging of the menu. */
+    dragBoundary?: string;
+    /** Whether grand-totals options are available for this slot. */
+    areGrandTotalsEnabled?: boolean;
+    /** Whether datetime display options are available for this slot. */
+    areDatetimeOptionsEnabled?: boolean;
+    /** Whether numeric binning options are hidden for this slot. */
+    isBinningDisabled?: boolean;
+    /** Whether aggregation options are hidden for this slot. */
+    isAggregationDisabled?: boolean;
+    /** Whether cumulative-sum options are available for this slot. */
+    isCumulativeSumEnabled?: boolean;
+    /** The contents (columns/formulas) assigned to this slot. */
+    slotContents?: SlotContent[];
+    private _periodOverPeriodUiType;
+    /** Measure columns available for rate aggregation. */
+    measureColumns: MeasureColumnsItem[];
+    /**
+     * (Optional) If you only want to display a specific content of a slot, you can set the slotIndex to the index of the content you want to display.
+     */
+    slotIndex?: number;
+    /** Reference to the rendered display-settings element. */
+    displaySettingsElement: LuzmoDisplaySettings;
+    /** Reference to the rendered slot-menu-list element. */
+    slotMenuListElement: LuzmoSlotMenuList;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    /** Datasets used to resolve column names in ad-hoc calculation previews. */
+    datasetsDataFields: DatasetDataFields[];
+    private _slotContents;
+    _activeIndex: number;
+    private _cleanupDrag?;
+    private _panelResizeObserver?;
+    private _linkedDatasetsIds;
+    private _lastFetchedDatasetId?;
+    private get _currentSlotContent();
+    private get _currentLabel();
+    private _renderCurrentLabel;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Caps the list's max-height to the current settings-panel height. Combined
+     * with the flex `align-items: stretch`, this makes the list fill the panel
+     * height and scroll internally only when its items exceed that height.
+     */
+    private _syncListMaxHeight;
+    /**
+     * (Re)attaches a ResizeObserver to the settings panel so the list height
+     * tracks the panel as its content expands/collapses (e.g. period comparison).
+     */
+    private _observePanelResize;
+    /**
+     * Helper to attach draggable behaviour to the top-level handle.
+     */
+    private _attachDragHandle;
+    private _sendChangeEvent;
+    resetInfoVisibility(): void;
+    private _sendCloseEvent;
+    private isArrayColumnType;
+    protected willUpdate(changedProperties: PropertyValues): Promise<void>;
+    protected updated(): void;
+    private _handleSlotListChange;
+    private _handleSlotContentChange;
+    removeSlotContent(index: number): void;
+    close(): void;
+    _removeActiveSlotContent(): void;
+    private _handleInfoVisibilityChanged;
+    protected render(): TemplateResult;
+    protected firstUpdated(): void;
+    /**
+     * Reset the menu position to its original location
+     */
+    resetPosition(): void;
+}
+export {};

package/components/slot-menu/types.d.ts

@@ -0,0 +1,24 @@
+import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import { DatasetColumnMetadata } from '../../utils/data-broker';
+import type { SlotContentsChangedEventDetail } from '../item-slot-drop/types';
+export interface MeasureColumnsItem {
+    datasetId: string;
+    datasetName: Record<string, string>;
+    columns: DatasetColumnMetadata[];
+}
+export interface SlotMenuActiveEventDetail {
+    datasetId: string;
+}
+export interface SlotMenuHighlightEventDetail {
+    datasetId: string;
+    level: number;
+    columnId?: string;
+    formulaId?: string;
+}
+export interface SlotContentChangedEventDetail {
+    slotContent: SlotContentsChangedEventDetail['slotContents'][number];
+}
+export interface SlotListChangedEventDetail {
+    slotContents: GenericSlotContent[];
+    activeIndex: number;
+}

package/components/slot-menu-list/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoSlotMenuList } from './slot-menu-list';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-slot-menu-list': LuzmoSlotMenuList;
+    }
+}
+export { LuzmoSlotMenuList } from './slot-menu-list';
+export type { SlotListChangedEventDetail } from '../slot-menu/types';

package/components/slot-menu-list/slot-menu-list.d.ts

@@ -0,0 +1,47 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import type { SlotName } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+import type { SlotContent } from '../../types/slot.types';
+declare const LuzmoSlotMenuList_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-slot-menu-list
+ * @fires {CustomEvent<SlotListChangedEventDetail>} luzmo-slot-list-changed - Emitted when the slot list changes
+ */
+export declare class LuzmoSlotMenuList extends LuzmoSlotMenuList_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    _draggableSlotContentElements: HTMLElement[];
+    /** The list of slot contents (columns/formulas) shown in the reorderable list. */
+    slotContents: SlotContent[];
+    /** The containing slot name used to identify measure calculations. */
+    slotName: SlotName;
+    /** The containing slot type used to identify measure calculations. */
+    slotType: string;
+    /** Index of the currently active/selected slot content. */
+    activeIndex: number;
+    private _sendChangeEvent;
+    private _cleanupFns;
+    private _attachAll;
+    private _detachAll;
+    protected willUpdate(): void;
+    protected updated(): void;
+    disconnectedCallback(): void;
+    setActiveIndex(index: number): void;
+    removeSlotContent(index: number): void;
+    private _moveItem;
+    private _handleContentKeydown;
+    private _handleTrashClick;
+    private _handleTrashKeydown;
+    protected render(): TemplateResult;
+}
+export {};

package/components/viz-item-menu/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoVizItemMenu } from './viz-item-menu';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-viz-item-menu': LuzmoVizItemMenu;
+    }
+}
+export { LuzmoVizItemMenu } from './viz-item-menu';
+export type { VizItemMenuButton, VizItemMenuButtonClickedEventDetail, VizItemMenuSelectedChangedEventDetail } from './types';

package/components/viz-item-menu/types.d.ts

@@ -0,0 +1,9 @@
+export type VizItemMenuButton = 'clone' | 'edit' | 'delete';
+export interface VizItemMenuButtonClickedEventDetail {
+    action: string;
+    type: VizItemMenuButton;
+    id: string;
+}
+export interface VizItemMenuSelectedChangedEventDetail {
+    selectedButton: VizItemMenuButton | null;
+}

package/components/viz-item-menu/viz-item-menu.d.ts

@@ -0,0 +1,85 @@
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/tooltip';
+import type { PropertyValues } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import type { VizItemMenuButton } from './types';
+declare const LuzmoVizItemMenu_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LitElement;
+/**
+ * @customElement luzmo-viz-item-menu
+ * @summary A menu component for viz-item actions (clone, edit, delete)
+ * @fires {CustomEvent<VizItemMenuButtonClickedEventDetail>} button-clicked - Emitted when any menu item is clicked
+ * @fires {CustomEvent<void>} edit-button-hovered - Emitted when hovering over the edit button
+ * @fires {CustomEvent<VizItemMenuSelectedChangedEventDetail>} selected-changed - Emitted when the selected button changes
+ * @cssprop --luzmo-viz-item-menu-button-focus-outline-width - Width of the keyboard focus outline on menu buttons. Defaults to `--luzmo-indicator-width`.
+ * @cssprop --luzmo-viz-item-menu-button-focus-outline-color - Color of the keyboard focus outline on menu buttons. Defaults to `--luzmo-indicator-color`.
+ * @cssprop --luzmo-viz-item-menu-button-focus-outline-offset - Offset of the keyboard focus outline on menu buttons. Defaults to `--luzmo-indicator-gap` (2px), outside the button.
+ */
+export declare class LuzmoVizItemMenu extends LuzmoVizItemMenu_base {
+    static styles: import("lit").CSSResult;
+    static tagName: string;
+    /**
+     * The visualization item ID
+     */
+    vizItemId: string;
+    /**
+     * Array of menu buttons to hide
+     * @default []
+     */
+    hiddenButtons: VizItemMenuButton[];
+    /**
+     * The currently selected menu button
+     * @default null
+     */
+    selectedButton: VizItemMenuButton | null;
+    private _tabStopButton;
+    private _restoreFocus;
+    protected willUpdate(changes: PropertyValues<this>): void;
+    protected updated(changes: PropertyValues<this>): void;
+    private _handleButtonFocus;
+    private _handleToolbarKeydown;
+    /**
+     * Menu button configurations
+     */
+    private readonly menuButtonConfigs;
+    /**
+     * Check if there are any top section buttons to show
+     */
+    private get hasTopSectionButtons();
+    /**
+     * Check if a menu button should be shown
+     */
+    private _shouldShowButton;
+    /**
+     * Toggle selected state for a menu button
+     */
+    private _handleSelectedToggle;
+    /**
+     * Emit selected-changed event
+     */
+    private _emitSelectedChanged;
+    /**
+     * Handle menu button click with unified event dispatching
+     */
+    private _handleMenuButtonClick;
+    /**
+     * Create a bound click handler for a menu button config
+     */
+    private _createMenuButtonClickHandler;
+    private _handleHoverOverEdit;
+    /**
+     * Render a menu button
+     */
+    private _renderMenuButton;
+    /**
+     * Render edit section (edit and clone buttons)
+     */
+    private _renderTopSection;
+    /**
+     * Render delete section
+     */
+    private _renderBottomSection;
+    protected render(): TemplateResult;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.9-beta.7",
+  "version": "1.0.9-beta.8",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",

package/react/package.json

@@ -29,7 +29,7 @@
   "peerDependencies": {
     "@lit/react": "^1.0.6",
     "react": "^18.0.0 || ^19.0.0",
-    "@luzmo/analytics-components-kit": "^1.0.9-beta.7"
+    "@luzmo/analytics-components-kit": "^1.0.9-beta.8"
   },
-  "version": "1.0.9-beta.7"
+  "version": "1.0.9-beta.8"
 }

package/angular/README.md

@@ -1,40 +0,0 @@
-# Luzmo Analytics Components Kit - Angular Wrappers
-
-> Standalone Angular wrapper components for the Luzmo Analytics Components Kit web components
-
-This package provides Angular wrappers for the Luzmo Analytics Components Kit web components.
-
-## Installation
-
-```bash
-npm install @luzmo/ngx-analytics-components-kit @luzmo/analytics-components-kit @angular/core @angular/forms
-```
-
-## Requirements
-
-- Angular `>= 17.3` (the wrappers use the functional `output()` API).
-- The peer package `@luzmo/analytics-components-kit` provides the underlying
-  custom-element classes that the wrappers register at import time.
-
-## Usage
-
-```ts
-import { Component } from '@angular/core';
-import { LuzmoDataField } from '@luzmo/ngx-analytics-components-kit';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [LuzmoDataField],
-  template: `<luzmo-data-field></luzmo-data-field>`
-})
-export class AppComponent {}
-```
-
-The wrapper class name mirrors the host element (`LuzmoDataField`); the
-underlying `HTMLElement` subclass type is re-exported as
-`LuzmoDataFieldElement` for `@ViewChild` / `ElementRef<T>` use cases.
-
-## Notes
-
-- This package depends on `@luzmo/analytics-components-kit` for the underlying custom elements.

package/angular/components/ai-chat-empty-state.ts

@@ -1,105 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
-import '@luzmo/analytics-components-kit/ai-chat';
-import type { LuzmoAiChatEmptyState as LuzmoAiChatEmptyStateHostElement, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail } from '@luzmo/analytics-components-kit/ai-chat';
-export type { AgentStreamDefinition, AiChatAgentConfig, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail, AiChatMessageSentEventDetail, AiChatRecognizedStepType, AiChatSessionBuildContext, AiChatSessionCallbacks, AiChatSessionConfig, AiChatSessionControllerOptions, AiChatSessionRestoreParams, AiChatSessionRestoreResult, AiChatSessionSeed, AiChatSessionState, AiChatSessionSubmitParams, AiChatStepBase, AiChatStepEvent, AiDictationCreateBody, AiDictationProperties, AiPromptCreateBody, AiPromptDeleteBody, AssistantMessageAction, AssistantMessageActionConfirmVariant, AssistantMessageActionEventDetail, BuildAiDictationRequestOptions, ChatMessageElicitation, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail, ProgressTreeNode, PromptBoxAttachment, PromptBoxFileIcons, RecognizedStepEvent, StreamAiDictationOptions, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState, StreamingRequestOptions, StreamingResponse, UnknownStepEvent, UploadAiPromptImagesOptions } from '@luzmo/analytics-components-kit/ai-chat';
-
-@Component({
-  selector: 'luzmo-ai-chat-empty-state',
-  exportAs: 'luzmoAiChatEmptyState',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content />'
-})
-/**
- * Angular wrapper component for <luzmo-ai-chat-empty-state>
- */
-export class LuzmoAiChatEmptyState implements OnChanges {
-  private readonly elementRef = inject<ElementRef<LuzmoAiChatEmptyStateHostElement>>(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(): LuzmoAiChatEmptyStateHostElement {
-    return this.host;
-  }
-
-  /** Heading shown above the suggestions. */
-  @Input({ alias: 'title' })
-  title?: string;
-
-  /** Supporting text shown above suggestion chips when `suggestions` is non-empty. */
-  @Input({ alias: 'subtitle' })
-  subtitle?: string;
-
-  /** Suggestion chips rendered with https://lucero.luzmo.com/ | Lucero `luzmo-action-button` (`variant="accent"`). */
-  @Input({ alias: 'suggestions' })
-  suggestions?: AiChatEmptyStateSuggestion[];
-
-  /** When true, suggestion chips cannot be activated. */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
-  /** Size of the title, subtitle and suggestion chips: `s`, `m` (default), `l` or `xl` */
-  @Input({ alias: 'size' })
-  size?: unknown;
-
-  /** Fired when the user selects a suggestion chip */
-  readonly luzmoSuggestionSelected = output<CustomEvent<AiChatEmptyStateSuggestionSelectedDetail>>({ alias: 'luzmoSuggestionSelected' });
-
-  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 'title':
-          this.setHostProperty('title', changes['title'].currentValue);
-          break;
-        case 'subtitle':
-          this.setHostProperty('subtitle', changes['subtitle'].currentValue);
-          break;
-        case 'suggestions':
-          this.setHostProperty('suggestions', changes['suggestions'].currentValue);
-          break;
-        case 'disabled':
-          this.setHostProperty('disabled', changes['disabled'].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-suggestion-selected', (event: Event) => {
-        const typed = event as CustomEvent<AiChatEmptyStateSuggestionSelectedDetail>;
-        this.luzmoSuggestionSelected.emit(typed);
-      })
-    );
-  }
-}
-
-/** The underlying custom element type for LuzmoAiChatEmptyState */
-export type LuzmoAiChatEmptyStateElement = LuzmoAiChatEmptyStateHostElement;