scb-wc 0.1.11 → 0.1.13

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

@@ -1 +1,292 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-search/scb-search.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,c,o){try{customElements.get(e)||r(e,c,o)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_ as x,b as S,g as w,h as o,v as _,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";import"../scb-list/scb-list.js";(function(){try{var u=typeof globalThis<"u"?globalThis:window;if(!u.__scb_ce_guard_installed__){u.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,r){try{customElements.get(e)||t(e,s,r)}catch(l){var i=String(l||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var d,A=0,n=(d=class extends x{constructor(){super(),this._internals=null,this.supportingText="",this.value="",this.name="",this.disabled=!1,this.required=!1,this.autocomplete=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.size="large",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++A}`,this._kbMode=!1,this._valueOnFocus="",this._lastChangeValue="",this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&this._updateInputRingVisibility())},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&this._updateInputRingVisibility()},this._form=null,this._formResetHandler=null,this._formSubmitHandler=null,this._initialValue="",this._customValidationMessage="",this._listScrollHandler=()=>{const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)},"attachInternals"in this&&(this._internals=this.attachInternals())}_syncDensityForSize(){this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),this._onWindowResize=this._onWindowResize.bind(this),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0),this._initialValue=this.value??"",this._lastChangeValue=this.value??"",this._form=this.closest("form"),this._form&&(this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this._inputEl();t&&(t.value=this._initialValue),this._lastChangeValue=this._initialValue,this._syncFormValue(),this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y()},this._form.addEventListener("reset",this._formResetHandler,!0)),this._syncFormValue(),this._syncValidity()}disconnectedCallback(){const t=this._inputEl();t&&this._boundNativeKeydown&&t.removeEventListener("keydown",this._boundNativeKeydown,!0),this._detachListScrollListener(),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),this._form&&this._formSubmitHandler&&this._form.removeEventListener("submit",this._formSubmitHandler,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const t=this._inputEl();t&&(this._boundNativeKeydown=e=>this._handleKey(e),t.addEventListener("keydown",this._boundNativeKeydown,!0),t.disabled=this.disabled),this.applySpacing()}updated(t){if(super.updated(t),t.has("size")&&this._syncDensityForSize(),this._ensureListboxA11y(),this._updateComboboxA11y(),this._attachListScrollListener(),(t.has("value")||t.has("disabled"))&&this._syncFormValue(),(t.has("value")||t.has("disabled")||t.has("required"))&&this._syncValidity(),t.has("disabled")){this.toggleAttribute("aria-disabled",this.disabled);const e=this._inputEl();e&&(e.disabled=this.disabled)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing()}render(){const t=(this.value??"").trim().length>0,e=this._inputFocused&&t&&this._hasSuggestions;return h`
+      <div class="ripple-wrapper">
+        <md-icon class="leading">${t?"arrow_back":"search"}</md-icon>
+
+        <input
+          id="searchInput"
+          type="search"
+          class=${e?"with-list":""}
+          .value=${this.value}
+          placeholder=${this.supportingText}
+          autocomplete=${this.autocomplete?"on":"off"}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @input=${this._onInput}
+          @change=${this._onNativeChange}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          aria-label=${this.supportingText||"Sök"}
+        />
+
+        ${t?h`<button
+              class="clear-btn"
+              type="button"
+              ?disabled=${this.disabled}
+              @click=${this._clearInput}
+              tabindex="-1"
+              aria-label="Rensa sökfält"
+            >
+              <md-icon>close</md-icon>
+            </button>`:this.trailingIcon?h`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>`:_}
+
+        <md-ripple></md-ripple>
+        <md-focus-ring class="input-ring"></md-focus-ring>
+      </div>
+
+      <div class="list-divider" aria-hidden=${String(!(this.fullScreen&&e))}></div>
+
+      ${e?h`
+            <scb-list class="suggestion-list" id=${this._listboxId}>
+              <slot @slotchange=${this._onSlotChange}></slot>
+            </scb-list>
+            <md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
+          `:_}
+    `}formDisabledCallback(t){this.disabled=t}_getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required&&!(this.value??"").trim()?"Fyll i det här fältet.":""}_syncValidity(){const t=this._inputEl(),e=this.disabled?"":this._getValidationMessage();t&&(t.setCustomValidity(e),t.setAttribute("aria-invalid",e?"true":"false")),this._internals&&(e?this._internals.setValidity({valueMissing:!0},e,t??void 0):this._internals.setValidity({})),this.toggleAttribute("aria-invalid",!!e)}checkValidity(){return!this._getValidationMessage()}reportValidity(){this._syncValidity();const t=this._inputEl();return t?t.reportValidity():this._internals?this._internals.reportValidity():this.checkValidity()}setCustomValidity(t){this._customValidationMessage=t,this._syncValidity()}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage??this._getValidationMessage()}get willValidate(){return this._internals?.willValidate??!0}submit(){const t=this._getActiveItem(),e={value:this.value};t&&(e.active=this._itemPayload(t)),this._dispatchSubmit(e)}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(t=>!t.hasAttribute("hidden")&&t.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this._syncFormValue(),this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y();const s={value:this.value};this.dispatchEvent(new CustomEvent("scb-search-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbsearchinput",{detail:s,bubbles:!0,composed:!0})),this._dispatchStandardInput()}_onNativeChange(t){t.stopPropagation()}_onFocus(){this.disabled||(this._valueOnFocus=this.value??"",this._inputFocused=!0,this._updateInputRingVisibility(),this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate())}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateInputRingVisibility(),this._updateComboboxA11y(),this._hideOptionRing(),this._valueOnFocus!==(this.value??"")&&this._dispatchStandardChangeIfNeeded(),this.requestUpdate()},100)}_updateInputRingVisibility(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}_handleKey(t){if(this.disabled||!this._inputEl())return;const e=this._getVisibleItems(),s=(this.value??"").trim().length>0,r=this._inputFocused&&s&&e.length>0,i=t.key,l=t.keyCode,p=i==="ArrowDown"||i==="Down"||l===40,b=i==="ArrowUp"||i==="Up"||l===38,g=i==="Home"||l===36,m=i==="End"||l===35,f=i==="Enter"||l===13,y=i==="Escape"||i==="Esc"||l===27;if(p){if(!r)return;t.preventDefault(),this._kbMode=!0,this._moveActive(e,1);return}if(b){if(!r)return;t.preventDefault(),this._kbMode=!0,this._moveActive(e,-1);return}if(g){if(!r)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=e.length?0:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(m){if(!r)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=e.length?e.length-1:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(f){if(!r){const c=this._internals?.form??this._form??this.closest("form");c?(t.preventDefault(),this.reportValidity()&&c.requestSubmit()):this.submit();return}t.preventDefault();const v=this._getActiveItem();if(v){const c=v.getAttribute("label")||"";this.value=c,this._syncFormValue(),this._dispatchStandardInput(),this._dispatchSubmit({value:this.value,active:this._itemPayload(v)}),this._visibleSuggestions=0,this._activeIndex=-1,this._kbMode=!1,this._hideOptionRing(),this.requestUpdate()}else this.submit();return}if(y){t.preventDefault(),this._clearInput();return}}_clearInput(){if(this.disabled)return;this.value="",this._activeIndex=-1,this._kbMode=!1;const t=this._inputEl();t&&(t.value="",t.focus()),this._filterSuggestions(""),this._updateComboboxA11y(),this._hideOptionRing(),this._syncFormValue(),this._dispatchStandardInput(),this.dispatchEvent(new CustomEvent("scb-search-clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbsearchclear",{bubbles:!0,composed:!0})),this._dispatchStandardChangeIfNeeded()}_filterSuggestions(t){const e=(t??"").trim().toLowerCase(),s=Array.from(this.querySelectorAll("scb-list-item"));let r=0;for(const i of s){const l=`${(i.getAttribute("label")||"").toLowerCase()} ${(i.getAttribute("supporting-text")||"").toLowerCase()}`.trim();e!==""&&l.includes(e)?(i.removeAttribute("hidden"),r++):i.setAttribute("hidden",""),this._ensureOptionA11y(i)}this._visibleSuggestions=r,this._activeIndex>=r&&(this._activeIndex=-1),this._updateComboboxA11y(),this.requestUpdate()}_inputEl(){return this.renderRoot?.querySelector("#searchInput")??null}_listEl(){return this.renderRoot?.querySelector("scb-list.suggestion-list")??null}_ringEl(){return this.renderRoot?.querySelector("#optionRing")??null}_getVisibleItems(){return Array.from(this.querySelectorAll("scb-list-item")).filter(t=>!t.hasAttribute("hidden")&&t.style.display!=="none")}_getActiveItem(){const t=this._getVisibleItems();return this._activeIndex<0||this._activeIndex>=t.length?null:t[this._activeIndex]??null}_moveActive(t,e){if(!t.length){this._activeIndex=-1,this._updateComboboxA11y(),this._hideOptionRing();return}let s=this._activeIndex+e;this._activeIndex===-1?s=e>0?0:t.length-1:(s<0&&(s=0),s>=t.length&&(s=t.length-1)),this._activeIndex=s,this._updateComboboxA11y(),this._scrollActiveIntoView()}_scrollActiveIntoView(){const t=this._getActiveItem();t&&t.scrollIntoView({block:"nearest"})}_itemPayload(t){return{label:t.getAttribute("label")||"",supportingText:t.getAttribute("supporting-text")||"",href:t.getAttribute("href")||"",type:t.getAttribute("type")||"",id:t.id||""}}_ensureListboxA11y(){const t=this._listEl();t&&(t.id||(t.id=this._listboxId),t.setAttribute("role","listbox"),t.setAttribute("aria-label","Sökförslag")),Array.from(this.querySelectorAll("scb-list-item")).forEach(e=>this._ensureOptionA11y(e))}_ensureOptionA11y(t){t.id||(t.id=`${this._listboxId}-opt-${Math.random().toString(36).slice(2,8)}`),t.setAttribute("role","option"),t.setAttribute("tabindex","-1")}_updateComboboxA11y(){const t=this._inputEl();if(!t)return;const e=this._getVisibleItems(),s=(this.value??"").trim().length>0,r=this._inputFocused&&s&&e.length>0;t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-controls",this._listboxId),t.setAttribute("aria-expanded",String(r));const i=r?this._getActiveItem():null;i?.id?t.setAttribute("aria-activedescendant",i.id):t.removeAttribute("aria-activedescendant"),this._kbMode&&i&&r?this._positionOptionRing(i):this._hideOptionRing()}_positionOptionRing(t){const e=this._ringEl(),s=this._listEl();if(!e||!s)return;const r=this.getBoundingClientRect(),i=t.getBoundingClientRect(),l=i.top-r.top,p=i.left-r.left,b=i.width,g=i.height;e.style.top=`${l}px`,e.style.left=`${p}px`,e.style.width=`${b}px`,e.style.height=`${g}px`,e.setAttribute("data-show","true")}_hideOptionRing(){const t=this._ringEl();t&&t.removeAttribute("data-show")}_onWindowResize(){const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}_attachListScrollListener(){const t=this._listEl();!t||this._listWithHandler===t||(this._detachListScrollListener(),t.addEventListener("scroll",this._listScrollHandler,{passive:!0}),this._listWithHandler=t)}_detachListScrollListener(){this._listWithHandler&&(this._listWithHandler.removeEventListener("scroll",this._listScrollHandler),this._listWithHandler=void 0)}_dispatchStandardInput(){this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_dispatchStandardChangeIfNeeded(){const t=this.value??"";t!==this._lastChangeValue&&(this._lastChangeValue=t,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}_dispatchSubmit(t){this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbsearchsubmit",{detail:t,bubbles:!0,composed:!0})),this._dispatchStandardChangeIfNeeded()}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t,r=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-search-spacing-block-start",e):this.style.removeProperty("--scb-search-spacing-block-start"),s?this.style.setProperty("--scb-search-spacing-block-end",s):this.style.removeProperty("--scb-search-spacing-block-end"),r?this.style.setProperty("--scb-search-spacing-inline-start",r):this.style.removeProperty("--scb-search-spacing-inline-start"),i?this.style.setProperty("--scb-search-spacing-inline-end",i):this.style.removeProperty("--scb-search-spacing-inline-end")}_syncFormValue(){if(!this._internals)return;const t=this.disabled?null:this.value;this._internals.setFormValue(t)}},d.formAssociated=!0,d.styles=S`
+    :host {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      color: var(--md-sys-color-on-surface);
+      -webkit-tap-highlight-color: transparent;
+
+      margin-block-start: var(--scb-search-spacing-block-start, 0);
+      margin-block-end: var(--scb-search-spacing-block-end, 0);
+      margin-inline-start: var(--scb-search-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-search-spacing-inline-end, 0);
+
+      --scb-search-radius: var(--radius-full, 1000px);
+      --scb-search-open-radius: var(--radius-xl, 24px);
+
+      --scb-search-height: calc(var(--scb-search-line-height) + var(--scb-search-padding-y) + var(--scb-search-padding-y));
+      --scb-search-padding-x: var(--spacing-4, 12px);
+      --scb-search-padding-y: var(--spacing-4, 12px);
+      --scb-search-leading-size: var(--scale-10, 40px);
+      --scb-search-trailing-size: var(--scale-10, 40px);
+      --scb-search-gap: var(--spacing-2, 4px);
+
+      letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+      --scb-search-leading-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-leading-size) + var(--scb-search-gap)
+      );
+      --scb-search-trailing-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-trailing-size) + var(--scb-search-gap)
+      );
+
+      --scb-search-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+
+      --scb-search-icon-size: var(--icon-size-small, 20px);
+    }
+
+    :host([size='large']) {
+      --scb-search-padding-x: var(--spacing-5, 16px);
+      --scb-search-padding-y: var(--spacing-5, 16px);
+      --scb-search-leading-size: var(--scale-11, 48px);
+      --scb-search-trailing-size: var(--scale-11, 48px);
+      --scb-search-icon-size: var(--icon-size-medium, 24px);
+      --scb-search-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-search-line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+    }
+
+:host([size='small']) {
+      --scb-search-padding-x: var(--spacing-3, 8px);
+      --scb-search-padding-y: var(--spacing-3, 8px);
+      --scb-search-leading-size: var(--scale-09, 36px);
+      --scb-search-trailing-size: var(--scale-09, 36px);
+      --scb-search-icon-size: var(--icon-size-small, 20px);
+      --scb-search-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-search-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+    }
+:host([disabled]) {
+      opacity: 0.38;
+      cursor: default;
+    }
+
+    .ripple-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    md-focus-ring.input-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-search-radius);
+      z-index: 4;
+    }
+    .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+      display: block;
+    }
+    input.with-list ~ md-focus-ring.input-ring {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    :host([full-screen]) md-focus-ring.input-ring {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+
+    md-focus-ring.option-ring {
+      position: absolute;
+      display: none;
+      pointer-events: none;
+      z-index: 11;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+    }
+    md-focus-ring.option-ring[data-show='true'] {
+      display: block;
+    }
+
+    .leading {
+      position: absolute;
+      left: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-leading-size);
+      height: var(--scb-search-leading-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 2;
+    }
+    .leading md-icon,
+    .trailing md-icon,
+    .clear-btn md-icon {
+      --md-icon-size: var(--scb-search-icon-size);
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
+
+    .trailing,
+    .clear-btn {
+      position: absolute;
+      right: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-trailing-size);
+      height: var(--scb-search-trailing-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 3;
+    }
+    .trailing md-icon {
+      pointer-events: none;
+    }
+
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] {
+      display: none;
+    }
+    .clear-btn:disabled {
+      cursor: default;
+    }
+
+    input[type='search'] {
+      padding: var(--scb-search-padding-y) var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y) var(--scb-search-leading-gap);
+      min-height: var(--scb-search-height);
+      width: 100%;
+      box-sizing: border-box;
+
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-radius: var(--scb-search-radius);
+
+      font-family: var(--md-sys-typescale-body-large-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+
+      color: var(--md-sys-color-on-surface);
+      background: transparent;
+
+      position: relative;
+      z-index: 1;
+    }
+    input[type='search']::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+    }
+    input[type='search']:hover {
+      outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px);
+    }
+    input[type='search']:focus {
+      outline: none;
+    }
+
+    md-ripple {
+      border-radius: var(--scb-search-radius);
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+
+    input[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
+
+    input.with-list {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    input.with-list ~ md-ripple {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+
+    scb-list.suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      z-index: 10;
+      background: var(--md-sys-color-surface-container-lowest);
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-top: 0;
+      border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);
+      overflow: auto;
+      box-sizing: border-box;
+      max-height: var(--scb-search-suggestions-max-h, 60vh);
+    }
+
+    :host([full-screen]) input[type='search'],
+    :host([full-screen]) input.with-list,
+    :host([full-screen]) input.with-list ~ md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+    :host([full-screen]) scb-list.suggestion-list {
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .list-divider {
+      display: none;
+      height: var(--stroke-border, 1px);
+      background: var(--md-sys-color-outline);
+      width: 100%;
+    }
+    :host([full-screen]) .list-divider[aria-hidden='false'] {
+      display: block;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  `,d);a([o({type:String,attribute:"trailing-icon"})],n.prototype,"trailingIcon",void 0);a([o({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",void 0);a([o({type:String})],n.prototype,"value",void 0);a([o({type:String,reflect:!0})],n.prototype,"name",void 0);a([o({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);a([o({type:Boolean,reflect:!0})],n.prototype,"required",void 0);a([o({type:Boolean,reflect:!0})],n.prototype,"autocomplete",void 0);a([o({type:String,reflect:!0})],n.prototype,"spacing",void 0);a([o({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);a([o({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);a([o({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);a([o({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);a([o({type:String,reflect:!0})],n.prototype,"size",void 0);a([o({type:Boolean,attribute:"full-screen",reflect:!0})],n.prototype,"fullScreen",void 0);n=a([w("scb-search")],n);

package/mvc/components/scb-segmented-button/scb-segmented-button.js

@@ -1 +1,32 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-segmented-button/scb-segmented-item.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-segmented-button/scb-segmented-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,d){try{customElements.get(e)||o(e,r,d)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as p,b as g,g as b,h as r,y as f}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import{n as v,t as h}from"../../vendor/assertClassBrand.js";import"./scb-segmented-item.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,i,s){try{customElements.get(e)||t(e,i,s)}catch(c){var o=String(c||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var d,u,a=(d=new WeakSet,u=class extends p{constructor(){super(),v(this,d),this._internals=null,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.required=!1,this.name="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._form=null,this._formResetHandler=null,this._initialValue="",this._initialValues=[],this._customValidationMessage="","attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.values=Array.isArray(this._initialValues)?[...this._initialValues]:[],this.updateSegments(),this._syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this._initialValue=this.value,this._initialValues=Array.isArray(this.values)?[...this.values]:[],this.updateSegments();const t=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("slotchange",()=>{this.updateSegments()}),t.addEventListener("click",e=>this.onSlotClick(e)),t.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("keydown",e=>{if(e.code==="Space"||e.code==="Enter"||e.code==="NumpadEnter"){const i=e.target;if(i&&i.closest){const s=i.closest("scb-segmented-item");s&&!s.hasAttribute("disabled")&&!this.disabled&&(this.onSlotClick(e),e.preventDefault())}}})),this._syncFormValue(),this._syncValidity(),h(d,this,m).call(this)}updated(t){super.updated(t),this.updateSegments(),(t.has("value")||t.has("values")||t.has("disabled")||t.has("variant")||t.has("name"))&&(this._syncFormValue(),this._syncValidity()),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&h(d,this,m).call(this)}onSlotClick(t){let e=t.target;if(!e||!e.closest)return;const i=e.closest("scb-segmented-item");if(!i||this.disabled||i.hasAttribute("disabled"))return;const s=i.getAttribute("value")||"";s&&(this.variant==="multi-select"?(this.values.indexOf(s)===-1?this.values=[...this.values,s]:this.values=this.values.filter(o=>o!==s),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):s!==this.value&&(this.value=s,this.dispatchEvent(new CustomEvent("change",{detail:{value:s},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const t=this.shadowRoot?.querySelector("slot");t&&t.assignedElements().forEach(e=>{if(e.tagName==="SCB-SEGMENTED-ITEM"){const i=e.getAttribute("value")||"";if(i){let s=!1;this.variant==="multi-select"?s=!!this.values&&this.values.includes(i):s=i===this.value,e.setAttribute("aria-pressed",s?"true":"false"),s?e.setAttribute("selected","true"):e.removeAttribute("selected")}this.disabled&&e.setAttribute("disabled","true")}})}formDisabledCallback(t){this.disabled=t}_getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required?this.variant==="multi-select"?this.values.length===0?"Välj minst ett alternativ.":"":this.value?"":"Välj ett alternativ.":""}_syncValidity(){if(!this._internals)return;const t=this.disabled?"":this._getValidationMessage();t?(this._internals.setValidity({valueMissing:!0},t),this.setAttribute("aria-invalid","true")):(this._internals.setValidity({}),this.removeAttribute("aria-invalid"))}checkValidity(){return!this._getValidationMessage()}reportValidity(){return this._syncValidity(),this._internals?this._internals.reportValidity():this.checkValidity()}setCustomValidity(t){this._customValidationMessage=t,this._syncValidity()}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage??this._getValidationMessage()}get willValidate(){return this._internals?.willValidate??!0}_syncFormValue(){if(this._internals){if(this.disabled||!this.name){this._internals.setFormValue(null);return}if(this.variant==="multi-select"){if(!this.values||this.values.length===0){this._internals.setFormValue(null);return}const t=new FormData;for(const e of this.values)t.append(this.name,e);this._internals.setFormValue(t)}else{if(!this.value){this._internals.setFormValue(null);return}this._internals.setFormValue(this.value)}}}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}render(){return f`<slot></slot>`}},u.formAssociated=!0,u.styles=g`
+    :host {
+      --scb-segmented-button-width: 100%;
+      --scb-segmented-button-height: 48px;
+      max-width: var(--scb-segmented-button-width);
+      height: var(--scb-segmented-button-height);
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
+      margin-inline-start: var(--scb-segmented-button-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-segmented-button-spacing-inline-end, 0);
+    }
+    /* Border radius only on first and last button */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role='button']:first-child .segmented-item) {
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    ::slotted(scb-segmented-item:last-child .segmented-item),
+    ::slotted([role='button']:last-child .segmented-item) {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+    /* First button gets left border */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role='button']:first-child .segmented-item) {
+      border-left: 1px solid var(--md-sys-color-outline);
+    }
+  `,u);function m(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,i=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-segmented-button-spacing-block-start",t):this.style.removeProperty("--scb-segmented-button-spacing-block-start"),e?this.style.setProperty("--scb-segmented-button-spacing-block-end",e):this.style.removeProperty("--scb-segmented-button-spacing-block-end"),i?this.style.setProperty("--scb-segmented-button-spacing-inline-start",i):this.style.removeProperty("--scb-segmented-button-spacing-inline-start"),s?this.style.setProperty("--scb-segmented-button-spacing-inline-end",s):this.style.removeProperty("--scb-segmented-button-spacing-inline-end")}n([r({type:String,reflect:!0})],a.prototype,"variant",void 0);n([r({type:String,reflect:!0})],a.prototype,"value",void 0);n([r({type:Array})],a.prototype,"values",void 0);n([r({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0);n([r({type:Boolean,reflect:!0})],a.prototype,"required",void 0);n([r({type:String,reflect:!0})],a.prototype,"name",void 0);n([r({type:String,reflect:!0})],a.prototype,"spacing",void 0);n([r({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);n([r({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);n([r({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);n([r({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);a=n([b("scb-segmented-button")],a);

package/mvc/components/scb-segmented-button/scb-segmented-item.js

@@ -1 +1,74 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-segmented-button/scb-segmented-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_ as m,b as u,g as p,h as n,y as i}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as o}from"../../vendor/decorate.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,a){try{customElements.get(e)||t(e,s,a)}catch(h){var d=String(h||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var c,r=(c=class extends m{constructor(...t){super(...t),this.label="",this.value="",this.selected=!1,this.icon="",this.href="",this.disabled=!1,this.onHostKeydown=e=>{if(!this.href||this.isEffectivelyDisabled||e.code!=="Space"&&e.code!=="Enter"&&e.code!=="NumpadEnter")return;const s=this.shadowRoot?.querySelector("a[href]");s&&(e.preventDefault(),e.stopPropagation(),s.click())}}get isEffectivelyDisabled(){const t=this.parentElement?.hasAttribute?.("disabled");return this.disabled||!!t}render(){const t=this.isEffectivelyDisabled,e=!!this.icon,s=!!this.label,a=`segmented-item${e||this.selected?" has-icon":""}${s?"":" no-label"}`,d=i`
+      <md-ripple ?disabled="${t}"></md-ripple>
+      ${this.selected?e&&s?i`<md-icon>check</md-icon>`:e?i`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>`:i`<md-icon>check</md-icon>`:e?i`<md-icon>${this.icon}</md-icon>`:""}
+      ${s?i`<span>${this.label}</span>`:""}
+      <md-focus-ring inward></md-focus-ring>
+    `;return this.href?i`<a class="${a}" href="${this.href}" aria-disabled="${t?"true":"false"}" tabindex="-1">${d}</a>`:i`<div class="${a}" aria-disabled="${t?"true":"false"}">${d}</div>`}updateInteractiveAttributes(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role",this.href?"link":"button")}firstUpdated(){this.addEventListener("keydown",this.onHostKeydown),this.updateInteractiveAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this.onHostKeydown),super.disconnectedCallback()}updated(t){super.updated(t),(t.has("disabled")||t.has("href"))&&this.updateInteractiveAttributes()}},c.styles=u`
+    .segmented-item {
+        display: flex;
+        gap: var(--spacing-3);
+        align-items: center;
+      text-decoration: none;
+        border: 1px solid var(--md-sys-color-outline);
+        border-left: none;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-3) var(--spacing-4);
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        font-size: var(--md-sys-typescale-label-medium-size);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--md-sys-typescale-label-medium-weight);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface);
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .segmented-item span {
+        white-space: nowrap;
+    }
+    md-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+    :host([disabled]) .segmented-item,
+    .segmented-item[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(0.5);
+    }
+    :host([aria-pressed="true"]) .segmented-item {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-primary);
+    }
+    :host(:focus){
+      outline: none;
+    }
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    :host(:focus) md-focus-ring,
+    md-focus-ring[data-show="true"] {
+      display: block;
+    }
+    :host([disabled]):host(:focus) md-focus-ring,
+    :host([disabled]) md-focus-ring[data-show="true"] {
+      display: none;
+    }
+    :host(:first-child) .segmented-item{
+        border: 1px solid var(--md-sys-color-outline);
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    :host(:last-child) .segmented-item {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+  `,c);o([n({type:String,reflect:!0})],r.prototype,"label",void 0);o([n({type:String,reflect:!0})],r.prototype,"value",void 0);o([n({type:Boolean,reflect:!0})],r.prototype,"selected",void 0);o([n({type:String,reflect:!0})],r.prototype,"icon",void 0);o([n({type:String,reflect:!0})],r.prototype,"href",void 0);o([n({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0);r=o([p("scb-segmented-item")],r);

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

@@ -1 +1,61 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-select/scb-select-option.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_ as p,b,g as m,h as o,y as i}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t}from"../../vendor/decorate.js";(function(){try{var s=typeof globalThis<"u"?globalThis:window;if(!s.__scb_ce_guard_installed__){s.__scb_ce_guard_installed__=!0;var c=customElements.define.bind(customElements);customElements.define=function(a,n,h){try{customElements.get(a)||c(a,n,h)}catch(d){var r=String(d||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var l,e=(l=class extends p{constructor(...c){super(...c),this.value="",this.disabled=!1,this.showCheckbox=!1,this.checked=!1,this.showRadio=!1,this.label="",this.noHighlightSelected=!1}render(){return i`
+      <div class="item ${this.checked?"checked":""}" ?aria-disabled=${this.disabled}>
+        <md-ripple></md-ripple>
+        ${this.showCheckbox?i`<md-icon class="${this.checked?"checkbox-checked":""}" aria-hidden="true">${this.checked?"check_box":"check_box_outline_blank"}</md-icon>`:null}
+        ${this.showRadio?i`<md-icon class="${this.checked?"radio-checked":""}" aria-hidden="true">${this.checked?"radio_button_checked":"radio_button_unchecked"}</md-icon>`:null}
+        <div class="label">${this.label?this.label:i`<slot></slot>`}</div>
+        <md-focus-ring inward></md-focus-ring>
+      </div>
+    `}},l.styles=b`
+    :host {
+      display: block;
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.38;
+    }
+    :host(:focus-visible) .item {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: -2px;
+    }
+    :host([data-focused]) .item {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      padding: var(--scb-select-option-padding-y, var(--spacing-3))
+        var(--scb-select-option-padding-x, var(--spacing-5));
+      gap: var(--scb-select-option-gap, var(--spacing-4));
+      min-height: var(--scb-select-option-min-height, 40px);
+      position: relative;
+      font-size: var(--scb-select-option-font-size, var(--md-sys-typescale-body-large-size));
+      line-height: var(--scb-select-option-line-height, var(--md-sys-typescale-body-large-line-height));
+      letter-spacing: var(--scb-select-option-letter-spacing, var(--md-sys-typescale-body-large-tracking));
+    }
+    .label {
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+    md-icon {
+      font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+    md-focus-ring {
+      border-radius: var(--md-sys-shape-corner-small);
+    }
+    .item.checked {
+      background-color: var(--md-sys-color-secondary-container);
+    }
+    :host([no-highlight-selected]) .item.checked {
+      background-color: transparent;
+    }
+    md-icon.radio-checked {
+      color: var(--md-sys-color-primary);
+    }
+  `,l);t([o({type:String})],e.prototype,"value",void 0);t([o({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0);t([o({type:Boolean})],e.prototype,"showCheckbox",void 0);t([o({type:Boolean})],e.prototype,"checked",void 0);t([o({type:Boolean})],e.prototype,"showRadio",void 0);t([o({type:String})],e.prototype,"label",void 0);t([o({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],e.prototype,"noHighlightSelected",void 0);e=t([m("scb-select-option")],e);