scb-wc 0.1.173 → 0.1.174

package/mvc/components/scb-select/scb-select.js

@@ -1,4 +1,4 @@
-import{a as h,f as S,h as I,m as $,p as n,v as m,y as T}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import{n as F}from"../../vendor/lazy-focus-ring.js";import{t as M}from"../../vendor/component-defaults.js";import{t as l}from"../../vendor/decorate.js";import"../../vendor/scb-chevron.js";import"../scb-icon-button/scb-icon-button.js";import{a as P,i as z,n as R,t as k}from"../../vendor/manual-popover.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var y=typeof globalThis<"u"?globalThis:window;if(!y.__scb_ce_guard_installed__){y.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,s,i){try{customElements.get(t)||e(t,s,i)}catch(o){var a=String(o||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var x,r=(x=class extends I{constructor(){super(),this._optionsObserver=null,this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.required=!1,this.error=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.errorText="",this.helpText="",this.helpLabel="Visa hjälptext",this.withRadiobuttons=!1,this.noHighlightSelected=!1,this.size=M["scb-select"].size,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.zIndex=void 0,this._form=null,this._formResetHandler=null,this._formSubmitHandler=null,this._initialValue="",this._initialValues=[],this._customValidationMessage="",this._validationMessage="",this._hasValidationBeenReported=!1,this._selectId=`scb-select-${Math.random().toString(36).slice(2,11)}`,this._placementFrame=0,this._optionsPlacement="below",this._activeDescendant="",this._onDocumentClick=e=>{if(!this.open)return;const t=e.composedPath();if(!t.includes(this)){const s=t.find(i=>i instanceof HTMLElement?i.tagName.toLowerCase()==="scb-select":!1);if(s&&s!==this){this._setOpen(!1);return}this._setOpen(!1),requestAnimationFrame(()=>{this.open||this._focusTrigger()})}},this._scheduleOptionsPlacement=()=>{!this.open||!this.isConnected||(this._placementFrame&&cancelAnimationFrame(this._placementFrame),this._placementFrame=requestAnimationFrame(()=>{this._placementFrame=0,this._updateOptionsPlacement()}))},this._onSlotClick=e=>{const t=this._getOptions(),s=e.composedPath(),i=t.find(a=>s.includes(a));i&&(this._selectOption(i),e.stopPropagation())},this._onKeyDown=e=>{if(e.key==="Tab"&&this.open){this._setOpen(!1),this._syncOptionsPopover();return}if(e.key==="Escape"&&this.open){e.preventDefault(),e.stopPropagation(),this._setOpen(!1),this._focusTrigger();return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation();const t=e.key==="ArrowDown"?1:-1;if(!this.open){this._setOpen(!0),this.updateComplete.then(()=>{this._setFocusedIndex(this._getInitialFocusedIndex(),{scroll:!1}),this.focusedIndex>=0&&e.key==="ArrowUp"&&this._moveFocusedIndex(-1)});return}this._moveFocusedIndex(t);return}if((e.key==="Home"||e.key==="End")&&this.open){e.preventDefault(),e.stopPropagation();const t=this._getOptions();let s=t.findIndex(i=>!i.disabled);if(e.key==="End"){for(let i=t.length-1;i>=0;i-=1)if(!t[i]?.disabled){s=i;break}}this._setFocusedIndex(s);return}if(e.key==="Enter"||e.key===" "){if(e.preventDefault(),this.open){const t=this._getFocusedOption();t&&this._selectOption(t);return}this._setOpen(!0)}},this._onOptionKeyDown=e=>{if(e.key==="Escape"&&this.open){e.preventDefault(),e.stopPropagation(),this._setOpen(!1),this._focusTrigger();return}if(e.key==="Enter"||e.key===" "){e.preventDefault();const t=this._getOptions(),s=e.composedPath(),i=t.find(a=>s.includes(a));i&&this._selectOption(i)}},"attachInternals"in this&&(this._internals=this.attachInternals())}_syncDensityForSize(){this.size==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick),document.addEventListener("scroll",this._scheduleOptionsPlacement,!0),window.addEventListener("resize",this._scheduleOptionsPlacement),this._optionsObserver=new MutationObserver(()=>{this.requestUpdate()}),this._optionsObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","value","disabled"]}),this._syncDensityForSize(),this._initialValue=this.value,this._initialValues=Array.isArray(this.values)?[...this.values]:[],this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.values=Array.isArray(this._initialValues)?[...this._initialValues]:[],this.error=!1,this._hasValidationBeenReported=!1,this._syncFormValue(),this._syncValidity(),this.requestUpdate()},this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form.addEventListener("reset",this._formResetHandler,!0),this._form.addEventListener("submit",this._formSubmitHandler,!0))}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),document.removeEventListener("scroll",this._scheduleOptionsPlacement,!0),window.removeEventListener("resize",this._scheduleOptionsPlacement),this._placementFrame&&(cancelAnimationFrame(this._placementFrame),this._placementFrame=0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),this._form&&this._formSubmitHandler&&this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._optionsObserver?.disconnect(),this._optionsObserver=null,k(this.shadowRoot?.querySelector(".options")),super.disconnectedCallback()}_getMultiValues(){return Array.isArray(this.values)&&this.values.length>0?this.values:this.value?this.value.split(",").map(e=>e.trim()).filter(Boolean):[]}_mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){const e=this._mapSpacingToken(this.spacing),t=this._mapSpacingToken(this.spacingTop)??e,s=this._mapSpacingToken(this.spacingBottom)??e,i=this._mapSpacingToken(this.spacingLeft),a=this._mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-select-spacing-block-start",t):this.style.removeProperty("--scb-select-spacing-block-start"),s?this.style.setProperty("--scb-select-spacing-block-end",s):this.style.removeProperty("--scb-select-spacing-block-end"),i?this.style.setProperty("--scb-select-spacing-inline-start",i):this.style.removeProperty("--scb-select-spacing-inline-start"),a?this.style.setProperty("--scb-select-spacing-inline-end",a):this.style.removeProperty("--scb-select-spacing-inline-end")}_setOpen(e){if(this.open!==e)if(e){const t=this._getInitialFocusedIndex();this._updateOptionsPlacement(),this._prepareOptionsScroll(t),this.focusedIndex=t,this.open=e,this.requestUpdate()}else this.open=e,this.focusedIndex=-1}_toggleOpen(){this.disabled||this._setOpen(!this.open)}_focusTrigger(){this.shadowRoot?.querySelector(".selected-value-container")?.focus({preventScroll:!0})}_getOptions(){const e=this.shadowRoot?.querySelector("slot");return e?e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option"):[]}_ensureOptionIds(e=this._getOptions()){e.forEach((t,s)=>{t.id||(t.id=`${this._selectId}-option-${s}`)})}_getInitialFocusedIndex(){const e=this._getOptions(),t=this.variant==="multi-select"?this._getMultiValues():[this.value],s=e.findIndex(i=>!i.disabled&&t.includes(i.value));return s>=0?s:e.findIndex(i=>!i.disabled)}_setFocusedIndex(e,t={}){const s=this._getOptions();if(this._ensureOptionIds(s),s.forEach(o=>o.removeAttribute("data-focused")),e<0||s.length===0){this.focusedIndex=-1,this._activeDescendant="";return}let i=Math.max(0,Math.min(e,s.length-1));if(s[i]?.disabled){const o=s.findIndex((c,d)=>d>=i&&!c.disabled);let p=-1;for(let c=s.length-1;c>=0;c-=1)if(!s[c]?.disabled){p=c;break}i=o>=0?o:p}const a=s[i];if(!a||a.disabled){this.focusedIndex=-1,this._activeDescendant="";return}a.setAttribute("data-focused",""),this.focusedIndex=i,this._activeDescendant=a.id,t.scroll!==!1&&this._prepareOptionsScroll(i)}_prepareOptionsScroll(e){const t=this.shadowRoot?.querySelector(".options"),s=this._getOptions()[e];if(!t||!s)return;const i=getComputedStyle(t),a=getComputedStyle(this),o=Number.parseFloat(i.paddingTop)||0,p=Number.parseFloat(i.paddingBottom)||0,c=a.getPropertyValue("--scb-select-options-current-max-height").trim()||a.getPropertyValue("--scb-select-options-max-height").trim()||i.maxHeight,d=Number.parseFloat(c);if(!Number.isFinite(d)||d<=0){t.scrollTop=0;return}const g=t.getBoundingClientRect(),f=s.getBoundingClientRect(),b=f.top-g.top+t.scrollTop,v=b+f.height,u=d,_=Math.max(0,t.scrollHeight-u),O=t.scrollTop+o,V=t.scrollTop+u-p;let w=t.scrollTop;b<O?w=b-o:v>V&&(w=v-u+p),t.scrollTop=Math.max(0,Math.min(_,w))}_moveFocusedIndex(e){const t=this._getOptions();if(t.length===0)return;let s=this.focusedIndex>=0?this.focusedIndex:this._getInitialFocusedIndex();for(let i=0;i<t.length;i+=1)if(s=(s+e+t.length)%t.length,!t[s]?.disabled){this._setFocusedIndex(s);return}}_getFocusedOption(){return this._getOptions()[this.focusedIndex]}_updateOptionsPlacement(){const e=this.shadowRoot?.querySelector(".selected-value-container"),t=this.shadowRoot?.querySelector(".options");if(!e||!t)return;const s=e.getBoundingClientRect(),i=8,a=3,o=Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-select-options-max-height")),p=Number.isFinite(o)&&o>0?o:240,c=t.scrollHeight,d=Math.min(p,c),g=window.innerHeight-s.bottom-a-i,f=s.top-a-i,b=g<d&&f>g,v=Math.max(0,Math.min(d,b?f:g));if(this._optionsPlacement=b?"above":"below",this.style.setProperty("--scb-select-options-current-max-height",`${v}px`),t.style.overflowY=c>v+.5?"auto":"",z(t)){const u=Math.min(s.width,window.innerWidth-i*2),_=Math.min(Math.max(s.left,i),window.innerWidth-i-u);t.style.position="fixed",t.style.left=`${Math.round(_)}px`,t.style.right="auto",t.style.width=`${Math.round(u)}px`,b?(t.style.top="auto",t.style.bottom=`${Math.round(window.innerHeight-s.top+a)}px`):(t.style.top=`${Math.round(s.bottom+a)}px`,t.style.bottom="auto")}}_syncOptionsPopover(){const e=this.shadowRoot?.querySelector(".options")??null;if(e){if(this.open){P(e)&&this._scheduleOptionsPlacement();return}z(e)?R(e,()=>this._resetOptionsPlacement()):(k(e),this._resetOptionsPlacement())}}_resetOptionsPlacement(){this._optionsPlacement="below",this.style.removeProperty("--scb-select-options-current-max-height");const e=this.shadowRoot?.querySelector(".options");e?.style.removeProperty("position"),e?.style.removeProperty("left"),e?.style.removeProperty("right"),e?.style.removeProperty("top"),e?.style.removeProperty("bottom"),e?.style.removeProperty("width"),e?.style.removeProperty("overflow-y")}_hasMoreThanFourOptions(){const e=this._getOptions();return["extra-small","small","medium"].includes(this.size)?e.length>5:e.length>4}_selectOption(e){if(!e.disabled){if(this.variant==="multi-select"){const t=this._getMultiValues();t.indexOf(e.value)>-1?this.values=t.filter(s=>s!==e.value):this.values=[...t,e.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))}else this.variant==="single-select"&&this.withRadiobuttons?(this.value=e.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=e.value,this._setOpen(!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateComplete.then(()=>this._focusTrigger()));this._updateOptionsChecked(),this.requestUpdate()}}_getOptionLabel(e){return e.label||e.textContent?.trim()||""}_getSelectedLabel(){const e=this._getOptions();if(this.variant==="multi-select"){const t=this._getMultiValues(),s=e.filter(i=>t.includes(i.value));return s&&s.length>0?s.map(i=>this._getOptionLabel(i)).join(", "):""}else{const t=e.find(s=>s.value===this.value);return t?this._getOptionLabel(t):""}}firstUpdated(){this._updateOptionsChecked(),this._syncFormValue(),this._syncValidity(),this._applySpacing()}updated(e){this._updateOptionsChecked(),this._syncFormValue(),this._syncValidity(),e.has("size")&&this._syncDensityForSize(),e.has("errorText")&&this.error&&this._syncValidity(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing(),e.has("open")&&(this.open?(this._syncOptionsPopover(),this.updateComplete.then(()=>{this._setFocusedIndex(this._getInitialFocusedIndex(),{scroll:!1}),this._scheduleOptionsPlacement()})):(this._syncOptionsPopover(),this._setFocusedIndex(-1)))}_syncFormValue(){if(this._internals){if(this.disabled||!this.name){this._internals.setFormValue(null);return}if(this.variant==="multi-select"){const e=this._getMultiValues();if(e.length===0){this._internals.setFormValue(null);return}const t=new FormData;e.forEach(s=>t.append(this.name,s)),this._internals.setFormValue(t);return}this._internals.setFormValue(this.value||null)}}_getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required&&!(this.variant==="multi-select"?this._getMultiValues().length>0:this.value)?this.errorText||"Välj ett alternativ.":""}_syncValidity(){const e=this.disabled?"":this._getValidationMessage(),t=this.shadowRoot?.querySelector(".selected-value"),s=this.error,i=this._validationMessage;if(this._validationMessage=e,this.error=this.disabled?!1:e?this._hasValidationBeenReported||s:s&&!this._hasValidationBeenReported&&!i,!e)this.removeAttribute("aria-invalid"),t&&t.setCustomValidity(""),this._internals&&this._internals.setValidity({});else if(t&&t.setCustomValidity(e),this._internals){const a=this._customValidationMessage?{customError:!0}:{valueMissing:!0};this._internals.setValidity(a,e,t??void 0)}this.toggleAttribute("aria-invalid",this.error),(s!==this.error||i!==this._validationMessage)&&this.requestUpdate()}checkValidity(){return this._syncValidity(),this._internals?this._internals.checkValidity():!this.error}reportValidity(){return this._hasValidationBeenReported=!0,this._syncValidity(),this._internals?this._internals.reportValidity():this.checkValidity()}setCustomValidity(e){this._customValidationMessage=String(e??""),this._syncValidity()}get form(){return this._internals?.form??this._form}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage??this._getValidationMessage()}get willValidate(){return this._internals?.willValidate??!0}get labels(){return this._internals?.labels}_updateOptionsChecked(){const e=this._getOptions();this._ensureOptionIds(e),e.forEach(t=>{if(this.noHighlightSelected?t.setAttribute("no-highlight-selected",""):t.removeAttribute("no-highlight-selected"),this.variant==="multi-select"){const s=this._getMultiValues();t.showCheckbox=!0,t.checked=s.includes(t.value),t.showRadio=!1}else t.showCheckbox=!1,t.checked=this.value===t.value,this.withRadiobuttons&&(t.showRadio=!0)})}_renderLabel(){if(!this.label)return null;const e=!!this._getVisibleSupportingText(),t=`${this._selectId}-label`,s=m`
+import{a as h,f as S,h as I,m as $,p as n,v as m,y as T}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import{n as F}from"../../vendor/lazy-focus-ring.js";import{t as M}from"../../vendor/component-defaults.js";import{t as l}from"../../vendor/decorate.js";import"../../vendor/scb-chevron.js";import"../scb-icon-button/scb-icon-button.js";import{a as P,i as z,n as R,t as k}from"../../vendor/manual-popover.js";import"../scb-tooltip/scb-tooltip.js";import"./scb-select-option.js";(function(){try{var y=typeof globalThis<"u"?globalThis:window;if(!y.__scb_ce_guard_installed__){y.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,s,i){try{customElements.get(t)||e(t,s,i)}catch(o){var a=String(o||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var x,r=(x=class extends I{constructor(){super(),this._optionsObserver=null,this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.required=!1,this.error=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.errorText="",this.helpText="",this.helpLabel="Visa hjälptext",this.withRadiobuttons=!1,this.noHighlightSelected=!1,this.size=M["scb-select"].size,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.zIndex=void 0,this._form=null,this._formResetHandler=null,this._formSubmitHandler=null,this._initialValue="",this._initialValues=[],this._customValidationMessage="",this._validationMessage="",this._hasValidationBeenReported=!1,this._selectId=`scb-select-${Math.random().toString(36).slice(2,11)}`,this._placementFrame=0,this._optionsPlacement="below",this._activeDescendant="",this._onDocumentClick=e=>{if(!this.open)return;const t=e.composedPath();if(!t.includes(this)){const s=t.find(i=>i instanceof HTMLElement?i.tagName.toLowerCase()==="scb-select":!1);if(s&&s!==this){this._setOpen(!1);return}this._setOpen(!1),requestAnimationFrame(()=>{this.open||this._focusTrigger()})}},this._scheduleOptionsPlacement=()=>{!this.open||!this.isConnected||(this._placementFrame&&cancelAnimationFrame(this._placementFrame),this._placementFrame=requestAnimationFrame(()=>{this._placementFrame=0,this._updateOptionsPlacement()}))},this._onSlotClick=e=>{const t=this._getOptions(),s=e.composedPath(),i=t.find(a=>s.includes(a));i&&(this._selectOption(i),e.stopPropagation())},this._onKeyDown=e=>{if(e.key==="Tab"&&this.open){this._setOpen(!1),this._syncOptionsPopover();return}if(e.key==="Escape"&&this.open){e.preventDefault(),e.stopPropagation(),this._setOpen(!1),this._focusTrigger();return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation();const t=e.key==="ArrowDown"?1:-1;if(!this.open){this._setOpen(!0),this.updateComplete.then(()=>{this._setFocusedIndex(this._getInitialFocusedIndex(),{scroll:!1}),this.focusedIndex>=0&&e.key==="ArrowUp"&&this._moveFocusedIndex(-1)});return}this._moveFocusedIndex(t);return}if((e.key==="Home"||e.key==="End")&&this.open){e.preventDefault(),e.stopPropagation();const t=this._getOptions();let s=t.findIndex(i=>!i.disabled);if(e.key==="End"){for(let i=t.length-1;i>=0;i-=1)if(!t[i]?.disabled){s=i;break}}this._setFocusedIndex(s);return}if(e.key==="Enter"||e.key===" "){if(e.preventDefault(),this.open){const t=this._getFocusedOption();t&&this._selectOption(t);return}this._setOpen(!0)}},this._onOptionKeyDown=e=>{if(e.key==="Escape"&&this.open){e.preventDefault(),e.stopPropagation(),this._setOpen(!1),this._focusTrigger();return}if(e.key==="Enter"||e.key===" "){e.preventDefault();const t=this._getOptions(),s=e.composedPath(),i=t.find(a=>s.includes(a));i&&this._selectOption(i)}},"attachInternals"in this&&(this._internals=this.attachInternals())}_syncDensityForSize(){this.size==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick),document.addEventListener("scroll",this._scheduleOptionsPlacement,!0),window.addEventListener("resize",this._scheduleOptionsPlacement),this._optionsObserver=new MutationObserver(()=>{this.requestUpdate()}),this._optionsObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","value","disabled"]}),this._syncDensityForSize(),this._initialValue=this.value,this._initialValues=Array.isArray(this.values)?[...this.values]:[],this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.values=Array.isArray(this._initialValues)?[...this._initialValues]:[],this.error=!1,this._hasValidationBeenReported=!1,this._syncFormValue(),this._syncValidity(),this.requestUpdate()},this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form.addEventListener("reset",this._formResetHandler,!0),this._form.addEventListener("submit",this._formSubmitHandler,!0))}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),document.removeEventListener("scroll",this._scheduleOptionsPlacement,!0),window.removeEventListener("resize",this._scheduleOptionsPlacement),this._placementFrame&&(cancelAnimationFrame(this._placementFrame),this._placementFrame=0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),this._form&&this._formSubmitHandler&&this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._optionsObserver?.disconnect(),this._optionsObserver=null,k(this.shadowRoot?.querySelector(".options")),super.disconnectedCallback()}_getMultiValues(){return Array.isArray(this.values)&&this.values.length>0?this.values:this.value?this.value.split(",").map(e=>e.trim()).filter(Boolean):[]}_mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){const e=this._mapSpacingToken(this.spacing),t=this._mapSpacingToken(this.spacingTop)??e,s=this._mapSpacingToken(this.spacingBottom)??e,i=this._mapSpacingToken(this.spacingLeft),a=this._mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-select-spacing-block-start",t):this.style.removeProperty("--scb-select-spacing-block-start"),s?this.style.setProperty("--scb-select-spacing-block-end",s):this.style.removeProperty("--scb-select-spacing-block-end"),i?this.style.setProperty("--scb-select-spacing-inline-start",i):this.style.removeProperty("--scb-select-spacing-inline-start"),a?this.style.setProperty("--scb-select-spacing-inline-end",a):this.style.removeProperty("--scb-select-spacing-inline-end")}_setOpen(e){if(this.open!==e)if(e){const t=this._getInitialFocusedIndex();this._updateOptionsPlacement(),this._prepareOptionsScroll(t),this.focusedIndex=t,this.open=e,this.requestUpdate()}else this.open=e,this.focusedIndex=-1}_toggleOpen(){this.disabled||this._setOpen(!this.open)}_focusTrigger(){this.shadowRoot?.querySelector(".selected-value-container")?.focus({preventScroll:!0})}_getOptions(){const e=this.shadowRoot?.querySelector("slot");return e?e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option"):[]}_ensureOptionIds(e=this._getOptions()){e.forEach((t,s)=>{t.id||(t.id=`${this._selectId}-option-${s}`)})}_getInitialFocusedIndex(){const e=this._getOptions(),t=this.variant==="multi-select"?this._getMultiValues():[this.value],s=e.findIndex(i=>!i.disabled&&t.includes(i.value));return s>=0?s:e.findIndex(i=>!i.disabled)}_setFocusedIndex(e,t={}){const s=this._getOptions();if(this._ensureOptionIds(s),s.forEach(o=>o.removeAttribute("data-focused")),e<0||s.length===0){this.focusedIndex=-1,this._activeDescendant="";return}let i=Math.max(0,Math.min(e,s.length-1));if(s[i]?.disabled){const o=s.findIndex((c,d)=>d>=i&&!c.disabled);let p=-1;for(let c=s.length-1;c>=0;c-=1)if(!s[c]?.disabled){p=c;break}i=o>=0?o:p}const a=s[i];if(!a||a.disabled){this.focusedIndex=-1,this._activeDescendant="";return}a.setAttribute("data-focused",""),this.focusedIndex=i,this._activeDescendant=a.id,t.scroll!==!1&&this._prepareOptionsScroll(i)}_prepareOptionsScroll(e){const t=this.shadowRoot?.querySelector(".options"),s=this._getOptions()[e];if(!t||!s)return;const i=getComputedStyle(t),a=getComputedStyle(this),o=Number.parseFloat(i.paddingTop)||0,p=Number.parseFloat(i.paddingBottom)||0,c=a.getPropertyValue("--scb-select-options-current-max-height").trim()||a.getPropertyValue("--scb-select-options-max-height").trim()||i.maxHeight,d=Number.parseFloat(c);if(!Number.isFinite(d)||d<=0){t.scrollTop=0;return}const g=t.getBoundingClientRect(),f=s.getBoundingClientRect(),b=f.top-g.top+t.scrollTop,v=b+f.height,u=d,_=Math.max(0,t.scrollHeight-u),O=t.scrollTop+o,V=t.scrollTop+u-p;let w=t.scrollTop;b<O?w=b-o:v>V&&(w=v-u+p),t.scrollTop=Math.max(0,Math.min(_,w))}_moveFocusedIndex(e){const t=this._getOptions();if(t.length===0)return;let s=this.focusedIndex>=0?this.focusedIndex:this._getInitialFocusedIndex();for(let i=0;i<t.length;i+=1)if(s=(s+e+t.length)%t.length,!t[s]?.disabled){this._setFocusedIndex(s);return}}_getFocusedOption(){return this._getOptions()[this.focusedIndex]}_updateOptionsPlacement(){const e=this.shadowRoot?.querySelector(".selected-value-container"),t=this.shadowRoot?.querySelector(".options");if(!e||!t)return;const s=e.getBoundingClientRect(),i=8,a=3,o=Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-select-options-max-height")),p=Number.isFinite(o)&&o>0?o:240,c=t.scrollHeight,d=Math.min(p,c),g=window.innerHeight-s.bottom-a-i,f=s.top-a-i,b=g<d&&f>g,v=Math.max(0,Math.min(d,b?f:g));if(this._optionsPlacement=b?"above":"below",this.style.setProperty("--scb-select-options-current-max-height",`${v}px`),t.style.overflowY=c>v+.5?"auto":"",z(t)){const u=Math.min(s.width,window.innerWidth-i*2),_=Math.min(Math.max(s.left,i),window.innerWidth-i-u);t.style.position="fixed",t.style.left=`${Math.round(_)}px`,t.style.right="auto",t.style.width=`${Math.round(u)}px`,b?(t.style.top="auto",t.style.bottom=`${Math.round(window.innerHeight-s.top+a)}px`):(t.style.top=`${Math.round(s.bottom+a)}px`,t.style.bottom="auto")}}_syncOptionsPopover(){const e=this.shadowRoot?.querySelector(".options")??null;if(e){if(this.open){P(e)&&this._scheduleOptionsPlacement();return}z(e)?R(e,()=>this._resetOptionsPlacement()):(k(e),this._resetOptionsPlacement())}}_resetOptionsPlacement(){this._optionsPlacement="below",this.style.removeProperty("--scb-select-options-current-max-height");const e=this.shadowRoot?.querySelector(".options");e?.style.removeProperty("position"),e?.style.removeProperty("left"),e?.style.removeProperty("right"),e?.style.removeProperty("top"),e?.style.removeProperty("bottom"),e?.style.removeProperty("width"),e?.style.removeProperty("overflow-y")}_hasMoreThanFourOptions(){const e=this._getOptions();return["extra-small","small","medium"].includes(this.size)?e.length>5:e.length>4}_selectOption(e){if(!e.disabled){if(this.variant==="multi-select"){const t=this._getMultiValues();t.indexOf(e.value)>-1?this.values=t.filter(s=>s!==e.value):this.values=[...t,e.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))}else this.variant==="single-select"&&this.withRadiobuttons?(this.value=e.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=e.value,this._setOpen(!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateComplete.then(()=>this._focusTrigger()));this._updateOptionsChecked(),this.requestUpdate()}}_getOptionLabel(e){return e.label||e.textContent?.trim()||""}_getSelectedLabel(){const e=this._getOptions();if(this.variant==="multi-select"){const t=this._getMultiValues(),s=e.filter(i=>t.includes(i.value));return s&&s.length>0?s.map(i=>this._getOptionLabel(i)).join(", "):""}else{const t=e.find(s=>s.value===this.value);return t?this._getOptionLabel(t):""}}firstUpdated(){this._updateOptionsChecked(),this._syncFormValue(),this._syncValidity(),this._applySpacing()}updated(e){this._updateOptionsChecked(),this._syncFormValue(),this._syncValidity(),e.has("size")&&this._syncDensityForSize(),e.has("errorText")&&this.error&&this._syncValidity(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing(),e.has("open")&&(this.open?(this._syncOptionsPopover(),this.updateComplete.then(()=>{this._setFocusedIndex(this._getInitialFocusedIndex(),{scroll:!1}),this._scheduleOptionsPlacement()})):(this._syncOptionsPopover(),this._setFocusedIndex(-1)))}_syncFormValue(){if(this._internals){if(this.disabled||!this.name){this._internals.setFormValue(null);return}if(this.variant==="multi-select"){const e=this._getMultiValues();if(e.length===0){this._internals.setFormValue(null);return}const t=new FormData;e.forEach(s=>t.append(this.name,s)),this._internals.setFormValue(t);return}this._internals.setFormValue(this.value||null)}}_getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required&&!(this.variant==="multi-select"?this._getMultiValues().length>0:this.value)?this.errorText||"Välj ett alternativ.":""}_syncValidity(){const e=this.disabled?"":this._getValidationMessage(),t=this.shadowRoot?.querySelector(".selected-value"),s=this.error,i=this._validationMessage;if(this._validationMessage=e,this.error=this.disabled?!1:e?this._hasValidationBeenReported||s:s&&!this._hasValidationBeenReported&&!i,!e)this.removeAttribute("aria-invalid"),t&&t.setCustomValidity(""),this._internals&&this._internals.setValidity({});else if(t&&t.setCustomValidity(e),this._internals){const a=this._customValidationMessage?{customError:!0}:{valueMissing:!0};this._internals.setValidity(a,e,t??void 0)}this.toggleAttribute("aria-invalid",this.error),(s!==this.error||i!==this._validationMessage)&&this.requestUpdate()}checkValidity(){return this._syncValidity(),this._internals?this._internals.checkValidity():!this.error}reportValidity(){return this._hasValidationBeenReported=!0,this._syncValidity(),this._internals?this._internals.reportValidity():this.checkValidity()}setCustomValidity(e){this._customValidationMessage=String(e??""),this._syncValidity()}get form(){return this._internals?.form??this._form}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage??this._getValidationMessage()}get willValidate(){return this._internals?.willValidate??!0}get labels(){return this._internals?.labels}_updateOptionsChecked(){const e=this._getOptions();this._ensureOptionIds(e),e.forEach(t=>{if(this.noHighlightSelected?t.setAttribute("no-highlight-selected",""):t.removeAttribute("no-highlight-selected"),this.variant==="multi-select"){const s=this._getMultiValues();t.showCheckbox=!0,t.checked=s.includes(t.value),t.showRadio=!1}else t.showCheckbox=!1,t.checked=this.value===t.value,this.withRadiobuttons&&(t.showRadio=!0)})}_renderLabel(){if(!this.label)return null;const e=!!this._getVisibleSupportingText(),t=`${this._selectId}-label`,s=m`
 				<label
 					class="select-label ${!e&&!this.helpText?"select-label--without-supporting":""}"
 					id=${t}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc",
-    "version":  "0.1.173",
+    "version":  "0.1.174",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -474,5 +474,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "6BEFF076FC6F06B0CAB6213E2A0FEC762042EC5F5A88F59A915224BF6D23DAF8"
+    "buildHash":  "D4B8C570CC5B1BE94D9AB9F78A82BF78F800D22D8BE188D5FE65FCD1657F2CBF"
 }

package/scb-select/scb-select.js

@@ -5,6 +5,7 @@ import "../scb-chevron/scb-chevron.js";
 import "../scb-icon-button/scb-icon-button.js";
 import { closeManualPopover as r, closeManualPopoverAfterAnimations as i, isManualPopoverOpen as a, openManualPopover as o } from "../shared/manual-popover.js";
 import "../scb-tooltip/scb-tooltip.js";
+import "./scb-select-option.js";
 import { LitElement as s, css as c, html as l } from "lit";
 import { customElement as u, property as d, state as f } from "lit/decorators.js";
 import "@material/web/icon/icon.js";