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

package/components/item-option-number-field/item-option-number-field.d.ts

@@ -0,0 +1,38 @@
+import '@luzmo/lucero/number-field';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-number-field
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionNumberField extends LuzmoItemOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    /** Whether the control is disabled (non-interactive). */
+    disabled: boolean;
+    /** The minimum allowed value. */
+    min?: number;
+    /** The maximum allowed value. */
+    max?: number;
+    /** The default value used when no value is set. */
+    default?: number;
+    /** The current numeric value. */
+    value?: number;
+    /** Placeholder text shown when the field is empty. */
+    placeholder?: string;
+    /** Minimum width of the input field (CSS length). */
+    minWidthInputField?: string;
+    /** The increment between values. */
+    step: number;
+    /** Unit suffix shown after the value. */
+    unit: boolean;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce: number;
+    /** Optional transform applied to the stored value before it is displayed in the control. */
+    parseValue?: (value?: string | number) => number;
+    /** Optional transform applied to the control's value before it is emitted in the change event. */
+    toValue?: (value?: number) => string | number | any;
+    private numberField;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout: any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/item-option-panel/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionPanel } from './item-option-panel';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-panel': LuzmoItemOptionPanel;
+    }
+}
+export { LuzmoItemOptionPanel } from './item-option-panel';
+export type { ItemOptionsChangedEventDetail } from '../item-option/types';

package/components/item-option-panel/item-option-panel.d.ts

@@ -0,0 +1,77 @@
+import type { OptionsConfig, Slot, ThemeConfig, TranslationOverrides, TranslationsFile, VizItemType } from '@luzmo/dashboard-contents-types';
+import '@luzmo/lucero/accordion';
+import '@luzmo/lucero/divider';
+import { type TemplateResult } from 'lit';
+import { ElementSize, LuzmoElement } from '../../utils/base';
+import './../item-option';
+/**
+ * @customElement luzmo-item-option-panel
+ * @fires {CustomEvent<ItemOptionsChangedEventDetail>} luzmo-options-changed - Announces that the `options` of the element have changed
+ */
+export declare class LuzmoItemOptionPanel extends LuzmoElement {
+    static styles: import("lit").CSSResult;
+    private _loadItemConfig;
+    /**
+     * The language in which to display the option configuration controls.
+     */
+    language: string;
+    /**
+     * The item type to load the configuration for. Leave empty if using a custom options configuration.
+     */
+    itemType: VizItemType;
+    /**
+     * The options of the item.
+     */
+    options?: Record<string, unknown>;
+    /**
+     * The slots of the item.
+     */
+    slots?: Slot[];
+    /**
+     * When using a custom options configuration, this is the configuration object.
+     */
+    customOptionsConfiguration?: OptionsConfig;
+    /**
+     * When using a custom translations configuration, this is the configuration object.
+     */
+    customTranslations?: TranslationOverrides | TranslationsFile;
+    /**
+     * The theme of the item.
+     */
+    theme?: ThemeConfig & Record<string, any>;
+    /**
+     * The size of the item option panel component.
+     */
+    size: ElementSize;
+    /**
+     * 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;
+    private _itemTypeLoaded?;
+    private _languageLoaded?;
+    private _optionsConfiguration;
+    private _translations;
+    private _translationOverrides?;
+    private _groupTranslationOverrides?;
+    private _hasCustomTranslationsFile;
+    private _isCustomOptionsConfiguration;
+    private renderAllGroups;
+    private renderGroup;
+    private changedOptions;
+    private renderOptionControl;
+    private renderDivider;
+    render(): TemplateResult | TemplateResult<1> | undefined;
+    private _getOptionTranslation;
+    private _getTranslationsFile;
+    private _getTranslationOverrides;
+}

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

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionPicker } from './item-option-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-picker': LuzmoItemOptionPicker;
+    }
+}
+export { LuzmoItemOptionPicker } from './item-option-picker';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

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

@@ -0,0 +1,29 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/picker';
+import { TemplateResult } from 'lit';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-picker
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionPicker extends LuzmoItemOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    /** The available options to choose from (key → label). */
+    values: Record<string, string>;
+    /** Whether the control is disabled (non-interactive). */
+    disabled: boolean;
+    /** Placement of the picker dropdown relative to its trigger. */
+    placement: Placement;
+    /** The currently selected option key. */
+    value?: string;
+    /** Optional transform applied to the stored value before it is displayed in the control. */
+    parseValue?: (value: string | number | any) => string;
+    /** Optional transform applied to the control's value before it is emitted in the change event. */
+    toValue?: (value: string) => string | number | any;
+    /** The default option key used when no value is set. */
+    default?: string;
+    private _handleEvent;
+    private generateMenuItems;
+    protected renderController(): TemplateResult<1>;
+}

