package.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of multi-select-combo-box Show documentation
Show all versions of multi-select-combo-box Show documentation
vaadin-multi-select-combo-box
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/multi-select-combo-box",
"version": "24.4.9",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-multi-select-combo-box",
"description": "`` is a web component that wraps `` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n` itself, the following internal\ncomponents are themable:\n\n- `` - has the same API as ``.\n- `` - has the same API as ``.\n- `` - has the same API as ``.\n\nNote: the `theme` attribute value set on `` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helper-text",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name-ref",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value of the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "clear-button-visible",
"description": "Set to true to display the clear icon which clears the input.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "allowed-char-pattern",
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "auto-expand-horizontally",
"description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "auto-expand-vertically",
"description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "auto-open-disabled",
"description": "Set true to prevent the overlay from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "item-label-path",
"description": "The item property used for a visual representation of the item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "item-value-path",
"description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "item-id-path",
"description": "Path for the id of the item, used to detect whether the item is selected.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "keep-filter",
"description": "When true, filter string isn't cleared after selecting an item.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "loading",
"description": "True when loading items from the data provider, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "overlay-class",
"description": "A space-delimited list of CSS class names to set on the overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "opened",
"description": "True if the dropdown is open, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "size",
"description": "Total number of items.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "page-size",
"description": "Number of items fetched at a time from the data provider.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "allow-custom-value",
"description": "When true, the user can input a value that is not present in the items list.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "filter",
"description": "Filtering string the user has typed into the input field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "selected-items-on-top",
"description": "Set to true to group selected items at the top of the overlay.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helperText",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "clearButtonVisible",
"description": "Set to true to display the clear icon which clears the input.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "allowedCharPattern",
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoExpandHorizontally",
"description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autoExpandVertically",
"description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autoOpenDisabled",
"description": "Set true to prevent the overlay from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "items",
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
"value": {
"type": [
"Array",
"null",
"undefined"
]
}
},
{
"name": "itemLabelPath",
"description": "The item property used for a visual representation of the item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "itemValuePath",
"description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "itemIdPath",
"description": "Path for the id of the item, used to detect whether the item is selected.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "i18n",
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Screen reader announcement on clear button click.\n cleared: 'Selection cleared',\n // Screen reader announcement when a chip is focused.\n focused: ' focused. Press Backspace to remove',\n // Screen reader announcement when item is selected.\n selected: 'added to selection',\n // Screen reader announcement when item is deselected.\n deselected: 'removed from selection',\n // Screen reader announcement of the selected items count.\n // {count} is replaced with the actual count of items.\n total: '{count} items selected',\n}\n```",
"value": {
"type": [
"MultiSelectComboBoxI18n"
]
}
},
{
"name": "keepFilter",
"description": "When true, filter string isn't cleared after selecting an item.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "loading",
"description": "True when loading items from the data provider, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "overlayClass",
"description": "A space-delimited list of CSS class names to set on the overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "selectedItems",
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
"value": {
"type": [
"Array",
"null",
"undefined"
]
}
},
{
"name": "opened",
"description": "True if the dropdown is open, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "size",
"description": "Total number of items.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "pageSize",
"description": "Number of items fetched at a time from the data provider.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "dataProvider",
"description": "Function that provides items lazily. Receives two arguments:\n\n- `params` - Object with the following properties:\n - `params.page` Requested page index\n - `params.pageSize` Current page size\n - `params.filter` Currently applied filter\n\n- `callback(items, size)` - Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items.",
"value": {
"type": [
"Object",
"null",
"undefined"
]
}
},
{
"name": "allowCustomValue",
"description": "When true, the user can input a value that is not present in the items list.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "renderer",
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `` internal container DOM element.\n- `comboBox` The reference to the `` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.",
"value": {
"type": [
"Function",
"null",
"undefined"
]
}
},
{
"name": "filter",
"description": "Filtering string the user has typed into the input field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "filteredItems",
"description": "A subset of items, filtered based on the user input. Filtered items\ncan be assigned directly to omit the internal filtering functionality.\nThe items can be of either `String` or `Object` type.",
"value": {
"type": [
"Array",
"null",
"undefined"
]
}
},
{
"name": "selectedItemsOnTop",
"description": "Set to true to group selected items at the top of the overlay.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "validated",
"description": "Fired whenever the field is validated."
},
{
"name": "change",
"description": "Fired when the user commits a value change."
},
{
"name": "input",
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
},
{
"name": "custom-value-set",
"description": "Fired when the user sets a custom value."
},
{
"name": "selected-items-changed",
"description": "Fired when the `selectedItems` property changes."
},
{
"name": "opened-changed",
"description": "Fired when the `opened` property changes."
},
{
"name": "filter-changed",
"description": "Fired when the `filter` property changes."
},
{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
}
]
}
}
]
}
}
}