@cbpds/web-components
Version:
Web components for the CBP Design System.
612 lines (606 loc) • 35.6 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpDropdownCss = ":root{--cbp-dropdown-menu-color:var(--cbp-form-field-color);--cbp-dropdown-menu-color-placeholder:var(--cbp-form-field-color-placeholder);--cbp-dropdown-menu-color-bg:var(--cbp-form-field-color-bg);--cbp-dropdown-menu-color-border:var(--cbp-form-field-color-border);--cbp-dropdown-menu-color-dark:var(--cbp-form-field-color-dark);--cbp-dropdown-menu-color-placeholder-dark:var(--cbp-form-field-color-placeholder-dark);--cbp-dropdown-menu-color-bg-dark:var(--cbp-form-field-color-bg-dark);--cbp-dropdown-menu-color-border-dark:var(--cbp-form-field-color-border-dark);--cbp-dropdown-menu-color-counter:var(--cbp-form-field-color-dark);--cbp-dropdown-menu-color-bg-counter:var(--cbp-form-field-color-border);--cbp-dropdown-menu-color-counter-dark:var(--cbp-form-field-color);--cbp-dropdown-menu-color-bg-counter-dark:var(--cbp-color-interactive-secondary-light);--cbp-dropdown-menu-color-counter-outline-focus:var(--cbp-color-white);--cbp-dropdown-menu-color-counter-outline-focus-dark:var(--cbp-form-field-color-border);--cbp-dropdown-attached-button-start-width:0;--cbp-dropdown-attached-button-end-width:0;--cbp-dropdown-chevron-down:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 512 512\" fill=\"%23fcfcfc\"><path d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"/></svg>');--cbp-dropdown-chevron-down-dark:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 512 512\" fill=\"%231b1b1b\"><path d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"/></svg>')}[data-cbp-theme=light] cbp-dropdown[context*=dark],[data-cbp-theme=dark] cbp-dropdown:not([context=dark-inverts]):not([context=light-always]){--cbp-dropdown-menu-color:var(--cbp-dropdown-menu-color-dark);--cbp-dropdown-menu-color-placeholder:var(--cbp-dropdown-menu-color-placeholder-dark);--cbp-dropdown-menu-color-bg:var(--cbp-dropdown-menu-color-bg-dark);--cbp-dropdown-menu-color-border:var(--cbp-dropdown-menu-color-border-dark);--cbp-dropdown-menu-color-counter:var(--cbp-dropdown-menu-color-counter-dark);--cbp-dropdown-menu-color-bg-counter:var(--cbp-dropdown-menu-color-bg-counter-dark);--cbp-dropdown-menu-color-counter-outline-focus:var(--cbp-dropdown-menu-color-counter-outline-focus-dark);--cbp-dropdown-chevron:var(--cbp-dropdown-chevron-dark);--cbp-dropdown-chevron-down:var(--cbp-dropdown-chevron-down-dark)}cbp-dropdown{display:block;}cbp-dropdown:has([slot=cbp-dropdown-attached-button-start]),cbp-dropdown:has([slot=cbp-dropdown-attached-button-end]){--cbp-dropdown-chevron-down:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 320 512\" fill=\"%231b1b1b\"><path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/></svg>');--cbp-dropdown-chevron-down-dark:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 320 512\" fill=\"%23fcfcfc\"><path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/></svg>')}cbp-dropdown:has([slot=cbp-dropdown-attached-button-start]) .cbp-custom-form-control,cbp-dropdown:has([slot=cbp-dropdown-attached-button-end]) .cbp-custom-form-control{--cbp-dropdown-chevron:var(--cbp-dropdown-chevron-down);background:right calc(var(--cbp-dropdown-attached-button-end-width) + 1.125rem - 8px) top calc(1rem - 8px) no-repeat var(--cbp-dropdown-chevron), var(--cbp-form-field-color-bg)}cbp-dropdown:has(button[role=combobox]:focus) .cbp-dropdown-menu{outline:var(--cbp-border-size-md) solid var(--cbp-form-field-color-border-focus);border-color:var(--cbp-form-field-color-border-focus);scrollbar-color:var(--cbp-form-field-color-border-focus) var(--cbp-form-field-color-bg)}cbp-dropdown .cbp-dropdown-shrinkwrap{position:relative;display:block;flex-basis:100%}cbp-dropdown .cbp-dropdown-shrinkwrap .cbp-custom-form-control{padding-inline-start:calc(var(--cbp-dropdown-attached-button-start-width) + var(--cbp-form-field-padding-inline));padding-inline-end:calc(var(--cbp-dropdown-attached-button-end-width) + var(--cbp-form-field-padding-inline) + var(--cbp-space-9x))}cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-start],cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-end]{position:absolute;inset-block-start:0}cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-start]{--cbp-button-border-radius:var(--cbp-border-radius-soft) 0 0 var(--cbp-border-radius-soft);inset-inline-start:0}cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-end]{--cbp-button-border-radius:0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;inset-inline-end:0}cbp-dropdown button.cbp-custom-form-control{appearance:none;white-space:nowrap;padding-inline-end:var(--cbp-space-9x)}cbp-dropdown button.cbp-custom-form-control::before{box-sizing:border-box;content:\"\";position:absolute;top:0;right:0;display:block;border-radius:0 var(--cbp-form-field-border-radius) var(--cbp-form-field-border-radius) 0;width:var(--cbp-space-9x);min-height:var(--cbp-space-9x);background:right calc(var(--cbp-space-9x) / 2 - 8px) top calc(var(--cbp-space-9x) / 2 - 8px) no-repeat var(--cbp-form-field-select-chevron), var(--cbp-form-field-color-border)}cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-label,cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-placeholder{text-overflow:ellipsis;overflow:hidden;padding-inline-end:var(--cbp-space-2x)}cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-placeholder{color:var(--cbp-dropdown-menu-color-placeholder);font-style:italic}cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter{display:inline-block;color:var(--cbp-dropdown-menu-color-counter);background-color:var(--cbp-dropdown-menu-color-bg-counter);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);font-style:normal;line-height:var(--cbp-space-3x);padding:var(--cbp-space-1x) var(--cbp-space-2x);margin-inline:var(--cbp-space-1x) var(--cbp-space-3x);border-radius:var(--cbp-border-radius-pill);outline:0px solid var(--cbp-dropdown-menu-color-counter-outline-focus);outline-offset:calc(-1 * (var(--cbp-space-1x) - 1px))}cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter:hover{--cbp-dropdown-menu-color-bg-counter:var(--cbp-form-field-color-border-hover);--cbp-dropdown-menu-color-bg-counter-dark:var(--cbp-form-field-color-border-hover-dark)}cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter:focus{--cbp-dropdown-menu-color-bg-counter:var(--cbp-form-field-color-border-focus);--cbp-dropdown-menu-color-bg-counter-dark:var(--cbp-form-field-color-border-focus-dark);outline-width:var(--cbp-border-size-md)}cbp-dropdown .cbp-dropdown-menu{display:none;position:absolute;z-index:var(--cbp-z-index-level-4);color:var(--cbp-dropdown-menu-color);background-color:var(--cbp-dropdown-menu-color-bg);border:var(--cbp-border-size-md) solid var(--cbp-dropdown-menu-color-border);border-radius:0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft);height:fit-content;max-height:13.5rem;width:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cbp-dropdown-menu-color-border) var(--cbp-form-field-color-bg)}cbp-dropdown .cbp-dropdown-menu:hover{--cbp-form-field-color-border:var(--cbp-form-field-color-border-hover)}cbp-dropdown .cbp-dropdown-menu:focus-within{--cbp-form-field-color-border:var(--cbp-form-field-color-border-focus)}cbp-dropdown[error]{--cbp-dropdown-menu-color-bg:var(--cbp-form-field-color-bg);--cbp-dropdown-menu-color-border:var(--cbp-form-field-color-border);--cbp-dropdown-menu-color-bg-dark:var(--cbp-form-field-color-bg-dark);--cbp-dropdown-menu-color-border-dark:var(--cbp-form-field-color-border-dark)}cbp-dropdown[open]{--cbp-form-field-border-radius:var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0}cbp-dropdown[open] button::before{transform:rotate(180deg)}cbp-dropdown[open] .cbp-dropdown-menu{display:block}cbp-dropdown[multiple]{--cbp-dropdown-item-padding-inline-start:0;--cbp-dropdown-item-padding-block:var(--cbp-space-1x);--cbp-dropdown-item-font-style-selected:normal}";
const CbpDropdownStyle0 = cbpDropdownCss;
const CbpDropdown = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.valueChange = index.createEvent(this, "valueChange", 7);
this.createItem = index.createEvent(this, "createItem", 7);
this.filterKeypress = index.createEvent(this, "filterKeypress", 7);
this.populateCombobox = index.createEvent(this, "populateCombobox", 7);
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 = utils.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();
utils.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) {
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$1) => {
var _a, _b;
let newItem = index.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 ?
index.h("cbp-checkbox", { context: this.context }, index.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))) {
this.focusIndex = this.matchIndex = index$1;
}
else if (!this.multiple && value === this.value) {
this.focusIndex = this.matchIndex = index$1;
}
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);
}
}
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) || {};
}
utils.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;
utils.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 (index.h(index.Host, { key: 'd0d6c2228dd9c0694672e8840bb5ad3cca7d412d' }, index.h("slot", { key: 'aed127f0869e04c1143cb34be4710f1396682406' }), index.h("div", { key: 'a77cebf5d4362c2d84e077e6ce4d0dc613f41bd2', class: "cbp-dropdown-shrinkwrap" }, index.h("slot", { key: 'ba74afd0ce5c644635ebd7502d998cd3a56d2eb6', name: "cbp-dropdown-attached-button-start" }), index.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))
? index.h("div", { class: "cbp-dropdown-label" }, this.filter && this.searchString ? this.searchString : this.selectedLabel)
: index.h("div", { class: "cbp-dropdown-placeholder" }, this.multiple && (index.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, index.h("cbp-icon", { name: "circle-xmark", size: "var(--cbp-space-3x)", sx: { 'margin-inline-start': 'var(--cbp-space-2x)' } }))), this.placeholder)), index.h("slot", { key: '24a7cd0c661ee06d85375c165194490813eeb0d4', name: "cbp-dropdown-attached-button-end" }), index.h("input", { key: 'd51a9a1f3f7f165bf0781d473e1733910d681e32', type: "hidden", id: `${this.fieldId}-field`, name: `${this.name}`, value: `${this.value}`, disabled: this.disabled, ref: el => (this.formField = el) }), index.h("div", { key: '33c947bd2da85e9d5d72c963a0973b447c08420a', role: "listbox", class: "cbp-dropdown-menu", tabIndex: -1, id: `${this.fieldId}-menu`, ref: el => (this.listbox = el) }, index.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]
: index.h("slot", { name: "cbp-dropdown-items", onSlotchange: (e) => this.handleSlotChange(e) }), (this.create &&
this.filter &&
this.searchString.length >= this.minimumInputLength &&
!this.checkExactMatch()) &&
index.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)))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"open": ["watchOpen"],
"value": ["watchValue"],
"items": ["watchItems"]
}; }
};
CbpDropdown.style = CbpDropdownStyle0;
exports.cbp_dropdown = CbpDropdown;
//# sourceMappingURL=cbp-dropdown.cjs.entry.js.map