package/components/item-option-position-picker/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionPositionPicker } from './item-option-position-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-position-picker': LuzmoItemOptionPositionPicker;
+    }
+}
+export { LuzmoItemOptionPositionPicker } from './item-option-position-picker';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

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

@@ -0,0 +1,22 @@
+import '@luzmo/lucero/text-field';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-position-picker
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionPositionPicker extends LuzmoItemOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    /** The currently selected position. */
+    value?: string;
+    /** The default position used when no value is set (e.g. `topRight`). */
+    default: string;
+    /** The set of positions offered for selection. */
+    positions?: string[];
+    /** Whether the control is read-only. */
+    readonly: boolean;
+    private _handleEvent;
+    private _handleClick;
+    private _handleKeyDown;
+    protected willUpdate(): void;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/item-option-positions-number-field/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionPositionsNumberField } from './item-option-positions-number-field';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-positions-number-field': LuzmoItemOptionPositionsNumberField;
+    }
+}
+export { LuzmoItemOptionPositionsNumberField } from './item-option-positions-number-field';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

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

@@ -0,0 +1,44 @@
+import '@luzmo/lucero/number-field';
+import { CSSResultArray } from 'lit';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+export type Position = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+/**
+ * @customElement luzmo-item-option-positions-number-field
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionPositionsNumberField extends LuzmoItemOptionBase {
+    static get styles(): CSSResultArray;
+    /** Which positions to render input fields for (e.g. top/right/bottom/left, or corners and center). */
+    positions?: Position[];
+    /** The current numeric value for each position. */
+    values?: Record<Position, number | undefined>;
+    /** Whether the center lock control is shown to sync all positions to a single value. */
+    canSync?: boolean;
+    /** Per-position min/max/step/default constraints for the number inputs. */
+    positionConfiguration?: Record<Position, {
+        min?: number;
+        max?: number;
+        step?: number;
+        default?: number;
+    }>;
+    /** Whether the inputs are shown in an invalid state. */
+    invalid: boolean;
+    /** Whether the inputs are read-only. */
+    readonly: boolean;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce: number;
+    /** Whether all positions are currently synced to a single value. */
+    sync?: boolean;
+    /** The value applied to all positions when sync is enabled. */
+    syncedValue?: number;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout: any;
+    _positions: Position[][];
+    private _calculateSyncedValue;
+    toggleSync(): void;
+    private _handleEvent;
+    private _renderNumberField;
+    protected firstUpdated(): void;
+    protected willUpdate(): void;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/item-option-radio-button-group/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionRadioButtonGroup } from './item-option-radio-button-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-radio-button-group': LuzmoItemOptionRadioButtonGroup;
+    }
+}
+export { LuzmoItemOptionRadioButtonGroup } from './item-option-radio-button-group';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

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

