@db-ux/wc-core-components 4.9.0-stencil-bundle-ad37ca4 → 4.9.1

package/dist/db-ux/p-fb39506f.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as s,F as h}from"./p-K4o-AcjZ.js";import{l,a as e,m as a,f as o,g as d,h as n,e as c,d as v,i as r,o as u,k as w,c as f,s as b}from"./p-BdL-nI5y.js";import{h as m,d as p,s as y,m as g,u as k,g as A,e as F,l as D,c as x}from"./p-xkoBSP8R.js";import{D as C}from"./p-D_roHmuC.js";import{D as L}from"./p-CHLgQ9vn.js";import{a as S}from"./p-DOPXnIzL.js";import{b as I}from"./p-D5mInaY7.js";const R=class{constructor(s){i(this,s),this.amountChange=t(this,"amountChange"),this.dropdownToggle=t(this,"dropdownToggle"),this.optionSelected=t(this,"optionSelected"),this.search=t(this,"search"),this.showClearSelection=!0,this.clearSelectionText="Clear selection",this._id=void 0,this._messageId=void 0,this._validMessageId=void 0,this._invalidMessageId=void 0,this._invalidMessage=void 0,this._selectId=void 0,this._labelId=void 0,this._summaryId=void 0,this._placeholderId=void 0,this._infoTextId=void 0,this._validity="no-validation",this._userInteraction=!1,this.abortController=void 0,this._descByIds=void 0,this._selectedLabels="",this._selectedLabelsId=void 0,this._voiceOverFallback="",this._selectedOptions=[],this.selectAllEnabled=!1,this.searchEnabled=!1,this.amountOptions=0,this._values=[],this._options=[],this._hasNoOptions=!1,this._documentClickListenerCallbackId=void 0,this._internalChangeTimestamp=0,this._documentScrollListenerCallbackId=void 0,this._observer=void 0,this._searchValue=void 0,this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.satisfyReact=function(i){i.stopPropagation()}}handleDocumentScroll(i){var t,s;(null===(t=null==i?void 0:i.target)||void 0===t?void 0:t.contains)&&(null===(s=null==i?void 0:i.target)||void 0===s?void 0:s.contains(this.detailsRef))&&this.handleAutoPlacement()}hasValidState(){var i;return!!(null!==(i=this.validMessage)&&void 0!==i?i:"valid"===this.validation)}handleValidation(){var i,t,s,h,e,a,o,d;this.selectRef&&(this.selectRef.value=this.getNativeSelectValue()),(null===(i=this.selectRef)||void 0===i?void 0:i.validity.valid)&&"invalid"!==this.validation?this.hasValidState()&&(null===(h=this.selectRef)||void 0===h?void 0:h.validity.valid)&&this.required?(this.setDescById(this._validMessageId),m()&&(this._voiceOverFallback=null!==(e=this.validMessage)&&void 0!==e?e:w,p((()=>this._voiceOverFallback=""),1e3)),this._validity=null!==(a=this.validation)&&void 0!==a?a:"valid"):y(this.message,this.showMessage)?(this.setDescById(this._messageId),this._validity=null!==(o=this.validation)&&void 0!==o?o:"no-validation"):(this.setDescById(this._placeholderId),this._validity=null!==(d=this.validation)&&void 0!==d?d:"no-validation"):(this.setDescById(this._invalidMessageId),this._invalidMessage=this.invalidMessage||(null===(t=this.selectRef)||void 0===t?void 0:t.validationMessage)||l,m()&&(this._voiceOverFallback=this._invalidMessage,p((()=>this._voiceOverFallback=""),1e3)),this._userInteraction&&(this._validity=null!==(s=this.validation)&&void 0!==s?s:"invalid"))}handleDropdownToggle(i){var t,s;this.dropdownToggle&&(i.stopPropagation(),this.dropdownToggle.emit(i)),i.target instanceof HTMLDetailsElement&&i.target.open?(this._documentClickListenerCallbackId=(new C).addCallback((i=>this.handleDocumentClose(i))),this._documentScrollListenerCallbackId=(new L).addCallback((i=>this.handleDocumentScroll(i))),this.handleAutoPlacement(),null===(t=this._observer)||void 0===t||t.observe(this.detailsRef),i.target.dataset.test||this.handleOpenByKeyboardFocus()):(this._documentClickListenerCallbackId&&(new C).removeCallback(this._documentClickListenerCallbackId),this._documentScrollListenerCallbackId&&(new L).removeCallback(this._documentScrollListenerCallbackId),null===(s=this._observer)||void 0===s||s.unobserve(this.detailsRef))}getNativeSelectValue(){var i,t;return(null===(i=this._values)||void 0===i?void 0:i.length)&&null!==(t=this._values.at(0))&&void 0!==t?t:""}setDescById(i){var t;const s=[];i&&s.push(i),this._selectedLabelsId&&(null===(t=this._selectedLabels)||void 0===t?void 0:t.length)&&s.push(this._selectedLabelsId),this._descByIds=s.join(" ")}getSelectAllLabel(){var i;return null!==(i=this.selectAllLabel)&&void 0!==i?i:e}getOptionLabel(i){var t,s,h;return null!==(h=null!==(t=i.label)&&void 0!==t?t:null===(s=i.value)||void 0===s?void 0:s.toString())&&void 0!==h?h:""}getOptionChecked(i){var t,s;return!(!i||!(null===(t=this._values)||void 0===t?void 0:t.includes))&&(null===(s=this._values)||void 0===s?void 0:s.includes(i))}getTagRemoveLabel(i){const t=this.removeTagsTexts,s=this.options;if(t&&s){const h=s.findIndex((t=>t.value===i.value));if(h>=0&&h<t.length)return t[h]}return`${a} ${this.getOptionLabel(i)}`}handleTagRemove(i,t){t&&t.stopPropagation(),this.handleSelect(i.value),this.handleSummaryFocus()}handleAutoPlacement(){if(this.detailsRef){const i=this.detailsRef.querySelector("article");i&&p((()=>{var t;S(i,this.detailsRef,null!==(t=this.placement)&&void 0!==t?t:"bottom")}),1)}}handleArrowDownUp(i){var t,s,h;if(null===(t=this.detailsRef)||void 0===t?void 0:t.open){if(self.document){const t=self.document.activeElement;if(t)if("checkbox"===t.getAttribute("type")||"radio"===t.getAttribute("type")){const l=null==t?void 0:t.closest("li");if("ArrowDown"===i.key||"ArrowRight"===i.key){let i=null==l?void 0:l.nextElementSibling;for(;i;){const t=i.querySelector("input");if(t){t.focus();break}i=i.nextElementSibling}i||this.handleFocusFirstDropdownCheckbox(t)}else{let i=null==l?void 0:l.previousElementSibling;for(;i;){const t=i.querySelector("input");if(t){t.focus();break}i=i.previousElementSibling}if(!i){const i=this.detailsRef.querySelector('input[type="checkbox"]');if(i&&i!==t)this.handleFocusFirstDropdownCheckbox(t);else{const i=g(this.detailsRef);if(i)p((()=>{i.focus()}),100);else{const i=Array.from(null===(s=this.detailsRef)||void 0===s?void 0:s.querySelectorAll('input[type="checkbox"],input[type="radio"]'));i.length&&(null===(h=i.at(-1))||void 0===h||h.focus())}}}}}else"search"!==t.getAttribute("type")||"ArrowUp"!==i.key&&"ArrowLeft"!==i.key?this.handleFocusFirstDropdownCheckbox(t):(this.handleClose(void 0,!0),this.handleSummaryFocus())}}else"ArrowDown"!==i.key&&"ArrowRight"!==i.key||(this.handleAutoPlacement(),this.detailsRef&&(this.detailsRef.open=!0),this.handleOpenByKeyboardFocus());i.stopPropagation(),i.preventDefault()}handleKeyboardPress(i){var t,s,h;if(i.stopPropagation(),"Escape"===i.key&&(null===(t=this.detailsRef)||void 0===t?void 0:t.open))this.handleClose(void 0,!0),this.handleSummaryFocus();else if("Enter"===i.key&&(null===(s=this.detailsRef)||void 0===s?void 0:s.open)){if(self.document){const t=self.document.activeElement;if(["checkbox","radio"].includes(t.getAttribute("type")||""))t.click(),i.preventDefault();else if("search"===t.getAttribute("type")){const t=null===(h=this._options)||void 0===h?void 0:h.find((i=>!i.isGroupTitle&&!i.disabled));(null==t?void 0:t.value)&&(this.handleSelect(t.value),i.preventDefault())}}}else"ArrowDown"!==i.key&&"ArrowUp"!==i.key&&"ArrowLeft"!==i.key&&"ArrowRight"!==i.key||this.handleArrowDownUp(i)}handleClose(i,t){if(this.detailsRef)if(t)this.detailsRef.open=!1,this.handleSummaryFocus();else if(this.detailsRef.open&&i&&i.relatedTarget){const t=i.relatedTarget;this.detailsRef.contains(t)||"dialog"===t.localName||p((()=>this.detailsRef.open=!1),1)}}handleDocumentClose(i){var t,s;if(i){const h="number"==typeof i.detail?i.target:null===(t=i.detail)||void 0===t?void 0:t.target;(null===(s=this.detailsRef)||void 0===s?void 0:s.open)&&!this.detailsRef.contains(h)&&(this.detailsRef.open=!1)}}handleOptionSelected(i){(new Date).getTime()-this._internalChangeTimestamp<200||(this._values=i,this._userInteraction=!0,this.optionSelected&&this.optionSelected.emit(null!=i?i:[]),this._internalChangeTimestamp=(new Date).getTime())}handleSelect(i){var t;i&&(this.multiple?(null===(t=this._values)||void 0===t?void 0:t.includes(i))?this.handleOptionSelected(this._values.filter((t=>t!==i))):this.handleOptionSelected([...this._values||[],i]):(this.handleOptionSelected([i]),this.handleClose(void 0,!0)))}handleSelectAll(i){var t;if(i.stopPropagation(),(null===(t=this._values)||void 0===t?void 0:t.length)===this.amountOptions)this.handleOptionSelected([]);else{const i=this.searchEnabled&&this.searchInputRef?this.searchInputRef.value:void 0;this.handleOptionSelected(this.options?this.options.filter((t=>{var s;return!t.isGroupTitle&&(!i||(null===(s=t.value)||void 0===s?void 0:s.toLowerCase().includes(i.toLowerCase())))})).map((i=>{var t;return null!==(t=i.value)&&void 0!==t?t:""})):[])}}handleFocusFirstDropdownCheckbox(i){if(this.detailsRef){const t=Array.from(this.detailsRef.querySelectorAll('input[type="checkbox"],input[type="radio"]'));if(t.length){const s=t.at(0),h=s===i&&t.length>1?t.at(1):s;h&&p((()=>{h.focus()}),1)}}}handleOpenByKeyboardFocus(){if(this.detailsRef){const i=g(this.detailsRef);i?p((()=>{i.focus()}),1):this.handleFocusFirstDropdownCheckbox()}}handleSearch(i){if(void 0===i)return;let t;if("string"==typeof i)t=i;else{const s=i;s.stopPropagation(),this.search&&this.search.emit(s),t=s.target.value,this._searchValue=t}this._options=this.options&&t&&0!==t.length?this.options.filter(this.searchFilter?i=>this.searchFilter(i,t):i=>!i.isGroupTitle&&this.getOptionLabel(i).toLowerCase().includes(t.toLowerCase())):this.options}handleClearAll(i){i.stopPropagation(),this.handleOptionSelected([]),this.handleSummaryFocus()}handleSummaryFocus(){var i;this.detailsRef&&(null===(i=this.detailsRef.querySelector("summary"))||void 0===i||i.focus())}resetIds(){var i,t,s;const h=null!==(s=null!==(i=this.id)&&void 0!==i?i:null===(t=this.propOverrides)||void 0===t?void 0:t.id)&&void 0!==s?s:`custom-select-${k()}`;this._id=h,this._messageId=h+o,this._validMessageId=h+d,this._invalidMessageId=h+n,this._selectId=h+c,this._labelId=h+v,this._summaryId=h+"-summary",this._placeholderId=h+r,this._selectedLabelsId=h+"-selected-labels",this._infoTextId=h+"-info"}enableAttributePassing(i,t){const s=null==i?void 0:i.closest(t);if(i&&s){const t=s.attributes;for(let h=0;h<t.length;h++){const l=t.item(h);if(l&&"data-density"!==l.name&&(l.name.startsWith("data-")||l.name.startsWith("aria-")))i.setAttribute(l.name,l.value),s.removeAttribute(l.name);else if(l&&"data-density"!==l.name&&"class"!==l.name&&"style"===l.name)i.setAttribute(l.name,l.value),s.removeAttribute(l.name);else if(l&&"class"===l.name){const t=l.value.includes("hydrated"),h=l.value.replace("hydrated","").trim(),e=i.getAttribute("class");i.setAttribute(l.name,`${e?`${e} `:""}${h}`),t?s.setAttribute("class","hydrated"):s.removeAttribute(l.name)}}}}watch0Fn(){var i,t;(null!==(i=this.id)&&void 0!==i?i:null===(t=this.propOverrides)||void 0===t?void 0:t.id)&&this.resetIds()}watch0(){this.watch0Fn()}watch1Fn(){this.detailsRef&&this.detailsRef.addEventListener("focusout",(i=>this.handleClose(i)))}watch1(){this.watch1Fn()}watch2Fn(){if(this._id){const i=this._id+o;this._labelId=this._id+v,this._selectId=this._id+c,this._validMessageId=this._id+d,this._invalidMessageId=this._id+n,this._placeholderId=this._id+r,y(this.message,this.showMessage)?this.setDescById(i):this.setDescById()}}watch2(){this.watch2Fn()}watch3Fn(){var i;if(this.detailsRef){const t=this.detailsRef.querySelector("summary");t&&t.setAttribute("aria-describedby",null!==(i=this.ariaDescribedBy)&&void 0!==i?i:this._descByIds||"")}}watch3(){this.watch3Fn()}watch4Fn(){void 0!==this.showNoResults?this._hasNoOptions=this.showNoResults:this._options&&(this._hasNoOptions=0===this._options.length)}watch4(){this.watch4Fn()}watch5Fn(){var i;this.selectAllEnabled=Boolean(this.multiple&&(null!==(i=this.showSelectAll)&&void 0!==i?i:this.amountOptions>5))}watch5(){this.watch5Fn()}watch6Fn(){var i;this.searchEnabled=null!==(i=this.showSearch)&&void 0!==i?i:this.amountOptions>9}watch6(){this.watch6Fn()}watch7Fn(){var i;const t=this.values;Array.isArray(t)?this._values!==t&&(this._values=t):null==t&&0!==(null===(i=this._values)||void 0===i?void 0:i.length)&&(this._values=[])}watch7(){this.watch7Fn()}watch8Fn(){this.selectRef&&this.handleValidation()}watch8(){this.watch8Fn()}watch9Fn(){if(this.selectRef){let i=this.abortController;i||(i=new AbortController,this.abortController=i);const t=this.values;I(this.selectRef,(()=>{this.handleOptionSelected(t||(this.selectRef.value?[this.selectRef.value]:[])),this.handleValidation()}),i.signal)}}watch9(){this.watch9Fn()}watch10Fn(){this._validity=this.validation}watch10(){this.watch10Fn()}watch11Fn(){var i,t;0===(null===(i=this._values)||void 0===i?void 0:i.length)?(this.selectAllChecked=!1,this.selectAllIndeterminate=!1):(null===(t=this._values)||void 0===t?void 0:t.length)===this.amountOptions?(this.selectAllIndeterminate=!1,this.selectAllChecked=!0):this._values&&(this.selectAllIndeterminate=!0)}watch11(){this.watch11Fn()}watch12Fn(){var i,t;this._options=this.options,this.amountOptions=null!==(t=null===(i=this.options)||void 0===i?void 0:i.filter((i=>!i.isGroupTitle)).length)&&void 0!==t?t:0}watch12(){this.watch12Fn()}watch13Fn(){this._searchValue=this.searchValue,this.searchValue&&this.handleSearch(this.searchValue)}watch13(){this.watch13Fn()}watch14Fn(){var i,t;(null===(i=this.options)||void 0===i?void 0:i.length)&&(this._selectedOptions=null===(t=this.options)||void 0===t?void 0:t.filter((i=>{var t,s;return!(!i.value||!(null===(t=this._values)||void 0===t?void 0:t.includes))&&!i.isGroupTitle&&(null===(s=this._values)||void 0===s?void 0:s.includes(i.value))})))}watch14(){this.watch14Fn()}watch15Fn(){var i,t,s;if(this.selectedLabels)this._selectedLabels=this.selectedLabels;else if(null===(i=this._selectedOptions)||void 0===i?void 0:i.length){if(this.transformSelectedLabels)return void(this._selectedLabels=(0,this.transformSelectedLabels)(this._selectedOptions));this._selectedLabels="amount"===this.selectedType?this.amountText?this.amountText:`${null===(t=this._selectedOptions)||void 0===t?void 0:t.length} ${u}`:null===(s=this._selectedOptions)||void 0===s?void 0:s.map((i=>this.getOptionLabel(i))).join(", ")}else this._selectedLabels=""}watch15(){this.watch15Fn()}watch16Fn(){var i,t;this.amountChange&&this.amountChange.emit(null!==(t=null===(i=this._selectedOptions)||void 0===i?void 0:i.length)&&void 0!==t?t:0)}watch16(){this.watch16Fn()}watch17Fn(){this.selectAllRef&&(this.selectAllRef.indeterminate=Boolean(this.selectAllIndeterminate))}watch17(){this.watch17Fn()}watch18Fn(){var i;this._invalidMessage=this.invalidMessage||(null===(i=this.selectRef)||void 0===i?void 0:i.validationMessage)||l}watch18(){this.watch18Fn()}componentDidLoad(){this.enableAttributePassing(this._ref,"db-custom-select"),this.resetIds(),this._invalidMessage=this.invalidMessage||l,"undefined"!=typeof window&&"IntersectionObserver"in window&&(this._observer=new IntersectionObserver((i=>{if(this.detailsRef){const t=i.find((({target:i})=>i===this.detailsRef));t&&!t.isIntersecting&&this.detailsRef.open&&(this.detailsRef.open=!1)}}))),this.watch0Fn(),this.watch1Fn(),this.watch2Fn(),this.watch3Fn(),this.watch4Fn(),this.watch5Fn(),this.watch6Fn(),this.watch7Fn(),this.watch8Fn(),this.watch9Fn(),this.watch10Fn(),this.watch11Fn(),this.watch12Fn(),this.watch13Fn(),this.watch14Fn(),this.watch15Fn(),this.watch16Fn(),this.watch17Fn(),this.watch18Fn()}disconnectedCallback(){var i;null===(i=this.abortController)||void 0===i||i.abort()}render(){var i,t,l,a,o,d,n,c,v,r,u,m,p,g,k;return s("div",{key:"b69119f8c8ad43b30a3b6f2e3177ba283336645e",class:x("db-custom-select",this.className),id:this._id,ref:i=>{this._ref=i},"aria-invalid":"invalid"===this._validity,"data-custom-validity":this._validity,"data-width":this.formFieldWidth,"data-variant":"floating"===this.variant&&"tag"===this.selectedType&&this.multiple?"above":this.variant,"data-required":A(this.required),"data-hide-asterisk":D(this.showRequiredAsterisk),"data-placement":this.placement,"data-selected-type":this.multiple?this.selectedType:"text","data-hide-label":D(this.showLabel),"data-icon":this.icon,"data-show-icon":A(this.showIcon)},s("label",{key:"6e31abcbad536b00f87b6c9a4a14826d085501ae",id:this._labelId},null!==(i=this.label)&&void 0!==i?i:e,s("select",{key:"89d826932f87ea9d2621ed8baede4141d0406574",role:"none",hidden:!0,id:this._selectId,tabIndex:-1,ref:i=>{this.selectRef=i},form:this.form,name:this.name,"data-custom-validity":this._validity,multiple:F(this.multiple,"multiple"),disabled:F(this.disabled,"disabled"),required:F(this.required,"required"),onChange:i=>this.satisfyReact(i)},(null===(t=this.options)||void 0===t?void 0:t.length)?null===(l=this.options)||void 0===l?void 0:l.map((i=>s("option",{disabled:i.disabled,value:i.value,key:void 0},this.getOptionLabel(i)))):null)),s("details",{key:"8b05f3d412957f1fe8d9d1e27b23890454ceff7c",ref:i=>{this.detailsRef=i},open:this.open,onToggle:i=>this.handleDropdownToggle(i),onKeyDown:i=>this.handleKeyboardPress(i)},s("slot",{key:"d05f5cae0ac171b8ed171819f3650064f30fef92"}),this.options?s(h,null,s("summary",{class:"db-custom-select-form-field",id:this._summaryId,"aria-disabled":A(this.disabled),tabIndex:this.disabled?-1:void 0,"aria-labelledby":this._labelId},(null===(a=this._selectedLabels)||void 0===a?void 0:a.length)?s("span",{"data-visually-hidden":A("tag"===this.selectedType),id:this._selectedLabelsId},this.selectedPrefix?s("span",{"data-visually-hidden":"true"},this.selectedPrefix):null,this._selectedLabels):null,"tag"===this.selectedType?s("div",null,null===(o=this._selectedOptions)||void 0===o?void 0:o.map((i=>s("db-tag",{emphasis:"strong",behavior:"removable",removeButton:this.getTagRemoveLabel(i),onRemove:t=>this.handleTagRemove(i,t),key:void 0},this.getOptionLabel(i))))):null),s("db-custom-select-dropdown",{width:this.dropdownWidth},this.searchEnabled?s("div",null,s("db-input",{type:"search",ref:i=>{this.searchInputRef=i},name:this._id,form:this._id,showLabel:!1,value:this._searchValue,label:null!==(d=this.searchLabel)&&void 0!==d?d:e,placeholder:null!==(n=this.searchPlaceholder)&&void 0!==n?n:this.searchLabel,ariaDescribedBy:this._hasNoOptions||this.showLoading?this._infoTextId:void 0,onInput:i=>this.handleSearch(i)})):null,this._hasNoOptions||this.showLoading?s("db-infotext",{id:this._infoTextId,icon:this.showLoading?"circular_arrows":void 0,semantic:this.showLoading?"informational":"warning"},null!==(c=this.showLoading?this.loadingText:this.noResultsText)&&void 0!==c?c:f):s(h,null,this.selectAllEnabled?s("div",null,s("div",{class:"db-checkbox db-custom-select-list-item"},s("label",null,s("input",{type:"checkbox",value:"select-all",ref:i=>{this.selectAllRef=i},form:this._id,checked:this.selectAllChecked,onChange:i=>this.handleSelectAll(i)}),this.getSelectAllLabel()))):null,s("db-custom-select-list",{multiple:F(this.multiple,"multiple"),label:null!==(r=null!==(v=this.listLabel)&&void 0!==v?v:this.label)&&void 0!==r?r:e},null===(u=this._options)||void 0===u?void 0:u.map((i=>s("db-custom-select-list-item",{type:this.multiple?"checkbox":"radio",showDivider:i.showDivider,icon:i.icon,isGroupTitle:i.isGroupTitle,groupTitle:this.getOptionLabel(i),name:this._id,checked:this.getOptionChecked(i.value),disabled:i.disabled,value:i.value,onChange:()=>this.handleSelect(i.value),key:void 0},i.isGroupTitle?null:this.getOptionLabel(i)))))),s("div",null,s("db-button",{variant:"ghost",width:"full",icon:"cross",size:"small",name:this._id,form:this._id,onClick:()=>this.handleClose(void 0,!0)},null!==(m=this.mobileCloseButtonText)&&void 0!==m?m:b)))):null),(null===(p=this.showClearSelection)||void 0===p||p)&&(null===(g=this._values)||void 0===g?void 0:g.length)?s("db-button",{icon:"cross",variant:"ghost",size:"small",noText:!0,name:this._id,form:this._id,disabled:F(this.disabled,"disabled"),onClick:i=>this.handleClearAll(i)},this.clearSelectionText,s("db-tooltip",{placement:"top"},this.clearSelectionText)):null,s("span",{key:"851b2e07be960638b4d62750e1cf920ba445fb3d",class:"db-custom-select-placeholder","aria-hidden":A(!0),id:this._placeholderId},null!==(k=this.placeholder)&&void 0!==k?k:this.label),y(this.message,this.showMessage)?s("db-infotext",{size:"small",icon:this.messageIcon,id:this._messageId},this.message):null,this.hasValidState()?s("db-infotext",{size:"small",semantic:"successful",id:this._validMessageId},this.validMessage||w):null,s("db-infotext",{key:"6d481a7727087375fc4d8faabd55a1817a735edf",size:"small",semantic:"critical",id:this._invalidMessageId},this._invalidMessage),s("span",{key:"5335f3e58d3a6b2f90353058552701c13b1e888b","data-visually-hidden":"true",role:"status"},this._voiceOverFallback))}static get watchers(){return{id:[{watch0:0}],"propOverrides?.id":[{watch0:0}],detailsRef:[{watch1:0},{watch3:0}],_id:[{watch2:0}],_descByIds:[{watch3:0}],showNoResults:[{watch4:0}],showLoading:[{watch4:0}],_options:[{watch4:0}],showSelectAll:[{watch5:0}],amountOptions:[{watch5:0},{watch6:0},{watch11:0}],multiple:[{watch5:0}],showSearch:[{watch6:0}],values:[{watch7:0}],_values:[{watch8:0},{watch11:0},{watch14:0}],selectRef:[{watch8:0},{watch9:0},{watch18:0}],validation:[{watch10:0}],options:[{watch12:0},{watch14:0}],searchValue:[{watch13:0}],_selectedOptions:[{watch15:0},{watch16:0}],selectedType:[{watch15:0}],amountText:[{watch15:0}],selectedLabels:[{watch15:0}],transformSelectedLabels:[{watch15:0}],selectAllIndeterminate:[{watch17:0}],selectAllRef:[{watch17:0}],invalidMessage:[{watch18:0}]}}};export{R as db_custom_select}

