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

package/components/data-fields-select/data-fields-select.d.ts

@@ -0,0 +1,137 @@
+import '@luzmo/lucero/select';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import type { AdHocFormulaInput } from '../../types/dataset-data-field.types';
+import type { Placement } from '@luzmo/lucero';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import type { DatasetFormulaMetadata, DatasetMetadata } from '../../utils/data-broker';
+/** A formula entry is either a saved formula (with `id`) or an ad hoc formula (with `formula` expression). */
+type FormulaEntry = DatasetFormulaMetadata | AdHocFormulaInput;
+declare const LuzmoDataFieldsSelect_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-data-fields-select
+ * @fires {CustomEvent<DataFieldsSelectedEventDetail>} luzmo-data-fields-selected - Emitted when data fields are selected
+ */
+export declare class LuzmoDataFieldsSelect extends LuzmoDataFieldsSelect_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The accessible label for the select (used for aria-label)
+     */
+    label?: string;
+    /**
+     * Where to show icons
+     */
+    icons?: 'none' | 'menu-only' | 'all';
+    /**
+     * Whether datetime and hierarchy columns expand into selectable sublevels. Turn this off in
+     * contexts that address the column as a whole, so the column stays selectable by its own id.
+     */
+    levels: 'on' | 'off';
+    /**
+     * Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item.
+     */
+    allowEmpty: boolean;
+    /**
+     * The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label.
+     */
+    placeholder?: string;
+    /**
+     * Whether the picker allows single or multiple selections.
+     * @default 'single'
+     */
+    selects: 'single' | 'multiple';
+    /**
+     * The IDs of the selected data fields. If not provided, the first item will be selected when `allowEmpty` is false and the picker is not readonly.
+     */
+    value: string[];
+    /**
+     * Whether the picker is in retrieving state (shows loading indicator)
+     */
+    retrieving: boolean;
+    /**
+     * Whether the picker is invalid - eg. the dataFieldId is not found in the datasetsDataFields or query failed to fetch data
+     */
+    invalid: boolean;
+    /**
+     * Whether the picker is clearable
+     */
+    clearable: boolean;
+    /**
+     * Whether the picker is in pending state
+     */
+    pending: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /** Prevents selection changes while preserving the picker's normal appearance. */
+    readonly: boolean;
+    /** Keeps the picker editable while applying the select's reduced-chrome treatment. */
+    quiet: boolean;
+    /**
+     * Whether to show a search field in the dropdown
+     */
+    search?: 'on' | 'off' | 'auto';
+    /**
+     * The placement of the dropdown menu
+     */
+    placement: Placement;
+    /**
+     * The datasets and their dataFields to display.
+     * The `formulas` array accepts both saved formulas (with `id`) and ad hoc formulas
+     * (with a `formula` expression string). Ad hoc formulas render inline with a formula icon.
+     */
+    datasetsDataFields: (Pick<DatasetMetadata, 'id' | 'name' | 'columns'> & {
+        formulas: FormulaEntry[];
+    })[];
+    private _dataFieldsSelected;
+    private _lastEmittedValue;
+    private _pendingAutoSelectEvent;
+    /** Type guard: returns true when the formula entry is an ad hoc formula (has `formula` expression). */
+    private _isAdHocFormula;
+    private _sendChangeEvent;
+    private _toDataFieldData;
+    private _toAdHocFormulaFieldData;
+    /**
+     * Searches the formulas array (which may contain both saved and ad hoc formulas) for a match.
+     */
+    private _findFormulaMatch;
+    /**
+     * Resolves a selected value (which may be a compound sublevel value) to a DatasetDataField.
+     * Returns the resolved field and whether a dataset match was found.
+     */
+    private _resolveDataFieldFromValue;
+    setDataField(event: CustomEvent): void;
+    private _normalizeValueForLevels;
+    private _findDataFieldsInDatasetsDataFields;
+    private _getAutoSelectValue;
+    private _autoSelectInitialDataField;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Build expandable children for a datetime column based on its highestLevel / lowestLevel range.
+     */
+    private _buildDatetimeChildren;
+    /**
+     * Build expandable children for a hierarchy column based on its hierarchyLevels.
+     */
+    private _buildHierarchyChildren;
+    /**
+     * Returns true when a column should render expandable datetime children.
+     */
+    private _isExpandableDatetime;
+    /**
+     * Returns true when a column should render expandable hierarchy children.
+     */
+    private _isExpandableHierarchy;
+    protected render(): TemplateResult;
+}
+export {};