@@ -0,0 +1,29 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/action-group';
+import { TemplateResult } from 'lit';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-radio-button-group
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionRadioButtonGroup extends LuzmoItemOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    /** The available options to choose from (key → label). */
+    values: Record<string, string>;
+    /** Whether the control is disabled (non-interactive). */
+    disabled: boolean;
+    /** The currently selected option key. */
+    value: string;
+    /** The default option key used when no value is set. */
+    default: string;
+    /** Optional transform applied to the stored value before it is displayed in the control. */
+    parseValue?: (value?: string | number | any) => string;
+    /** Optional transform applied to the control's value before it is emitted in the change event. */
+    toValue?: (value?: string) => string | number | any;
+    private actionGroup;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout: any;
+    private generateRadioButtons;
+    private _handleEvent;
+    protected renderController(): TemplateResult<1>;
+}

package/components/item-option-slider/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionSlider } from './item-option-slider';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-slider': LuzmoItemOptionSlider;
+    }
+}
+export { LuzmoItemOptionSlider } from './item-option-slider';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

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

@@ -0,0 +1,33 @@
+import '@luzmo/lucero/slider';
+import { type CSSResultArray } from 'lit';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-slider
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionSlider extends LuzmoItemOptionBase {
+    static get styles(): CSSResultArray;
+    /** The current slider value. */
+    value: number;
+    /** The default slider value used when no value is set. */
+    default: number;
+    /** The minimum slider value. */
+    min: number;
+    /** The maximum slider value. */
+    max: number;
+    /** The increment between slider values. */
+    step: number;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce: number;
+    /** Optional transform applied to the stored value before it is displayed in the control. */
+    parseValue?: (value?: string | number | any) => number;
+    /** Optional transform applied to the control's value before it is emitted in the change event. */
+    toValue?: (value?: number) => string | number | any;
+    private _slider;
+    private _debounceTimeout;
+    private _lastEmittedSliderValue?;
+    disconnectedCallback(): void;
+    private _emitOptionChanged;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/item-option-switch/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionSwitch } from './item-option-switch';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-switch': LuzmoItemOptionSwitch;
+    }
+}
+export { LuzmoItemOptionSwitch } from './item-option-switch';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

package/components/item-option-switch/item-option-switch.d.ts

@@ -0,0 +1,19 @@
+import '@luzmo/lucero/switch';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-switch
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionSwitch extends LuzmoItemOptionBase {
+    static styles: (import("lit").CSSResultOrNative | import("lit").CSSResultArray)[];
+    /** The current on/off state of the switch. */
+    value?: boolean;
+    /** The default on/off state used when no value is set. */
+    default?: boolean;
+    /** Optional transform applied to the stored value before it is displayed in the control. */
+    parseValue?: (value?: string | number | any) => boolean;
+    /** Optional transform applied to the control's value before it is emitted in the change event. */
+    toValue?: (value?: boolean) => string | number | any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/item-option-text-field/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemOptionTextField } from './item-option-text-field';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-text-field': LuzmoItemOptionTextField;
+    }
+}
+export { LuzmoItemOptionTextField } from './item-option-text-field';
+export type { ItemOptionChangedEventDetail } from '../item-option/types';

package/components/item-option-text-field/item-option-text-field.d.ts

