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

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

@@ -0,0 +1,180 @@
+import { Placement } from '@floating-ui/dom';
+import { type SlotConfig, type SlotPositioningConfig, type VizItemSlot, type VizItemType } from '@luzmo/dashboard-contents-types';
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import '../item-slot-drop';
+declare const LuzmoItemSlotDropPanel_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-item-slot-drop-panel
+ * @fires {CustomEvent<SlotsContentsChangedEventDetail>} luzmo-slots-contents-changed - Announces that the slots contents have changed
+ * @fires {CustomEvent<SlotConstraintTriggeredEventDetail>} luzmo-slot-constraint-triggered - Emitted when constraint-mode is 'event-only' and a change would trigger constraints
+ *
+ * @property {string} slots-panel - The main container for all slots
+ * @property {string} slots-grid - The grid container when positioned mode is enabled
+ * @property {string} slot-cell - The grid cell wrapper for each slot when positioned
+ * @property {string} item-slot-drop - The item slot drop element
+ */
+export declare class LuzmoItemSlotDropPanel extends LuzmoItemSlotDropPanel_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig;
+    private _positioningConfig;
+    /**
+     * The type of the item (e.g., 'bar-chart', 'line-chart', 'area-chart')
+     */
+    itemType?: VizItemType | string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * Optional custom slots configuration (overrides loaded config from item-type).
+     * Each slot defines what data types it accepts and its behavior.
+     *
+     * @example
+     * ```typescript
+     * slotsConfiguration = [
+     *   {
+     *     name: 'measure',
+     *     label: 'Measure',
+     *     type: 'numeric',
+     *     canAcceptMultipleDataFields: true,
+     *     canAcceptFormula: true,
+     *     acceptableDataFieldTypes: ['numeric'],
+     *     options: { isCumulativeSumEnabled: true }
+     *   },
+     *   {
+     *     name: 'category',
+     *     label: 'Category',
+     *     type: 'categorical',
+     *     clearWhenOtherSlotHasMultipleItems: ['measure']
+     *   }
+     * ]
+     * ```
+     */
+    slotsConfiguration?: SlotConfig[];
+    /**
+     * Optional custom positioning configuration for grid layout (overrides loaded config).
+     * Only used when `positioned` attribute is true.
+     *
+     * @example
+     * ```typescript
+     * positioningConfiguration = {
+     *   grid: {
+     *     columns: 3,
+     *     rows: 2,
+     *     columnSizes: ['2.5rem', '1fr', '2.5rem'],
+     *     rowSizes: ['1fr', '2.5rem'],
+     *     gap: '0.25rem'
+     *   },
+     *   slots: {
+     *     'measure': { column: 2, row: 1, align: 'center', justify: 'center' },
+     *     'x-axis': { column: 2, row: 2, align: 'center', justify: 'center' },
+     *     'y-axis': { column: 1, row: 1, rotate: true }
+     *   }
+     * }
+     * ```
+     */
+    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.
+     *
+     * @example
+     * ```typescript
+     * slotsContents = [
+     *   {
+     *     name: 'measure',
+     *     content: [
+     *       { columnId: 'col_123', datasetId: 'ds_456', label: { en: 'Revenue' } }
+     *     ]
+     *   },
+     *   {
+     *     name: 'x-axis',
+     *     content: [
+     *       { columnId: 'col_789', datasetId: 'ds_456', label: { en: 'Date' }, level: 5 }
+     *     ]
+     *   }
+     * ]
+     * ```
+     */
+    slotsContents: VizItemSlot[];
+    /**
+     * Whether to use grid-based positioning for slots
+     * When true, loads the positioning config and renders slots in a CSS grid
+     * @default false
+     */
+    positioned: boolean;
+    /**
+     * Boundary element selector for drag operations
+     */
+    dragBoundary?: string;
+    /**
+     * Placement of the slot menu popover
+     */
+    slotMenuPlacement: Placement;
+    /**
+     * Whether to hide the delete button on item slot drop targets
+     * @default false
+     */
+    hideDelete: boolean;
+    /**
+     * Whether to hide the configuration button on item slot drop targets
+     * @default false
+     */
+    hideConfiguration: boolean;
+    /**
+     * Whether the item slot drop targets grow to full width
+     * @default false
+     */
+    grows?: boolean;
+    /**
+     * Controls how slot constraints are handled
+     * - 'auto': Constraints are applied immediately (default)
+     * - 'event-only': Emit event with constraint details, let consumer decide
+     * @default 'auto'
+     */
+    constraintMode: 'auto' | 'event-only';
+    /**
+     * The type of menu interaction for item slot drop targets
+     * @default 'default'
+     */
+    slotMenuMode: 'default' | 'draggable' | 'event-only';
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    private _currentSlotsContents;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Extract the dataset ID from a slot content item
+     */
+    private _getDatasetIdFromContent;
+    /**
+     * Check if a dataset is linked to existing datasets in slots
+     */
+    private _isDatasetLinked;
+    private _applySlotConstraints;
+    private _createSlotChangeHandler;
+    private _getPositioningConfig;
+    private _renderSlot;
+    private _renderPositionedSlots;
+    private _renderSlots;
+    render(): TemplateResult | undefined;
+}
+export {};

