LLM-friendly URL

Item Slot Picker Panel

Introduction

luzmo-item-slot-picker-panel renders dropdown pickers for every slot of a given chart type. It is the picker-based counterpart to luzmo-item-slot-drop-panel -- same purpose, but users select fields from dropdowns instead of dragging them. This makes it a good fit for mobile or form-style layouts.

The panel automatically loads slot configurations, enforces slot constraints, and optionally includes a dataset picker. You can also pass dataset and field metadata from your own application state if you prefer full control.

Use the <luzmo-item-slot-picker-panel> element in your HTML.

Interactive example

Slot pickers<luzmo-item-slot-picker-panel>

Live bar chart<luzmo-viz-item>

Properties

Use HTML attributes for primitive values in markup, and JS properties for objects, arrays, and programmatic updates.

Property	HTML attribute	Type	Description
`apiUrl`	`api-url`	`string`	Luzmo API URL used when fetching datasets by `datasetIds` . Default: `https://api.luzmo.com` .
`authKey`	`auth-key`	`string \| undefined`	Auth key used by the data broker.
`authToken`	`auth-token`	`string \| undefined`	Auth token used by the data broker.
`constraintMode`	`constraint-mode`	`'auto' \| 'event-only'`	How constraints are handled. Default: `auto` .
`contentLanguage`	`content-language`	`string`	Language used for locale-aware formatting and data labels. Default: `en` .
`dataFieldsSearch`	`data-fields-search`	`'on' \| 'off' \| 'auto' \| undefined`	Search visibility in slot pickers. Default: `auto` .
`datasetIds`	—	`string[]`	Dataset IDs to fetch when `datasetsDataFields` is not provided.
`datasetPicker`	`dataset-picker`	`boolean`	Enables the dataset picker section. Default: `false` .
`datasetPickerLabel`	`dataset-picker-label`	`string \| undefined`	Custom label for the dataset picker field.
`datasetsDataFields`	—	`Array<DatasetsDataFields & { description?: Record<string, string> }>`	Datasets (with columns/formulas) for all pickers. Takes precedence over `datasetIds` .
`datasetSearch`	`dataset-search`	`'on' \| 'off' \| 'auto' \| undefined`	Search visibility in the dataset picker. Default: `auto` .
`grows`	`grows`	`boolean`	Makes pickers fill the available width. Default: `false` .
`icons`	`icons`	`'none' \| 'menu-only' \| 'all' \| undefined`	Where to show data-type icons in pickers. Default: `menu-only` .
`itemType`	`item-type`	`VizItemType \| string`	Chart type used to load slot configuration.
`language`	`language`	`string`	UI language. Default: `en` .
`placement`	`placement`	`Placement`	Placement of the dataset picker and slot pickers popovers. Default: `bottom-start` .
`selectedDatasetId`	`selected-dataset-id`	`string \| undefined`	Currently selected dataset ID. Defaults to the first available dataset.
`selects`	`selects`	`'single' \| 'multiple'`	Selection mode for each slot picker. Default: `multiple` .
`size`	`size`	`'s' \| 'm' \| 'l' \| 'xl'`	Size variant.
`slotMenuPlacement`	`slot-menu-placement`	`Placement`	Slot menu placement. Default: `bottom-end` .
`slotsConfiguration`	—	`SlotConfiguration[] \| undefined`	Optional explicit slot configuration (overrides the config loaded from `itemType` ).
`slotsContents`	—	`VizItemSlots`	The full slots state for the item. This is the source of truth for the rendered pickers.

Events

Name	Payload type	Description
`luzmo-slots-contents-changed`	`CustomEvent<{ slotsContents: VizItemSlots }>`	Fired when the overall slots state changes after constraints are applied.
`luzmo-slot-constraint-triggered`	`CustomEvent<SlotConstraintTriggeredEventDetail>`	Fired only in `constraint-mode="event-only"` when the proposed change would trigger constraints. The panel does not apply the change and asks you to decide whether to apply `event.detail.proposedSlotsContents` .
`luzmo-dataset-changed`	`CustomEvent<{ datasetId: string }>`	Fired when the selected dataset changes.
`luzmo-dataset-constraint-triggered`	`CustomEvent<{ previousDatasetId?: string; newDatasetId: string; currentSlotsContents: VizItemSlots; wouldClearSlots: true }>`	Fired only in `constraint-mode="event-only"` when switching datasets would clear existing slot contents.

SlotConstraintTriggeredEventDetail is exported from @luzmo/analytics-components-kit/types .

Types

This entrypoint has no component-owned type exports. All useful types are imported from the shared types barrel.

import '@luzmo/analytics-components-kit/item-slot-picker-panel';

import type {
  DatasetChangedEventDetail,
  DatasetMetadata,
  DatasetsDataFields,
  Placement,
  SlotConfig,
  SlotConstraint,
  SlotConstraintTriggeredEventDetail,
  VizItemSlot,
  VizItemType
} from '@luzmo/analytics-components-kit/types';

