@prolibu-suite/cobalt-core 0.11.11 → 0.11.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +3 -3
- package/dist/cjs/co-select.cjs.entry.js +25 -12
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/p-0e13b7d0.entry.js +1 -0
- package/dist/collection/components/co-select/co-select.css +47 -1
- package/dist/collection/components/co-select/co-select.js +25 -12
- package/dist/components/co-select.js +1 -1
- package/dist/esm/co-select.entry.js +25 -12
- package/dist/types/components/co-select/co-select.d.ts +14 -4
- package/dist/types/components.d.ts +2 -2
- package/package.json +3 -3
- package/dist/cobalt/p-6b88a52c.entry.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as o,h as t,a as r}from"./p-DJkaRtbb.js";import{R as s}from"./p-CYN5B3IQ.js";import{O as a}from"./p-ox7HzCZn.js";import{r as i,h as l}from"./p-Ba_v-MzM.js";const c=Object.freeze({rowHeight:34,gap:0}),n=e=>e.rowHeight+e.gap;function d(e,o){return e>0?e*o.rowHeight+(e-1)*o.gap:0}const h=class{constructor(t){e(this,t),this.coChange=o(this,"coChange",7),this.coClear=o(this,"coClear",7),this.coFooterPrimary=o(this,"coFooterPrimary",7),this.required=!1,this.placeholder="Select…",this.disabled=!1,this.clearable=!1,this.layout="vertical",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.size="md",this.variant="default",this.labelStyle="default",this.menuSurface="light",this.searchable=!1,this.searchPlaceholder="Search…",this.emptyText="No results",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.isOpen=!1,this.scrollTop=0,this.searchText="",this.sortSnapshot=new Set,this.activeIndex=-1,this.rowMetrics=c,this.pendingActiveScroll=!1,this.activeScrollFrames=0,this.lastParsedOptions=[],this.lastRankSearch="",this.lastRanked=[],this.readCssLengthPx=e=>{if("function"!=typeof getComputedStyle)return null;const o=getComputedStyle(this.el).getPropertyValue(e).trim();if(!o)return null;const t=/^(-?\d*\.?\d+)px$/.exec(o);if(t)return parseFloat(t[1]);const r=this.el.shadowRoot;if(!r)return null;const s=document.createElement("div");s.style.display="none",s.style.setProperty("height",`var(${e})`),r.appendChild(s);const a=getComputedStyle(s).height;return s.remove(),/px$/.test(a)?parseFloat(a):null},this.handleSearchInput=e=>{this.searchText=e.target.value,this.scrollTop=0,this.activeIndex=this.filteredOptions.length?0:-1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleTriggerKeyDown=e=>{this.disabled||e.target===this.triggerEl&&(this.handleNavKeyDown(e)||("Enter"===e.key||" "===e.key?(e.preventDefault(),this.isOpen?this.isOpen=!1:this.openPanel()):"ArrowDown"!==e.key||this.isOpen||(e.preventDefault(),this.openPanel())))},this.handleNavKeyDown=e=>{if(this.disabled||!this.isOpen)return!1;const o=this.filteredOptions.length,t=o-1,r=this.activeIndex>=0?this.activeIndex:-1;switch(e.key){case"ArrowDown":o&&this.setActiveIndex(r>=t?0:r+1);break;case"ArrowUp":o&&this.setActiveIndex(r<=0?t:r-1);break;case"Home":o&&this.setActiveIndex(0);break;case"End":o&&this.setActiveIndex(t);break;case" ":if(e.target===this.searchInputEl)return!1;this.activateActiveOption();break;case"Enter":this.activateActiveOption();break;default:return!1}return e.preventDefault(),!0},this.handleOptionPointerMove=(e,o)=>{"touch"!==e.pointerType&&this.activeIndex!==o&&(this.activeIndex=o)},this.flushActiveScroll=()=>{var e,o,t,r,s;if(!this.pendingActiveScroll)return;if(!this.isOpen)return void(this.pendingActiveScroll=!1);const a=this.scrollTop||0,i=null!==(o=null===(e=this.osInstance)||void 0===e?void 0:e.elements().viewport)&&void 0!==o?o:this.optionsContainerEl;return i&&(i.scrollTop=a,Math.abs(i.scrollTop-a)<=1)?(this.pendingActiveScroll=!1,this.activeScrollFrames=0,void(null===(s=null===(r=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.getElementById(this.optionId(this.activeIndex)))||void 0===r?void 0:r.scrollIntoView)||void 0===s||s.call(r,{block:"nearest"}))):++this.activeScrollFrames>h.ACTIVE_SCROLL_MAX_FRAMES?(this.pendingActiveScroll=!1,void(this.activeScrollFrames=0)):void requestAnimationFrame(this.flushActiveScroll)},this.handlePopoverOpen=()=>{this.isOpen||(this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0)},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit(),this.coChange.emit(this.multiple?[]:"")},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleOptionClick=e=>{if(this.multiple){const o=[...this.selectedValues],t=o.indexOf(e);t>=0?o.splice(t,1):o.push(e),this.value=JSON.stringify(o),this.coChange.emit(o)}else this.value=e,this.isOpen=!1,this.coChange.emit(e)}}get parsedOptions(){const e=this.options;if(e===this.lastOptionsRaw)return this.lastParsedOptions;let o=e;if("string"==typeof o)try{o=JSON.parse(o)}catch(e){o=[]}const t=Array.isArray(o)?o.map((e=>"string"==typeof e?{label:e,value:e}:e)):[];return this.lastOptionsRaw=e,this.lastParsedOptions=t,t}get filteredOptions(){const e=this.parsedOptions;let o;return this.searchable&&this.searchText.trim()?e===this.lastRankInput&&this.searchText===this.lastRankSearch?o=this.lastRanked:(o=i(e,this.searchText,(e=>e.label)),this.lastRankInput=e,this.lastRankSearch=this.searchText,this.lastRanked=o):o=e,this.multiple&&0!==this.sortSnapshot.size?[...o.filter((e=>this.sortSnapshot.has(e.value))),...o.filter((e=>!this.sortSnapshot.has(e.value)))]:o}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get selectedOption(){if(this.multiple)return;const e=this.selectedValues[0];return e?this.parsedOptions.find((o=>o.value===e)):void 0}get displayText(){const e=this.selectedValues;if(0===e.length)return"";if(!this.multiple){const o=this.parsedOptions.find((o=>o.value===e[0]));return o?o.label:e[0]}return e.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return o?o.label:e})).join(", ")}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}optionId(e){return`co-select-option-${e}`}resetActiveIndex(){const e=this.filteredOptions;if(0===e.length)return void(this.activeIndex=-1);const o=this.selectedValues,t=o.length?e.findIndex((e=>o.includes(e.value))):-1;this.activeIndex=t>=0?t:0,this.scrollActiveIntoView()}onOpenChange(e){e?(this.scrollTop=0,this.rowMetrics=function(e){const o=e("--co-select-option-height"),t=e("--co-select-menu-gap");return{rowHeight:null!=o&&o>0?o:c.rowHeight,gap:null!=t&&t>=0?t:c.gap}}(this.readCssLengthPx),this.resetActiveIndex(),this.searchable&&this.focusSearchWhenVisible()):(this.searchText="",this.activeIndex=-1,this.restoreTriggerFocus())}openPanel(){this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0}setActiveIndex(e){this.activeIndex=e,this.scrollActiveIntoView()}activateActiveOption(){const e=this.filteredOptions[this.activeIndex];e&&!e.disabled&&this.handleOptionClick(e.value)}scrollActiveIntoView(){const e=this.activeIndex;if(!(e>=0))return;const o=this.scrollTop||0,t=function(e,o,t,r){const s=e*n(t),a=s+t.rowHeight,i=d(r,t);return s<o?s:a>o+i?a-i:o}(e,o,this.metrics,h.VIEWPORT_ITEMS);t!==o&&(this.scrollTop=t),this.pendingActiveScroll=!0,this.activeScrollFrames=0}focusSearchWhenVisible(e=0){var o,t;this.isOpen&&this.searchable&&(null===(o=this.searchInputEl)||void 0===o||o.focus(),this.searchInputEl&&(null===(t=this.el.shadowRoot)||void 0===t?void 0:t.activeElement)===this.searchInputEl||e>=20||requestAnimationFrame((()=>this.focusSearchWhenVisible(e+1))))}restoreTriggerFocus(){var e;const o=document.activeElement;(o===this.el||this.el.contains(o))&&(null===(e=this.triggerEl)||void 0===e||e.focus({preventScroll:!0}))}syncOverlayScrollbars(){const e=this.isOpen&&!!this.optionsContainerEl;e&&!this.osInstance?this.osInstance=a(this.optionsContainerEl,{scrollbars:{theme:"os-theme-co",autoHide:"leave",autoHideDelay:300}},{scroll:e=>{this.scrollTop=e.elements().viewport.scrollTop}}):!e&&this.osInstance&&(this.osInstance.destroy(),this.osInstance=void 0)}componentDidRender(){this.syncOverlayScrollbars(),this.flushActiveScroll()}componentWillLoad(){this.searchText=this.searchText||""}disconnectedCallback(){var e;null===(e=this.osInstance)||void 0===e||e.destroy(),this.osInstance=void 0,this.pendingActiveScroll=!1,this.activeScrollFrames=0}renderLabel(e){const o=this.searchable&&this.searchText?l(e,this.searchText):null;return o?o.map((e=>e.match?t("span",{class:"co-select__match"},e.text):e.text)):e}renderLogo(e,o,r){if(e.logoMono){const r=(e=>`url("${e.replace(/[\\"]/g,"\\$&").replace(/[\r\n]/g,"")}")`)(e.logo);return t("span",{class:`${o} ${o}--mono`,style:{"-webkit-mask-image":r,"mask-image":r},"aria-hidden":"true"})}return t("img",{class:o,src:e.logo,alt:"",loading:r?"lazy":void 0})}get metrics(){var e;return null!==(e=this.rowMetrics)&&void 0!==e?e:c}getVirtualSlice(e){return function(e,o,t,r,s){const a=n(t),i=Math.max(0,Math.floor(o/a)-s),l=Math.min(e,i+r+2*s);return{totalHeight:d(e,t),startIdx:i,endIdx:l,offsetY:i*a}}(e.length,this.scrollTop||0,this.metrics,h.VIEWPORT_ITEMS,h.OVERSCAN)}render(){var e,o,r,a;const i=this.selectedValues,l=this.filteredOptions,c=this.isOpen&&this.activeIndex>=0&&this.activeIndex<l.length?this.optionId(this.activeIndex):void 0;return t("div",{key:"6003cc4133eddbbb6fced6d10a13c2771727df84",class:{"co-select":!0,"co-select--open":this.isOpen,"co-select--disabled":this.disabled,[`co-select--${this.size}`]:!0,[`co-select--${this.status}`]:"default"!==this.status,"co-select--flat":"flat"===this.variant,"co-select--soft":"soft"===this.variant,"co-select--inline-help":"inline-help"===this.labelStyle}},(this.label||this.secondaryLabel)&&t("div",{key:"43b148e8868b1641d025697da63e864760acad2f",class:"co-select__labels"},this.label&&t("label",{key:"13f801c1fd6bd360278c9d76b87eb1c4e3c17d96",class:"co-select__label"},this.label,t(s,{key:"ab7fbf24df924590a2a2f3e8b5ec32d5bae8b2e3",required:this.required})),this.secondaryLabel&&t("span",{key:"2346a6b8281d7661d055b7e662aa5f2dd12ce672",class:"co-select__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"33947720df541df7ef1db7ab299bb39479a3cf0d",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,bare:"dark"===this.menuSurface,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"ecf35c28e3f5a8986f55387617c1c105d2d9764e",slot:"trigger",class:"co-select__trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-label":this.label||this.ariaLabelText||void 0,"aria-disabled":this.disabled?"true":void 0,"aria-controls":h.LISTBOX_ID,"aria-activedescendant":c,tabIndex:this.disabled?-1:0,ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&t("co-icon",{key:"28ae3b87205f06144b9ec3d5f52f99c4b9d2eaae",name:this.iconLeft,size:null!==(e=this.iconSize)&&void 0!==e?e:16,class:"co-select__icon"}),(null===(o=this.selectedOption)||void 0===o?void 0:o.image)&&t("img",{key:"1cb0ebfd61ae1bd3ca702abd65c826a7a61cca7b",class:"co-select__flag",src:this.selectedOption.image,alt:""}),!(null===(r=this.selectedOption)||void 0===r?void 0:r.image)&&(null===(a=this.selectedOption)||void 0===a?void 0:a.logo)&&this.renderLogo(this.selectedOption,"co-select__logo",!1),this.multiple&&this.hasValue?t("div",{class:"co-select__chips"},this.selectedValues.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return t("span",{class:"co-select__chip",key:e},t("span",{class:"co-select__chip-label"},o?o.label:e),t("button",{class:"co-select__chip-remove",type:"button",tabIndex:-1,"aria-label":"Remove",onClick:o=>{o.stopPropagation(),this.handleOptionClick(e)}},t("co-icon",{name:"x",size:12})))}))):t("span",{class:{"co-select__text":!0,"co-select__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder),this.clearable&&this.hasValue&&!this.disabled&&t("button",{key:"496cd4f5e4573c650d208f651bc6d99303889d91",class:"co-select__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},t("co-icon",{key:"80bde8985273408581de34ebda1aacb29b85846f",name:"x-circle",size:16,weight:"fill"})),t("co-icon",{key:"b6063522d74bb07864915512416c1e71cad00062",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-select__caret"})),t("div",{key:"dfce4c79b0de038a83a34533fbafc5583679f5cc",class:{"co-select__dropdown":!0,"co-select__dropdown--dark":"dark"===this.menuSurface}},this.isOpen&&this.searchable&&t("div",{key:"96b1c59af0d3e8a55d457bff581e3091b6095117",class:"co-select__search"},t("co-icon",{key:"794175738f7337468e072f95a3069728013761f5",name:"magnifying-glass",size:16,class:"co-select__search-icon"}),t("input",{key:"c02a77bc52e3f7dfec008cff41337686281601f6",class:"co-select__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchText,"aria-controls":h.LISTBOX_ID,"aria-activedescendant":c,onInput:this.handleSearchInput,onKeyDown:this.handleNavKeyDown,ref:e=>this.searchInputEl=e})),this.isOpen&&this.searchable&&0===l.length&&t("div",{key:"db7b93c92ff58f84d2ced8c3190309c10a46e76a",class:"co-select__empty"},this.emptyText),t("div",{key:"ea7e328c1c105e50aa2d82c4a71da4e8a655bd74",class:"co-select__options",id:h.LISTBOX_ID,role:"listbox","aria-multiselectable":this.multiple?"true":void 0,ref:e=>this.optionsContainerEl=e},this.isOpen&&(()=>{const{totalHeight:e,startIdx:o,endIdx:r,offsetY:s}=this.getVirtualSlice(l);return t("div",{role:"presentation",class:"co-select__virtual-spacer",style:{height:`${e}px`,position:"relative"}},t("div",{role:"presentation",class:"co-select__virtual-window",style:{position:"absolute",top:`${s}px`,left:"0",right:"0"}},l.slice(o,r).map(((e,r)=>{const s=o+r,a=i.includes(e.value),c=!!e.disabled;return t("div",{id:this.optionId(s),role:"option","aria-selected":a?"true":"false","aria-disabled":c?"true":void 0,"aria-setsize":l.length,"aria-posinset":s+1,class:{"co-select__option":!0,"co-select__option--selected":a,"co-select__option--disabled":c,"co-select__option--active":s===this.activeIndex},onClick:()=>!c&&this.handleOptionClick(e.value),onPointerMove:e=>this.handleOptionPointerMove(e,s)},"dark"===this.menuSurface&&t("span",{class:"co-select__option-check-slot"},a&&t("co-icon",{name:"check",size:12,class:"co-select__option-check co-select__option-check--leading"})),e.image?t("img",{class:"co-select__option-flag",src:e.image,alt:"",loading:"lazy"}):e.logo?this.renderLogo(e,"co-select__option-logo",!0):e.icon?t("co-icon",{name:e.icon,size:20,class:"co-select__option-icon"}):null,t("span",{class:"co-select__option-label"},this.renderLabel(e.label)),a&&"dark"!==this.menuSurface&&t("co-icon",{name:"check",size:16,class:"co-select__option-check"}))}))))})()),this.isOpen&&this.showFooter&&t("co-list-footer",{key:"2200fd64cb53faa05e50e68ee96b44508fe4607f",class:"co-select__footer",primaryLabel:this.footerPrimaryLabel,primaryIcon:"check",onCoPrimary:this.handleFooterPrimary}))),this.helperText&&t("div",{key:"79255371e7a6cc8cfcbd71011b9746e759fc4432",class:`co-select__helper co-select__helper--${this.status}`},this.statusIcon&&t("co-icon",{key:"d72f636d292253376b84a7a2cf9f2a5711965bf8",name:this.statusIcon,size:14,class:"co-select__helper-icon"}),t("span",{key:"f0984d9d3190349a1002422639a4e54b9c92dd22",class:"co-select__helper-text"},this.helperText)))}get el(){return r(this)}static get watchers(){return{isOpen:[{onOpenChange:0}]}}};h.VIEWPORT_ITEMS=8,h.OVERSCAN=3,h.LISTBOX_ID="co-select-listbox",h.ACTIVE_SCROLL_MAX_FRAMES=48,h.style=".os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:\"\";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:\"\";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:\"\";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:\"<number>\";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:\"<number>\";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-select__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select--flat .co-select__trigger{background:transparent;border-color:transparent}.co-select--soft .co-select__trigger{background:var(--co-semantic-surface-control);border-color:transparent;color:var(--co-semantic-text-default)}.co-select--inline-help .co-select__trigger{border-color:var(--co-semantic-border-default);gap:var(--co-spacing-sm)}.co-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) 0}.co-select__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) var(--co-spacing-sm2);background:var(--co-semantic-surface-control);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:200px}.co-select__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-select__chip-remove:hover{color:var(--co-semantic-text-default)}.co-select--s .co-select__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-select--sm .co-select__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-select--lg .co-select__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;box-shadow:none;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__flag,.co-select__option-flag{flex-shrink:0;width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--co-semantic-border-subtle)}.co-select__logo,.co-select__option-logo{flex-shrink:0;width:18px;height:18px;object-fit:contain}.co-select__logo--mono,.co-select__option-logo--mono{color:var(--co-semantic-text-default);background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.co-select--disabled .co-select__logo--mono{color:var(--co-semantic-text-disabled)}@media (forced-colors: active){.co-select__logo--mono,.co-select__option-logo--mono{forced-color-adjust:none;background-color:CanvasText}.co-select--disabled .co-select__logo--mono{background-color:GrayText}}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-select-menu-padding, var(--co-spacing-sm2))}.co-select__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin-bottom:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-select__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-14, 14px);line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-select__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-select__match{font-weight:700;color:var(--co-semantic-text-default)}.co-select__empty{padding:var(--co-spacing-md);text-align:center;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14, 14px)}.co-select__options{max-height:calc(var(--co-select-option-height, 34px) * 8 + var(--co-select-menu-gap, 0px) * 7);overflow-y:auto}.co-select__options [data-overlayscrollbars-viewport~='overflowYScroll'] .co-select__virtual-window{padding-inline-end:var(--co-spacing-md)}.co-select__virtual-window{display:flex;flex-direction:column;gap:var(--co-select-menu-gap, 0px)}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-semantic-border-default);--os-handle-bg-hover:var(--co-semantic-border-field);--os-handle-bg-active:var(--co-semantic-border-strong);--os-handle-min-size:24px}.co-select__option{display:flex;align-items:center;gap:var(--co-select-option-gap, var(--co-spacing-sm2));padding:var(--co-select-option-padding, var(--co-spacing-sm2) var(--co-spacing-md));border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out);height:var(--co-select-option-height, auto);min-height:var(--co-select-option-height, 32px);box-sizing:border-box}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--active{background:var(--co-semantic-surface-hover)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-select-option-font-size, var(--co-font-size-14));font-weight:var(--co-select-option-font-weight, 400);line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-text-success, var(--co-semantic-status-success))}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-semantic-text-warning, var(--co-color-status-review))}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-text-info, var(--co-semantic-status-info))}:host([layout='horizontal']) .co-select{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-select__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-select__label{white-space:normal}:host([layout='horizontal']) .co-select>:not(.co-select__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-select--xs .co-select__trigger{min-height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12);border-radius:var(--co-border-radius-xxs)}.co-select__caret{width:var(--co-select-caret-size, 16px) !important;height:var(--co-select-caret-size, 16px) !important;color:var(--co-select-caret-color, var(--co-semantic-text-muted))}.co-select--inline-help .co-select__labels{align-items:baseline}.co-select--inline-help .co-select__label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14)}.co-select--inline-help .co-select__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12)}.co-select--inline-help .co-select__caret{color:var(--co-semantic-text-secondary);}.co-select__dropdown--dark{background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);border-radius:var(--co-border-radius-xs, 8px)}.co-select__dropdown--dark .co-select__option-label,.co-select__dropdown--dark .co-select__option-logo--mono{color:var(--co-semantic-text-inverse)}.co-select__dropdown--dark .co-select__option--selected{background:transparent}.co-select__dropdown--dark .co-select__option--active{background:var(--co-color-opacity-blanco-16)}.co-select__option-check-slot{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px}.co-select__option-check--leading{color:inherit}";export{h as co_select}
|
|
@@ -894,6 +894,51 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
|
|
|
894
894
|
box-shadow: 0 0 0 1px var(--co-semantic-border-subtle);
|
|
895
895
|
}
|
|
896
896
|
|
|
897
|
+
/* Logo (`logo`): marca CUADRADA de una opción —proveedor, integración— en el trigger
|
|
898
|
+
(seleccionada) y en las filas. A diferencia de la bandera no se recorta ni se
|
|
899
|
+
enmarca: `contain`, sin radio ni aro (el aro es del rectángulo de una bandera). */
|
|
900
|
+
.co-select__logo,
|
|
901
|
+
.co-select__option-logo {
|
|
902
|
+
flex-shrink: 0;
|
|
903
|
+
width: 18px;
|
|
904
|
+
height: 18px;
|
|
905
|
+
object-fit: contain;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
/* `logoMono`: marca de UNA tinta (OpenAI, Apple…) pintada con la tinta del texto por
|
|
909
|
+
máscara, así sigue al tema — un <img> no hereda `color` y la marca negra desaparecía
|
|
910
|
+
en oscuro. La URL va inline (`mask-image`, desde el tsx); lo demás vive acá. */
|
|
911
|
+
.co-select__logo--mono,
|
|
912
|
+
.co-select__option-logo--mono {
|
|
913
|
+
color: var(--co-semantic-text-default);
|
|
914
|
+
background-color: currentColor;
|
|
915
|
+
-webkit-mask-position: center;
|
|
916
|
+
mask-position: center;
|
|
917
|
+
-webkit-mask-size: contain;
|
|
918
|
+
mask-size: contain;
|
|
919
|
+
-webkit-mask-repeat: no-repeat;
|
|
920
|
+
mask-repeat: no-repeat;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.co-select--disabled .co-select__logo--mono {
|
|
924
|
+
color: var(--co-semantic-text-disabled);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
/* Alto contraste de Windows (forced-colors): el sistema fuerza `background-color` a Canvas
|
|
928
|
+
—el color del fondo— y la máscara no dejaba ni un píxel (medido en Chromium). La marca va
|
|
929
|
+
en la tinta del texto del sistema, y en GrayText con el trigger deshabilitado. */
|
|
930
|
+
@media (forced-colors: active) {
|
|
931
|
+
.co-select__logo--mono,
|
|
932
|
+
.co-select__option-logo--mono {
|
|
933
|
+
forced-color-adjust: none;
|
|
934
|
+
background-color: CanvasText;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.co-select--disabled .co-select__logo--mono {
|
|
938
|
+
background-color: GrayText;
|
|
939
|
+
}
|
|
940
|
+
}
|
|
941
|
+
|
|
897
942
|
.co-select__icon {
|
|
898
943
|
flex-shrink: 0;
|
|
899
944
|
color: var(--co-semantic-text-muted);
|
|
@@ -1280,7 +1325,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
|
|
|
1280
1325
|
border-radius: var(--co-border-radius-xs, 8px);
|
|
1281
1326
|
}
|
|
1282
1327
|
|
|
1283
|
-
.co-select__dropdown--dark .co-select__option-label
|
|
1328
|
+
.co-select__dropdown--dark .co-select__option-label,
|
|
1329
|
+
.co-select__dropdown--dark .co-select__option-logo--mono {
|
|
1284
1330
|
color: var(--co-semantic-text-inverse);
|
|
1285
1331
|
}
|
|
1286
1332
|
|
|
@@ -3,6 +3,8 @@ import { RequiredMark } from "../../utils/requiredMark";
|
|
|
3
3
|
import { OverlayScrollbars } from "overlayscrollbars";
|
|
4
4
|
import { highlightSegments, rankByMatch } from "../../utils/normalizeText";
|
|
5
5
|
import { LEGACY_ROW_METRICS, resolveRowMetrics, scrollTopToReveal, virtualSlice } from "./virtualRows";
|
|
6
|
+
/** `url("…")` safe for any URL, data-URIs included: escapes `\` and `"`, drops line breaks. */
|
|
7
|
+
const cssUrl = (src) => `url("${src.replace(/[\\"]/g, '\\$&').replace(/[\r\n]/g, '')}")`;
|
|
6
8
|
/**
|
|
7
9
|
* Selector desplegable de una o varias opciones de una lista conocida, con
|
|
8
10
|
* búsqueda opcional del lado del cliente y lista virtualizada. Para opciones que
|
|
@@ -23,8 +25,8 @@ export class CoSelect {
|
|
|
23
25
|
this.layout = 'vertical';
|
|
24
26
|
/** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
|
|
25
27
|
this.status = 'default';
|
|
26
|
-
/** Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de
|
|
27
|
-
* (value = label), o ese mismo array como JSON desde HTML. */
|
|
28
|
+
/** Opciones: array de `{ value, label, icon?, image?, logo?, logoMono?, disabled? }`, array de
|
|
29
|
+
* strings (value = label), o ese mismo array como JSON desde HTML. */
|
|
28
30
|
this.options = '[]';
|
|
29
31
|
/** Selección: el `value` de la opción en single; en `multiple`, array o JSON array.
|
|
30
32
|
* `''` significa «sin selección» (una opción con `value: ''` no se puede marcar).
|
|
@@ -356,7 +358,7 @@ export class CoSelect {
|
|
|
356
358
|
get hasValue() {
|
|
357
359
|
return this.selectedValues.length > 0;
|
|
358
360
|
}
|
|
359
|
-
/** The selected option in single mode (used to show its flag/image in the trigger). */
|
|
361
|
+
/** The selected option in single mode (used to show its flag/image or logo in the trigger). */
|
|
360
362
|
get selectedOption() {
|
|
361
363
|
if (this.multiple)
|
|
362
364
|
return undefined;
|
|
@@ -529,6 +531,16 @@ export class CoSelect {
|
|
|
529
531
|
return label;
|
|
530
532
|
return segs.map((s) => (s.match ? h("span", { class: "co-select__match" }, s.text) : s.text));
|
|
531
533
|
}
|
|
534
|
+
/** `logo` de una opción: `<img>` a color o, con `logoMono`, una máscara que pinta la tinta del
|
|
535
|
+
* texto (la URL va inline; tamaño, posición y tinta los pone el CSS). `lazy` solo en las filas,
|
|
536
|
+
* igual que la bandera: el trigger está a la vista. */
|
|
537
|
+
renderLogo(opt, cls, lazy) {
|
|
538
|
+
if (opt.logoMono) {
|
|
539
|
+
const src = cssUrl(opt.logo);
|
|
540
|
+
return h("span", { class: `${cls} ${cls}--mono`, style: { '-webkit-mask-image': src, 'mask-image': src }, "aria-hidden": "true" });
|
|
541
|
+
}
|
|
542
|
+
return h("img", { class: cls, src: opt.logo, alt: "", loading: lazy ? 'lazy' : undefined });
|
|
543
|
+
}
|
|
532
544
|
/** `?? LEGACY`: el harness de specs no siembra inicializadores de campo en
|
|
533
545
|
* todos los casos; en el build real `rowMetrics` siempre existe. */
|
|
534
546
|
get metrics() {
|
|
@@ -539,7 +551,7 @@ export class CoSelect {
|
|
|
539
551
|
return virtualSlice(items.length, this.scrollTop || 0, this.metrics, CoSelect.VIEWPORT_ITEMS, CoSelect.OVERSCAN);
|
|
540
552
|
}
|
|
541
553
|
render() {
|
|
542
|
-
var _a, _b;
|
|
554
|
+
var _a, _b, _c, _d;
|
|
543
555
|
const selected = this.selectedValues;
|
|
544
556
|
const options = this.filteredOptions;
|
|
545
557
|
// Se calcula UNA vez sobre `options` (no en un getter): el virtualizador
|
|
@@ -549,7 +561,7 @@ export class CoSelect {
|
|
|
549
561
|
const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
|
|
550
562
|
? this.optionId(this.activeIndex)
|
|
551
563
|
: undefined;
|
|
552
|
-
return (h("div", { key: '
|
|
564
|
+
return (h("div", { key: '6003cc4133eddbbb6fced6d10a13c2771727df84', class: {
|
|
553
565
|
'co-select': true,
|
|
554
566
|
'co-select--open': this.isOpen,
|
|
555
567
|
'co-select--disabled': this.disabled,
|
|
@@ -558,22 +570,23 @@ export class CoSelect {
|
|
|
558
570
|
'co-select--flat': this.variant === 'flat',
|
|
559
571
|
'co-select--soft': this.variant === 'soft',
|
|
560
572
|
'co-select--inline-help': this.labelStyle === 'inline-help',
|
|
561
|
-
} }, (this.label || this.secondaryLabel) && (h("div", { key: '
|
|
573
|
+
} }, (this.label || this.secondaryLabel) && (h("div", { key: '43b148e8868b1641d025697da63e864760acad2f', class: "co-select__labels" }, this.label && h("label", { key: '13f801c1fd6bd360278c9d76b87eb1c4e3c17d96', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'ab7fbf24df924590a2a2f3e8b5ec32d5bae8b2e3', required: this.required })), this.secondaryLabel && h("span", { key: '2346a6b8281d7661d055b7e662aa5f2dd12ce672', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '33947720df541df7ef1db7ab299bb39479a3cf0d', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
|
|
562
574
|
// menuSurface="dark": el panel oscuro pinta su propio chrome (fondo
|
|
563
575
|
// negro, radio xs, sin borde ni sombra — Figma 4750:23242), así que
|
|
564
576
|
// el co-popover va `bare` para no sumar el borde hairline ni la
|
|
565
577
|
// sombra del panel claro (y cualquier --co-popover-shadow heredada
|
|
566
578
|
// del contexto). En "light" (default) no cambia nada.
|
|
567
|
-
bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '
|
|
579
|
+
bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ecf35c28e3f5a8986f55387617c1c105d2d9764e', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '28ae3b87205f06144b9ec3d5f52f99c4b9d2eaae', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '1cb0ebfd61ae1bd3ca702abd65c826a7a61cca7b', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), !((_c = this.selectedOption) === null || _c === void 0 ? void 0 : _c.image) && ((_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.logo) &&
|
|
580
|
+
this.renderLogo(this.selectedOption, 'co-select__logo', false), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
|
|
568
581
|
const opt = this.parsedOptions.find((o) => o.value === v);
|
|
569
582
|
return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
|
|
570
583
|
e.stopPropagation();
|
|
571
584
|
this.handleOptionClick(v);
|
|
572
585
|
} }, h("co-icon", { name: "x", size: 12 }))));
|
|
573
|
-
}))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '
|
|
586
|
+
}))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '496cd4f5e4573c650d208f651bc6d99303889d91', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '80bde8985273408581de34ebda1aacb29b85846f', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'b6063522d74bb07864915512416c1e71cad00062', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'dfce4c79b0de038a83a34533fbafc5583679f5cc', class: {
|
|
574
587
|
'co-select__dropdown': true,
|
|
575
588
|
'co-select__dropdown--dark': this.menuSurface === 'dark',
|
|
576
|
-
} }, this.isOpen && this.searchable && (h("div", { key: '
|
|
589
|
+
} }, this.isOpen && this.searchable && (h("div", { key: '96b1c59af0d3e8a55d457bff581e3091b6095117', class: "co-select__search" }, h("co-icon", { key: '794175738f7337468e072f95a3069728013761f5', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'c02a77bc52e3f7dfec008cff41337686281601f6', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'db7b93c92ff58f84d2ced8c3190309c10a46e76a', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'ea7e328c1c105e50aa2d82c4a71da4e8a655bd74', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
|
|
577
590
|
const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
|
|
578
591
|
return (
|
|
579
592
|
// Los wrappers del virtualizador van `presentation` para que las
|
|
@@ -587,9 +600,9 @@ export class CoSelect {
|
|
|
587
600
|
'co-select__option--selected': isSelected,
|
|
588
601
|
'co-select__option--disabled': isDisabled,
|
|
589
602
|
'co-select__option--active': index === this.activeIndex,
|
|
590
|
-
}, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
|
|
603
|
+
}, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.logo ? (this.renderLogo(opt, 'co-select__option-logo', true)) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
|
|
591
604
|
}))));
|
|
592
|
-
})()), this.isOpen && this.showFooter && (h("co-list-footer", { key: '
|
|
605
|
+
})()), this.isOpen && this.showFooter && (h("co-list-footer", { key: '2200fd64cb53faa05e50e68ee96b44508fe4607f', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '79255371e7a6cc8cfcbd71011b9746e759fc4432', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'd72f636d292253376b84a7a2cf9f2a5711965bf8', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: 'f0984d9d3190349a1002422639a4e54b9c92dd22', class: "co-select__helper-text" }, this.helperText)))));
|
|
593
606
|
}
|
|
594
607
|
static get is() { return "co-select"; }
|
|
595
608
|
static get encapsulation() { return "shadow"; }
|
|
@@ -857,7 +870,7 @@ export class CoSelect {
|
|
|
857
870
|
"optional": false,
|
|
858
871
|
"docs": {
|
|
859
872
|
"tags": [],
|
|
860
|
-
"text": "Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de
|
|
873
|
+
"text": "Opciones: array de `{ value, label, icon?, image?, logo?, logoMono?, disabled? }`, array de\nstrings (value = label), o ese mismo array como JSON desde HTML."
|
|
861
874
|
},
|
|
862
875
|
"getter": false,
|
|
863
876
|
"setter": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as o,c as r,h as t,t as s}from"./index.js";import{R as a}from"./p-CWneqh4n.js";import{O as i}from"./p-ox7HzCZn.js";import{r as l,h as c}from"./p-Ba_v-MzM.js";import{d as n}from"./p-qMNHMnvI.js";import{d}from"./p-CXi0fhTi.js";import{d as h}from"./p-BxDO3-bY.js";const p=Object.freeze({rowHeight:34,gap:0}),b=e=>e.rowHeight+e.gap;function v(e,o){return e>0?e*o.rowHeight+(e-1)*o.gap:0}const g=e(class e extends o{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.coChange=r(this,"coChange",7),this.coClear=r(this,"coClear",7),this.coFooterPrimary=r(this,"coFooterPrimary",7),this.required=!1,this.placeholder="Select…",this.disabled=!1,this.clearable=!1,this.layout="vertical",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.size="md",this.variant="default",this.labelStyle="default",this.menuSurface="light",this.searchable=!1,this.searchPlaceholder="Search…",this.emptyText="No results",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.isOpen=!1,this.scrollTop=0,this.searchText="",this.sortSnapshot=new Set,this.activeIndex=-1,this.rowMetrics=p,this.pendingActiveScroll=!1,this.activeScrollFrames=0,this.lastParsedOptions=[],this.lastRankSearch="",this.lastRanked=[],this.readCssLengthPx=e=>{if("function"!=typeof getComputedStyle)return null;const o=getComputedStyle(this.el).getPropertyValue(e).trim();if(!o)return null;const r=/^(-?\d*\.?\d+)px$/.exec(o);if(r)return parseFloat(r[1]);const t=this.el.shadowRoot;if(!t)return null;const s=document.createElement("div");s.style.display="none",s.style.setProperty("height",`var(${e})`),t.appendChild(s);const a=getComputedStyle(s).height;return s.remove(),/px$/.test(a)?parseFloat(a):null},this.handleSearchInput=e=>{this.searchText=e.target.value,this.scrollTop=0,this.activeIndex=this.filteredOptions.length?0:-1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleTriggerKeyDown=e=>{this.disabled||e.target===this.triggerEl&&(this.handleNavKeyDown(e)||("Enter"===e.key||" "===e.key?(e.preventDefault(),this.isOpen?this.isOpen=!1:this.openPanel()):"ArrowDown"!==e.key||this.isOpen||(e.preventDefault(),this.openPanel())))},this.handleNavKeyDown=e=>{if(this.disabled||!this.isOpen)return!1;const o=this.filteredOptions.length,r=o-1,t=this.activeIndex>=0?this.activeIndex:-1;switch(e.key){case"ArrowDown":o&&this.setActiveIndex(t>=r?0:t+1);break;case"ArrowUp":o&&this.setActiveIndex(t<=0?r:t-1);break;case"Home":o&&this.setActiveIndex(0);break;case"End":o&&this.setActiveIndex(r);break;case" ":if(e.target===this.searchInputEl)return!1;this.activateActiveOption();break;case"Enter":this.activateActiveOption();break;default:return!1}return e.preventDefault(),!0},this.handleOptionPointerMove=(e,o)=>{"touch"!==e.pointerType&&this.activeIndex!==o&&(this.activeIndex=o)},this.flushActiveScroll=()=>{var o,r,t,s,a;if(!this.pendingActiveScroll)return;if(!this.isOpen)return void(this.pendingActiveScroll=!1);const i=this.scrollTop||0,l=null!==(r=null===(o=this.osInstance)||void 0===o?void 0:o.elements().viewport)&&void 0!==r?r:this.optionsContainerEl;return l&&(l.scrollTop=i,Math.abs(l.scrollTop-i)<=1)?(this.pendingActiveScroll=!1,this.activeScrollFrames=0,void(null===(a=null===(s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.getElementById(this.optionId(this.activeIndex)))||void 0===s?void 0:s.scrollIntoView)||void 0===a||a.call(s,{block:"nearest"}))):++this.activeScrollFrames>e.ACTIVE_SCROLL_MAX_FRAMES?(this.pendingActiveScroll=!1,void(this.activeScrollFrames=0)):void requestAnimationFrame(this.flushActiveScroll)},this.handlePopoverOpen=()=>{this.isOpen||(this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0)},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit(),this.coChange.emit(this.multiple?[]:"")},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleOptionClick=e=>{if(this.multiple){const o=[...this.selectedValues],r=o.indexOf(e);r>=0?o.splice(r,1):o.push(e),this.value=JSON.stringify(o),this.coChange.emit(o)}else this.value=e,this.isOpen=!1,this.coChange.emit(e)}}get parsedOptions(){const e=this.options;if(e===this.lastOptionsRaw)return this.lastParsedOptions;let o=e;if("string"==typeof o)try{o=JSON.parse(o)}catch(e){o=[]}const r=Array.isArray(o)?o.map((e=>"string"==typeof e?{label:e,value:e}:e)):[];return this.lastOptionsRaw=e,this.lastParsedOptions=r,r}get filteredOptions(){const e=this.parsedOptions;let o;return this.searchable&&this.searchText.trim()?e===this.lastRankInput&&this.searchText===this.lastRankSearch?o=this.lastRanked:(o=l(e,this.searchText,(e=>e.label)),this.lastRankInput=e,this.lastRankSearch=this.searchText,this.lastRanked=o):o=e,this.multiple&&0!==this.sortSnapshot.size?[...o.filter((e=>this.sortSnapshot.has(e.value))),...o.filter((e=>!this.sortSnapshot.has(e.value)))]:o}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get selectedOption(){if(this.multiple)return;const e=this.selectedValues[0];return e?this.parsedOptions.find((o=>o.value===e)):void 0}get displayText(){const e=this.selectedValues;if(0===e.length)return"";if(!this.multiple){const o=this.parsedOptions.find((o=>o.value===e[0]));return o?o.label:e[0]}return e.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return o?o.label:e})).join(", ")}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}optionId(e){return"co-select-option-"+e}resetActiveIndex(){const e=this.filteredOptions;if(0===e.length)return void(this.activeIndex=-1);const o=this.selectedValues,r=o.length?e.findIndex((e=>o.includes(e.value))):-1;this.activeIndex=r>=0?r:0,this.scrollActiveIntoView()}onOpenChange(e){e?(this.scrollTop=0,this.rowMetrics=function(e){const o=e("--co-select-option-height"),r=e("--co-select-menu-gap");return{rowHeight:null!=o&&o>0?o:p.rowHeight,gap:null!=r&&r>=0?r:p.gap}}(this.readCssLengthPx),this.resetActiveIndex(),this.searchable&&this.focusSearchWhenVisible()):(this.searchText="",this.activeIndex=-1,this.restoreTriggerFocus())}openPanel(){this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0}setActiveIndex(e){this.activeIndex=e,this.scrollActiveIntoView()}activateActiveOption(){const e=this.filteredOptions[this.activeIndex];e&&!e.disabled&&this.handleOptionClick(e.value)}scrollActiveIntoView(){const o=this.activeIndex;if(!(o>=0))return;const r=this.scrollTop||0,t=function(e,o,r,t){const s=e*b(r),a=s+r.rowHeight,i=v(t,r);return s<o?s:a>o+i?a-i:o}(o,r,this.metrics,e.VIEWPORT_ITEMS);t!==r&&(this.scrollTop=t),this.pendingActiveScroll=!0,this.activeScrollFrames=0}focusSearchWhenVisible(e=0){var o,r;this.isOpen&&this.searchable&&(null===(o=this.searchInputEl)||void 0===o||o.focus(),this.searchInputEl&&(null===(r=this.el.shadowRoot)||void 0===r?void 0:r.activeElement)===this.searchInputEl||e>=20||requestAnimationFrame((()=>this.focusSearchWhenVisible(e+1))))}restoreTriggerFocus(){var e;const o=document.activeElement;(o===this.el||this.el.contains(o))&&(null===(e=this.triggerEl)||void 0===e||e.focus({preventScroll:!0}))}syncOverlayScrollbars(){const e=this.isOpen&&!!this.optionsContainerEl;e&&!this.osInstance?this.osInstance=i(this.optionsContainerEl,{scrollbars:{theme:"os-theme-co",autoHide:"leave",autoHideDelay:300}},{scroll:e=>{this.scrollTop=e.elements().viewport.scrollTop}}):!e&&this.osInstance&&(this.osInstance.destroy(),this.osInstance=void 0)}componentDidRender(){this.syncOverlayScrollbars(),this.flushActiveScroll()}componentWillLoad(){this.searchText=this.searchText||""}disconnectedCallback(){var e;null===(e=this.osInstance)||void 0===e||e.destroy(),this.osInstance=void 0,this.pendingActiveScroll=!1,this.activeScrollFrames=0}renderLabel(e){const o=this.searchable&&this.searchText?c(e,this.searchText):null;return o?o.map((e=>e.match?t("span",{class:"co-select__match"},e.text):e.text)):e}get metrics(){var e;return null!==(e=this.rowMetrics)&&void 0!==e?e:p}getVirtualSlice(o){return function(e,o,r,t,s){const a=b(r),i=Math.max(0,Math.floor(o/a)-s),l=Math.min(e,i+t+2*s);return{totalHeight:v(e,r),startIdx:i,endIdx:l,offsetY:i*a}}(o.length,this.scrollTop||0,this.metrics,e.VIEWPORT_ITEMS,e.OVERSCAN)}render(){var o,r;const s=this.selectedValues,i=this.filteredOptions,l=this.isOpen&&this.activeIndex>=0&&this.activeIndex<i.length?this.optionId(this.activeIndex):void 0;return t("div",{key:"d121ba9ec0b29e6e70702185d055f9f2590fcf60",class:{"co-select":!0,"co-select--open":this.isOpen,"co-select--disabled":this.disabled,["co-select--"+this.size]:!0,["co-select--"+this.status]:"default"!==this.status,"co-select--flat":"flat"===this.variant,"co-select--soft":"soft"===this.variant,"co-select--inline-help":"inline-help"===this.labelStyle}},(this.label||this.secondaryLabel)&&t("div",{key:"b5ba06d1b361ba3f0488b3835e2ae9fbc723ee3f",class:"co-select__labels"},this.label&&t("label",{key:"8131f52d757b71d694ddbb5fe2e83e0762237627",class:"co-select__label"},this.label,t(a,{key:"31de4113e6cc17e7be6ecf82cf4d9108878cad67",required:this.required})),this.secondaryLabel&&t("span",{key:"d499ef261e4c8b375e6058eae2b18fa9e755008b",class:"co-select__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"2cb6fc46ec1ecab4e1ccdae6a44d9394201fb339",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,bare:"dark"===this.menuSurface,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"4e85e1c3256c40b93336fc282afaf5cb684f3af0",slot:"trigger",class:"co-select__trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-label":this.label||this.ariaLabelText||void 0,"aria-disabled":this.disabled?"true":void 0,"aria-controls":e.LISTBOX_ID,"aria-activedescendant":l,tabIndex:this.disabled?-1:0,ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&t("co-icon",{key:"b70cb41a5da6e4b0fb5c70d88658d9a15b8ff730",name:this.iconLeft,size:null!==(o=this.iconSize)&&void 0!==o?o:16,class:"co-select__icon"}),(null===(r=this.selectedOption)||void 0===r?void 0:r.image)&&t("img",{key:"e594304493fc463f48c35a8a7526488664d7300e",class:"co-select__flag",src:this.selectedOption.image,alt:""}),this.multiple&&this.hasValue?t("div",{class:"co-select__chips"},this.selectedValues.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return t("span",{class:"co-select__chip",key:e},t("span",{class:"co-select__chip-label"},o?o.label:e),t("button",{class:"co-select__chip-remove",type:"button",tabIndex:-1,"aria-label":"Remove",onClick:o=>{o.stopPropagation(),this.handleOptionClick(e)}},t("co-icon",{name:"x",size:12})))}))):t("span",{class:{"co-select__text":!0,"co-select__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder),this.clearable&&this.hasValue&&!this.disabled&&t("button",{key:"73a50ae2aa6c1a9f449a5abb9851fdef231e7ffc",class:"co-select__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},t("co-icon",{key:"ade7609dc136ec20a0412fd7e460a95e50d516e4",name:"x-circle",size:16,weight:"fill"})),t("co-icon",{key:"7b5bba8fb8fca31613879ab8743f884b1bd71802",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-select__caret"})),t("div",{key:"2e6bd8187439a7920fe6ad151886da76f79426fc",class:{"co-select__dropdown":!0,"co-select__dropdown--dark":"dark"===this.menuSurface}},this.isOpen&&this.searchable&&t("div",{key:"75b3f339a256945a1c5153453033ab3ad0b5902e",class:"co-select__search"},t("co-icon",{key:"95f2a28646ffba6416fe7582a360b7c6b4ce58a9",name:"magnifying-glass",size:16,class:"co-select__search-icon"}),t("input",{key:"8e539a698da9d3ff68e3cce544cac9da4c285afa",class:"co-select__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchText,"aria-controls":e.LISTBOX_ID,"aria-activedescendant":l,onInput:this.handleSearchInput,onKeyDown:this.handleNavKeyDown,ref:e=>this.searchInputEl=e})),this.isOpen&&this.searchable&&0===i.length&&t("div",{key:"b0ed2db9c7e397dae2f59cf3f11d9a2ccdf27ab8",class:"co-select__empty"},this.emptyText),t("div",{key:"ec2381d0de5d9a928510d0e15b7ca78b449844b1",class:"co-select__options",id:e.LISTBOX_ID,role:"listbox","aria-multiselectable":this.multiple?"true":void 0,ref:e=>this.optionsContainerEl=e},this.isOpen&&(()=>{const{totalHeight:e,startIdx:o,endIdx:r,offsetY:a}=this.getVirtualSlice(i);return t("div",{role:"presentation",class:"co-select__virtual-spacer",style:{height:e+"px",position:"relative"}},t("div",{role:"presentation",class:"co-select__virtual-window",style:{position:"absolute",top:a+"px",left:"0",right:"0"}},i.slice(o,r).map(((e,r)=>{const a=o+r,l=s.includes(e.value),c=!!e.disabled;return t("div",{id:this.optionId(a),role:"option","aria-selected":l?"true":"false","aria-disabled":c?"true":void 0,"aria-setsize":i.length,"aria-posinset":a+1,class:{"co-select__option":!0,"co-select__option--selected":l,"co-select__option--disabled":c,"co-select__option--active":a===this.activeIndex},onClick:()=>!c&&this.handleOptionClick(e.value),onPointerMove:e=>this.handleOptionPointerMove(e,a)},"dark"===this.menuSurface&&t("span",{class:"co-select__option-check-slot"},l&&t("co-icon",{name:"check",size:12,class:"co-select__option-check co-select__option-check--leading"})),e.image?t("img",{class:"co-select__option-flag",src:e.image,alt:"",loading:"lazy"}):e.icon?t("co-icon",{name:e.icon,size:20,class:"co-select__option-icon"}):null,t("span",{class:"co-select__option-label"},this.renderLabel(e.label)),l&&"dark"!==this.menuSurface&&t("co-icon",{name:"check",size:16,class:"co-select__option-check"}))}))))})()),this.isOpen&&this.showFooter&&t("co-list-footer",{key:"e46141c876fdd0e8f05a14318f969ed370c2e201",class:"co-select__footer",primaryLabel:this.footerPrimaryLabel,primaryIcon:"check",onCoPrimary:this.handleFooterPrimary}))),this.helperText&&t("div",{key:"13b7b84f7241bed5afdfd70c1867045ae4fcd820",class:"co-select__helper co-select__helper--"+this.status},this.statusIcon&&t("co-icon",{key:"0f4a854f367a34b7a314ba0a768d02a35b03df07",name:this.statusIcon,size:14,class:"co-select__helper-icon"}),t("span",{key:"965b58e53ac2bfd55c4d416e07062067c9f686b7",class:"co-select__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange:0}]}}static get style(){return".os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:\"\";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:\"\";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:\"\";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:\"<number>\";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:\"<number>\";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-select__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select--flat .co-select__trigger{background:transparent;border-color:transparent}.co-select--soft .co-select__trigger{background:var(--co-semantic-surface-control);border-color:transparent;color:var(--co-semantic-text-default)}.co-select--inline-help .co-select__trigger{border-color:var(--co-semantic-border-default);gap:var(--co-spacing-sm)}.co-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) 0}.co-select__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) var(--co-spacing-sm2);background:var(--co-semantic-surface-control);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:200px}.co-select__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-select__chip-remove:hover{color:var(--co-semantic-text-default)}.co-select--s .co-select__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-select--sm .co-select__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-select--lg .co-select__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;box-shadow:none;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__flag,.co-select__option-flag{flex-shrink:0;width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--co-semantic-border-subtle)}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-select-menu-padding, var(--co-spacing-sm2))}.co-select__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin-bottom:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-select__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-14, 14px);line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-select__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-select__match{font-weight:700;color:var(--co-semantic-text-default)}.co-select__empty{padding:var(--co-spacing-md);text-align:center;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14, 14px)}.co-select__options{max-height:calc(var(--co-select-option-height, 34px) * 8 + var(--co-select-menu-gap, 0px) * 7);overflow-y:auto}.co-select__options [data-overlayscrollbars-viewport~='overflowYScroll'] .co-select__virtual-window{padding-inline-end:var(--co-spacing-md)}.co-select__virtual-window{display:flex;flex-direction:column;gap:var(--co-select-menu-gap, 0px)}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-semantic-border-default);--os-handle-bg-hover:var(--co-semantic-border-field);--os-handle-bg-active:var(--co-semantic-border-strong);--os-handle-min-size:24px}.co-select__option{display:flex;align-items:center;gap:var(--co-select-option-gap, var(--co-spacing-sm2));padding:var(--co-select-option-padding, var(--co-spacing-sm2) var(--co-spacing-md));border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out);height:var(--co-select-option-height, auto);min-height:var(--co-select-option-height, 32px);box-sizing:border-box}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--active{background:var(--co-semantic-surface-hover)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-select-option-font-size, var(--co-font-size-14));font-weight:var(--co-select-option-font-weight, 400);line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-text-success, var(--co-semantic-status-success))}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-semantic-text-warning, var(--co-color-status-review))}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-text-info, var(--co-semantic-status-info))}:host([layout='horizontal']) .co-select{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-select__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-select__label{white-space:normal}:host([layout='horizontal']) .co-select>:not(.co-select__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-select--xs .co-select__trigger{min-height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12);border-radius:var(--co-border-radius-xxs)}.co-select__caret{width:var(--co-select-caret-size, 16px) !important;height:var(--co-select-caret-size, 16px) !important;color:var(--co-select-caret-color, var(--co-semantic-text-muted))}.co-select--inline-help .co-select__labels{align-items:baseline}.co-select--inline-help .co-select__label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14)}.co-select--inline-help .co-select__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12)}.co-select--inline-help .co-select__caret{color:var(--co-semantic-text-secondary);}.co-select__dropdown--dark{background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);border-radius:var(--co-border-radius-xs, 8px)}.co-select__dropdown--dark .co-select__option-label{color:var(--co-semantic-text-inverse)}.co-select__dropdown--dark .co-select__option--selected{background:transparent}.co-select__dropdown--dark .co-select__option--active{background:var(--co-color-opacity-blanco-16)}.co-select__option-check-slot{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px}.co-select__option-check--leading{color:inherit}"}},[1,"co-select",{label:[1],ariaLabelText:[1,"aria-label-text"],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],iconSize:[2,"icon-size"],clearable:[4],helperText:[1,"helper-text"],layout:[513],status:[1],options:[1],value:[1025],multiple:[4],size:[513],variant:[513],labelStyle:[513,"label-style"],menuSurface:[513,"menu-surface"],searchable:[516],searchPlaceholder:[1,"search-placeholder"],emptyText:[1,"empty-text"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],isOpen:[32],scrollTop:[32],searchText:[32],sortSnapshot:[32],activeIndex:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function f(){"undefined"!=typeof customElements&&["co-select","co-icon","co-list-footer","co-popover"].forEach((e=>{switch(e){case"co-select":customElements.get(s(e))||customElements.define(s(e),g);break;case"co-icon":customElements.get(s(e))||n();break;case"co-list-footer":customElements.get(s(e))||d();break;case"co-popover":customElements.get(s(e))||h()}}))}g.VIEWPORT_ITEMS=8,g.OVERSCAN=3,g.LISTBOX_ID="co-select-listbox",g.ACTIVE_SCROLL_MAX_FRAMES=48,f();const m=g,u=f;export{m as CoSelect,u as defineCustomElement}
|
|
1
|
+
import{p as e,H as o,c as t,h as r,t as s}from"./index.js";import{R as a}from"./p-CWneqh4n.js";import{O as i}from"./p-ox7HzCZn.js";import{r as l,h as c}from"./p-Ba_v-MzM.js";import{d as n}from"./p-qMNHMnvI.js";import{d}from"./p-CXi0fhTi.js";import{d as h}from"./p-BxDO3-bY.js";const p=Object.freeze({rowHeight:34,gap:0}),b=e=>e.rowHeight+e.gap;function v(e,o){return e>0?e*o.rowHeight+(e-1)*o.gap:0}const g=e(class e extends o{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.coChange=t(this,"coChange",7),this.coClear=t(this,"coClear",7),this.coFooterPrimary=t(this,"coFooterPrimary",7),this.required=!1,this.placeholder="Select…",this.disabled=!1,this.clearable=!1,this.layout="vertical",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.size="md",this.variant="default",this.labelStyle="default",this.menuSurface="light",this.searchable=!1,this.searchPlaceholder="Search…",this.emptyText="No results",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.isOpen=!1,this.scrollTop=0,this.searchText="",this.sortSnapshot=new Set,this.activeIndex=-1,this.rowMetrics=p,this.pendingActiveScroll=!1,this.activeScrollFrames=0,this.lastParsedOptions=[],this.lastRankSearch="",this.lastRanked=[],this.readCssLengthPx=e=>{if("function"!=typeof getComputedStyle)return null;const o=getComputedStyle(this.el).getPropertyValue(e).trim();if(!o)return null;const t=/^(-?\d*\.?\d+)px$/.exec(o);if(t)return parseFloat(t[1]);const r=this.el.shadowRoot;if(!r)return null;const s=document.createElement("div");s.style.display="none",s.style.setProperty("height",`var(${e})`),r.appendChild(s);const a=getComputedStyle(s).height;return s.remove(),/px$/.test(a)?parseFloat(a):null},this.handleSearchInput=e=>{this.searchText=e.target.value,this.scrollTop=0,this.activeIndex=this.filteredOptions.length?0:-1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleTriggerKeyDown=e=>{this.disabled||e.target===this.triggerEl&&(this.handleNavKeyDown(e)||("Enter"===e.key||" "===e.key?(e.preventDefault(),this.isOpen?this.isOpen=!1:this.openPanel()):"ArrowDown"!==e.key||this.isOpen||(e.preventDefault(),this.openPanel())))},this.handleNavKeyDown=e=>{if(this.disabled||!this.isOpen)return!1;const o=this.filteredOptions.length,t=o-1,r=this.activeIndex>=0?this.activeIndex:-1;switch(e.key){case"ArrowDown":o&&this.setActiveIndex(r>=t?0:r+1);break;case"ArrowUp":o&&this.setActiveIndex(r<=0?t:r-1);break;case"Home":o&&this.setActiveIndex(0);break;case"End":o&&this.setActiveIndex(t);break;case" ":if(e.target===this.searchInputEl)return!1;this.activateActiveOption();break;case"Enter":this.activateActiveOption();break;default:return!1}return e.preventDefault(),!0},this.handleOptionPointerMove=(e,o)=>{"touch"!==e.pointerType&&this.activeIndex!==o&&(this.activeIndex=o)},this.flushActiveScroll=()=>{var o,t,r,s,a;if(!this.pendingActiveScroll)return;if(!this.isOpen)return void(this.pendingActiveScroll=!1);const i=this.scrollTop||0,l=null!==(t=null===(o=this.osInstance)||void 0===o?void 0:o.elements().viewport)&&void 0!==t?t:this.optionsContainerEl;return l&&(l.scrollTop=i,Math.abs(l.scrollTop-i)<=1)?(this.pendingActiveScroll=!1,this.activeScrollFrames=0,void(null===(a=null===(s=null===(r=this.el.shadowRoot)||void 0===r?void 0:r.getElementById(this.optionId(this.activeIndex)))||void 0===s?void 0:s.scrollIntoView)||void 0===a||a.call(s,{block:"nearest"}))):++this.activeScrollFrames>e.ACTIVE_SCROLL_MAX_FRAMES?(this.pendingActiveScroll=!1,void(this.activeScrollFrames=0)):void requestAnimationFrame(this.flushActiveScroll)},this.handlePopoverOpen=()=>{this.isOpen||(this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0)},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit(),this.coChange.emit(this.multiple?[]:"")},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleOptionClick=e=>{if(this.multiple){const o=[...this.selectedValues],t=o.indexOf(e);t>=0?o.splice(t,1):o.push(e),this.value=JSON.stringify(o),this.coChange.emit(o)}else this.value=e,this.isOpen=!1,this.coChange.emit(e)}}get parsedOptions(){const e=this.options;if(e===this.lastOptionsRaw)return this.lastParsedOptions;let o=e;if("string"==typeof o)try{o=JSON.parse(o)}catch(e){o=[]}const t=Array.isArray(o)?o.map((e=>"string"==typeof e?{label:e,value:e}:e)):[];return this.lastOptionsRaw=e,this.lastParsedOptions=t,t}get filteredOptions(){const e=this.parsedOptions;let o;return this.searchable&&this.searchText.trim()?e===this.lastRankInput&&this.searchText===this.lastRankSearch?o=this.lastRanked:(o=l(e,this.searchText,(e=>e.label)),this.lastRankInput=e,this.lastRankSearch=this.searchText,this.lastRanked=o):o=e,this.multiple&&0!==this.sortSnapshot.size?[...o.filter((e=>this.sortSnapshot.has(e.value))),...o.filter((e=>!this.sortSnapshot.has(e.value)))]:o}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get selectedOption(){if(this.multiple)return;const e=this.selectedValues[0];return e?this.parsedOptions.find((o=>o.value===e)):void 0}get displayText(){const e=this.selectedValues;if(0===e.length)return"";if(!this.multiple){const o=this.parsedOptions.find((o=>o.value===e[0]));return o?o.label:e[0]}return e.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return o?o.label:e})).join(", ")}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}optionId(e){return"co-select-option-"+e}resetActiveIndex(){const e=this.filteredOptions;if(0===e.length)return void(this.activeIndex=-1);const o=this.selectedValues,t=o.length?e.findIndex((e=>o.includes(e.value))):-1;this.activeIndex=t>=0?t:0,this.scrollActiveIntoView()}onOpenChange(e){e?(this.scrollTop=0,this.rowMetrics=function(e){const o=e("--co-select-option-height"),t=e("--co-select-menu-gap");return{rowHeight:null!=o&&o>0?o:p.rowHeight,gap:null!=t&&t>=0?t:p.gap}}(this.readCssLengthPx),this.resetActiveIndex(),this.searchable&&this.focusSearchWhenVisible()):(this.searchText="",this.activeIndex=-1,this.restoreTriggerFocus())}openPanel(){this.sortSnapshot=new Set(this.selectedValues),this.isOpen=!0}setActiveIndex(e){this.activeIndex=e,this.scrollActiveIntoView()}activateActiveOption(){const e=this.filteredOptions[this.activeIndex];e&&!e.disabled&&this.handleOptionClick(e.value)}scrollActiveIntoView(){const o=this.activeIndex;if(!(o>=0))return;const t=this.scrollTop||0,r=function(e,o,t,r){const s=e*b(t),a=s+t.rowHeight,i=v(r,t);return s<o?s:a>o+i?a-i:o}(o,t,this.metrics,e.VIEWPORT_ITEMS);r!==t&&(this.scrollTop=r),this.pendingActiveScroll=!0,this.activeScrollFrames=0}focusSearchWhenVisible(e=0){var o,t;this.isOpen&&this.searchable&&(null===(o=this.searchInputEl)||void 0===o||o.focus(),this.searchInputEl&&(null===(t=this.el.shadowRoot)||void 0===t?void 0:t.activeElement)===this.searchInputEl||e>=20||requestAnimationFrame((()=>this.focusSearchWhenVisible(e+1))))}restoreTriggerFocus(){var e;const o=document.activeElement;(o===this.el||this.el.contains(o))&&(null===(e=this.triggerEl)||void 0===e||e.focus({preventScroll:!0}))}syncOverlayScrollbars(){const e=this.isOpen&&!!this.optionsContainerEl;e&&!this.osInstance?this.osInstance=i(this.optionsContainerEl,{scrollbars:{theme:"os-theme-co",autoHide:"leave",autoHideDelay:300}},{scroll:e=>{this.scrollTop=e.elements().viewport.scrollTop}}):!e&&this.osInstance&&(this.osInstance.destroy(),this.osInstance=void 0)}componentDidRender(){this.syncOverlayScrollbars(),this.flushActiveScroll()}componentWillLoad(){this.searchText=this.searchText||""}disconnectedCallback(){var e;null===(e=this.osInstance)||void 0===e||e.destroy(),this.osInstance=void 0,this.pendingActiveScroll=!1,this.activeScrollFrames=0}renderLabel(e){const o=this.searchable&&this.searchText?c(e,this.searchText):null;return o?o.map((e=>e.match?r("span",{class:"co-select__match"},e.text):e.text)):e}renderLogo(e,o,t){if(e.logoMono){const t=(e=>`url("${e.replace(/[\\"]/g,"\\$&").replace(/[\r\n]/g,"")}")`)(e.logo);return r("span",{class:`${o} ${o}--mono`,style:{"-webkit-mask-image":t,"mask-image":t},"aria-hidden":"true"})}return r("img",{class:o,src:e.logo,alt:"",loading:t?"lazy":void 0})}get metrics(){var e;return null!==(e=this.rowMetrics)&&void 0!==e?e:p}getVirtualSlice(o){return function(e,o,t,r,s){const a=b(t),i=Math.max(0,Math.floor(o/a)-s),l=Math.min(e,i+r+2*s);return{totalHeight:v(e,t),startIdx:i,endIdx:l,offsetY:i*a}}(o.length,this.scrollTop||0,this.metrics,e.VIEWPORT_ITEMS,e.OVERSCAN)}render(){var o,t,s,i;const l=this.selectedValues,c=this.filteredOptions,n=this.isOpen&&this.activeIndex>=0&&this.activeIndex<c.length?this.optionId(this.activeIndex):void 0;return r("div",{key:"6003cc4133eddbbb6fced6d10a13c2771727df84",class:{"co-select":!0,"co-select--open":this.isOpen,"co-select--disabled":this.disabled,["co-select--"+this.size]:!0,["co-select--"+this.status]:"default"!==this.status,"co-select--flat":"flat"===this.variant,"co-select--soft":"soft"===this.variant,"co-select--inline-help":"inline-help"===this.labelStyle}},(this.label||this.secondaryLabel)&&r("div",{key:"43b148e8868b1641d025697da63e864760acad2f",class:"co-select__labels"},this.label&&r("label",{key:"13f801c1fd6bd360278c9d76b87eb1c4e3c17d96",class:"co-select__label"},this.label,r(a,{key:"ab7fbf24df924590a2a2f3e8b5ec32d5bae8b2e3",required:this.required})),this.secondaryLabel&&r("span",{key:"2346a6b8281d7661d055b7e662aa5f2dd12ce672",class:"co-select__secondary-label"},this.secondaryLabel)),r("co-popover",{key:"33947720df541df7ef1db7ab299bb39479a3cf0d",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,bare:"dark"===this.menuSurface,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},r("div",{key:"ecf35c28e3f5a8986f55387617c1c105d2d9764e",slot:"trigger",class:"co-select__trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-label":this.label||this.ariaLabelText||void 0,"aria-disabled":this.disabled?"true":void 0,"aria-controls":e.LISTBOX_ID,"aria-activedescendant":n,tabIndex:this.disabled?-1:0,ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&r("co-icon",{key:"28ae3b87205f06144b9ec3d5f52f99c4b9d2eaae",name:this.iconLeft,size:null!==(o=this.iconSize)&&void 0!==o?o:16,class:"co-select__icon"}),(null===(t=this.selectedOption)||void 0===t?void 0:t.image)&&r("img",{key:"1cb0ebfd61ae1bd3ca702abd65c826a7a61cca7b",class:"co-select__flag",src:this.selectedOption.image,alt:""}),!(null===(s=this.selectedOption)||void 0===s?void 0:s.image)&&(null===(i=this.selectedOption)||void 0===i?void 0:i.logo)&&this.renderLogo(this.selectedOption,"co-select__logo",!1),this.multiple&&this.hasValue?r("div",{class:"co-select__chips"},this.selectedValues.map((e=>{const o=this.parsedOptions.find((o=>o.value===e));return r("span",{class:"co-select__chip",key:e},r("span",{class:"co-select__chip-label"},o?o.label:e),r("button",{class:"co-select__chip-remove",type:"button",tabIndex:-1,"aria-label":"Remove",onClick:o=>{o.stopPropagation(),this.handleOptionClick(e)}},r("co-icon",{name:"x",size:12})))}))):r("span",{class:{"co-select__text":!0,"co-select__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder),this.clearable&&this.hasValue&&!this.disabled&&r("button",{key:"496cd4f5e4573c650d208f651bc6d99303889d91",class:"co-select__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},r("co-icon",{key:"80bde8985273408581de34ebda1aacb29b85846f",name:"x-circle",size:16,weight:"fill"})),r("co-icon",{key:"b6063522d74bb07864915512416c1e71cad00062",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-select__caret"})),r("div",{key:"dfce4c79b0de038a83a34533fbafc5583679f5cc",class:{"co-select__dropdown":!0,"co-select__dropdown--dark":"dark"===this.menuSurface}},this.isOpen&&this.searchable&&r("div",{key:"96b1c59af0d3e8a55d457bff581e3091b6095117",class:"co-select__search"},r("co-icon",{key:"794175738f7337468e072f95a3069728013761f5",name:"magnifying-glass",size:16,class:"co-select__search-icon"}),r("input",{key:"c02a77bc52e3f7dfec008cff41337686281601f6",class:"co-select__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchText,"aria-controls":e.LISTBOX_ID,"aria-activedescendant":n,onInput:this.handleSearchInput,onKeyDown:this.handleNavKeyDown,ref:e=>this.searchInputEl=e})),this.isOpen&&this.searchable&&0===c.length&&r("div",{key:"db7b93c92ff58f84d2ced8c3190309c10a46e76a",class:"co-select__empty"},this.emptyText),r("div",{key:"ea7e328c1c105e50aa2d82c4a71da4e8a655bd74",class:"co-select__options",id:e.LISTBOX_ID,role:"listbox","aria-multiselectable":this.multiple?"true":void 0,ref:e=>this.optionsContainerEl=e},this.isOpen&&(()=>{const{totalHeight:e,startIdx:o,endIdx:t,offsetY:s}=this.getVirtualSlice(c);return r("div",{role:"presentation",class:"co-select__virtual-spacer",style:{height:e+"px",position:"relative"}},r("div",{role:"presentation",class:"co-select__virtual-window",style:{position:"absolute",top:s+"px",left:"0",right:"0"}},c.slice(o,t).map(((e,t)=>{const s=o+t,a=l.includes(e.value),i=!!e.disabled;return r("div",{id:this.optionId(s),role:"option","aria-selected":a?"true":"false","aria-disabled":i?"true":void 0,"aria-setsize":c.length,"aria-posinset":s+1,class:{"co-select__option":!0,"co-select__option--selected":a,"co-select__option--disabled":i,"co-select__option--active":s===this.activeIndex},onClick:()=>!i&&this.handleOptionClick(e.value),onPointerMove:e=>this.handleOptionPointerMove(e,s)},"dark"===this.menuSurface&&r("span",{class:"co-select__option-check-slot"},a&&r("co-icon",{name:"check",size:12,class:"co-select__option-check co-select__option-check--leading"})),e.image?r("img",{class:"co-select__option-flag",src:e.image,alt:"",loading:"lazy"}):e.logo?this.renderLogo(e,"co-select__option-logo",!0):e.icon?r("co-icon",{name:e.icon,size:20,class:"co-select__option-icon"}):null,r("span",{class:"co-select__option-label"},this.renderLabel(e.label)),a&&"dark"!==this.menuSurface&&r("co-icon",{name:"check",size:16,class:"co-select__option-check"}))}))))})()),this.isOpen&&this.showFooter&&r("co-list-footer",{key:"2200fd64cb53faa05e50e68ee96b44508fe4607f",class:"co-select__footer",primaryLabel:this.footerPrimaryLabel,primaryIcon:"check",onCoPrimary:this.handleFooterPrimary}))),this.helperText&&r("div",{key:"79255371e7a6cc8cfcbd71011b9746e759fc4432",class:"co-select__helper co-select__helper--"+this.status},this.statusIcon&&r("co-icon",{key:"d72f636d292253376b84a7a2cf9f2a5711965bf8",name:this.statusIcon,size:14,class:"co-select__helper-icon"}),r("span",{key:"f0984d9d3190349a1002422639a4e54b9c92dd22",class:"co-select__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange:0}]}}static get style(){return".os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:\"\";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:\"\";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:\"\";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:\"<number>\";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:\"<number>\";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-select__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select--flat .co-select__trigger{background:transparent;border-color:transparent}.co-select--soft .co-select__trigger{background:var(--co-semantic-surface-control);border-color:transparent;color:var(--co-semantic-text-default)}.co-select--inline-help .co-select__trigger{border-color:var(--co-semantic-border-default);gap:var(--co-spacing-sm)}.co-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) 0}.co-select__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) var(--co-spacing-sm2);background:var(--co-semantic-surface-control);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:200px}.co-select__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-select__chip-remove:hover{color:var(--co-semantic-text-default)}.co-select--s .co-select__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-select--sm .co-select__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-select--lg .co-select__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;box-shadow:none;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__flag,.co-select__option-flag{flex-shrink:0;width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--co-semantic-border-subtle)}.co-select__logo,.co-select__option-logo{flex-shrink:0;width:18px;height:18px;object-fit:contain}.co-select__logo--mono,.co-select__option-logo--mono{color:var(--co-semantic-text-default);background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.co-select--disabled .co-select__logo--mono{color:var(--co-semantic-text-disabled)}@media (forced-colors: active){.co-select__logo--mono,.co-select__option-logo--mono{forced-color-adjust:none;background-color:CanvasText}.co-select--disabled .co-select__logo--mono{background-color:GrayText}}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-select-menu-padding, var(--co-spacing-sm2))}.co-select__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin-bottom:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-select__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-14, 14px);line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-select__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-select__match{font-weight:700;color:var(--co-semantic-text-default)}.co-select__empty{padding:var(--co-spacing-md);text-align:center;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14, 14px)}.co-select__options{max-height:calc(var(--co-select-option-height, 34px) * 8 + var(--co-select-menu-gap, 0px) * 7);overflow-y:auto}.co-select__options [data-overlayscrollbars-viewport~='overflowYScroll'] .co-select__virtual-window{padding-inline-end:var(--co-spacing-md)}.co-select__virtual-window{display:flex;flex-direction:column;gap:var(--co-select-menu-gap, 0px)}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-semantic-border-default);--os-handle-bg-hover:var(--co-semantic-border-field);--os-handle-bg-active:var(--co-semantic-border-strong);--os-handle-min-size:24px}.co-select__option{display:flex;align-items:center;gap:var(--co-select-option-gap, var(--co-spacing-sm2));padding:var(--co-select-option-padding, var(--co-spacing-sm2) var(--co-spacing-md));border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out);height:var(--co-select-option-height, auto);min-height:var(--co-select-option-height, 32px);box-sizing:border-box}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--active{background:var(--co-semantic-surface-hover)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-select-option-font-size, var(--co-font-size-14));font-weight:var(--co-select-option-font-weight, 400);line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-text-success, var(--co-semantic-status-success))}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-semantic-text-warning, var(--co-color-status-review))}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-text-info, var(--co-semantic-status-info))}:host([layout='horizontal']) .co-select{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-select__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-select__label{white-space:normal}:host([layout='horizontal']) .co-select>:not(.co-select__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-select--xs .co-select__trigger{min-height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12);border-radius:var(--co-border-radius-xxs)}.co-select__caret{width:var(--co-select-caret-size, 16px) !important;height:var(--co-select-caret-size, 16px) !important;color:var(--co-select-caret-color, var(--co-semantic-text-muted))}.co-select--inline-help .co-select__labels{align-items:baseline}.co-select--inline-help .co-select__label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14)}.co-select--inline-help .co-select__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12)}.co-select--inline-help .co-select__caret{color:var(--co-semantic-text-secondary);}.co-select__dropdown--dark{background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);border-radius:var(--co-border-radius-xs, 8px)}.co-select__dropdown--dark .co-select__option-label,.co-select__dropdown--dark .co-select__option-logo--mono{color:var(--co-semantic-text-inverse)}.co-select__dropdown--dark .co-select__option--selected{background:transparent}.co-select__dropdown--dark .co-select__option--active{background:var(--co-color-opacity-blanco-16)}.co-select__option-check-slot{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px}.co-select__option-check--leading{color:inherit}"}},[1,"co-select",{label:[1],ariaLabelText:[1,"aria-label-text"],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],iconSize:[2,"icon-size"],clearable:[4],helperText:[1,"helper-text"],layout:[513],status:[1],options:[1],value:[1025],multiple:[4],size:[513],variant:[513],labelStyle:[513,"label-style"],menuSurface:[513,"menu-surface"],searchable:[516],searchPlaceholder:[1,"search-placeholder"],emptyText:[1,"empty-text"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],isOpen:[32],scrollTop:[32],searchText:[32],sortSnapshot:[32],activeIndex:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-select","co-icon","co-list-footer","co-popover"].forEach((e=>{switch(e){case"co-select":customElements.get(s(e))||customElements.define(s(e),g);break;case"co-icon":customElements.get(s(e))||n();break;case"co-list-footer":customElements.get(s(e))||d();break;case"co-popover":customElements.get(s(e))||h()}}))}g.VIEWPORT_ITEMS=8,g.OVERSCAN=3,g.LISTBOX_ID="co-select-listbox",g.ACTIVE_SCROLL_MAX_FRAMES=48,m();const f=g,u=m;export{f as CoSelect,u as defineCustomElement}
|