package/components/item-slot-picker/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemSlotPicker } from './item-slot-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-slot-picker': LuzmoItemSlotPicker;
+    }
+}
+export { LuzmoItemSlotPicker } from './item-slot-picker';
+export type { SlotContentsChangedEventDetail } from '../item-slot-drop/types';

package/components/item-slot-picker/item-slot-picker.d.ts

@@ -0,0 +1,149 @@
+import { Placement } from '@floating-ui/dom';
+import { SlotConfig, SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/tooltip';
+import { PropertyValues } from 'lit';
+import type { DatasetsDataFields } from '../../types/dataset.types';
+import type { SlotContent } from '../../types/slot.types';
+import { LuzmoElement } from '../../utils/base';
+import '../data-fields-select';
+import './../display-settings';
+import './../slot-menu';
+declare const LuzmoItemSlotPicker_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-item-slot-picker
+ * @fires {CustomEvent<SlotContentsChangedEventDetail>} luzmo-slot-contents-changed - Announces that the slot contents has changed
+ */
+export declare class LuzmoItemSlotPicker extends LuzmoItemSlotPicker_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig;
+    /**
+     * The API URL for the databroker
+     */
+    apiUrl?: string;
+    /**
+     * The API key to fetch the columns
+     */
+    authKey?: string;
+    /**
+     * The API token to fetch the columns
+     */
+    authToken?: string;
+    /**
+     * The type of the item
+     */
+    itemType?: VizItemType | string;
+    /**
+     * The name of the slot
+     */
+    slotName?: SlotName;
+    /**
+     * (Optional) The configuration of the slot, overrides the slot configuration loaded from the item type & slot name.
+     */
+    slotConfiguration: SlotConfig;
+    /**
+     * The contents of the slot
+     */
+    slotContents: SlotContent[];
+    /**
+     * The language to use for locale-aware formatting and labels of data fields
+     */
+    contentLanguage: string;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the picker grows to full width
+     * @default false
+     */
+    grows: boolean;
+    /**
+     * The type of config interaction
+     */
+    menu: 'default' | 'draggable' | 'event-only';
+    /**
+     * Whether the picker has a label
+     */
+    hasLabel: boolean;
+    /**
+     * The label for the picker, if hasLabel is true
+     */
+    label?: string;
+    /**
+     * Whether the picker allows single or multiple selections. Only relevant if the slot configuration allows multiple data fields.
+     * @default 'multiple'
+     */
+    selects: 'single' | 'multiple';
+    /** Whether the search input is visible: `on`, `off`, or `auto`. */
+    search?: 'on' | 'off' | 'auto';
+    /**
+     * Where to show icons
+     */
+    icons?: 'none' | 'menu-only' | 'all';
+    /**
+     * The placeholder text for the picker is no value selected.
+     */
+    placeholder?: string;
+    /**
+     * The datasets and their dataFields to display
+     */
+    datasetsDataFields: DatasetsDataFields[];
+    /**
+     * Placement of the data-fields-select dropdown
+     */
+    placement: Placement;
+    /**
+     * Placement of the slot menu popover. Only relevant for 'popup' and 'draggable' menu type
+     */
+    slotMenuPlacement: Placement;
+    /**
+     * Whether to hide the configuration button
+     * @default false
+     */
+    hideConfiguration?: boolean;
+    /**
+     * Whether to hide the clear button op a select
+     * @default false
+     */
+    hideClear: boolean;
+    private _hasExtraEmptySelects;
+    private _currentSlotContents;
+    private readonly _store;
+    /** Type guard: returns true when the formula entry is an ad hoc formula (has `formula` expression). */
+    private _isAdHocFormula;
+    constructor();
+    private _changedSlotContents;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _onSlotMenuChanges;
+    private _setSlotContentAtIndex;
+    private _setSlotContents;
+    private _renderFieldLabel;
+    private _removeEmptySelect;
+    private _getAcceptableDataFields;
+    private _getFirstAvailableDataField;
+    private _hasAvailableDataFields;
+    private _addDataField;
+    private _renderExtraDataFieldButton;
+    private _renderSingleSelect;
+    private _renderMultipleSelect;
+    private _renderMultipleSelectionControl;
+    private _getSelectValueForSlotContent;
+    private _getFilteredDatasetsDataFields;
+    private _clearCalculation;
+    private _renderCalculation;
+    private _renderSelectMenu;
+    private _handleSelectChange;
+    private _itemSlotPickerMarkup;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}
+export {};