package/components/data-fields-select/index.d.ts

@@ -0,0 +1,9 @@
+import { LuzmoDataFieldsSelect } from './data-fields-select';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-data-fields-select': LuzmoDataFieldsSelect;
+    }
+}
+export { LuzmoDataFieldsSelect } from './data-fields-select';
+export type { AdHocFormulaFieldData, AdHocFormulaInput } from '../../types/dataset-data-field.types';
+export type { DataFieldsSelectedEventDetail } from './types';

package/components/data-fields-select/types.d.ts

@@ -0,0 +1,4 @@
+import type { DatasetDataField } from '../../types/dataset-data-field.types';
+export interface DataFieldsSelectedEventDetail {
+    dataFields: DatasetDataField[];
+}

package/components/dataset-icon/dataset-icon.d.ts

@@ -0,0 +1,45 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { DatasetIcon } from './types';
+/**
+ * Thumbnail size options
+ */
+export type ThumbnailSize = '32px' | '64px';
+/**
+ * Partial record type for thumbnails
+ */
+export type PartialRecord<K extends keyof any, T> = {
+    [P in K]?: T;
+};
+/**
+ * Public connectors list - these are well-known connectors that may have CSS-based icons
+ * This list should match the one from `@shared-lib`
+ */
+export declare const publicConnectors: readonly ["amazonathena", "asana", "bigquery", "citybikes", "clickhouse", "demodataplugin", "elasticsearch", "exact", "exactonline", "exactonlinenl", "google", "googleanalytics", "googleanalyticsv4", "googledrive", "hubspot", "mailchimp", "mariadb", "mongodb", "mysql", "oracle", "panoply", "pipedrive", "pipelinedb", "postgresql", "presto", "redshift", "salesforce", "saphana", "snowflake", "sqlserver", "stardog", "synapse", "teamleader", "trino", "typeform", "zendesk"];
+/**
+ * @customElement luzmo-dataset-icon
+ * @summary Displays an icon for a dataset based on its type, thumbnails, and connector
+ */
+export declare class LuzmoDatasetIcon extends LitElement {
+    static styles: import("lit").CSSResult;
+    static tagName: string;
+    /**
+     * The dataset information containing subtype and thumbnail data
+     */
+    datasetInfo?: DatasetIcon;
+    /**
+     * The size of the icon
+     * @default '32px'
+     */
+    size: '16px' | '24px' | '32px' | '48px' | '64px';
+    /**
+     * The base URL for the application (used for thumbnail URLs)
+     */
+    appUrl: string;
+    private _subtype;
+    private _isPublicConnector;
+    private _thumbnails;
+    private readonly thumbnailSizeMap;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _updateDatasetProperties;
+    protected render(): TemplateResult;
+}

package/components/dataset-icon/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoDatasetIcon } from './dataset-icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-dataset-icon': LuzmoDatasetIcon;
+    }
+}
+export { LuzmoDatasetIcon } from './dataset-icon';
+export type { DatasetIcon } from './types';

package/components/dataset-icon/types.d.ts

@@ -0,0 +1,11 @@
+export interface DatasetIcon {
+    subtype: string;
+    account?: {
+        plugin?: {
+            thumbnails?: {
+                url: string;
+                size: string;
+            }[];
+        };
+    };
+}

package/components/dataset-selector-list/dataset-selector-list.d.ts

