@cbpds/web-components
Version:
Web components for the CBP Design System.
1,027 lines (1,026 loc) • 42.7 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey, clickAwayListener } from "../../utils/utils";
export class CbpDropdown {
constructor() {
this.dropdownItems = [];
this.generatedItems = [];
this.matches = [];
this.visible = false;
this.typingMode = false;
this.multiple = false;
this.filter = false;
this.async = false;
this.minimumInputLength = 1;
this.items = undefined;
this.create = undefined;
this.fieldId = createNamespaceKey('cbp-dropdown');
this.name = this.fieldId;
this.placeholder = 'Choose Item';
this.selectedLabel = undefined;
this.value = undefined;
this.open = false;
this.error = false;
this.readonly = false;
this.disabled = false;
this.context = undefined;
this.sx = {};
this.selectedItems = [];
this.selectedItemCount = 0;
this.searchString = '';
}
handleDropdownItemClick(e) {
var _a;
const { host, label, value } = e.detail;
let oldIndex = this.focusIndex;
if (this.create && label == `Create "${value}"`) {
this.doCreateItem(e);
setTimeout(() => {
this.control.focus();
}, 100);
}
else {
if (this.multiple) {
let newValue = host.selected = !host.selected;
setTimeout(() => {
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
this.placeholder = this.selectedItems.length != 1 ? 'Selected Items' : 'Selected Item';
}, 50);
this.updateValue(value, newValue);
this.control.focus();
}
else {
this.dropdownItems.forEach(item => {
if (item === host) {
item.selected = true;
}
else
item.selected = false;
});
this.selectedLabel = label;
this.value = value;
this.open = false;
setTimeout(() => {
this.control.focus();
}, 100);
}
this.setCurrent((_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.indexOf(host), oldIndex);
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
value: this.value,
label: this.selectedLabel,
nativeEvent: e
});
}
}
watchOpen(newValue) {
if (newValue) {
if (!this.items) {
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results)'));
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
}
if (this.dropdownItems.length)
this.setDefaultItem();
clickAwayListener(this.host, _ => {
this.open = false;
});
}
else {
this.dropdownItems.forEach(item => {
item.current = false;
});
this.control.removeAttribute('aria-activedescendant');
this.clearFilters();
}
}
watchValue(newValue) {
var _a;
if (newValue != ((_a = this.formField) === null || _a === void 0 ? void 0 : _a.value) && newValue != '') {
this.setSelectedFromValue();
}
}
watchItems(newValue) {
this.generatedItems = this.generateItems(newValue);
if (this.async) {
let matches = [];
this.generatedItems.forEach((index) => {
matches = [...matches, index];
});
this.matches = matches;
}
}
async clearSelections(e = undefined) {
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
this.selectedItems.forEach(item => {
item.selected = false;
});
this.multiple ? (this.value = []) : (this.formField.value = undefined);
setTimeout(() => {
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
}, 100);
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
value: this.value,
label: undefined,
nativeEvent: e
});
}
doCreateItem(e) {
var _a;
const { value } = e.detail;
e.stopPropagation();
this.createItem.emit({
host: this.host,
value: value,
});
const newItem = document.createElement('cbp-dropdown-item');
newItem.value = value;
newItem.selected = true;
if (this.multiple) {
newItem.innerHTML = `<cbp-checkbox ${this.context ? `context="${this.context}"` : ''}>
<input
type="checkbox"
name="${this.name}-selection"
value="${value}"
tabindex={-1}
checked
/>
${value}
</cbp-checkbox>`;
}
else
newItem.textContent = e.detail.value;
this.host.appendChild(newItem);
this.updateValue(e.detail.value);
if (!this.multiple)
this.selectedLabel = e.detail.value;
if (this.async || !!this.items) {
let items;
if (typeof this.items == 'string') {
items = JSON.parse(this.items) || {};
}
else
items = this.items;
const newItemJSON = { label: e.detail.value, value: e.detail.value };
this.items = [...items, newItemJSON];
}
if (this.multiple) {
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results,.cbp-dropdown-create-item)'));
(_a = this.createOption) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
}
else
this.open = false;
}
updateValue(value, selected = true) {
if (this.multiple) {
if (this.value && typeof this.value == "string")
this.value = this.value.split(',');
selected ? (this.value = [...this.value, value]) : (this.value = this.value.filter(item => item !== value));
}
else {
this.value = value;
}
}
setSelectedFromValue() {
if (!!this.value) {
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results)'));
let selectedItems = [];
if (this.multiple) {
let values = (typeof this.value == "string") ? this.value.split(",") : this.value;
this.dropdownItems.forEach(item => {
if (item.value) {
if (values.includes(item.value)) {
item.selected = true;
selectedItems = [...selectedItems, item];
}
}
else {
if (values.includes(item.innerText.trim())) {
item.selected = true;
selectedItems = [...selectedItems, item];
}
}
});
this.selectedItems = [...selectedItems];
}
else {
this.dropdownItems.forEach((item) => {
if (item.value == this.value) {
this.selectedLabel = item.innerText.trim();
item.selected = true;
this.selectedItems = [...selectedItems, item];
}
else
item.selected = false;
});
}
}
}
generateItems(items) {
let firstSelected;
if (this.multiple && this.value && typeof this.value == "string")
this.value = this.value.split(',');
if (typeof items == 'string') {
items = JSON.parse(items) || {};
}
if (this.async && this.searchString.length < this.minimumInputLength)
items = this.dropdownItems = [];
let generatedItems = [];
items.map(({ label, value = label }, index) => {
var _a, _b;
let newItem = h("cbp-dropdown-item", { value: `${value}`, key: `cbp-dropdown-item-${value}`, selected: (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(value)))
? true
: (!this.multiple && this.value === value)
? true
: false }, this.multiple ?
h("cbp-checkbox", { context: this.context }, h("input", { type: "checkbox", name: `${this.name}-selection`, value: `${value}`, tabindex: -1 }), label)
: `${label}`);
if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
if (firstSelected == undefined)
this.focusIndex = this.matchIndex = index;
}
else if (!this.multiple && value === this.value) {
this.focusIndex = this.matchIndex = index;
}
generatedItems = [...generatedItems, newItem];
});
return generatedItems;
}
checkExactMatch() {
let exactMatch = false;
this.dropdownItems.forEach(item => {
const label = item.innerText.toLowerCase().trim();
if (this.searchString.toLowerCase() == label)
exactMatch = true;
});
return exactMatch;
}
handleSlotChange(e) {
console.log('Dropdown Slot Change: ', e);
}
handleCounterClick(e) {
this.clearSelections(e);
e.stopImmediatePropagation();
this.counterControl.focus();
}
handleCounterKeydown(e) {
const { key } = e;
if (key == ' ' || key == 'Enter') {
this.clearSelections(e);
e.preventDefault();
this.counterControl.focus();
}
}
handleDropdownClick(e) {
if (e.detail && !this.readonly && !this.disabled)
this.open = !this.open;
}
getActionFromKey(event) {
var _a, _b, _c;
const { key, altKey, ctrlKey, metaKey } = event;
const selectKeys = ['Enter', ' '];
const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
const navKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'];
if (this.open && selectKeys.includes(key) && !this.typingMode) {
(_a = this.dropdownItems[this.focusIndex]) === null || _a === void 0 ? void 0 : _a.click();
return;
}
if (this.open) {
const i = (this.filter && this.searchString) ? this.matchIndex : this.focusIndex;
const l = (this.filter && this.searchString) ? ((_b = this.matches) === null || _b === void 0 ? void 0 : _b.length) - 1 || 0 : ((_c = this.dropdownItems) === null || _c === void 0 ? void 0 : _c.length) - 1 || 0;
const n = {
Home: 0,
ArrowUp: -1 < i + -1 ? i + -1 : l,
ArrowDown: l + 1 > i + 1 ? i + 1 : 0,
End: l,
}[key];
if (n !== undefined && key !== 'Tab') {
this.typingMode = false;
this.matchIndex = n;
this.setCurrent((this.filter && this.searchString) ? this.matches[n] : n, this.focusIndex);
if (!this.filter)
this.searchString = '';
}
}
if (openKeys.includes(key) && !this.readonly && !this.disabled) {
if (!this.open) {
this.open = true;
this.typingMode = false;
}
}
if (key == 'Escape') {
this.open = false;
this.typingMode = false;
this.control.focus();
}
if (key == 'Tab') {
this.typingMode = false;
this.open = false;
}
if (key === 'Backspace' || key === 'Clear' || (key == ' ' && this.typingMode) ||
(key.length === 1 &&
!altKey &&
!ctrlKey &&
!metaKey &&
!navKeys.includes(key))) {
this.open = true;
if (this.filter)
this.typingMode = true;
this.filter ? this.searchByString(key.toLowerCase(), event) : this.jumpToLetter(key.toLowerCase());
}
}
jumpToLetter(letter) {
if (letter != this.searchString) {
this.searchString = letter;
this.getFirstLetterMatches(letter);
if (this.matches.length > 0) {
this.matchIndex = 0;
this.setCurrent(this.matches[0], this.focusIndex);
}
}
else {
if (this.matches.length > 0) {
if (this.matchIndex + 1 < this.matches.length)
this.matchIndex += 1;
else
this.matchIndex = 0;
this.setCurrent(this.matches[this.matchIndex], this.focusIndex);
}
}
}
getFirstLetterMatches(letter) {
let matches = [];
this.dropdownItems.forEach((item, index) => {
const label = item.innerText.toLowerCase().trim();
if (label.startsWith(letter)) {
matches = [...matches, index];
}
});
this.matches = matches;
}
searchByString(letter, e) {
const { altKey, ctrlKey, metaKey } = e;
if (letter == 'backspace' || letter == 'clear') {
const l = this.searchString.length;
if (l <= 1) {
this.clearFilters();
return;
}
else
this.searchString = this.searchString.substring(0, l - 1);
}
else {
this.searchString += letter;
}
this.filterKeypress.emit({
host: this.host,
key: letter,
altKey: altKey,
ctrlKey: ctrlKey,
metaKey: metaKey,
searchString: this.searchString,
nativeEvent: e
});
if (this.async) {
if (this.searchString.length >= this.minimumInputLength) {
this.populateCombobox.emit({
host: this.host,
key: letter,
altKey: altKey,
ctrlKey: ctrlKey,
metaKey: metaKey,
searchString: this.searchString,
nativeEvent: e
});
}
else {
this.items = [];
}
}
else {
this.getSearchStringMatches(this.searchString);
this.filterDropdownItems(this.matches);
if (this.matches.length > 0) {
this.setCurrent(this.matches[0], this.focusIndex);
}
}
}
;
getSearchStringMatches(searchString) {
let matches = [];
this.dropdownItems.forEach((item, index) => {
const label = item.innerText.toLowerCase().trim();
if (label.indexOf(searchString) >= 0) {
matches = [...matches, index];
}
if (item.classList.contains('cbp-dropdown-create-item')) {
matches = [...matches, index];
}
});
this.matches = matches;
this.matchIndex = 0;
}
filterDropdownItems(matches) {
this.dropdownItems.forEach((item, index) => {
matches.includes(index) ? item.removeAttribute('hidden') : item.setAttribute('hidden', '');
});
}
clearFilters() {
this.matches = [];
this.matchIndex = undefined;
this.searchString = '';
this.dropdownItems.forEach(item => {
if (!item.classList.contains('cbp-dropdown-item-no-results'))
item.removeAttribute('hidden');
});
}
setDefaultItem() {
let oldIndex = this.focusIndex;
let newIndex;
if (this.selectedItems.length) {
newIndex = this.dropdownItems.indexOf(this.selectedItems[0]);
}
else
newIndex = 0;
this.setCurrent(newIndex, oldIndex);
}
setCurrent(newValue = 0, oldValue = undefined) {
if (oldValue != undefined && oldValue != newValue && this.dropdownItems[oldValue]) {
this.dropdownItems[oldValue].current = false;
}
if (this.dropdownItems[newValue]) {
this.dropdownItems[newValue].current = true;
this.control.setAttribute('aria-activedescendant', this.dropdownItems[newValue].id);
this.focusIndex = newValue;
if (this.async)
this.matchIndex = newValue;
setTimeout(() => {
if (this.isScrollable(this.listbox))
this.maintainScrollVisibility(this.dropdownItems[newValue], this.listbox);
}, 10);
}
else {
}
}
isScrollable(element) {
return element && element.clientHeight < element.scrollHeight;
}
maintainScrollVisibility(activeElement, scrollParent) {
const { offsetHeight, offsetTop } = activeElement;
const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
const isAbove = offsetTop < scrollTop;
const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
if (isAbove) {
scrollParent.scrollTo(0, offsetTop);
}
else if (isBelow) {
scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
}
}
componentWillLoad() {
if (!!this.items) {
this.generatedItems = this.generateItems(this.items);
}
else {
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results)'));
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
}
this.attachedButtonStart = this.host.querySelector('[slot=cbp-dropdown-attached-button-start]');
this.attachedButtonEnd = this.host.querySelector('[slot=cbp-dropdown-attached-button-end]');
if (this.multiple && !this.value) {
if (!!this.selectedItems)
this.value = [];
let temp = [];
this.selectedItems.forEach(item => {
const checkbox = item.querySelector('input[type=checkbox]');
temp = [...temp, checkbox.value];
});
this.value = temp;
this.placeholder = this.selectedItems.length != 1 ? 'Selected Items' : 'Selected Item';
}
else if (this.filter && this.minimumInputLength && !this.value && !this.selectedLabel) {
this.placeholder = 'Begin typing to search';
}
if (this.multiple && !!this.value) {
if (typeof this.value == "string")
this.value = this.value.split(",");
this.selectedItemCount = this.value.length;
}
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
getSizeInfo() {
this.visible = !!this.host.offsetWidth;
if (this.visible) {
if (this.observer)
this.observer.disconnect();
this.attachedButtonStartWidth = this.attachedButtonStart ? this.attachedButtonStart.offsetWidth : 0;
this.attachedButtonEndWidth = this.attachedButtonEnd ? this.attachedButtonEnd.offsetWidth : 0;
setCSSProps(this.host, {
"--cbp-dropdown-attached-button-start-width": `${this.attachedButtonStartWidth}px`,
"--cbp-dropdown-attached-button-end-width": `${this.attachedButtonEndWidth}px`,
});
}
else if (!this.observer) {
this.observer = new ResizeObserver(() => {
this.getSizeInfo();
});
this.observer.observe(this.host);
}
}
componentDidLoad() {
var _a;
this.getSizeInfo();
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results)'));
this.selectedItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item[selected]'));
if (!this.multiple) {
if (!this.value || !this.selectedLabel) {
if (this.selectedItems.length > 0) {
this.value = this.selectedItems[0].value || this.selectedItems[0].innerText.trim();
this.selectedLabel = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.innerText.trim();
}
}
}
if (!this.selectedItems.length && !!this.value) {
this.setSelectedFromValue();
}
}
componentWillRender() {
if (this.attachedButtonStart)
this.attachedButtonStart.disabled = this.disabled || !this.dropdownItems.length;
if (this.attachedButtonEnd)
this.attachedButtonEnd.disabled = this.disabled || !this.dropdownItems.length;
}
componentDidRender() {
if (this.open)
this.dropdownItems = Array.from(this.host.querySelectorAll('cbp-dropdown-item:not(.cbp-dropdown-item-no-results)'));
if (this.items) {
if (this.async) {
this.matches = [];
for (let i = 0; i < this.dropdownItems.length; i++) {
this.matches = [...this.matches, i];
}
}
}
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (this.multiple) {
this.selectedItemCount = this.value.length;
}
this.createLabel = (this.create && this.searchString.length >= this.minimumInputLength) ? `Create "${this.searchString}"` : undefined;
return (h(Host, { key: 'd0d6c2228dd9c0694672e8840bb5ad3cca7d412d' }, h("slot", { key: 'aed127f0869e04c1143cb34be4710f1396682406' }), h("div", { key: 'a77cebf5d4362c2d84e077e6ce4d0dc613f41bd2', class: "cbp-dropdown-shrinkwrap" }, h("slot", { key: 'ba74afd0ce5c644635ebd7502d998cd3a56d2eb6', name: "cbp-dropdown-attached-button-start" }), h("button", { key: '236af78881a5ddb2bc56e766e0391ef9d2abbffa', type: "button", class: "cbp-custom-form-control", id: this.fieldId, role: "combobox", "aria-controls": `${this.fieldId}-menu`, "aria-expanded": `${this.open}`, "aria-haspopup": "listbox", "aria-invalid": this.error ? 'true' : false, disabled: this.disabled || this.readonly, onClick: e => this.handleDropdownClick(e), onKeyDown: e => this.getActionFromKey(e), ref: el => (this.control = el) }, (this.selectedLabel || (this.filter && this.searchString))
? h("div", { class: "cbp-dropdown-label" }, this.filter && this.searchString ? this.searchString : this.selectedLabel)
: h("div", { class: "cbp-dropdown-placeholder" }, this.multiple && (h("span", { role: "button", tabindex: 0, class: "cbp-dropdown-multiselect-counter", title: `Click to clear selections`, onClick: e => this.handleCounterClick(e), onKeyDown: e => this.handleCounterKeydown(e), ref: el => (this.counterControl = el) }, this.selectedItemCount, h("cbp-icon", { name: "circle-xmark", size: "var(--cbp-space-3x)", sx: { 'margin-inline-start': 'var(--cbp-space-2x)' } }))), this.placeholder)), h("slot", { key: '24a7cd0c661ee06d85375c165194490813eeb0d4', name: "cbp-dropdown-attached-button-end" }), h("input", { key: 'd51a9a1f3f7f165bf0781d473e1733910d681e32', type: "hidden", id: `${this.fieldId}-field`, name: `${this.name}`, value: `${this.value}`, disabled: this.disabled, ref: el => (this.formField = el) }), h("div", { key: '33c947bd2da85e9d5d72c963a0973b447c08420a', role: "listbox", class: "cbp-dropdown-menu", tabIndex: -1, id: `${this.fieldId}-menu`, ref: el => (this.listbox = el) }, h("cbp-dropdown-item", { value: "", key: "cbp-dropdown-item-no-results", class: "cbp-dropdown-item-no-results", disabled: true, hidden: !((((_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.length) == 0 && ((_b = this.matches) === null || _b === void 0 ? void 0 : _b.length) == 0 && !this.items) ||
(!this.create && (this.async || !!this.searchString) && ((_c = this.matches) === null || _c === void 0 ? void 0 : _c.length) == 0) ||
(this.create && ((_d = this.dropdownItems) === null || _d === void 0 ? void 0 : _d.length) == 0 && ((_e = this.matches) === null || _e === void 0 ? void 0 : _e.length) == 0 && ((_f = this.searchString) === null || _f === void 0 ? void 0 : _f.length) < this.minimumInputLength)) }, this.async && ((_g = this.searchString) === null || _g === void 0 ? void 0 : _g.length) < this.minimumInputLength
? `Enter ${this.minimumInputLength} characters to search.`
: `No ${this.filter && ((_h = this.searchString) === null || _h === void 0 ? void 0 : _h.length) > 0 ? 'matches' : 'items'} found.`), !!this.items
? [...this.generatedItems]
: h("slot", { name: "cbp-dropdown-items", onSlotchange: (e) => this.handleSlotChange(e) }), (this.create &&
this.filter &&
this.searchString.length >= this.minimumInputLength &&
!this.checkExactMatch()) &&
h("cbp-dropdown-item", { value: `${this.searchString}`, class: "cbp-dropdown-create-item", key: "cbp-dropdown-create-item", selected: false, ref: el => this.createOption = el }, this.createLabel)))));
}
static get is() { return "cbp-dropdown"; }
static get originalStyleUrls() {
return {
"$": ["cbp-dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-dropdown.css"]
};
}
static get properties() {
return {
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether multiple selections are supported, in which case checkboxes shall be slotted in accordance with the design system specified pattern. Defaults to false, which renders a single-select dropdown."
},
"attribute": "multiple",
"reflect": true,
"defaultValue": "false"
},
"filter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the dropdown accepts key presses to filter results, enabling combobox functionality."
},
"attribute": "filter",
"reflect": true,
"defaultValue": "false"
},
"async": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indicates that the filtering will be performed by asynchronous calls (handled by application logic)."
},
"attribute": "async",
"reflect": true,
"defaultValue": "false"
},
"minimumInputLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the number of characters need to emit an event to make an API call and return filtered results. This property is only used when"
},
"attribute": "minimum-input-length",
"reflect": false,
"defaultValue": "1"
},
"items": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | object",
"resolved": "object | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A JSON object (or stringified JSON) containing an array of labels and values. Labels may contain markup as needed, but in such cases, a value should always be specified explicitly."
},
"attribute": "items",
"reflect": false
},
"create": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that when an exact match is not found for a search string (for combobox functionality), an option to create a new item is presented."
},
"attribute": "create",
"reflect": false
},
"fieldId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the visible control here, which is used to generate related \npattern node IDs and associate everything for accessibility."
},
"attribute": "field-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-dropdown')"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the name of the (hidden) form field"
},
"attribute": "name",
"reflect": false,
"defaultValue": "this.fieldId"
},
"placeholder": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Represents placeholder text on the dropdown control, displayed in a distinctive style from the \nselected item. Defaults to \"Choose Item\". Has no effect on multi-selects, as the component manages this text."
},
"attribute": "placeholder",
"reflect": false,
"defaultValue": "'Choose Item'"
},
"selectedLabel": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the visible label on the dropdown control of the selected item. \nPrimarily updated dynamically by the component."
},
"attribute": "selected-label",
"reflect": false
},
"value": {
"type": "any",
"mutable": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the value of the hidden input holding the value (or barring one, the text label) \nof the selected item. Primarily updated dynamically by the component."
},
"attribute": "value",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the dropdown menu is open/visible."
},
"attribute": "open",
"reflect": true,
"defaultValue": "false"
},
"error": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the \nparent `cbp-form-field` component."
},
"attribute": "error",
"reflect": true,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field is readonly. Primarily controlled by the parent `cbp-form-field` component."
},
"attribute": "readonly",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles (to the host) as an object. This property is not reactive."
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get states() {
return {
"selectedItems": {},
"selectedItemCount": {},
"searchString": {}
};
}
static get events() {
return [{
"method": "valueChange",
"name": "valueChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the click event occurs for either a rendered button or anchor/link."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "createItem",
"name": "createItem",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event that is fired when the \"create item\" option is clicked."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "filterKeypress",
"name": "filterKeypress",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event that is fired when a key is pressed while filtering a combobox."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "populateCombobox",
"name": "populateCombobox",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and \nthe search string meets the `minimumInputLength` requirement. \nThis event can be listened for and the `items` (JSON) updated via application logic/service call."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"clearSelections": {
"complexType": {
"signature": "(e?: any) => Promise<void>",
"parameters": [{
"name": "e",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method to clear all selected items in a dropdown (single or multi-select).\nEmits the valueChange event afterward.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "watchOpen"
}, {
"propName": "value",
"methodName": "watchValue"
}, {
"propName": "items",
"methodName": "watchItems"
}];
}
static get listeners() {
return [{
"name": "dropdownItemClick",
"method": "handleDropdownItemClick",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-dropdown.js.map