Type	Import path	Description
`DatasetsDataFields`	`@luzmo/analytics-components-kit/types`	Input shape for the `datasetsDataFields` property. Expects separate `columns` and `formulas` arrays per dataset.
`DatasetMetadata`	`@luzmo/analytics-components-kit/types`	Rich dataset metadata. The component supports `DatasetsDataFields & Pick<DatasetMetadata, 'description'>` for direct data input with optional descriptions.
`DatasetChangedEventDetail`	`@luzmo/analytics-components-kit/types`	Event detail for `luzmo-dataset-changed` . Shape: `{ datasetId: string }` .
`SlotConfig`	`@luzmo/analytics-components-kit/types`	Shape for entries in the `slotsConfiguration` array.
`SlotConstraint`	`@luzmo/analytics-components-kit/types`	Describes a constraint rule that limits which fields can go into a slot.
`SlotConstraintTriggeredEventDetail`	`@luzmo/analytics-components-kit/types`	Event detail for `luzmo-slot-constraint-triggered` . Contains `proposedSlotsContents` for you to accept or reject.
`VizItemSlot`	`@luzmo/analytics-components-kit/types`	Element of the `slotsContents` array.
`VizItemType`	`@luzmo/analytics-components-kit/types`	String literal union of supported chart types.
`Placement`	`@luzmo/analytics-components-kit/types`	Popover/overlay placement values.

The luzmo-slots-contents-changed event does not currently have a named exported interface. Its payload shape is CustomEvent<{ slotsContents: VizItemSlot[] }> .

The luzmo-dataset-constraint-triggered event also uses an inline payload: CustomEvent<{ previousDatasetId?: string; newDatasetId: string; currentSlotsContents: VizItemSlot[]; wouldClearSlots: boolean }> .

CSS Variables

All CSS variables in this list can be set on luzmo-item-slot-picker-panel { ... } .

Variable	Description
`--luzmo-item-slot-picker-panel-font-size`	Base font size (used when `size` is not set).
`--luzmo-item-slot-picker-panel-font-size-s`	Font size for `size="s"` .
`--luzmo-item-slot-picker-panel-font-size-l`	Font size for `size="l"` .
`--luzmo-item-slot-picker-panel-font-size-xl`	Font size for `size="xl"` .
`--luzmo-item-slot-picker-panel-gap`	Gap between slot containers.
`--luzmo-item-slot-picker-panel-slot-gap`	Gap between the label and the picker inside a slot.
`--luzmo-item-slot-picker-panel-dataset-picker-gap`	Gap between dataset label and dataset select.
`--luzmo-item-slot-picker-panel-dataset-picker-margin-block-end`	Margin below the dataset picker section.
`--luzmo-item-slot-picker-panel-dataset-picker-padding-block-end`	Padding below the dataset picker section.
`--luzmo-item-slot-picker-panel-dataset-picker-border-width`	Border width of the dataset picker divider.
`--luzmo-item-slot-picker-panel-dataset-picker-border-color`	Border color of the dataset picker divider.

Code examples

index.html

Web component

Angular

React

React Native

Vue

<luzmo-item-slot-picker-panel
  id="pickerPanel"
  item-type="bar-chart"
  language="en"
  size="m"
  dataset-picker
></luzmo-item-slot-picker-panel>

<script type="module">
  import '@luzmo/analytics-components-kit/item-slot-picker-panel';

  const datasets = [
    {
      id: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
      name: { en: 'Sales' },
      columns: [
        { id: '2a7c5e41-6d8f-4b2a-93c1-7e5d4f6a8b12', name: { en: 'Revenue' }, type: 'numeric', format: '.2f' },
        { id: '9be2cf18-de60-4281-aad8-ef203b4c5d89', name: { en: 'Product' }, type: 'hierarchy' }
      ],
      formulas: []
    },
    {
      id: '0e9f1c66-5d4b-4a7d-9c1f-3b7e8d2a4f33',
      name: { en: 'Budgets' },
      columns: [
        { id: '6ebf9c85-ab3d-4f6e-97a5-bc9d8e0f2a56', name: { en: 'Budget' }, type: 'numeric', format: '.2f' },
        { id: '7fc0ad96-bc4e-406f-a8b6-cd0e9f1a3b67', name: { en: 'Department' }, type: 'hierarchy' }
      ],
      formulas: []
    }
  ];

  let slotsContents = [
    {
      name: 'measure',
      content: [
        {
          datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
          columnId: '2a7c5e41-6d8f-4b2a-93c1-7e5d4f6a8b12',
          label: { en: 'Revenue' },
          type: 'numeric',
          aggregationFunc: 'sum'
        }
      ]
    }
  ];

  const pickerPanel = document.getElementById('pickerPanel');

  pickerPanel.datasetsDataFields = datasets;
  pickerPanel.selectedDatasetId = '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11';
  pickerPanel.slotsContents = slotsContents;

  pickerPanel.addEventListener('luzmo-slots-contents-changed', (event) => {
    slotsContents = event.detail.slotsContents;
    pickerPanel.slotsContents = slotsContents;
  });

  pickerPanel.addEventListener('luzmo-dataset-changed', (event) => {
    console.log('dataset changed', event.detail.datasetId);
  });
</script>

Did this page help you?

Yes