@@ -0,0 +1,106 @@
+import { LitElement, TemplateResult } from 'lit';
+import '../dataset-icon';
+/**
+ * @customElement luzmo-dataset-selector-list
+ * @summary A list component for selecting datasets with search and infinite scroll
+ * @fires {CustomEvent<Dataset>} dataset-selected - Fired when a dataset is selected
+ *
+ * @property {string} --dataset-selector-list-background - Background color of the list
+ * @property {string} --dataset-selector-list-padding - Padding of the list
+ * @property {string} --dataset-selector-list-gap - Gap between elements
+ * @property {string} --dataset-selector-list-border-radius - Border radius of the list
+ * @property {string} --dataset-selector-list-input-background - Background color of the search input
+ * @property {string} --dataset-selector-list-input-border-color - Border color of the search input
+ * @property {string} --dataset-selector-list-input-color - Text color of the search input
+ * @property {string} --dataset-selector-list-input-padding - Padding of the search input
+ * @property {string} --dataset-selector-list-item-padding - Padding of dataset items
+ * @property {string} --dataset-selector-list-item-gap - Gap between item elements
+ * @property {string} --dataset-selector-list-item-hover-background - Hover background color of dataset items
+ * @property {string} --dataset-selector-list-search-highlight-background - Background color for matched search terms
+ * @property {string} --dataset-selector-list-search-highlight-color - Text color for matched search terms
+ * @property {string} --dataset-selector-list-scrollbar-width - Width of the scrollbar
+ * @property {string} --dataset-selector-list-scrollbar-track-background - Background of scrollbar track
+ * @property {string} --dataset-selector-list-scrollbar-thumb-background - Background of scrollbar thumb
+ * @property {string} --dataset-selector-list-scrollbar-thumb-hover-background - Hover background of scrollbar thumb
+ */
+export declare class LuzmoDatasetSelectorList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Set of dataset IDs that are already selected and should be filtered out
+     */
+    set selectedDatasets(value: Set<string>);
+    get selectedDatasets(): Set<string>;
+    private _selectedDatasets;
+    /**
+     * Whether to show the search input field
+     */
+    showSearch: boolean;
+    /**
+     * Placeholder text for the search input
+     */
+    searchPlaceholder: string;
+    /**
+     * Message to show when no datasets are found
+     */
+    noDatasetsMessage: string;
+    /**
+     * Whether to highlight matched search terms in dataset names
+     */
+    highlightSearchMatches: boolean;
+    /**
+     * Auth key for DataBroker authentication
+     */
+    authKey: string;
+    /**
+     * Auth token for DataBroker authentication
+     */
+    authToken: string;
+    /**
+     * API URL for DataBroker
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /**
+     * The URL of the app server for thumbnails and assets
+     * @default https://app.luzmo.com
+     */
+    appServer: string;
+    /** When true, shows public datasets alongside the user's other datasets. */
+    includePublicDatasets: boolean;
+    /**
+     * Alias for includePublicDatasets.
+     * @deprecated Use includePublicDatasets instead.
+     */
+    get flagOpendata(): boolean;
+    set flagOpendata(value: boolean);
+    private _availableDatasets;
+    private _status;
+    private _searchValue;
+    private _currentOffset;
+    private _searchDebounceTimer;
+    private _queryCache;
+    private _calculatedQueryLimit;
+    private _hasLoadedEmptyPage;
+    connectedCallback(): void;
+    private _configureBroker;
+    private _waitForContainerHeightAndLoad;
+    private _calculateOptimalQueryLimit;
+    private get _filteredDatasets();
+    private _handleSearchInput;
+    private _handleScroll;
+    private _loadAvailableDatasets;
+    private _generateQuery;
+    private _onDatasetsLoaded;
+    private _shouldLoadMoreDatasetsForViewport;
+    private _getDatasetName;
+    private _escapeRegExp;
+    private _renderHighlightedDatasetName;
+    private _selectDataset;
+    private _handleDatasetClick;
+    private _handleDatasetKeydown;
+    private _renderLoader;
+    private _renderDatasetIcon;
+    private _renderSearchInput;
+    private _renderDatasetList;
+    protected render(): TemplateResult;
+}

package/components/dataset-selector-list/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoDatasetSelectorList } from './dataset-selector-list';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-dataset-selector-list': LuzmoDatasetSelectorList;
+    }
+}
+export { LuzmoDatasetSelectorList } from './dataset-selector-list';
+export type { Dataset } from '../../types/dataset.types';

package/components/dataset-selector-row/dataset-selector-row.d.ts