@@ -0,0 +1,25 @@
+import '@luzmo/lucero/text-field';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-text-field
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ */
+export declare class LuzmoItemOptionTextField extends LuzmoItemOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    /** The current text value. */
+    value?: string;
+    /** Whether the control is shown in an invalid state. */
+    invalid: boolean;
+    /** Whether the control is read-only. */
+    readonly: boolean;
+    /** Placeholder text shown when the field is empty. */
+    placeholder?: string;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce: number;
+    private textFieldElement;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout: any;
+    _previousValue: string;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,11 @@
+import { LuzmoItemSlotDrop } from './item-slot-drop';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-slot-drop': LuzmoItemSlotDrop;
+    }
+}
+export { LuzmoItemSlotDrop } from './item-slot-drop';
+export type { SlotContentsChangedEventDetail } from './types';
+export type { InfoVisibilityChangedEventDetail } from '../display-settings/types';
+export type { SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '../slot-menu/types';
+export type { SlotConfig } from '@luzmo/dashboard-contents-types';

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

@@ -0,0 +1,113 @@
+import { SlotConfig, SlotName, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/tooltip';
+import { PropertyValues } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import './../slot-menu';
+declare const LuzmoItemSlotDrop_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
+ * @fires {CustomEvent<SlotContentsChangedEventDetail>} luzmo-slot-contents-changed - Announces that the slot contents has changed
+ * @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 overlay opens for a slot
+ * @fires {CustomEvent<SlotMenuHighlightEventDetail>} luzmo-slot-menu-highlight - Emitted to highlight the active column or formula in the slot menu
+ * @fires {CustomEvent} luzmo-slot-menu-inactive - Emitted when the slot menu overlay closes / becomes inactive.
+ */
+export declare class LuzmoItemSlotDrop extends LuzmoItemSlotDrop_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig?;
+    /** The visualization item type that determines the available slots and their configuration. */
+    itemType?: VizItemType;
+    /** The name of the slot this drop target represents. */
+    slotName?: SlotName;
+    /** The configuration for this slot (accepted field types, options, label, etc.). */
+    slotConfiguration: SlotConfig;
+    /** The full set of slot contents for the item; the entry matching `slotName` is rendered here. */
+    slotsContents: VizItemSlot[];
+    /** Overrides the slot's default 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`.
+     * @default 'en'
+     */
+    contentLanguage: string;
+    /** CSS selector for the boundary element that constrains dragging within the slot menu. */
+    dragBoundary?: string;
+    /** Renders the slot vertically. */
+    rotate: boolean;
+    /**
+     * 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;
+    /**
+     * The type of config interaction
+     */
+    menu: 'default' | 'draggable' | 'event-only';
+    /**
+     * Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type
+     */
+    placement: Placement;
+    /** Hides the delete button on filled slots. */
+    hideDelete?: boolean;
+    /** Hides the edit/configuration button and disables opening the slot menu. */
+    hideConfiguration?: boolean;
+    private _slotMenuElement;
+    private _overlayElement;
+    private _slotContents;
+    private _overlayReady;
+    private _overlayOpen;
+    private readonly _store;
+    private _currentSlotContents;
+    private _lastFetchedDatasetId;
+    private _linkedDatasetsIds;
+    constructor();
+    private _attachDroppable;
+    private _canDropField;
+    connectedCallback(): void;
+    /**
+     * Fires a cancelable slot-contents-changed event.
+     * Returns the event so caller can check event.defaultPrevented.
+     * Parent can call preventDefault() to reject the change (e.g., constraint triggered in event-only mode).
+     */
+    private changedSlotContents;
+    private _handleDragStart;
+    private _handleDragEnd;
+    private _cleanupDroppable;
+    disconnectedCallback(): void;
+    private emptySlotContents;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _processSlotsContents;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handle overlay open event - reset slot menu position
+     */
+    private _onOverlayClosed;
+    private _onOverlayOpened;
+    private _onSlotMenuChanges;
+    private _onInfoVisibilityChanged;
+    private get _fullLabel();
+    private _onLabelClick;
+    private _handleOverlayClick;
+    private _renderSlotLabel;
+    itemSlotDropMarkup(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}
+export {};

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

@@ -0,0 +1,5 @@
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+export interface SlotContentsChangedEventDetail {
+    slotContents: GenericSlotContent[];
+    linkedDatasetsIds: string[];
+}

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

@@ -0,0 +1,8 @@
+import { LuzmoItemSlotDropPanel } from './item-slot-drop-panel';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-slot-drop-panel': LuzmoItemSlotDropPanel;
+    }
+}
+export { LuzmoItemSlotDropPanel } from './item-slot-drop-panel';
+export type { SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail, DatasetConstraintTriggeredEventDetail } from '../../types/slot.types';