package/dist/db-ux/p-fb9500ba.entry.js

@@ -0,0 +1 @@
+import{r as s,h as t}from"./p-K4o-AcjZ.js";import{c as i}from"./p-xkoBSP8R.js";const a=class{constructor(t){s(this,t)}enableAttributePassing(s,t){const i=null==s?void 0:s.closest(t);if(s&&i){const t=i.attributes;for(let a=0;a<t.length;a++){const d=t.item(a);if(d&&"data-density"!==d.name&&(d.name.startsWith("data-")||d.name.startsWith("aria-")))s.setAttribute(d.name,d.value),i.removeAttribute(d.name);else if(d&&"data-density"!==d.name&&"class"!==d.name&&"style"===d.name)s.setAttribute(d.name,d.value),i.removeAttribute(d.name);else if(d&&"class"===d.name){const t=d.value.includes("hydrated"),a=d.value.replace("hydrated","").trim(),e=s.getAttribute("class");s.setAttribute(d.name,`${e?`${e} `:""}${a}`),t?i.setAttribute("class","hydrated"):i.removeAttribute(d.name)}}}}componentDidLoad(){this.enableAttributePassing(this._ref,"db-divider")}render(){var s,a;return t("div",{key:"140776744080e88b5e9f008d06d7c6b4bde4394a",class:i("db-divider",this.className),ref:s=>{this._ref=s},id:null!==(s=this.id)&&void 0!==s?s:null===(a=this.propOverrides)||void 0===a?void 0:a.id,"data-margin":this.margin,"data-variant":this.variant,"data-emphasis":this.emphasis,"data-width":this.width})}};export{a as db_divider}