@@ -0,0 +1,144 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/select';
+import '@luzmo/lucero/tags';
+import '@luzmo/lucero/tooltip';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { Agent } from '../../types/agent.types';
+import type { Dataset } from '../../types/dataset.types';
+import '../dataset-icon';
+declare const LuzmoDatasetSelectorRow_base: typeof LitElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-dataset-selector-row
+ * @summary A row component for selecting and managing datasets with pills and overlay. The dropdown lists up to five saved Agents in a labelled section above the datasets, so a chat can be scoped to an agent from the same control; `hide-agents` turns that section off. Theme Lucero primitives (`luzmo-select`, options, popover, tags) with `--luzmo-select-*`, `--luzmo-popover-max-height`, `--luzmo-option-*`, `--luzmo-tag-*` on this host or an ancestor; optional `--luzmo-dataset-selector-row-*` overrides ACK row shell defaults (gap, typography, search max width, scoped popover height).
+ * @fires {CustomEvent<Dataset>} dataset-selected - Fired when a dataset is selected
+ * @fires {CustomEvent<Dataset>} dataset-removed - Fired when a dataset is removed
+ * @fires {CustomEvent<Agent>} luzmo-agent-selected - Fired when an agent is selected
+ * @fires {CustomEvent<Agent>} luzmo-agent-removed - Fired when the selected agent is removed
+ *
+ * @property {boolean} disabled - When true, disables all interactions: disables the add button, removes dataset pill delete buttons, and makes tags non-interactive
+ * @property {boolean} disable-dataset-modification - When true, disables dataset search and removal while leaving informational controls interactive
+ * @property {boolean} hide-dataset-icons - When true, hides dataset icons in selected tags and search options
+ * @property {number} max-visible-selected-datasets - Maximum number of selected dataset tags shown before the overflow control; unset shows all tags
+ * @property {boolean} hide-agents - When true, hides the Agents section and ignores `selectedAgent`
+ *
+ * @attr size - Size of the add trigger, the selected tags and the overflow button: `s`, `m` (default), `l` or `xl`
+ *
+ * @property {string} --luzmo-dataset-selector-row-gap - Gap between row elements
+ * @property {string} --luzmo-dataset-selector-row-min-height - Minimum height of the row
+ * @property {string} --luzmo-dataset-selector-row-font-size - Font size of the row
+ * @property {string} --luzmo-dataset-selector-row-color - Text color of the row
+ * @property {string} --luzmo-dataset-selector-row-font-family - Font family of the row
+ * @property {string} --luzmo-dataset-selector-row-search-max-width - Maximum width of the dataset search select
+ * @property {string} --luzmo-dataset-selector-row-search-popover-max-height - Optional scoped max height for this row’s search dropdown; falls back to inherited `--luzmo-popover-max-height`, then `400px`
+ */
+export declare class LuzmoDatasetSelectorRow extends LuzmoDatasetSelectorRow_base {
+    static styles: import("lit").CSSResult;
+    static tagName: string;
+    /**
+     * Array of selected datasets
+     */
+    selectedDatasets: Dataset[];
+    /**
+     * The agent the chat is scoped to, or null
+     */
+    selectedAgent: Agent | null;
+    /**
+     * When true, hides the Agents section and ignores `selectedAgent`
+     */
+    hideAgents: boolean;
+    /**
+     * Accessible label and hover tooltip text for the search trigger
+     */
+    buttonLabel?: string;
+    /**
+     * Auth key for DataBroker authentication
+     */
+    authKey: string;
+    /**
+     * Auth token for DataBroker authentication
+     */
+    authToken: string;
+    /**
+     * API URL for DataBroker
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /**
+     * The URL of the app server for thumbnails and assets
+     * @default https://app.luzmo.com
+     */
+    appServer: string;
+    /** When true, shows public datasets alongside the user's other datasets. */
+    includePublicDatasets: boolean;
+    /**
+     * Alias for includePublicDatasets.
+     * @deprecated Use includePublicDatasets instead.
+     */
+    get flagOpendata(): boolean;
+    set flagOpendata(value: boolean);
+    /**
+     * When true, disables all interactions with the component
+     */
+    disabled: boolean;
+    /** When true, disables dataset search and removal while leaving informational controls interactive. */
+    disableDatasetModification: boolean;
+    /**
+     * When true, hides dataset icons in selected tags and search options
+     */
+    hideDatasetIcons: boolean;
+    /** Maximum number of selected dataset tags shown before the overflow control; unset shows all tags. */
+    maxVisibleSelectedDatasets?: number;
+    private _availableDatasets;
+    private _availableAgents;
+    private _removalAnnouncement;
+    private _selectValue;
+    private _retrieving;
+    private _showAllSelectedDatasets;
+    private _searchValue;
+    private _activeSearchRequestId;
+    private _searchDebounceTimer;
+    private _announcementTimer;
+    private _loadedSections;
+    private _agentsLocale;
+    private get _selectedDatasetIds();
+    private get _triggerLabel();
+    private get _activeAgent();
+    private get _visibleSections();
+    private get _unloadedSections();
+    private get _hasSelection();
+    private get _datasetModificationDisabled();
+    private get _visibleSelectedDatasets();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _configureBroker;
+    private _loadAvailableOptions;
+    private _generateQuery;
+    private _generateAgentQuery;
+    private _handleSearch;
+    private _handleSearchOpened;
+    private _handleSearchClosed;
+    private _handleOptionSelected;
+    private _selectAgent;
+    private _selectDataset;
+    private _handleDatasetRemoved;
+    private _handleAgentRemoved;
+    private _announceRemoval;
+    private _renderDatasetTag;
+    private _renderAgentTag;
+    private _getDatasetOptions;
+    private _getAgentOptions;
+    private _getOptions;
+    private _renderDatasetOptionIcon;
+    private _renderDatasetSearch;
+    /** Icons and the trigger tooltip sit one step below the row size, matching the trigger at the default size. */
+    private get _oneSizeSmaller();
+    private _createDatasetRemovedHandler;
+    private _handleShowAllDatasets;
+    protected render(): TemplateResult;
+}
+export {};

