@kelvininc/ui-components
Version:
Kelvin UI Components
1,079 lines (1,078 loc) • 46.1 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { h } from "@stencil/core";
import { ADD_OPTION, DEFAULT_ADD_OPTION_PLACEHOLDER, MINIMUM_SEARCHABLE_OPTIONS, DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG, SELECT_OPTION_HEIGHT_IN_PX, DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG } from "./select-multi-options.config";
import { EToggleState } from "../select-option/select-option.types";
import { isEmpty } from "lodash-es";
import { buildAllOptionsSelected, buildPartialOptionsSelected, flattenSelectOptionsArray, getFlattenSelectOptions, getNextHightlightableOption, getPreviousHightlightableOption, getSelectableOptions, getSelectableOptionsFromArray, getSelectedCount } from "../../utils/select.helper";
import { buildNewOption, buildSelectOptions, buildSelectOptionsArray } from "./select-multi-options.helper";
import { selectHelper } from "../../utils";
import pluralize from "pluralize";
/**
* @part select - The select container.
*/
export class KvSelectMultiOptions {
constructor() {
/** @inheritdoc */
this.options = {};
/** @inheritdoc */
this.selectedOptions = {};
/** @inheritdoc */
this.noDataAvailableConfig = DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG;
/** @inheritdoc */
this.noResultsFoundConfig = DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG;
/** @inheritdoc */
this.searchable = true;
/** @inheritdoc */
this.minSearchOptions = MINIMUM_SEARCHABLE_OPTIONS;
/** @inheritdoc */
this.shortcuts = false;
/** @inheritdoc */
this.canAddItems = false;
/** @inheritdoc */
this.createOptionPlaceholder = DEFAULT_ADD_OPTION_PLACEHOLDER;
/** @inheritdoc */
this.showShortcuts = false;
this.isCreating = false;
this.createdOptionValue = '';
this.rebuildScheduled = false;
this.scheduleRebuild = () => {
if (this.rebuildScheduled)
return;
this.rebuildScheduled = true;
queueMicrotask(() => {
this.rebuildScheduled = false;
this.buildSelectionOptions();
});
};
this.onEnter = () => {
if (isEmpty(this.highlightedOption)) {
return;
}
this.selectOption(this.highlightedOption);
};
this.onNavigateDown = () => {
this.highlightedOption = getNextHightlightableOption(this.selectOptions.currentSelectable, this.highlightedOption);
};
this.onNavigateUp = () => {
this.highlightedOption = getPreviousHightlightableOption(this.selectOptions.currentSelectable, this.highlightedOption);
};
this.onDismiss = () => {
this.highlightedOption = undefined;
this.dismiss.emit();
};
this.onSelectAll = (event) => {
event.stopPropagation();
this.optionsSelected.emit(selectHelper.buildAllOptionsSelected(selectHelper.getSelectableOptions(this.options)));
this.selectAll.emit();
};
this.onClearSelection = (event) => {
event.stopPropagation();
this.optionsSelected.emit({});
this.clearSelection.emit();
};
this.onItemSelected = (event) => {
event.stopPropagation();
this.selectOption(event.detail);
if (this.shortcuts) {
this.highlightedOption = event.detail;
}
};
this.selectOption = (selectedOptionKey) => {
if (selectedOptionKey === ADD_OPTION.value) {
this.isCreating = true;
this.createdOptionValue = this.searchValue;
return;
}
const selectedOption = this.selectOptions.totalFlatten[selectedOptionKey];
this.optionSelected.emit(selectedOptionKey);
// Check if the selected option does not have any children
if (isEmpty(selectedOption.options)) {
const _a = this.selectedOptions, _b = selectedOptionKey, selectedOptionValue = _a[_b], otherSelectedOptions = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
if (selectedOptionValue) {
this.optionsSelected.emit(otherSelectedOptions);
}
else {
// Check if max selectable limit is reached
const selectedCount = getSelectedCount(this.selectedOptions);
if (this.maxSelectable !== undefined && selectedCount >= this.maxSelectable) {
return;
}
this.optionsSelected.emit(Object.assign(Object.assign({}, otherSelectedOptions), { [selectedOptionKey]: true }));
}
return;
}
const childrenValues = getSelectableOptions(selectedOption.options);
switch (selectedOption.state) {
case EToggleState.Selected:
case EToggleState.Indeterminate:
// de-select all children
const newOptions = this.selectedOptions;
Object.keys(childrenValues).forEach(childrenKey => delete newOptions[childrenKey]);
this.optionsSelected.emit(Object.assign({}, newOptions));
break;
case EToggleState.None:
// select all children, respecting maxSelectable limit
if (this.maxSelectable !== undefined) {
const currentSelectedCount = getSelectedCount(this.selectedOptions);
const partialSelection = buildPartialOptionsSelected(childrenValues, this.maxSelectable, currentSelectedCount);
if (!partialSelection)
return;
this.optionsSelected.emit(Object.assign(Object.assign({}, this.selectedOptions), partialSelection));
return;
}
this.optionsSelected.emit(Object.assign(Object.assign({}, this.selectedOptions), buildAllOptionsSelected(childrenValues)));
}
};
this.renderOptions = () => {
const items = this.selectOptions.currentFlatten;
return (h("kv-virtualized-list", { itemCount: items.length, itemHeight: SELECT_OPTION_HEIGHT_IN_PX, getItemKey: index => items[index].value, renderItem: index => (h("kv-select-option", Object.assign({ key: items[index].value }, items[index], { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
}, exportparts: "icon:select-option-icon" }))), exportparts: "select-option-icon" }));
};
}
valueChangedOptionHandler({ detail: newValue }) {
this.createdOptionValue = newValue;
}
clickCreateOptionHandler() {
this.optionCreated.emit(this.createdOptionValue);
this.optionSelected.emit(this.createdOptionValue);
this.isCreating = false;
}
cancelCreateOptionHandler() {
this.isCreating = false;
}
onInputsChanged() {
this.scheduleRebuild();
}
buildSelectionOptions() {
const selectedCount = getSelectedCount(this.selectedOptions);
const selectOptions = buildSelectOptions({
options: this.options,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder,
maxSelectable: this.maxSelectable,
selectedCount
});
const selectCurrentOptionsArray = buildSelectOptionsArray({
options: this.currentOptions,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder
});
const selectSelectableOptions = getSelectableOptions(selectOptions);
const selectFlattenOptions = getFlattenSelectOptions(selectOptions);
const selectCurrentFlattenOptions = flattenSelectOptionsArray(selectCurrentOptionsArray);
const selectCurrentSelectableOptions = getSelectableOptionsFromArray(selectCurrentFlattenOptions);
this.selectOptions = {
totalFlatten: selectFlattenOptions,
currentFlatten: selectCurrentFlattenOptions,
totalSelectable: selectSelectableOptions,
currentSelectable: selectCurrentSelectableOptions
};
}
handleKeyDown(event) {
if (!this.shortcuts) {
return;
}
switch (event.key) {
case 'Escape':
this.onDismiss();
break;
case 'Enter':
this.onEnter();
break;
case 'ArrowUp':
this.onNavigateUp();
break;
case 'ArrowDown':
this.onNavigateDown();
break;
}
}
/** Clears the highlighted option state */
async clearHighlightedOption() {
this.highlightedOption = undefined;
}
/** Close create popup */
async closeCreatePopup() {
this.isCreating = false;
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch();
}
componentWillLoad() {
this.buildSelectionOptions();
}
get isSearchable() {
return this.searchable && Object.keys(this.selectOptions.totalFlatten).length >= this.minSearchOptions;
}
get currentOptions() {
var _a;
return (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : this.options;
}
render() {
var _a, _b;
const selectedOptions = (_a = this.selectedOptions) !== null && _a !== void 0 ? _a : {};
const optionsLength = Object.keys(this.selectOptions.totalSelectable).length;
const currentOptionsLength = this.selectOptions.currentFlatten.length;
const selectedOptionsLength = Object.keys(selectedOptions).filter(key => selectedOptions[key]).length;
const hasOptions = optionsLength > 0;
const hasCurrentOptions = currentOptionsLength > 0;
const hasSelectedOptions = selectedOptionsLength > 0;
const isSelectionClearable = hasOptions && this.selectionClearable;
const isSelectionClearEnabled = hasSelectedOptions && hasCurrentOptions;
const isSelectAllAvailable = hasOptions && this.selectionAll && this.maxSelectable === undefined;
const isSelectAllEnabled = hasCurrentOptions && selectedOptionsLength < optionsLength;
const hasNoDataAvailable = !hasOptions && !hasCurrentOptions;
const hasNoResultsFound = hasOptions && !hasCurrentOptions;
const maxSelectableCount = Math.min((_b = this.maxSelectable) !== null && _b !== void 0 ? _b : optionsLength, optionsLength);
const selectedItemsCountText = `Selected: ${selectedOptionsLength}/${maxSelectableCount}`;
return (h("kv-select", { key: '0a5d37fce7be71dfb7882881cb6b1f5e958dcc4b', ref: element => (this.selectRef = element), maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, searchable: this.isSearchable, searchValue: this.searchValue, selectionClearable: isSelectionClearable, selectionClearEnabled: isSelectionClearEnabled, searchPlaceholder: this.searchPlaceholder, clearSelectionLabel: this.clearSelectionLabel, selectionAll: isSelectAllAvailable, selectionAllEnabled: isSelectAllEnabled, selectAllLabel: this.selectAllLabel, hasLabelContent: this.counter, onSelectAll: this.onSelectAll, onClearSelection: this.onClearSelection, part: "select", exportparts: "select-option-icon" }, h("slot", { key: '2e7f2abf66ad17cd02bc87e4e69656f5d4c2d472', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: '569d455474bf451bc5a282c558374618d5b9c029', name: "select-header-label", slot: "select-header-label" }), this.counter && (h("div", { key: '842332b2184f551386c0fe4d7fc1dae92571cc1f', class: "select-header-label", slot: "select-header-label" }, h("kv-tooltip", { key: '5b787b38648c0b5a63d173adce9802720c7507aa', text: selectedItemsCountText, truncate: true }, h("div", { key: 'd8a5cb9cccf77a38a1e9b7b54e25d6bbea1b4fce', class: "selected-items-label" }, selectedItemsCountText)))), hasNoDataAvailable && (h("slot", { key: '890643ea47495723f0899e839bb48d0788c5b8d5', name: "no-data-available" }, h("div", { key: '0ec0506ef3f0fb035e2324c73eff677c368c5d6c', class: "no-data-available" }, h("div", { key: 'd49ce15adebc514d4ac9bf76bab7e31d4f61dbee', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: 'e1ad214a5cb3dcd0d21d57d3cb324ef3879b8661' }, this.noDataAvailableConfig)))), this.canAddItems && (h("div", { key: '8eab23b2a941fcf8c57f8b1bf9dc00b565e712f2', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: '07e169900a814b77ca54336f342d2d6bb0a41d95' }, buildNewOption(this.highlightedOption, this.createOptionPlaceholder), { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} })))))), hasNoResultsFound && (h("slot", { key: '0b31b8a7f920828da0957f19da2770f52ed8ad71', name: "no-results-found" }, h("div", { key: 'bbc57a45efffd76637ca9ecd1908bdfdfac98bcf', class: "no-results-found" }, h("div", { key: 'd231de71335328d521b8b102fb050dd811c180e3', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: 'e7f002cad22ca54d0544c00221f874a623e90b6e' }, this.noResultsFoundConfig))), this.canAddItems && (h("div", { key: '4abe8274da8765165a5177b143d475f38a53eda4', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: 'cd2bf1b78101936cad6f13c61014e4c0cb955406' }, buildNewOption(this.highlightedOption, this.createOptionPlaceholder), { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} }))))))), hasCurrentOptions && this.renderOptions(), this.isCreating && (h("div", { key: '6299bcf6c3332dcb06603239dbdad16355102839', class: {
'create-new-option-container': true,
'has-shortcuts': this.shortcuts && this.showShortcuts
} }, h("div", { key: '83349d15477372b62a15163a32dd0d07bf8e051c', class: "create-new-option-form" }, h("slot", { key: '78c3589b5d047235dba32ac416c9d5d3c3b398ae', name: "create-new-option" }, h("div", { key: '5c8e55033062da036e0c68f6a1d15dfb39519b1e', class: "form-container" }, h("kv-select-create-option", { key: '33c4bd7becdec08c6c30df9b2a8ea18ca00e2ade', value: this.createdOptionValue, inputConfig: { placeholder: this.createInputPlaceholder } })))))), this.shortcuts && this.showShortcuts && (h("slot", { key: '946d4cb6a993cc28f1fe41ee1b772434c4bf3575', name: "select-footer", slot: "select-footer" }, h("kv-select-shortcuts-label", { key: '86f6d7b4ad29319ada744e51488bde8a8068e86b' }, h("div", { key: 'cb387dec774352f3811f89184a54c3171679975a', class: "counter", slot: "right-items" }, !isEmpty(this.searchValue) && hasCurrentOptions && h("span", { key: '38c54d0ea34ddae39b30c79c9e9a3a63c56cd7b8' }, pluralize('result', currentOptionsLength, true)))))), h("slot", { key: '0b052e149b95d00beb276a750e1203dafe82930b', name: "select-footer", slot: "select-footer" })));
}
static get is() { return "kv-select-multi-options"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["select-multi-options.scss"]
};
}
static get styleUrls() {
return {
"$": ["select-multi-options.css"]
};
}
static get properties() {
return {
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "ISelectMultiOptions",
"resolved": "{ [x: string]: ISelectMultiOption; }",
"references": {
"ISelectMultiOptions": {
"location": "import",
"path": "./select-multi-options.types",
"id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The object with the dropdown options"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"filteredOptions": {
"type": "unknown",
"attribute": "filtered-options",
"mutable": false,
"complexType": {
"original": "ISelectMultiOptions",
"resolved": "{ [x: string]: ISelectMultiOption; }",
"references": {
"ISelectMultiOptions": {
"location": "import",
"path": "./select-multi-options.types",
"id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The object with the dropdown options filtered"
},
"getter": false,
"setter": false
},
"selectedOptions": {
"type": "unknown",
"attribute": "selected-options",
"mutable": false,
"complexType": {
"original": "Record<string, boolean>",
"resolved": "{ [x: string]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The object with indexed by the dropdown labels and its selected value"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"noDataAvailableConfig": {
"type": "unknown",
"attribute": "no-data-available-config",
"mutable": false,
"complexType": {
"original": "IIllustrationMessage",
"resolved": "IIllustrationMessage",
"references": {
"IIllustrationMessage": {
"location": "import",
"path": "../illustration-message/illustration-message.types",
"id": "src/components/illustration-message/illustration-message.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,
"defaultValue": "DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG"
},
"noResultsFoundConfig": {
"type": "unknown",
"attribute": "no-results-found-config",
"mutable": false,
"complexType": {
"original": "IIllustrationMessage",
"resolved": "IIllustrationMessage",
"references": {
"IIllustrationMessage": {
"location": "import",
"path": "../illustration-message/illustration-message.types",
"id": "src/components/illustration-message/illustration-message.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,
"defaultValue": "DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG"
},
"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
},
"searchValue": {
"type": "string",
"attribute": "search-value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The search value to display"
},
"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
},
"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"
},
"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,
"defaultValue": "DEFAULT_ADD_OPTION_PLACEHOLDER"
},
"maxSelectable": {
"type": "number",
"attribute": "max-selectable",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Maximum number of items that can be selected"
},
"getter": false,
"setter": false,
"reflect": true
},
"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"
}
};
}
static get states() {
return {
"selectOptions": {},
"highlightedOption": {},
"isCreating": {},
"createdOptionValue": {}
};
}
static get events() {
return [{
"method": "optionsSelected",
"name": "optionsSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the selected options change"
},
"complexType": {
"original": "Record<string, boolean>",
"resolved": "{ [x: string]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
}
}, {
"method": "optionSelected",
"name": "optionSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when an option is selected"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "searchChange",
"name": "searchChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user interacts with the search text field"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "clearSelection",
"name": "clearSelection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clears the selected items"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "selectAll",
"name": "selectAll",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clicks on the all items"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "dismiss",
"name": "dismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the 'esc' key is pressed"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "optionCreated",
"name": "optionCreated",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when a new option is created"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get methods() {
return {
"clearHighlightedOption": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Clears the highlighted option state",
"tags": []
}
},
"closeCreatePopup": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Close create popup",
"tags": []
}
},
"focusSearch": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focuses the search text field",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "options",
"methodName": "onInputsChanged"
}, {
"propName": "filteredOptions",
"methodName": "onInputsChanged"
}, {
"propName": "selectedOptions",
"methodName": "onInputsChanged"
}, {
"propName": "highlightedOption",
"methodName": "onInputsChanged"
}, {
"propName": "maxSelectable",
"methodName": "onInputsChanged"
}];
}
static get listeners() {
return [{
"name": "valueChanged",
"method": "valueChangedOptionHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "clickCreate",
"method": "clickCreateOptionHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "clickCancel",
"method": "cancelCreateOptionHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": "document",
"capture": false,
"passive": false
}];
}
}