@kelvininc/ui-components
Version:
Kelvin UI Components
999 lines (998 loc) • 42.3 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, getFlattenSelectOptions, getNextHightlightableOption, getPreviousHightlightableOption, getSelectableOptions } from "../../utils/select.helper";
import { buildNewOption, buildSelectOptions } 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;
this.isCreating = false;
this.createdOptionValue = '';
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 {
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
this.optionsSelected.emit(Object.assign(Object.assign({}, this.selectedOptions), buildAllOptionsSelected(childrenValues)));
}
};
this.renderOptions = () => {
const items = Object.values(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`
} }))) }));
};
}
valueChangedOptionHandler({ detail: newValue }) {
this.createdOptionValue = newValue;
}
clickCreateOptionHandler() {
this.optionCreated.emit(this.createdOptionValue);
this.optionSelected.emit(this.createdOptionValue);
this.isCreating = false;
}
cancelCreateOptionHandler() {
this.isCreating = false;
}
buildSelectionOptions() {
const selectOptions = buildSelectOptions({
options: this.options,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder
});
const selectCurrentOptions = buildSelectOptions({
options: this.currentOptions,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder
});
const selectSelectableOptions = getSelectableOptions(selectOptions);
const selectCurrentSelectableOptions = getSelectableOptions(selectCurrentOptions);
const selectFlattenOptions = getFlattenSelectOptions(selectOptions);
const selectCurrentFlattenOptions = getFlattenSelectOptions(selectCurrentOptions);
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.totalSelectable).length >= this.minSearchOptions;
}
get currentOptions() {
var _a;
return (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : this.options;
}
render() {
var _a;
const selectedOptions = (_a = this.selectedOptions) !== null && _a !== void 0 ? _a : {};
const optionsLength = Object.keys(this.selectOptions.totalSelectable).length;
const currentOptionsLength = Object.keys(this.selectOptions.currentSelectable).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;
const isSelectAllEnabled = hasCurrentOptions && selectedOptionsLength < optionsLength;
const hasNoDataAvailable = !hasOptions && !hasCurrentOptions;
const hasNoResultsFound = hasOptions && !hasCurrentOptions;
const selectedItemsCountText = `Selected: ${selectedOptionsLength}/${optionsLength}`;
return (h("kv-select", { key: '958e4ccb402fad6ab32db00b34de5454fa66cef0', 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, onSelectAll: this.onSelectAll, onClearSelection: this.onClearSelection, part: "select" }, h("slot", { key: 'a870a0ebb924bfc747d8efd1733dded667704c12', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: 'f75b82ea36b5774dbe70a6ee54d46255464e8b5b', name: "select-header-label", slot: "select-header-label" }), this.counter && (h("div", { key: 'ac8269141a0733756c81f08d70b4759116043134', class: "select-header-label", slot: "select-header-label" }, h("kv-tooltip", { key: 'd1a678af9250bc5f29a82692dcee9c41474e7fc4', text: selectedItemsCountText, truncate: true }, h("div", { key: '551a2a5c36281d42637dea4f1e590d1a7ab0ab44', class: "selected-items-label" }, selectedItemsCountText)))), hasNoDataAvailable && (h("slot", { key: '8f1ed81b1188850e3d09c486966dfeabb0f0f078', name: "no-data-available" }, h("div", { key: '433a56f3541f4845d132352c8ec664c47fed979e', class: "no-data-available" }, h("div", { key: 'ff64edfa5f6f1e3fa7c6fd3c0d606a84b9b6389a', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: 'cd53154bb0f1ff480f660f142200f1077e05643e' }, this.noDataAvailableConfig)))), this.canAddItems && (h("div", { key: '41fb0869ba24ea58a2bff05484533b0d0062c297', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: '5cca9095b7270d92c508d6480363afcad908d921' }, buildNewOption(this.highlightedOption, this.createOptionPlaceholder), { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} })))))), hasNoResultsFound && (h("slot", { key: '295167bb5140450bdbd6831a5d3d093243e99e86', name: "no-results-found" }, h("div", { key: '3521ad756c13499fa043558bc9fc5fa7d16a0605', class: "no-results-found" }, h("div", { key: '6f0d733115348a72f6fb49bf0bbff0255a831578', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: '71f8084ce8c233be892418adb2291aed78b74c55' }, this.noResultsFoundConfig))), this.canAddItems && (h("div", { key: '4622125125507f216698e0683927e0e046ca651b', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: '0cde310441b3dea8d64807330a2418569968881a' }, 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: '4f975afce4001523824af16d1a1b73a68219be1d', class: {
'create-new-option-container': true,
'has-shortcuts': this.shortcuts
} }, h("div", { key: 'b6e6779123a9730d4c584a151d069bedfc7dc192', class: "create-new-option-form" }, h("slot", { key: 'dc302a348538b6e88496ac7fa57a8a7321debe94', name: "create-new-option" }, h("div", { key: 'e4c8d301e82ae2d26271ec7d6f573ca246e7e3cf', class: "form-container" }, h("kv-select-create-option", { key: '4670df0d2eb3338e64329127646c850afc7e3208', value: this.createdOptionValue, inputConfig: { placeholder: this.createInputPlaceholder } })))))), this.shortcuts && (h("slot", { key: 'db105964aa4a43393b5586f0af102831eace16b3', name: "select-footer", slot: "select-footer" }, h("kv-select-shortcuts-label", { key: '63349b242efbfa1e54570509c97172ade86aa31e' }, h("div", { key: 'dc5c59716950b76b025fa6ac4a6aae588f0abae3', class: "counter", slot: "right-items" }, !isEmpty(this.searchValue) && hasCurrentOptions && h("span", { key: '54046b20f57da68d54e201cda05a9c967bffbad6' }, pluralize('result', currentOptionsLength, true))))))));
}
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"
}
};
}
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": "buildSelectionOptions"
}, {
"propName": "filteredOptions",
"methodName": "buildSelectionOptions"
}, {
"propName": "selectedOptions",
"methodName": "buildSelectionOptions"
}, {
"propName": "highlightedOption",
"methodName": "buildSelectionOptions"
}];
}
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
}];
}
}