@kelvininc/ui-components
Version:
Kelvin UI Components
1,228 lines • 56.9 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EValidationState } from "../text-field/text-field.types";
import { EMPTY_STRING, INVALID_VALUE_ERROR, MINIMUM_SEARCHABLE_OPTIONS, SINGLE_SELECT_CLEAR_SELECTION_LABEL } from "./single-select-dropdown.config";
import { EComponentSize } from "../../types";
import { getClassMap } from "../../utils/css-class.helper";
import { getCssStyle } from "../utils";
import { buildSingleSelectOptions, getDropdownCustomCss, getDropdownDisplayIcon } from "./single-select-dropdown.helper";
import { getFlattenSelectOptions } from "../../utils/select.helper";
import { DEFAULT_DROPDOWN_Z_INDEX } from "../../globals/config";
import { merge } from "lodash-es";
/**
* @part select - The select container.
*/
export class KvSingleSelectDropdown {
constructor() {
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.required = false;
/** @inheritdoc */
this.errorState = EValidationState.None;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.inputSize = EComponentSize.Large;
/** @inheritdoc */
this.customClass = '';
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.options = {};
/** @inheritdoc */
this.searchable = true;
/** @inheritdoc */
this.clearSelectionLabel = SINGLE_SELECT_CLEAR_SELECTION_LABEL;
/** @inheritdoc */
this.minSearchOptions = MINIMUM_SEARCHABLE_OPTIONS;
/** @inheritdoc */
this.shortcuts = false;
/** @inheritdoc */
this.showShortcuts = false;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
/** @inheritdoc */
this.canAddItems = false;
/** @inheritdoc */
this.autoFocus = true; // eslint-disable-line @stencil-community/reserved-member-names
this.rebuildScheduled = false;
this.scheduleRebuild = () => {
if (this.rebuildScheduled)
return;
this.rebuildScheduled = true;
queueMicrotask(() => {
this.rebuildScheduled = false;
this.buildSelectionOptions();
this.calculateLabelValue();
});
};
this.onOptionSelected = (event) => {
event.stopPropagation();
const { detail: selectedOptionKey } = event;
this.selectOption(selectedOptionKey);
this.highlightedOption = selectedOptionKey;
};
this.onDismiss = () => {
this.setOpenState(false);
this.dismiss.emit();
};
this.onSearchChange = ({ detail: searchTerm }) => {
this.setSearch(searchTerm);
};
this.onOpenStateChange = ({ detail: state }) => {
this.setOpenState(state);
};
this.onClearSelection = () => {
this.optionSelected.emit(undefined);
this.clearSelection.emit();
this.calculateLabelValue();
};
this.onOptionCreated = ({ detail: newOptionKey }) => {
this.optionCreated.emit(newOptionKey);
};
this.selectOption = (selectedOption) => {
this.optionSelected.emit(selectedOption);
this.setOpenState(false);
};
this.focusSearchInput = () => {
setTimeout(() => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch(); });
};
this.setOpenState = (state) => {
if (state) {
if (this.autoFocus) {
this.focusSearchInput();
}
}
else {
this.setSearch('');
this.closeCreatePopup();
}
this.highlightedOption = undefined;
this.isOpen = state;
this.openStateChange.emit(state);
this.clearHighlightedOption();
};
this.setSearch = (searchTerm) => {
this._searchValue = searchTerm;
this.searchChange.emit(searchTerm);
};
this.getInputConfig = () => {
var _a, _b;
return merge({}, this.inputConfig, {
label: this.label,
value: this._selectionDisplayValue,
valuePrefix: this.displayPrefix,
loading: this.loading,
inputDisabled: this.disabled,
inputRequired: this.required,
placeholder: this.placeholder,
state: this.errorState,
helpText: this.helpText,
size: this.inputSize,
badge: this.badge,
isDirty: this.selectedOption && this.options && ((_a = this.options[this.selectedOption]) === null || _a === void 0 ? void 0 : _a.isDirty),
icon: (_b = getDropdownDisplayIcon(this.selectedOption, this.selectOptions.flatten)) !== null && _b !== void 0 ? _b : this.icon,
customStyle: getDropdownCustomCss(this.selectedOption, this.selectOptions.flatten)
});
};
this.clearHighlightedOption = () => {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.clearHighlightedOption();
};
this.closeCreatePopup = () => {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.closeCreatePopup();
};
this.calculateLabelValue = () => {
var _a, _b;
if ((_a = this.displayValue) === null || _a === void 0 ? void 0 : _a.length) {
this._selectionDisplayValue = this.displayValue;
return;
}
if (this.selectedOption && ((_b = this.selectOptions) === null || _b === void 0 ? void 0 : _b.flatten[this.selectedOption])) {
this._selectionDisplayValue = this.selectOptions.flatten[this.selectedOption].label;
return;
}
this._selectionDisplayValue = undefined;
};
this.validateSelectedOptionValue = () => {
if (this.selectedOption === EMPTY_STRING) {
throw new Error(INVALID_VALUE_ERROR);
}
};
this.buildSelectionOptions = () => {
const selectOptions = buildSingleSelectOptions(this.options);
const filteredSelectOptions = this.filteredOptions ? buildSingleSelectOptions(this.filteredOptions) : undefined;
const selectFlattenOptions = getFlattenSelectOptions(selectOptions);
this.selectOptions = {
total: selectOptions,
filtered: filteredSelectOptions,
flatten: selectFlattenOptions
};
};
}
optionsChangeHandler() {
this.scheduleRebuild();
}
selectedOptionChangeHandler() {
this.validateSelectedOptionValue();
this.calculateLabelValue();
}
displayValueChangeHandler() {
this.calculateLabelValue();
}
filterOptionsChangeHandler() {
this.scheduleRebuild();
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch();
}
componentWillLoad() {
this.validateSelectedOptionValue();
this.buildSelectionOptions();
this.calculateLabelValue();
}
getMaxHeight() {
var _a;
const maxHeight = getCssStyle(this.el, '--dropdown-max-height');
return (_a = this.maxHeight) !== null && _a !== void 0 ? _a : maxHeight;
}
getMinHeight() {
var _a;
const minHeight = getCssStyle(this.el, '--dropdown-min-height');
return (_a = this.minHeight) !== null && _a !== void 0 ? _a : minHeight;
}
getMaxWidth() {
var _a;
const maxWidth = getCssStyle(this.el, '--dropdown-max-width');
return (_a = this.maxWidth) !== null && _a !== void 0 ? _a : maxWidth;
}
getMinWidth() {
var _a;
const minWidth = getCssStyle(this.el, '--dropdown-min-width');
return (_a = this.minWidth) !== null && _a !== void 0 ? _a : minWidth;
}
get selectedOptions() {
return this.selectedOption ? { [this.selectedOption]: true } : {};
}
connectedCallback() {
if (this.autoFocus) {
this.focusSearchInput();
}
}
render() {
return (h(Host, { key: '4b7590ba6e30ba2d3650f012e0df5e1cd69b8e65' }, h("kv-dropdown", { key: '961c15e0dff4d88d69de41912048de270903ee98', inputConfig: this.getInputConfig(), isOpen: this.isOpen, onOpenStateChange: this.onOpenStateChange, disabled: this.disabled, options: this.dropdownOptions, clickOutsideClose: this.clickOutsideClose, actionElement: this.actionElement, zIndex: this.zIndex }, h("slot", { key: '6144ec1787cc225746b824e3ca8fec10ad565233', name: "right-slot", slot: "right-slot" }), h("slot", { key: 'a4433167c06ec6c70b815777a42a33b64897106b', name: "left-slot", slot: "left-slot" }), h("slot", { key: 'cad85f7a8e681778945b8f76b3bd0f7f99b13bfb', name: "dropdown-action", slot: "dropdown-action" }), h("div", { key: '1459e958549adf73649fd62478357be30f71fb43', class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { 'single-select-dropdown-slot': true }) }, h("kv-select-multi-options", { key: 'bde933426b770f432564ef3cfb6a16106f8ad9c8', ref: element => (this.selectRef = element), options: this.selectOptions.total, filteredOptions: this.selectOptions.filtered, selectedOptions: this.selectedOptions, noDataAvailableConfig: this.noDataAvailableConfig, noResultsFoundConfig: this.noResultsFoundConfig, searchable: this.searchable, minSearchOptions: this.minSearchOptions, searchValue: this._searchValue, selectionClearable: this.selectionClearable, clearSelectionLabel: this.clearSelectionLabel, selectionAll: this.selectionAll, selectAllLabel: this.selectAllLabel, searchPlaceholder: this.searchPlaceholder, createInputPlaceholder: this.createInputPlaceholder, createOptionPlaceholder: this.createOptionPlaceholder, maxHeight: this.getMaxHeight(), minHeight: this.getMinHeight(), maxWidth: this.getMaxWidth(), minWidth: this.getMinWidth(), counter: this.counter, shortcuts: this.isOpen && this.shortcuts, showShortcuts: this.showShortcuts, onSearchChange: this.onSearchChange, onClearSelection: this.onClearSelection, onOptionSelected: this.onOptionSelected, onOptionCreated: this.onOptionCreated, onDismiss: this.onDismiss, canAddItems: this.canAddItems, exportparts: "select,select-option-icon" }, h("slot", { key: '18d8a952d27eead433350ec7c7031fd42c4b2547', name: "create-new-option", slot: "create-new-option" }), h("slot", { key: 'df8750ee1178a798e054bdb81cc6d453f0601ccd', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: '0929d5fe3bf2cba2722c4541e146330036efceaf', name: "select-header-label", slot: "select-header-label" }), h("slot", { key: '2edefef48f3b7e92055c9b2eb9c02c5475bf15bf', name: "no-data-available", slot: "no-data-available" }), h("slot", { key: '5732c9c22db1cf77fc978caae33e9eb9a36b7959', name: "no-results-found", slot: "no-results-found" }), h("slot", { key: '3f50b627592700132253bca262ea5be21d7f853c', name: "select-footer", slot: "select-footer" })), h("slot", { key: '8cdbc0340ea2b532f6a965ca51ae4b9ca5f35093' })))));
}
static get is() { return "kv-single-select-dropdown"; }
static get originalStyleUrls() {
return {
"$": ["single-select-dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["single-select-dropdown.css"]
};
}
static get properties() {
return {
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The text to display as the dropdown placeholder"
},
"getter": false,
"setter": false,
"reflect": true
},
"isOpen": {
"type": "boolean",
"attribute": "is-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the dropdown is opened"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the dropdown is loading"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The icon to display on the dropdown"
},
"getter": false,
"setter": false,
"reflect": true
},
"required": {
"type": "boolean",
"attribute": "required",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` dropdown requires a value to be selected"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text to display on the dropdown label"
},
"getter": false,
"setter": false,
"reflect": true
},
"displayValue": {
"type": "string",
"attribute": "display-value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text to display on the dropdown"
},
"getter": false,
"setter": false,
"reflect": true
},
"displayPrefix": {
"type": "string",
"attribute": "display-prefix",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text to display as a prefix to `displayValue`"
},
"getter": false,
"setter": false,
"reflect": true
},
"badge": {
"type": "string",
"attribute": "badge",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text to display inside a badge on the right side of the displayed value"
},
"getter": false,
"setter": false,
"reflect": true
},
"errorState": {
"type": "string",
"attribute": "error-state",
"mutable": false,
"complexType": {
"original": "EValidationState",
"resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid",
"references": {
"EValidationState": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::EValidationState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The error state for the dropdown"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EValidationState.None"
},
"helpText": {
"type": "string",
"attribute": "help-text",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text to display as help text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "[]"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the dropdown is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"inputSize": {
"type": "string",
"attribute": "input-size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The size of the input"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Large"
},
"dropdownOptions": {
"type": "unknown",
"attribute": "dropdown-options",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown position config options"
},
"getter": false,
"setter": false
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"clickOutsideClose": {
"type": "boolean",
"attribute": "click-outside-close",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"actionElement": {
"type": "unknown",
"attribute": "action-element",
"mutable": false,
"complexType": {
"original": "HTMLElement | null",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A reference to the dropdown action element"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "ISelectSingleOptions",
"resolved": "{ [x: string]: ISelectSingleOption; }",
"references": {
"ISelectSingleOptions": {
"location": "import",
"path": "./single-select-dropdown.types",
"id": "src/components/single-select-dropdown/single-select-dropdown.types.ts::ISelectSingleOptions"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The object with the dropdown options"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"selectedOption": {
"type": "string",
"attribute": "selected-option",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The value of the selected option"
},
"getter": false,
"setter": false,
"reflect": true
},
"filteredOptions": {
"type": "unknown",
"attribute": "filtered-options",
"mutable": false,
"complexType": {
"original": "ISelectSingleOptions",
"resolved": "{ [x: string]: ISelectSingleOption; }",
"references": {
"ISelectSingleOptions": {
"location": "import",
"path": "./single-select-dropdown.types",
"id": "src/components/single-select-dropdown/single-select-dropdown.types.ts::ISelectSingleOptions"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The object with the dropdown options filtered"
},
"getter": false,
"setter": false
},
"noDataAvailableConfig": {
"type": "unknown",
"attribute": "no-data-available-config",
"mutable": false,
"complexType": {
"original": "IIllustrationMessage",
"resolved": "IIllustrationMessage",
"references": {
"IIllustrationMessage": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::IIllustrationMessage"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The configuration for the \"no data available\" empty state illustration"
},
"getter": false,
"setter": false
},
"noResultsFoundConfig": {
"type": "unknown",
"attribute": "no-results-found-config",
"mutable": false,
"complexType": {
"original": "IIllustrationMessage",
"resolved": "IIllustrationMessage",
"references": {
"IIllustrationMessage": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::IIllustrationMessage"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The configuration for the \"no results found\" empty state illustration"
},
"getter": false,
"setter": false
},
"searchable": {
"type": "boolean",
"attribute": "searchable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `false` the dropdown is not searchable. Default `true`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"searchPlaceholder": {
"type": "string",
"attribute": "search-placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The list search text field placeholder"
},
"getter": false,
"setter": false,
"reflect": true
},
"selectionClearable": {
"type": "boolean",
"attribute": "selection-clearable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` dropdown items can be cleared"
},
"getter": false,
"setter": false,
"reflect": true
},
"clearSelectionLabel": {
"type": "string",
"attribute": "clear-selection-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The clear selection action text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "SINGLE_SELECT_CLEAR_SELECTION_LABEL"
},
"minHeight": {
"type": "string",
"attribute": "min-height",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's min-height"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxHeight": {
"type": "string",
"attribute": "max-height",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's max-height"
},
"getter": false,
"setter": false,
"reflect": true
},
"minWidth": {
"type": "string",
"attribute": "min-width",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's min-width"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxWidth": {
"type": "string",
"attribute": "max-width",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's max-width"
},
"getter": false,
"setter": false,
"reflect": true
},
"selectionAll": {
"type": "boolean",
"attribute": "selection-all",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list has an action to select all items"
},
"getter": false,
"setter": false,
"reflect": true
},
"selectAllLabel": {
"type": "string",
"attribute": "select-all-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The selection all action text"
},
"getter": false,
"setter": false,
"reflect": true
},
"counter": {
"type": "boolean",
"attribute": "counter",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` a selection counter is displayed"
},
"getter": false,
"setter": false,
"reflect": true
},
"minSearchOptions": {
"type": "number",
"attribute": "min-search-options",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The minimum amount of options required to display the search. Defaults to `15`."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "MINIMUM_SEARCHABLE_OPTIONS"
},
"shortcuts": {
"type": "boolean",
"attribute": "shortcuts",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the keyboard shortcuts can be used to navigate between the dropdown results. Default `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"showShortcuts": {
"type": "boolean",
"attribute": "show-shortcuts",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": ""
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"zIndex": {
"type": "number",
"attribute": "z-index",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) the dropdown list z-index (default: 9004)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "DEFAULT_DROPDOWN_Z_INDEX"
},
"canAddItems": {
"type": "boolean",
"attribute": "can-add-items",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` an add option will appear at the bottom of options list. Default: `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"createInputPlaceholder": {
"type": "string",
"attribute": "create-input-placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The create form input placeholder"
},
"getter": false,
"setter": false,
"reflect": true
},
"createOptionPlaceholder": {
"type": "string",
"attribute": "create-option-placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The create new option placeholder. Default: `Add a new option`"
},
"getter": false,
"setter": false,
"reflect": true
},
"inputConfig": {
"type": "unknown",
"attribute": "input-config",
"mutable": false,
"complexType": {
"original": "Partial<ITextField>",
"resolved": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; hideBadge?: boolean; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ITextField": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::ITextField"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text field options"
},
"getter": false,
"setter": false
},
"autoFocus": {
"type": "boolean",
"attribute": "auto-focus",
"mutable": false,
"complexType": {
"original": "boolea