package/components/dataset-selector-row/index.d.ts

@@ -0,0 +1,9 @@
+import { LuzmoDatasetSelectorRow } from './dataset-selector-row';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-dataset-selector-row': LuzmoDatasetSelectorRow;
+    }
+}
+export { LuzmoDatasetSelectorRow } from './dataset-selector-row';
+export type { Agent } from '../../types/agent.types';
+export type { Dataset } from '../../types/dataset.types';

package/components/display-settings/display-settings.d.ts

@@ -0,0 +1,117 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/divider';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/multi-language-field';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/text-field';
+import '@luzmo/lucero/tooltip';
+import { CSSResultArray, TemplateResult } from 'lit';
+import type { SlotName } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+import type { PeriodOverPeriodCondition } from '../../utils/time/period-over-period-condition.const';
+import type { DatasetDataFields } from '../data-field-panel/types';
+import type { SlotContent } from '../../types/slot.types';
+import { MeasureColumnsItem } from '../slot-menu/types';
+import '../formula';
+declare const LuzmoDisplaySettings_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-display-settings
+ * @fires {CustomEvent<DisplaySettingsSlotContentChangedEventDetail>} luzmo-slot-content-changed - Event that is fired when the slot content is changed
+ * @fires {CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>} luzmo-remove-slot-content - Event that is fired when the remove button is clicked
+ * @fires {CustomEvent<InfoVisibilityChangedEventDetail>} luzmo-info-visibility-changed - Event that is fired when the info button is clicked, includes the visibility state and ID values
+ */
+export declare class LuzmoDisplaySettings extends LuzmoDisplaySettings_base {
+    static get styles(): CSSResultArray;
+    private _loadDisplaySettings;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * Whether to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns
+     */
+    hideDisplaySettings?: boolean;
+    /**
+     * Whether to show the binning in numeric
+     */
+    isBinningDisabled?: boolean;
+    /**
+     * Whether to show the datetime options
+     */
+    areDatetimeOptionsEnabled?: boolean;
+    /**
+     * Whether to show the grand totals
+     */
+    areGrandTotalsEnabled?: boolean;
+    /**
+     * Whether to show the aggregation options
+     */
+    isAggregationDisabled?: boolean;
+    /**
+     * Whether to show the cumulative sum options
+     */
+    isCumulativeSumEnabled?: boolean;
+    /**
+     * Whether to show the period-over-period in numeric
+     */
+    periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
+    /**
+     * Whether to show the trash button next to the label
+     */
+    showRemoveButton?: boolean;
+    /**
+     * The slot type
+     */
+    slotType?: string;
+    /** The slot name used to distinguish measure and dimension calculations. */
+    slotName: SlotName;
+    /** The slot content model (label, formatting, aggregation, etc.) for the field being configured. */
+    slotContent: SlotContent;
+    /** Datasets used to resolve column names in ad-hoc calculation previews. */
+    datasetsDataFields: DatasetDataFields[];
+    /**
+     * The API URL used when resolving calculation previews by dataset id.
+     */
+    apiUrl?: string;
+    /**
+     * The auth key used when resolving calculation previews by dataset id.
+     */
+    authKey?: string;
+    /**
+     * The auth token used when resolving calculation previews by dataset id.
+     */
+    authToken?: string;
+    private _showIds;
+    /**
+     * The list of columns that can be used for the rate aggregation
+     */
+    measureColumns: MeasureColumnsItem[];
+    private _multiLanguageFieldElement;
+    private _settingsTypeLoaded;
+    private _currentSlotContent;
+    private _lastStoreContent;
+    private _store;
+    private _datasetDatetimeColumns;
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    private get datasetId();
+    private get formulaOrColumnId();
+    resetInfoVisibility(shouldEmitEvent: boolean): void;
+    private _onSlotContentChange;
+    private _onLabelChange;
+    private _sendEvent;
+    private _removeEvent;
+    private _toggleIds;
+    private _renderExampleRow;
+    private _renderDisplaySettings;
+    protected render(): TemplateResult | TemplateResult<1> | undefined;
+    disconnectedCallback(): void;
+}
+export {};