package/components/item-slot-picker-panel/index.d.ts

@@ -0,0 +1,9 @@
+import { LuzmoItemSlotPickerPanel } from './item-slot-picker-panel';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-slot-picker-panel': LuzmoItemSlotPickerPanel;
+    }
+}
+export { LuzmoItemSlotPickerPanel } from './item-slot-picker-panel';
+export type { SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail, DatasetConstraintTriggeredEventDetail } from '../../types/slot.types';
+export type { DatasetChangedEventDetail } from '../data-field-panel/types';

package/components/item-slot-picker-panel/item-slot-picker-panel.d.ts

@@ -0,0 +1,230 @@
+import { Placement } from '@floating-ui/dom';
+import { SlotConfig, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/select';
+import { PropertyValues, TemplateResult } from 'lit';
+import type { DatasetsDataFields } from '../../types/dataset.types';
+import { LuzmoElement } from '../../utils/base';
+import { type DatasetMetadata } from '../../utils/data-broker';
+import '../item-slot-picker';
+declare const LuzmoItemSlotPickerPanel_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-item-slot-picker-panel
+ * @fires {CustomEvent<SlotsContentsChangedEventDetail>} luzmo-slots-contents-changed - Announces that the slots contents have changed
+ * @fires {CustomEvent<SlotConstraintTriggeredEventDetail>} luzmo-slot-constraint-triggered - Emitted when constraint-mode is 'event-only' and a change would trigger constraints
+ * @fires {CustomEvent<DatasetChangedEventDetail>} luzmo-dataset-changed - Announces that the selected dataset has changed
+ * @fires {CustomEvent<DatasetConstraintTriggeredEventDetail>} luzmo-dataset-constraint-triggered - Emitted when constraint-mode is 'event-only' and dataset change would clear slots
+ *
+ * @property {string} container - The main container element
+ * @property {string} dataset-picker - The dataset picker container (label + select)
+ * @property {string} dataset-field-label - The field label element above the dataset picker
+ * @property {string} slots-panel - The main container for all slots
+ * @property {string} slot-container - The container for each individual slot (label + picker)
+ * @property {string} field-label - The field label element above each slot
+ * @property {string} item-slot-picker - The item slot picker element
+ *
+ * @property {string} [--luzmo-item-slot-picker-panel-gap=--luzmo-spacing-4] - Gap between slot containers
+ * @property {string} [--luzmo-item-slot-picker-panel-slot-gap=--luzmo-spacing-2] - Gap between label and picker within a slot
+ * @property {string} [--luzmo-item-slot-picker-panel-dataset-picker-gap=--luzmo-spacing-2] - Gap between dataset label and select
+ * @property {string} [--luzmo-item-slot-picker-panel-dataset-picker-margin-block-end=--luzmo-spacing-4] - Margin below the dataset picker section
+ * @property {string} [--luzmo-item-slot-picker-panel-dataset-picker-padding-block-end=--luzmo-spacing-4] - Padding below the dataset picker content
+ * @property {string} [--luzmo-item-slot-picker-panel-dataset-picker-border-width=1px] - Border width of the dataset picker divider
+ * @property {string} [--luzmo-item-slot-picker-panel-dataset-picker-border-color=--luzmo-border-color] - Border color of the dataset picker divider
+ */
+export declare class LuzmoItemSlotPickerPanel extends LuzmoItemSlotPickerPanel_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig;
+    /**
+     * Dataset list items for the picker (id, name, description only).
+     * Loaded separately from the full dataset data using virtual infinite scroll.
+     */
+    private _datasetListItems;
+    /**
+     * Whether the dataset list is being retrieved (for infinite scroll).
+     */
+    private _datasetListRetrieving;
+    /**
+     * Whether the dataset list is in initial pending state.
+     */
+    private _datasetListPending;
+    /**
+     * Whether the dataset names fetch has been attempted (regardless of success or failure).
+     * Used to prevent showing pending state forever after an error.
+     */
+    private _datasetNamesFetchAttempted;
+    /**
+     * Whether there are more datasets to load.
+     */
+    private _hasMoreDatasets;
+    private _currentDatasetId?;
+    /**
+     * Fetched datasets with columns and formulas (when using datasetIds).
+     * This is populated by the _loadDataFieldsTask.
+     */
+    private _fetchedDatasetsDataFields;
+    /**
+     * Set of dataset IDs that failed to fetch or don't exist.
+     * Used to prevent infinite retry loops for invalid datasets.
+     */
+    private _failedDatasetIds;
+    /**
+     * Task for loading data fields for the current dataset.
+     * Automatically re-runs when dependencies change.
+     */
+    private _loadDataFieldsTask;
+    /**
+     * The type of the item (e.g., 'bar-chart', 'line-chart', 'area-chart')
+     */
+    itemType?: VizItemType | string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * Optional custom slots configuration (overrides loaded config)
+     */
+    slotsConfiguration?: SlotConfig[];
+    /**
+     * The contents of all slots
+     */
+    slotsContents: VizItemSlot[];
+    /**
+     * Whether the picker allows single or multiple selections per slot
+     * @default 'multiple'
+     */
+    selects: 'single' | 'multiple';
+    /**
+     * Whether the search input is visible in data field pickers
+     * @default 'auto'
+     */
+    dataFieldsSearch?: 'on' | 'off' | 'auto';
+    /**
+     * Whether the search input is visible in the dataset picker
+     * @default 'auto'
+     */
+    datasetSearch?: 'on' | 'off' | 'auto';
+    /**
+     * Where to show icons in pickers
+     */
+    icons?: 'none' | 'menu-only' | 'all';
+    /**
+     * The datasets and their dataFields to display in pickers.
+     * Takes preference over datasetIds when provided.
+     */
+    datasetsDataFields: Array<DatasetsDataFields & Pick<DatasetMetadata, 'description'>>;
+    /**
+     * Array of dataset IDs to fetch and display.
+     * Used as an alternative to datasetsDataFields - when provided (and datasetsDataFields is empty),
+     * the component will fetch the dataset metadata automatically.
+     * Requires apiUrl, authKey, and authToken to be set.
+     */
+    datasetIds: string[];
+    /**
+     * The currently selected dataset ID.
+     * If not provided, defaults to the first available dataset.
+     */
+    selectedDatasetId?: string;
+    /**
+     * Whether to show the dataset picker dropdown.
+     * @default false
+     */
+    datasetPicker: boolean;
+    /**
+     * Custom label for the dataset picker field. Overrides the default "Dataset" label.
+     */
+    datasetPickerLabel?: string;
+    /**
+     * The Luzmo API URL. Required when using datasetIds.
+     * @default 'https://api.luzmo.com'
+     */
+    apiUrl: string;
+    /**
+     * Authentication key for the Luzmo API. Required when using datasetIds.
+     */
+    authKey?: string;
+    /**
+     * Authentication token for the Luzmo API. Required when using datasetIds.
+     */
+    authToken?: string;
+    /**
+     * Placement of the dataset picker and item slot picker popovers
+     */
+    placement: Placement;
+    /**
+     * Placement of the slot menu popover
+     */
+    slotMenuPlacement: Placement;
+    /**
+     * Controls how slot constraints are handled
+     * - 'auto': Constraints are applied immediately (default)
+     * - 'event-only': Emit event with constraint details, let consumer decide
+     * @default 'auto'
+     */
+    constraintMode: 'auto' | 'event-only';
+    /**
+     * Whether the pickers grow to full width
+     * @default false
+     */
+    grows: boolean;
+    private _currentSlotsContents;
+    /**
+     * Get the available datasets for the picker (id, name, description only).
+     */
+    private get _availableDatasets();
+    /**
+     * Get the currently selected dataset's data fields
+     */
+    private get _currentDatasetsDataFields();
+    /**
+     * Check if the picker should use API fetching (datasetPicker enabled and no direct data)
+     */
+    private get _shouldFetchDatasetList();
+    /**
+     * Check if datasets are linked (share relations)
+     */
+    private _areDatasetsLinked;
+    /**
+     * Get all dataset IDs currently used in slots
+     */
+    private _getUsedDatasetIds;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _updateCurrentDatasetId;
+    /**
+     * Fetch dataset names and descriptions for the picker.
+     * Uses lightweight API call - columns/formulas are lazy-loaded when a dataset is selected.
+     */
+    private _fetchDatasetNamesForPicker;
+    /**
+     * Load more datasets for the picker (virtual infinite scroll).
+     */
+    private _loadMoreDatasets;
+    /**
+     * Handle scroll event from the dataset picker for infinite scroll.
+     */
+    private _handlePickerScrolled;
+    /**
+     * Handle picker opened event - load initial data if needed.
+     */
+    private _handlePickerOpened;
+    /**
+     * Handle dataset change from the picker
+     */
+    private _handleDatasetChange;
+    private _getSlotContents;
+    private _applySlotConstraints;
+    private _createSlotChangeHandler;
+    private _getTranslatedLabel;
+    private _renderDatasetPicker;
+    private _renderSlot;
+    private _renderSlots;
+    private _renderContent;
+    render(): TemplateResult | undefined;
+}
+export {};

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

@@ -0,0 +1,10 @@
+import { LuzmoSlotMenu } from './slot-menu';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-slot-menu': LuzmoSlotMenu;
+    }
+}
+export { LuzmoSlotMenu } from './slot-menu';
+export type { MeasureColumnsItem, SlotContentChangedEventDetail, SlotListChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from './types';
+export type { InfoVisibilityChangedEventDetail } from '../display-settings/types';
+export type { SlotContentsChangedEventDetail } from '../item-slot-drop/types';