LLM-friendly URL

Item Slot Picker

Introduction

luzmo-item-slot-picker is a dropdown alternative to luzmo-item-slot-drop for configuring a single chart slot. Instead of dragging fields, users select columns or formulas from a dropdown menu. This is a good fit for compact forms, mobile layouts, or any interface where drag-and-drop is impractical.

Use this component when you want to place individual slot pickers yourself. To render all slot pickers for a chart type at once, use luzmo-item-slot-picker-panel instead.

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

Interactive example

Slot pickers<luzmo-item-slot-picker>

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
`contentLanguage`	`content-language`	`string`	Language used for locale-aware formatting and data labels. Default: `en` .
`datasetsDataFields`	—	`DatasetsDataFields[]`	Datasets (with columns/formulas) that can be selected.
`disabled`	`disabled`	`boolean`	Disables the picker UI. Default: `false` .
`grows`	`grows`	`boolean`	Makes the picker stretch to full width. Default: `false` .
`hasLabel`	`has-label`	`boolean`	Whether the picker renders a label. Default: `false` .
`hideClear`	`hide-clear`	`boolean`	Hides the clear button in the dropdown. Default: `false` .
`hideConfiguration`	`hide-configuration`	`boolean \| undefined`	Hides the slot menu (cog) control.
`icons`	`icons`	`'none' \| 'menu-only' \| 'all' \| undefined`	Where to show data-type icons. Default: `menu-only` .
`itemType`	`item-type`	`VizItemType \| string`	Chart type used to load the slot configuration.
`label`	`label`	`string \| undefined`	Label text (used when `hasLabel` is true).
`language`	`language`	`string`	UI language. Default: `en` .
`menu`	`menu`	`'default' \| 'draggable' \| 'event-only'`	Slot menu interaction mode. Default: `default` .
`placeholder`	`placeholder`	`string \| undefined`	Placeholder text when nothing is selected.
`placement`	`placement`	`Placement`	Dropdown placement. Default: `bottom-start` .
`search`	`search`	`'on' \| 'off' \| 'auto' \| undefined`	Search visibility in the dropdown. Default: `auto` .
`selects`	`selects`	`'single' \| 'multiple'`	Selection mode. Default: `multiple` .
`size`	`size`	`'s' \| 'm' \| 'l' \| 'xl'`	Size variant.
`slotConfiguration`	—	`SlotConfiguration`	Optional explicit slot configuration (overrides the config loaded from `itemType` ).
`slotContents`	—	`SlotContent[]`	Current contents of this slot.
`slotMenuPlacement`	`slot-menu-placement`	`Placement`	Slot menu placement. Default: `bottom-end` .
`slotName`	`slot-name`	`SlotName`	Slot identifier within the item type.

Events

Name	Payload type	Description
`luzmo-slot-contents-changed`	`CustomEvent<SlotContentsChangedEventDetail>`	Fired when selection changes. Cancelable; call `event.preventDefault()` to reject the change. Detail shape: `{ slotContents: GenericSlotContent[]; linkedDatasetsIds: string[] }` .

SlotContentsChangedEventDetail 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';

import type {
  AdHocFormulaFieldData,
  AdHocFormulaInput,
  DatasetDataField,
  DatasetFormulaMetadata,
  DatasetsDataFields,
  Placement,
  SlotConfig,
  SlotContent,
  SlotContentsChangedEventDetail,
  SlotName,
  VizItemType
} from '@luzmo/analytics-components-kit/types';

Type	Import path	Description
`DatasetsDataFields`	`@luzmo/analytics-components-kit/types`	Input shape for the `datasetsDataFields` property. Unlike the similarly named `DatasetDataFields` from `luzmo-data-field-panel` , this type expects separate `columns` and `formulas` arrays.
`DatasetDataField`	`@luzmo/analytics-components-kit/types`	Shape of a single data field (column or formula metadata).
`DatasetFormulaMetadata`	`@luzmo/analytics-components-kit/types`	Metadata shape for saved formulas inside the `formulas` array.
`AdHocFormulaInput`	`@luzmo/analytics-components-kit/types`	Input shape for ad-hoc (unsaved) formulas in the `formulas` array.
`AdHocFormulaFieldData`	`@luzmo/analytics-components-kit/types`	Field data shape for ad-hoc formulas once resolved into the field model.
`SlotConfig`	`@luzmo/analytics-components-kit/types`	Shape for a custom `slotConfiguration` when you override the config loaded from `itemType` .
`SlotContent`	`@luzmo/analytics-components-kit/types`	Shape of a single entry in the `slotContents` array (the selected value).
`SlotContentsChangedEventDetail`	`@luzmo/analytics-components-kit/types`	Event detail for `luzmo-slot-contents-changed` . Shape: `{ slotContents: GenericSlotContent[]; linkedDatasetsIds: string[] }` .
`SlotName`	`@luzmo/analytics-components-kit/types`	String literal union of valid slot identifiers.
`VizItemType`	`@luzmo/analytics-components-kit/types`	String literal union of supported chart types.
`Placement`	`@luzmo/analytics-components-kit/types`	Popover/overlay placement values.

CSS Variables

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

Variable	Description
`--luzmo-item-slot-picker-font-family`	Font family used by the picker.
`--luzmo-item-slot-picker-gap`	Vertical gap between the optional label and the picker.
`--luzmo-item-slot-picker-label-font-size`	Font size for the label.
`--luzmo-item-slot-picker-text-to-controls`	Margin between the label text and the controls area.
`--luzmo-item-slot-picker-controls-gap`	Gap between controls.
`--luzmo-item-slot-picker-controls-to-edge`	Margin between controls and trailing edge.
`--luzmo-item-slot-picker-controls-horizontal-padding`	Horizontal padding for the controls container.
`--luzmo-item-slot-picker-controls-control-horizontal-padding`	Horizontal padding for each control button.
`--luzmo-item-slot-picker-controls-background-color`	Controls background color.
`--luzmo-item-slot-picker-controls-color`	Controls icon color.
`--luzmo-item-slot-picker-data-fields-select-flex-grow`	Flex-grow of the internal data-fields select element.
`--luzmo-item-slot-picker-overlay-horizontal-gap`	Horizontal margin around the slot menu overlay (left/right placements).
`--luzmo-item-slot-picker-overlay-vertical-gap`	Vertical margin around the slot menu overlay (top/bottom placements).

Code examples

index.html

Web component

Angular

React

React Native

Vue

<luzmo-item-slot-picker
  id="measurePicker"
  item-type="bar-chart"
  slot-name="measure"
  language="en"
  size="m"
  has-label
  label="Measure"
  selects="multiple"
></luzmo-item-slot-picker>

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

  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: '3b8d6f52-7e9a-4c3b-a4d2-8f6e5a7b9c23', name: { en: 'Margin' }, type: 'numeric', format: '.2f' }
      ],
      formulas: []
    }
  ];

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

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

  measurePicker.datasetsDataFields = datasets;
  measurePicker.slotContents = slotContents;

  measurePicker.addEventListener('luzmo-slot-contents-changed', (event) => {
    slotContents = event.detail.slotContents;
    measurePicker.slotContents = slotContents;
  });
</script>

Did this page help you?

Yes