package/components/display-settings/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoDisplaySettings } from './display-settings';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-display-settings': LuzmoDisplaySettings;
+    }
+}
+export { LuzmoDisplaySettings } from './display-settings';
+export type { InfoVisibilityChangedEventDetail, DisplaySettingsSlotContentChangedEventDetail, DisplaySettingsRemoveSlotContentEventDetail } from './types';

package/components/display-settings/types.d.ts

@@ -0,0 +1,9 @@
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+export interface DisplaySettingsSlotContentChangedEventDetail {
+    slotContent: GenericSlotContent;
+}
+export type DisplaySettingsRemoveSlotContentEventDetail = DisplaySettingsSlotContentChangedEventDetail;
+export interface InfoVisibilityChangedEventDetail {
+    isVisible: boolean;
+    slotContent: GenericSlotContent;
+}

package/components/display-settings-binning/display-settings-binning.d.ts

@@ -0,0 +1,32 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/number-field';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+declare const LuzmoDisplaySettingsBinning_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-display-settings-binning
+ * @fires {CustomEvent<DisplaySettingsSlotContentChangedEventDetail>} luzmo-slot-content-changed - Event that is fired when the slot content is changed
+ */
+export declare class LuzmoDisplaySettingsBinning extends LuzmoDisplaySettingsBinning_base {
+    static get styles(): CSSResultArray;
+    /** The slot content whose binning configuration (enabled state and bin width) is edited. */
+    slotContent: GenericSlotContent;
+    private _enabled;
+    private _binWidth;
+    private binWidthElement;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private toggleBinning;
+    private setBinning;
+    private sendEvent;
+    private renderBinWidth;
+    protected render(): TemplateResult;
+}
+export {};

package/components/display-settings-binning/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoDisplaySettingsBinning } from './display-settings-binning';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-display-settings-binning': LuzmoDisplaySettingsBinning;
+    }
+}
+export { LuzmoDisplaySettingsBinning } from './display-settings-binning';
+export type { DisplaySettingsSlotContentChangedEventDetail } from '../display-settings/types';