package/dist/esm/db-accordion-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
 const DBAccordionItem = class {
@@ -27,9 +27,7 @@ const DBAccordionItem = class {
         if (this.toggle) {
             this.toggle.emit(newStateOpen);
         }
-        if (this.open === undefined) {
-            this._open = newStateOpen;
-        }
+        this._open = newStateOpen;
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -80,21 +78,7 @@ const DBAccordionItem = class {
     watch1() {
         this.watch1Fn();
     }
-    watch2Fn() {
-        if (this.open !== undefined) {
-            this._open = this.open;
-        }
-    }
-    watch2() {
-        this.watch2Fn();
-    }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-accordion-item");
         if (this.defaultOpen) {
             this._open = this.defaultOpen;
@@ -102,15 +86,13 @@ const DBAccordionItem = class {
         this.initialized = true;
         this.watch0Fn();
         this.watch1Fn();
-        this.watch2Fn();
     }
     render() {
         var _a, _b;
-        return (h("li", { key: 'eeee725f1b2d065ed9f0fce53498badfac480425', class: cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("details", { key: '6c6ab02a934c9fa35b2c944787179f28c6ea0f1b', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
+        return (h("li", { key: '0d59b9b4e2e9992d832429171c725c0f776b46b4', class: cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("details", { key: '8068249ac8266fea66da265c105309de3d98ac06', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, h("summary", { key: '31cb38ef067739903b96f7a5c33333787c8f9e51', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '6d97b5f0a5f21a4e7785ea3068185b42e421da5b' }, this.text ? this.text : null, h("slot", { key: '85296d3db72c14f9d24fc23b3084648a109948dc' })))));
+            }, name: this._name, open: this._open }, h("summary", { key: '338504ea06903b316e707bc10036d27000445c85', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '97982ad7bc98e8e47ad2a5ce157fda13d2aa82ce' }, this.text ? this.text : null, h("slot", { key: '23c9b8d8b3b4d32362820be097c8474fa7e12609' })))));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0
@@ -120,9 +102,6 @@ const DBAccordionItem = class {
             }],
         "name": [{
                 "watch1": 0
-            }],
-        "open": [{
-                "watch2": 0
             }]
     }; }
 };

package/dist/esm/db-accordion.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h } from './index-K4o-AcjZ.js';
 import { u as uuid, c as cls } from './index-xkoBSP8R.js';
 
 const DBAccordion = class {
@@ -59,7 +59,7 @@ const DBAccordion = class {
     watch0Fn() {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
-        if (this.initialized && this._ref) {
+        if (this.initialized) {
             if (this.behavior === "single") {
                 if (this.name) {
                     if (this._name !== this.name) {
@@ -119,12 +119,6 @@ const DBAccordion = class {
         this.watch2Fn();
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-accordion");
         this.initialized = true;
         this._initOpenIndexDone = true;
@@ -134,13 +128,12 @@ const DBAccordion = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("ul", { key: 'f266979e95cc9595d10dd6e95c418acc7bce70c7', class: cls("db-accordion", this.className), ref: (el) => {
+        return (h("ul", { key: '3a4a71d409be0f76abbb067e1698f7e0ab64b6c6', class: cls("db-accordion", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
             ? (_c = this.convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
             : null));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "initialized": [{
                 "watch0": 0

package/dist/esm/db-badge.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h } from './index-K4o-AcjZ.js';
 import { a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
@@ -62,23 +62,16 @@ const DBBadge = class {
         this.watch0Fn();
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-badge");
         this.initialized = true;
         this.watch0Fn();
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("span", { key: '4e38af5e75112c17a85fcc129c96b3eb0f47c9c9', class: cls("db-badge", this.className), ref: (el) => {
+        return (h("span", { key: '1a986f2667f67029493e606478d1d7928471acf8', class: cls("db-badge", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": getBooleanAsString(this.wrap), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'b302778cda72652585bc4ac1d3cfe2aee1c54014' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": getBooleanAsString(this.wrap), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'f6865ef905b1e12937c3f2d684a21e889c191608' })));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0

package/dist/esm/db-brand.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h } from './index-K4o-AcjZ.js';
 import { q as DEFAULT_ICON } from './constants-BdL-nI5y.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
@@ -43,21 +43,14 @@ const DBBrand = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-brand");
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '768ab1a176f3670fb5a7259414c549ce5cf9f13d', class: cls("db-brand", this.className), ref: (el) => {
+        return (h("div", { key: '679731d67b498b68650b1f3c5fb6ac1f8578b29f', class: cls("db-brand", this.className), ref: (el) => {
                 this._ref = el;
-            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(this.showIcon), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, h("slot", { key: 'ed1d803f90bf9d6d313202dc99c925475f3daf81' }), this.text ? this.text : null));
+            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(this.showIcon), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, h("slot", { key: 'bac6503b5fd5b16c138a513bae0749ecd67f2dc8' }), this.text ? this.text : null));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBBrand as db_brand };

package/dist/esm/db-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
 import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-xkoBSP8R.js';
 
 const DBButton = class {
@@ -52,21 +52,14 @@ const DBButton = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("button", { key: 'ba9e12a8eeb41f636573a47de9c4c85e3f6f7986', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: '884fb14651c53c3646098488d59aec90bc7c8234', class: cls("db-button", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap), "data-no-text": getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: '695910816fe7038dc5e8d4cb3566b02e75272ce4' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap), "data-no-text": getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: 'd5c5efe19be364dca26feb751f76229b9aa71612' })));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBButton as db_button };

package/dist/esm/db-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
 import { c as cls } from './index-xkoBSP8R.js';
 
 const DBCard = class {
@@ -48,21 +48,14 @@ const DBCard = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-card");
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '9fbce0f0603b7a1f8037cc8f3889624f6f908ab1', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: '2e81240f66c3d0652a35fca19fbdeac10b3188c3', class: cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '91cff3f8ec07f51b669db6d30ebab9e035ff4cb8' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: 'c4a94fea2bffbd1a548e93c09fb643535dfef360' })));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBCard as db_card };

package/dist/esm/db-checkbox.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, c as cls } from './index-xkoBSP8R.js';
 import { a as addCheckedResetEventListener } from './form-components-D6LQfJvq.js';
@@ -191,12 +191,6 @@ const DBCheckbox = class {
         this.watch5Fn();
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-checkbox");
         this.initialized = true;
         this.resetIds();
@@ -214,11 +208,10 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '9fce20e55c8c075dc21702023137dc7180a4d00a', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'd9b09729b9759e256cbdbb9083dafac160aa1d48', htmlFor: this._id }, h("input", { key: '9ca080c2b174b4cfd750c6027d245c4b9c1067bb', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '4307b61065bb09633a48978283bfe5534126acea', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '0aa7c1cb0b896790de944dabc35e10cd517806b5', htmlFor: this._id }, h("input", { key: '6bca474ad52dc47253c8cc0016aa6f3cff223ad8', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: 'b55a47b5325c6ead113139094a0fa0e290d81897' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '4197a25c9fd55f727cbe91005b0ae4d24eea9810', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '9d5d12ddb9c90e655988fac61261b15f2105063e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: '12de0b3395173a0ce9f15cf1f8ed49007a721422' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'af7347edcc4b3eeb57bdd87fe25cc1ca38a1779f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '13ec5ad3bd9534eac4ea7d1310edc1e47fa5d382', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0

package/dist/esm/db-custom-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h } from './index-K4o-AcjZ.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
 const DBCustomButton = class {
@@ -42,21 +42,14 @@ const DBCustomButton = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-custom-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '6e34f3b4711c1301644cfd2d205134bf46cff9b7', class: cls("db-custom-button", this.className), ref: (el) => {
+        return (h("div", { key: 'a7c717751195403b664b07491a8301dc531779bd', class: cls("db-custom-button", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText) }, h("slot", { key: 'dfac0afd24004e1257613797c9fb953db6948997' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText) }, h("slot", { key: '7d181ecb68722367d526634fe52afe164117894a' })));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBCustomButton as db_custom_button };

package/dist/esm/db-custom-select-dropdown_5.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, c as createEvent } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h, c as createEvent } from './index-K4o-AcjZ.js';
 import { c as cls, e as getBoolean, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, u as uuid, k as getInputValue, f as getNumber, j as getStep, b as isIOSSafari, l as getHideProp } from './index-xkoBSP8R.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE } from './constants-BdL-nI5y.js';
 import { c as addValueResetEventListener } from './form-components-D6LQfJvq.js';
@@ -45,21 +45,14 @@ const DBCustomSelectDropdown = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-custom-select-dropdown");
     }
     render() {
         var _a, _b;
-        return (h("article", { key: 'c653c9365e53ed0b70e317175ab2d79fbd454a61', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: '666781dcaef33e70aeb2378c19dccf9e0502be81', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: '27d6d442f7055db6e49ce153d11f9c3931e4be4f' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: '2587222810ae1534d3c8070f1003820a22429ae9' })));
     }
-    get rootElement() { return getElement(this); }
 };
 
 const DBCustomSelectList = class {
@@ -103,21 +96,14 @@ const DBCustomSelectList = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-custom-select-list");
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '0e501ddc60e13fa483563a62045d7d3299976fd4', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: 'dbfa17aa3707db35d7b3c4b8bac3a4a8e45ea352', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: 'b1789ff973e16e284e939c2472e13416ac4b08e7' }, h("slot", { key: '828238a50e9d209c32feae5a5d22cf08873201c1' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '241c4d3e9169ba9de06492c1e9bad11df103260a' }, h("slot", { key: 'dd407c533d531e58f4eed08895591898f1ec7621' }))));
     }
-    get rootElement() { return getElement(this); }
 };
 
 const DBCustomSelectListItem = class {
@@ -181,25 +167,18 @@ const DBCustomSelectListItem = class {
         this.watch0Fn();
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-custom-select-list-item");
         this.watch0Fn();
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '62dea47631b7d2b3aa9dfa53977515be502e516e', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: '6b727336eecb62e312f2cf7afc18686d1e590b61', class: cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", null))) : (h("span", null, this.groupTitle))));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "isGroupTitle": [{
                 "watch0": 0
@@ -405,12 +384,6 @@ const DBInput = class {
         this.watch4Fn();
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-input");
         this.resetIds();
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
@@ -426,7 +399,7 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h("div", { key: 'ec95153e143c2e5c2b939ed3f950da15f6b64482', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: 'c253045701877337001d77ee127244c40edd51d2', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '458471592bfb08d219a8872ee728f59af11998af', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: 'b2b30122374389f0ce7cd686adeebd544d739866', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: 'b7194b6d956d72f498443792b34f08e9c7c4f9f5', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '73e36e11d4634eda85bfe9abe646f9e9f95e6cef', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, name: this.name, type: this.type || "text", multiple: getBoolean(this.multiple, "multiple"), accept: this.accept, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getStep(this.step), value: (_f = (_e = this.value) !== null && _e !== void 0 ? _e : this._value) !== null && _f !== void 0 ? _f : "", maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
                 getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: getBoolean(this.autofocus, "autofocus"), enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_g = this.ariaDescribedBy) !== null && _g !== void 0 ? _g : this._descByIds, role: [
@@ -438,9 +411,8 @@ const DBInput = class {
                 "color",
             ].includes((_h = this.type) !== null && _h !== void 0 ? _h : "") && isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '4d10f65a1fc6bcacfcb955c0a1a4e51718b2b94a' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '6d042698b904075c981bbcbfdf20517b919e1656', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: 'ff033dbe911038702eee30ecd372605815846066', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'a699c5b648a73eb17f0836def1b1c2a005bf7943' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '60d2b6b280bfb6258c1a76601123dbb0aa041547', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '044819a1c744e3d31308e771eeff1c0adc674024', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
-    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0
@@ -522,21 +494,14 @@ const DBTag = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-tag");
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '43e3f8fd24d9504c8a66220e9f0df66fde1045a7', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '0f44c340afdd993c4f583c23087bf008cb64bb04', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '2fe8b73179e4f4e02da367c418cc614dec32bfca', name: "content" }), this.text ? this.text : null, h("slot", { key: '6e2873832b12cb87b895554ce090e55163ce7b37' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '9e4388656037b233763783ba6e771d30f8302f5c', name: "content" }), this.text ? this.text : null, h("slot", { key: 'e53a5fc3a2f9d5193a73f6c6256aac900df60c74' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBCustomSelectDropdown as db_custom_select_dropdown, DBCustomSelectList as db_custom_select_list, DBCustomSelectListItem as db_custom_select_list_item, DBInput as db_input, DBTag as db_tag };

package/dist/esm/db-custom-select-form-field.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
+import { r as registerInstance, h } from './index-K4o-AcjZ.js';
 import { c as cls } from './index-xkoBSP8R.js';
 
 const DBCustomSelectFormField = class {
@@ -42,21 +42,14 @@ const DBCustomSelectFormField = class {
         }
     }
     componentDidLoad() {
-        if (document && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
         var _a, _b;
-        return (h("summary", { key: '9afc6a67593004b2973b9e2126259f8013506108', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: '6e319e52a2daf3966edf7d8ebc3febb10c8a8857', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '95c4f37075676b60016a214b3bddb31d7eef0f50' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '05a393b0ff51cc37aff8d237b0a8101f4b352261' })));
     }
-    get rootElement() { return getElement(this); }
 };
 
 export { DBCustomSelectFormField as db_custom_select_form_field };