@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 26.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as o,d as e,h as i,c as r}from"./p-9caf8482.js";import{c as s,a as d,s as c}from"./p-9c1b2f31.js";import{d as n}from"./p-1ff1b82a.js";import{d as h}from"./p-574733ec.js";import{d as p}from"./p-4cdb3206.js";const a=':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 l=a;const b=t(class t extends o{constructor(){super();this.__registerHost();this.valueChange=e(this,"valueChange",7);this.createItem=e(this,"createItem",7);this.filterKeypress=e(this,"filterKeypress",7);this.populateCombobox=e(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=s("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(t){var o;const{host:e,label:i,value:r}=t.detail;let s=this.focusIndex;if(this.create&&i==`Create "${r}"`){this.doCreateItem(t);setTimeout((()=>{this.control.focus()}),100)}else{if(this.multiple){let t=e.selected=!e.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(r,t);this.control.focus()}else{this.dropdownItems.forEach((t=>{if(t===e){t.selected=true}else t.selected=false}));this.selectedLabel=i;this.value=r;this.open=false;setTimeout((()=>{this.control.focus()}),100)}this.setCurrent((o=this.dropdownItems)===null||o===void 0?void 0:o.indexOf(e),s);this.valueChange.emit({host:this.host,nativeElement:this.formField,value:this.value,label:this.selectedLabel,nativeEvent:t})}}watchOpen(t){if(t){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();d(this.host,(t=>{this.open=false}))}else{this.dropdownItems.forEach((t=>{t.current=false}));this.control.removeAttribute("aria-activedescendant");this.clearFilters()}}watchValue(t){var o;if(t!=((o=this.formField)===null||o===void 0?void 0:o.value)&&t!=""){this.setSelectedFromValue()}}watchItems(t){this.generatedItems=this.generateItems(t);if(this.async){let t=[];this.generatedItems.forEach((o=>{t=[...t,o]}));this.matches=t}}async clearSelections(t=undefined){this.selectedItems=Array.from(this.host.querySelectorAll("cbp-dropdown-item[selected]"));this.selectedItems.forEach((t=>{t.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:t})}doCreateItem(t){var o;const{value:e}=t.detail;t.stopPropagation();this.createItem.emit({host:this.host,value:e});const i=document.createElement("cbp-dropdown-item");i.value=e;i.selected=true;if(this.multiple){i.innerHTML=`<cbp-checkbox ${this.context?`context="${this.context}"`:""}>\n <input \n type="checkbox" \n name="${this.name}-selection"\n value="${e}"\n tabindex={-1}\n checked\n />\n ${e}\n </cbp-checkbox>`}else i.textContent=t.detail.value;this.host.appendChild(i);this.updateValue(t.detail.value);if(!this.multiple)this.selectedLabel=t.detail.value;if(this.async||!!this.items){let o;if(typeof this.items=="string"){o=JSON.parse(this.items)||{}}else o=this.items;const e={label:t.detail.value,value:t.detail.value};this.items=[...o,e]}if(this.multiple){this.dropdownItems=Array.from(this.host.querySelectorAll("cbp-dropdown-item:not(.cbp-dropdown-item-no-results,.cbp-dropdown-create-item)"));(o=this.createOption)===null||o===void 0?void 0:o.setAttribute("hidden","")}else this.open=false}updateValue(t,o=true){if(this.multiple){if(this.value&&typeof this.value=="string")this.value=this.value.split(",");o?this.value=[...this.value,t]:this.value=this.value.filter((o=>o!==t))}else{this.value=t}}setSelectedFromValue(){if(!!this.value){this.dropdownItems=Array.from(this.host.querySelectorAll("cbp-dropdown-item:not(.cbp-dropdown-item-no-results)"));let t=[];if(this.multiple){let o=typeof this.value=="string"?this.value.split(","):this.value;this.dropdownItems.forEach((e=>{if(e.value){if(o.includes(e.value)){e.selected=true;t=[...t,e]}}else{if(o.includes(e.innerText.trim())){e.selected=true;t=[...t,e]}}}));this.selectedItems=[...t]}else{this.dropdownItems.forEach((o=>{if(o.value==this.value){this.selectedLabel=o.innerText.trim();o.selected=true;this.selectedItems=[...t,o]}else o.selected=false}))}}}generateItems(t){if(this.multiple&&this.value&&typeof this.value=="string")this.value=this.value.split(",");if(typeof t=="string"){t=JSON.parse(t)||{}}if(this.async&&this.searchString.length<this.minimumInputLength)t=this.dropdownItems=[];let o=[];t.map((({label:t,value:e=t},r)=>{var s,d;let c=i("cbp-dropdown-item",{value:`${e}`,key:`cbp-dropdown-item-${e}`,selected:this.multiple&&((s=this.value)===null||s===void 0?void 0:s.includes(e))?true:!this.multiple&&this.value===e?true:false},this.multiple?i("cbp-checkbox",{context:this.context},i("input",{type:"checkbox",name:`${this.name}-selection`,value:`${e}`,tabindex:-1}),t):`${t}`);if(this.multiple&&((d=this.value)===null||d===void 0?void 0:d.includes(e))){this.focusIndex=this.matchIndex=r}else if(!this.multiple&&e===this.value){this.focusIndex=this.matchIndex=r}o=[...o,c]}));return o}checkExactMatch(){let t=false;this.dropdownItems.forEach((o=>{const e=o.innerText.toLowerCase().trim();if(this.searchString.toLowerCase()==e)t=true}));return t}handleSlotChange(t){console.log("Dropdown Slot Change: ",t)}handleCounterClick(t){this.clearSelections(t);t.stopImmediatePropagation();this.counterControl.focus()}handleCounterKeydown(t){const{key:o}=t;if(o==" "||o=="Enter"){this.clearSelections(t);t.preventDefault();this.counterControl.focus()}}handleDropdownClick(t){if(t.detail&&!this.readonly&&!this.disabled)this.open=!this.open}getActionFromKey(t){var o,e,i;const{key:r,altKey:s,ctrlKey:d,metaKey:c}=t;const n=["Enter"," "];const h=["ArrowDown","ArrowUp","Enter"," "];const p=["ArrowDown","ArrowUp","Enter","Home","End"];if(this.open&&n.includes(r)&&!this.typingMode){(o=this.dropdownItems[this.focusIndex])===null||o===void 0?void 0:o.click();return}if(this.open){const t=this.filter&&this.searchString?this.matchIndex:this.focusIndex;const o=this.filter&&this.searchString?((e=this.matches)===null||e===void 0?void 0:e.length)-1||0:((i=this.dropdownItems)===null||i===void 0?void 0:i.length)-1||0;const s={Home:0,ArrowUp:-1<t+-1?t+-1:o,ArrowDown:o+1>t+1?t+1:0,End:o}[r];if(s!==undefined&&r!=="Tab"){this.typingMode=false;this.matchIndex=s;this.setCurrent(this.filter&&this.searchString?this.matches[s]:s,this.focusIndex);if(!this.filter)this.searchString=""}}if(h.includes(r)&&!this.readonly&&!this.disabled){if(!this.open){this.open=true;this.typingMode=false}}if(r=="Escape"){this.open=false;this.typingMode=false;this.control.focus()}if(r=="Tab"){this.typingMode=false;this.open=false}if(r==="Backspace"||r==="Clear"||r==" "&&this.typingMode||r.length===1&&!s&&!d&&!c&&!p.includes(r)){this.open=true;if(this.filter)this.typingMode=true;this.filter?this.searchByString(r.toLowerCase(),t):this.jumpToLetter(r.toLowerCase())}}jumpToLetter(t){if(t!=this.searchString){this.searchString=t;this.getFirstLetterMatches(t);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(t){let o=[];this.dropdownItems.forEach(((e,i)=>{const r=e.innerText.toLowerCase().trim();if(r.startsWith(t)){o=[...o,i]}}));this.matches=o}searchByString(t,o){const{altKey:e,ctrlKey:i,metaKey:r}=o;if(t=="backspace"||t=="clear"){const t=this.searchString.length;if(t<=1){this.clearFilters();return}else this.searchString=this.searchString.substring(0,t-1)}else{this.searchString+=t}this.filterKeypress.emit({host:this.host,key:t,altKey:e,ctrlKey:i,metaKey:r,searchString:this.searchString,nativeEvent:o});if(this.async){if(this.searchString.length>=this.minimumInputLength){this.populateCombobox.emit({host:this.host,key:t,altKey:e,ctrlKey:i,metaKey:r,searchString:this.searchString,nativeEvent:o})}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(t){let o=[];this.dropdownItems.forEach(((e,i)=>{const r=e.innerText.toLowerCase().trim();if(r.indexOf(t)>=0){o=[...o,i]}if(e.classList.contains("cbp-dropdown-create-item")){o=[...o,i]}}));this.matches=o;this.matchIndex=0}filterDropdownItems(t){this.dropdownItems.forEach(((o,e)=>{t.includes(e)?o.removeAttribute("hidden"):o.setAttribute("hidden","")}))}clearFilters(){this.matches=[];this.matchIndex=undefined;this.searchString="";this.dropdownItems.forEach((t=>{if(!t.classList.contains("cbp-dropdown-item-no-results"))t.removeAttribute("hidden")}))}setDefaultItem(){let t=this.focusIndex;let o;if(this.selectedItems.length){o=this.dropdownItems.indexOf(this.selectedItems[0])}else o=0;this.setCurrent(o,t)}setCurrent(t=0,o=undefined){if(o!=undefined&&o!=t&&this.dropdownItems[o]){this.dropdownItems[o].current=false}if(this.dropdownItems[t]){this.dropdownItems[t].current=true;this.control.setAttribute("aria-activedescendant",this.dropdownItems[t].id);this.focusIndex=t;if(this.async)this.matchIndex=t;setTimeout((()=>{if(this.isScrollable(this.listbox))this.maintainScrollVisibility(this.dropdownItems[t],this.listbox)}),10)}}isScrollable(t){return t&&t.clientHeight<t.scrollHeight}maintainScrollVisibility(t,o){const{offsetHeight:e,offsetTop:i}=t;const{offsetHeight:r,scrollTop:s}=o;const d=i<s;const c=i+e>s+r;if(d){o.scrollTo(0,i)}else if(c){o.scrollTo(0,i-r+e)}}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 t=[];this.selectedItems.forEach((o=>{const e=o.querySelector("input[type=checkbox]");t=[...t,e.value]}));this.value=t;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)||{}}c(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;c(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 t;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=(t=this.selectedItems[0])===null||t===void 0?void 0:t.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 t=0;t<this.dropdownItems.length;t++){this.matches=[...this.matches,t]}}}}render(){var t,o,e,s,d,c,n,h;if(this.multiple){this.selectedItemCount=this.value.length}this.createLabel=this.create&&this.searchString.length>=this.minimumInputLength?`Create "${this.searchString}"`:undefined;return i(r,{key:"d0d6c2228dd9c0694672e8840bb5ad3cca7d412d"},i("slot",{key:"aed127f0869e04c1143cb34be4710f1396682406"}),i("div",{key:"a77cebf5d4362c2d84e077e6ce4d0dc613f41bd2",class:"cbp-dropdown-shrinkwrap"},i("slot",{key:"ba74afd0ce5c644635ebd7502d998cd3a56d2eb6",name:"cbp-dropdown-attached-button-start"}),i("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:t=>this.handleDropdownClick(t),onKeyDown:t=>this.getActionFromKey(t),ref:t=>this.control=t},this.selectedLabel||this.filter&&this.searchString?i("div",{class:"cbp-dropdown-label"},this.filter&&this.searchString?this.searchString:this.selectedLabel):i("div",{class:"cbp-dropdown-placeholder"},this.multiple&&i("span",{role:"button",tabindex:0,class:"cbp-dropdown-multiselect-counter",title:`Click to clear selections`,onClick:t=>this.handleCounterClick(t),onKeyDown:t=>this.handleCounterKeydown(t),ref:t=>this.counterControl=t},this.selectedItemCount,i("cbp-icon",{name:"circle-xmark",size:"var(--cbp-space-3x)",sx:{"margin-inline-start":"var(--cbp-space-2x)"}})),this.placeholder)),i("slot",{key:"24a7cd0c661ee06d85375c165194490813eeb0d4",name:"cbp-dropdown-attached-button-end"}),i("input",{key:"d51a9a1f3f7f165bf0781d473e1733910d681e32",type:"hidden",id:`${this.fieldId}-field`,name:`${this.name}`,value:`${this.value}`,disabled:this.disabled,ref:t=>this.formField=t}),i("div",{key:"33c947bd2da85e9d5d72c963a0973b447c08420a",role:"listbox",class:"cbp-dropdown-menu",tabIndex:-1,id:`${this.fieldId}-menu`,ref:t=>this.listbox=t},i("cbp-dropdown-item",{value:"",key:"cbp-dropdown-item-no-results",class:"cbp-dropdown-item-no-results",disabled:true,hidden:!(((t=this.dropdownItems)===null||t===void 0?void 0:t.length)==0&&((o=this.matches)===null||o===void 0?void 0:o.length)==0&&!this.items||!this.create&&(this.async||!!this.searchString)&&((e=this.matches)===null||e===void 0?void 0:e.length)==0||this.create&&((s=this.dropdownItems)===null||s===void 0?void 0:s.length)==0&&((d=this.matches)===null||d===void 0?void 0:d.length)==0&&((c=this.searchString)===null||c===void 0?void 0:c.length)<this.minimumInputLength)},this.async&&((n=this.searchString)===null||n===void 0?void 0:n.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]:i("slot",{name:"cbp-dropdown-items",onSlotchange:t=>this.handleSlotChange(t)}),this.create&&this.filter&&this.searchString.length>=this.minimumInputLength&&!this.checkExactMatch()&&i("cbp-dropdown-item",{value:`${this.searchString}`,class:"cbp-dropdown-create-item",key:"cbp-dropdown-create-item",selected:false,ref:t=>this.createOption=t},this.createLabel))))}get host(){return this}static get watchers(){return{open:["watchOpen"],value:["watchValue"],items:["watchItems"]}}static get style(){return l}},[4,"cbp-dropdown",{multiple:[516],filter:[516],async:[516],minimumInputLength:[2,"minimum-input-length"],items:[1],create:[4],fieldId:[1,"field-id"],name:[1],placeholder:[1025],selectedLabel:[1025,"selected-label"],value:[1032],open:[1540],error:[516],readonly:[1540],disabled:[1540],context:[513],sx:[8],selectedItems:[32],selectedItemCount:[32],searchString:[32],clearSelections:[64]},[[0,"dropdownItemClick","handleDropdownItemClick"]],{open:["watchOpen"],value:["watchValue"],items:["watchItems"]}]);function f(){if(typeof customElements==="undefined"){return}const t=["cbp-dropdown","cbp-checkbox","cbp-dropdown-item","cbp-icon"];t.forEach((t=>{switch(t){case"cbp-dropdown":if(!customElements.get(t)){customElements.define(t,b)}break;case"cbp-checkbox":if(!customElements.get(t)){n()}break;case"cbp-dropdown-item":if(!customElements.get(t)){h()}break;case"cbp-icon":if(!customElements.get(t)){p()}break}}))}const u=b;const m=f;export{u as CbpDropdown,m as defineCustomElement};
//# sourceMappingURL=cbp-dropdown.js.map