scb-wc 0.1.11 → 0.1.13

package/mvc/components/scb-stepper/scb-step.js

@@ -1 +1,239 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-stepper/scb-step.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,o,c){try{customElements.get(e)||r(e,o,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 b,b as p,g as h,h as a,y as s}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,d,m){try{customElements.get(o)||e(o,d,m)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var l,t=(l=class extends b{constructor(...e){super(...e),this.label="",this.subLabel="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.widthWeight=1,this.icon=""}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content"),this.widthWeight>0?this.style.setProperty("--scb-step-width-weight",String(this.widthWeight)):this.style.removeProperty("--scb-step-width-weight")}handleKeyDown(e){e.key==="Enter"||e.key===" "?(e.preventDefault(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))):(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(this.dispatchEvent(new CustomEvent("scb-stepper-keynav",{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){const e=this.active?"step":void 0,o=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:void 0;switch(this.symbolVariant){case"icon":return s`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${o}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<md-icon>${this.icon}</md-icon>`}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;case"marker":return s`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${o}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s``}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;default:return s`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${o}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<span>${this.number}</span>`}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `}}},l.styles=p`
+    :host {
+        font-family: var(--brand-font);
+        --scb-step-slide-from-x: 0px;
+        --scb-step-slide-from-y: 0px;
+        --scb-step-label-active-weight: 600;
+    }
+    .scb-step-content {
+        width: fit-content;
+        max-width: 100%;
+        min-width: 0;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        margin-inline: auto;
+        cursor: pointer;
+        background: none;
+        box-sizing: border-box;
+        user-select: none;
+        padding-block: var(--spacing-1);
+        padding-inline: var(--spacing-4);
+    }
+    .scb-step-content:focus,
+    .scb-step-content:focus-visible {
+        outline: none ;
+        box-shadow: none ;
+    }
+    .symbol {
+        background-color: var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+        min-width: var(--icon-size-medium);
+        height: var(--icon-size-medium);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        font-size: var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        position: relative;
+        z-index: 1;
+            will-change: transform, opacity;
+        transition:
+          background-color var(--motion-duration-short) var(--motion-easing-standard),
+          color var(--motion-duration-short) var(--motion-easing-standard),
+          transform var(--motion-duration-short) var(--motion-easing-emphasized);
+        padding: var(--spacing-3);  
+    }
+    md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    md-icon {
+      font-size: 20px;
+    }
+    :host([active]) .symbol {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+    :host([completed]) .symbol {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+    .label {
+      margin-top: var(--spacing-3);
+      text-align: center;
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+      max-width: 90px;
+      word-break: break-word;
+      margin-bottom: var(--spacing-3);
+      display: grid;
+      justify-items: center;
+    }
+    .label::before {
+      content: attr(data-label);
+      font-weight: var(--scb-step-label-active-weight);
+      grid-area: 1 / 1;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      white-space: inherit;
+    }
+    .label-text {
+      grid-area: 1 / 1;
+    }
+    .sub-label {
+      text-align: center;
+      display: grid;
+      justify-items: center;
+    }
+    .sub-label::before {
+      content: attr(data-label);
+      font-weight: var(--scb-step-label-active-weight);
+      grid-area: 1 / 1;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      white-space: inherit;
+    }
+    .sub-label-text {
+      grid-area: 1 / 1;
+    }
+    :host([active]) .label, :host([active]) .sub-label {
+      font-weight: var(--scb-step-label-active-weight);
+    }
+    .content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 0;
+        will-change: transform, opacity;
+    }
+    :host([variant="vertical"]) {
+        .scb-step-content {
+            width: 100%;
+            flex-direction: row;
+            align-items: flex-start;
+            gap: var(--spacing-5);
+            margin-inline: 0;
+            padding: var(--spacing-4);
+        }
+    }
+    :host([no-content]) {
+      .scb-step-content {
+        align-items: center;
+        .label {
+            margin-bottom: 0px;
+        }
+    }
+    }
+    :host([variant="vertical"]) .label{
+        margin-top: 0;
+        max-width: none;
+        text-align: left;
+        justify-items: start;
+        word-break: normal;
+    }
+    :host([variant="vertical"]) .sub-label{
+        text-align: left;
+        justify-items: start;
+        word-break: normal;
+    }
+    :host([variant="vertical"]) .content{
+        align-items: flex-start;
+        min-width: 0;
+    }
+    :host([symbol-variant="marker"]) .symbol {
+        min-width: 16px;
+        height: 16px;
+    }
+    :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
+        background-color: transparent;
+        color: var(--md-sys-color-primary);
+        md-icon{
+            font-size: var(--icon-size-small);
+        }
+    }
+
+    :host([active]) .symbol {
+      --scb-kf-pulse-scale: 1.08;
+      animation-duration: var(--motion-duration-medium);
+      animation-timing-function: var(--motion-easing-emphasized);
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
+    }
+
+    :host([completed]:not([active])) .symbol {
+      --scb-kf-pulse-scale: 1.04;
+      animation-duration: var(--motion-duration-short);
+      animation-timing-function: var(--motion-easing-standard);
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
+    }
+
+  `,l);i([a({type:String,reflect:!0})],t.prototype,"label",void 0);i([a({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",void 0);i([a({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",void 0);i([a({type:Number,reflect:!0})],t.prototype,"number",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"active",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"completed",void 0);i([a({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"islast",void 0);i([a({type:String,reflect:!0})],t.prototype,"variant",void 0);i([a({type:Number,reflect:!0,attribute:"width-weight"})],t.prototype,"widthWeight",void 0);i([a({type:String})],t.prototype,"icon",void 0);t=i([h("scb-step")],t);

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

@@ -1 +1,139 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-stepper/scb-step.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-stepper/scb-stepper.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,o,c){try{customElements.get(e)||r(e,o,c)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+import{_,b as x,g as k,h as l,y as w}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as p}from"../../vendor/decorate.js";import{n as I,t as c}from"../../vendor/assertClassBrand.js";import{n as g,r as y,t as b}from"../../vendor/classPrivateFieldGet2.js";import"./scb-step.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__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(h){var i=String(h||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v,d,a,u,o=(v=new WeakMap,d=new WeakMap,a=new WeakSet,u=class extends _{constructor(...t){super(...t),I(this,a),y(this,v,void 0),y(this,d,void 0),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,g(d,this,0),this._onKeyNav=e=>{const s=this._getSteps(),r=this.activeIndex;let i=r;e.detail.key==="ArrowRight"?r<s.length-1?i=r+1:i=0:e.detail.key==="ArrowLeft"&&(r>0?i=r-1:i=s.length-1),i!==r&&(this._onStepClick(i),setTimeout(()=>{const h=s[i].shadowRoot?.querySelector(".scb-step-content");h&&"focus"in h&&typeof h.focus=="function"&&h.focus()},0))},this._onStepContainerClick=e=>{const s=this._getSteps(),r=e.composedPath(),i=s.findIndex(h=>r.includes(h));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const e=this._getSteps();if(e.length===0){this.activeIndex=0;return}this.activeIndex>e.length-1?this.activeIndex=e.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),c(a,this,f).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();this.style.setProperty("--scb-stepper-step-count",String(Math.max(1,t.length))),t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),c(a,this,S).call(this),c(a,this,f).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&c(a,this,f).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&c(a,this,S).call(this)}render(){return w`
+      <div
+        class="steps"
+        role="list"
+        aria-label="Steg i processen"
+        @click=${this._onStepContainerClick}
+        @scb-stepper-keynav=${this._onKeyNav}
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(g(v,this,new ResizeObserver(()=>{c(a,this,f).call(this)})),b(v,this).observe(this))}disconnectedCallback(){b(v,this)&&(b(v,this).disconnect(),g(v,this,void 0)),b(d,this)&&(cancelAnimationFrame(b(d,this)),g(d,this,0)),super.disconnectedCallback()}},u.styles=x`
+    :host {
+      --scb-stepper-width: 100%;
+      --scb-stepper-height: 100%;
+      --scb-stepper-step-count: 1;
+      --scb-stepper-connector-gap: var(--spacing-2);
+      --scb-stepper-symbol-size: var(--icon-size-medium);
+      display: block;
+      padding: var(--spacing-5) 0;
+      width: 100%;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+      max-width: var(--scb-stepper-width);
+      height: var(--scb-stepper-height);
+
+      margin-block-start: var(--scb-stepper-spacing-block-start, 0);
+      margin-block-end: var(--scb-stepper-spacing-block-end, 0);
+      margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
+    }
+    .steps {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: center;
+      position: relative;
+      width: 100%;
+      gap: 0;
+      height: 100%;
+    }
+    :host([variant='vertical']) .steps {
+      flex-direction: column;
+      gap: var(--spacing-8);
+    }
+
+    :host([symbol-variant='marker']) {
+      --scb-stepper-symbol-size: 16px;
+    }
+    ::slotted(scb-step) {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      min-width: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step) {
+      flex: var(--scb-step-width-weight, 1) 1 0;
+    }
+
+    /* Horisontell connector
+       Bygger upp en linje per steg, med glapp både före och efter varje symbol.
+       Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
+    */
+    :host([variant='horizontal']) ::slotted(scb-step)::before,
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      content: '';
+      position: absolute;
+      top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
+      height: 1px;
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::before {
+      left: 0;
+      right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+      right: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step[completed])::before,
+    :host([variant='horizontal']) ::slotted(scb-step[completed])::after {
+      background-color: var(--md-sys-color-primary);
+    }
+    :host([variant='horizontal']) ::slotted(scb-step[active])::before {
+      background-color: var(--md-sys-color-primary);
+    }
+    /* Vertikal connector */
+    ::slotted(scb-step[variant='vertical'][completed]:not(:last-child))::after {
+      background-color: var(--md-sys-color-primary);
+    }
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker'][completed]:not(:last-child))::after {
+      background-color: var(--md-sys-color-primary);
+    }
+
+    ::slotted(scb-step[variant='vertical']:not(:first-child))::before {
+      display: none;
+    }
+    ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 28px;
+      top: 52px;
+      width: 1px;
+      height: calc(100% - 16px);
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      transform: translateX(-50%);
+    }
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 38px;
+      width: 1px;
+      height: calc(100% - 2px);
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      transform: translateX(-50%);
+    }
+    ::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
+      top: 20px;
+    }
+  `,u);function S(){const n=c(a,this,m).call(this,this.spacing),t=c(a,this,m).call(this,this.spacingTop)??n,e=c(a,this,m).call(this,this.spacingBottom)??n,s=c(a,this,m).call(this,this.spacingLeft),r=c(a,this,m).call(this,this.spacingRight);t?this.style.setProperty("--scb-stepper-spacing-block-start",t):this.style.removeProperty("--scb-stepper-spacing-block-start"),e?this.style.setProperty("--scb-stepper-spacing-block-end",e):this.style.removeProperty("--scb-stepper-spacing-block-end"),s?this.style.setProperty("--scb-stepper-spacing-inline-start",s):this.style.removeProperty("--scb-stepper-spacing-inline-start"),r?this.style.setProperty("--scb-stepper-spacing-inline-end",r):this.style.removeProperty("--scb-stepper-spacing-inline-end")}function m(n){if(!n)return;const t=String(n).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}function f(){b(d,this)||g(d,this,requestAnimationFrame(()=>{g(d,this,0),c(a,this,C).call(this)}))}function C(){const n=this._getSteps();n.length!==0&&n.forEach(t=>{const e=t.shadowRoot;if(!e)return;const s=e.querySelector(".label"),r=e.querySelector(".scb-step-content");if(!s)return;if(this.variant!=="horizontal"){s.style.removeProperty("max-width"),s.style.removeProperty("white-space"),s.style.removeProperty("word-break"),s.style.removeProperty("overflow-wrap");return}s.style.maxWidth="none",s.style.whiteSpace="nowrap",s.style.wordBreak="normal",s.style.overflowWrap="normal";const i=r?.clientWidth??t.clientWidth;i>0&&s.scrollWidth>i&&(s.style.maxWidth="100%",s.style.whiteSpace="normal",s.style.wordBreak="break-word",s.style.overflowWrap="anywhere")})}p([l({type:String,reflect:!0})],o.prototype,"type",void 0);p([l({type:String,reflect:!0})],o.prototype,"label",void 0);p([l({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",void 0);p([l({type:String})],o.prototype,"variant",void 0);p([l({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",void 0);p([l({type:String,reflect:!0})],o.prototype,"spacing",void 0);p([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);p([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);p([l({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);p([l({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);p([l({type:Number,reflect:!0,attribute:"active-index"})],o.prototype,"activeIndex",void 0);o=p([k("scb-stepper")],o);

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

@@ -1 +1,59 @@
-import{ScbSwitch as _}from"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-switch/scb-switch.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,o,c){try{customElements.get(e)||r(e,o,c)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();export{_ as ScbSwitch};
+import"../../vendor/vendor-material.js";import{_ as y,b as m,g as _,h as s,v as f,y as g}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as v,t as o}from"../../vendor/assertClassBrand.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,n,h){try{customElements.get(a)||t(a,n,h)}catch(u){var p=String(u||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var l,d,e=(l=new WeakSet,d=class extends y{constructor(){super(),v(this,l),this._internals=null,this.label="",this.ariaLabel="",this.icons=!1,this.selected=!1,this.required=!1,this.disabled=!1,this.fullWidth=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.name="",this.value="on",this._form=null,this._formResetHandler=null,this._initialSelected=!1,this._customValidationMessage="","attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._initialSelected=this.selected,this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.selected=this._initialSelected,this.__syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0)),this.__syncFormValue()}disconnectedCallback(){this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this.shadowRoot?.querySelector("md-switch")?.addEventListener("change",t=>{this.selected=t.target.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected},bubbles:!0,composed:!0}))}),o(l,this,b).call(this)}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(t.has("selected")||t.has("disabled")||t.has("value"))&&this.__syncFormValue(),(t.has("selected")||t.has("disabled")||t.has("required"))&&this.__syncValidity(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(l,this,b).call(this)}formDisabledCallback(t){this.disabled=t}__getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required&&!this.selected?"Aktivera det här valet.":""}__syncValidity(){const t=this.shadowRoot?.querySelector("md-switch"),a=this.disabled?"":this.__getValidationMessage();this._internals&&(a?this._internals.setValidity({valueMissing:!0},a,t??void 0):this._internals.setValidity({})),this.toggleAttribute("aria-invalid",!!a)}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)return;const t=this.disabled||!this.selected?null:this.value;this._internals.setFormValue(t)}render(){const t=this.label.trim().length>0,a=t?f:this.ariaLabel||f,n=g`
+      <md-switch
+        ?icons=${this.icons}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        aria-required=${this.required?"true":"false"}
+        aria-label=${a}
+      ></md-switch>
+    `;return t?g`
+          <label class="switch-container" ?disabled=${this.disabled}>
+            <span class="switch-label">${this.label}</span>
+            ${n}
+          </label>
+        `:n}},d.formAssociated=!0,d.styles=m`
+    :host {
+      display: block;
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-switch-spacing-block-start, 0);
+      margin-block-end: var(--scb-switch-spacing-block-end, 0);
+      margin-inline-start: var(--scb-switch-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-switch-spacing-inline-end, 0);
+    }
+
+    .switch-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: auto;
+
+      /* Gap hämtas från spacing-tokens och följer density-lägen */
+      gap: var(--scb-switch-gap, var(--spacing-3, 8px));
+
+      cursor: pointer;
+
+      /* Basfärg för innehållet. Labeln ärver om inget annat anges. */
+      color: var(--md-sys-color-on-surface);
+    }
+
+    /* När full-width är true, kör space-between + 100% bredd */
+    :host([full-width]) .switch-container {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .switch-label {
+      /* liten vertikal justering kopplad till spacing-tokens */
+      transform: translateY(var(--scb-switch-label-offset-y, var(--spacing-1, 2px)));
+
+      /* Typografiska tokens*/
+      font-family: var(--brand-font, 'Inter', sans-serif);
+      font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      font-weight: var(--md-sys-typescale-title-large-weight, 600);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      /* Ärver färg från container */
+      color: var(--scb-switch-label-color, inherit);
+    }
+  `,d);function b(){const r=o(l,this,c).call(this,this.spacing),t=o(l,this,c).call(this,this.spacingTop)??r,a=o(l,this,c).call(this,this.spacingBottom)??r,n=o(l,this,c).call(this,this.spacingLeft),h=o(l,this,c).call(this,this.spacingRight);t?this.style.setProperty("--scb-switch-spacing-block-start",t):this.style.removeProperty("--scb-switch-spacing-block-start"),a?this.style.setProperty("--scb-switch-spacing-block-end",a):this.style.removeProperty("--scb-switch-spacing-block-end"),n?this.style.setProperty("--scb-switch-spacing-inline-start",n):this.style.removeProperty("--scb-switch-spacing-inline-start"),h?this.style.setProperty("--scb-switch-spacing-inline-end",h):this.style.removeProperty("--scb-switch-spacing-inline-end")}function c(r){if(!r)return;const t=String(r).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}i([s({type:String})],e.prototype,"label",void 0);i([s({type:String,reflect:!0,attribute:"aria-label"})],e.prototype,"ariaLabel",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"icons",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"selected",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"required",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0);i([s({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",void 0);i([s({type:String,reflect:!0})],e.prototype,"spacing",void 0);i([s({type:String,attribute:"spacing-top",reflect:!0})],e.prototype,"spacingTop",void 0);i([s({type:String,attribute:"spacing-bottom",reflect:!0})],e.prototype,"spacingBottom",void 0);i([s({type:String,attribute:"spacing-left",reflect:!0})],e.prototype,"spacingLeft",void 0);i([s({type:String,attribute:"spacing-right",reflect:!0})],e.prototype,"spacingRight",void 0);i([s({type:String})],e.prototype,"name",void 0);i([s({type:String})],e.prototype,"value",void 0);e=i([_("scb-switch")],e);export{e as ScbSwitch};

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

@@ -1 +1,51 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-table/scb-table.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,o,c){try{customElements.get(e)||r(e,o,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as g,b as _,g as v,h as b,y as C}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as f}from"../../vendor/decorate.js";import"../scb-icon-button/scb-icon-button.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(r,s,o){try{customElements.get(r)||e(r,s,o)}catch(i){var l=String(i||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var p,m=(p=class extends g{constructor(...e){super(...e),this.dataSorting=!1,this.columnWidthMode="auto",this._sortedColumn=null,this._sortDirection="asc",this._columnWidthFrame=null,this._onSlotChange=()=>{this._attachThListeners()}}render(){return C`
+      <div class="scb-table-scroll-wrapper">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `}firstUpdated(){const e=this.shadowRoot?.querySelector("slot");e&&(e.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(e){e.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),e.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){const e=this.shadowRoot?.querySelector("slot");if(!e)return null;const r=e.assignedNodes({flatten:!0});for(const s of r)if(s.nodeType===Node.ELEMENT_NODE){const o=s,l=o.tagName.toLowerCase()==="tbody"?o:o.querySelector("tbody");if(l)return l}return null}_getTables(){const e=this.shadowRoot?.querySelector("slot");if(!e)return[];const r=e.assignedNodes({flatten:!0}),s=[];return r.forEach(o=>{if(o.nodeType===Node.ELEMENT_NODE){const l=o;l.tagName.toLowerCase()==="table"&&s.push(l),s.push(...Array.from(l.querySelectorAll("table")))}}),s}_attachThListeners(){const e=this.shadowRoot?.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0}),s=[],o=[],l=[],i=[];r.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&(s.push(...t.querySelectorAll("thead")),o.push(...t.querySelectorAll("th")),l.push(...t.querySelectorAll("td")),i.push(...t.querySelectorAll("tr")))}),s.forEach(t=>{t.style.borderTop="1px solid var(--md-sys-color-on-surface)"}),o.forEach((t,c)=>{t.style.textAlign="left",t.style.padding="12px",t.style.position="relative",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-label-medium-font)",t.style.fontSize="var(--md-sys-typescale-label-medium-size)",t.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",t.style.fontWeight=" var(--weight-bold)",t.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",t.style.verticalAlign="bottom",t.style.borderRight="1px solid var(--md-sys-color-on-surface)",t.style.borderBottom="1px solid var(--md-sys-color-on-surface)";const d=(t.textContent??"").replace(/\s+/g," ").trim();for(;t.firstChild;)t.removeChild(t.firstChild);const a=document.createElement("p");if(a.textContent=d,a.style.margin="0",this.dataSorting){const n=document.createElement("scb-icon-button");n.className="scb-sort-icon",n.onclick=()=>this._onThClick(c),n.setAttribute("variant","standard"),n.setAttribute("size","small"),n.style.alignSelf="end",this._sortedColumn===c?(n.setAttribute("variant","filled-tonal"),n.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(n.setAttribute("icon","swap_horiz"),n.style.transform+=" rotate(90deg)");const u=document.createElement("div");u.style.display="flex",u.style.gap="8px",u.style.flexWrap="nowrap",u.style.alignItems="center",u.appendChild(a),u.appendChild(n),t.appendChild(u)}else t.appendChild(a)}),l.forEach(t=>{t.style.padding="12px",t.style.textAlign="left",t.style.borderTop="1px solid var(--md-sys-color-outline-variant)",t.style.verticalAlign="text-top",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-body-medium-font)",t.style.fontSize="var(--md-sys-typescale-body-medium-size)",t.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)",t.style.borderRight="1px solid var(--md-sys-color-on-surface)",t.style.borderBottom="1px solid var(--md-sys-color-on-surface)"}),i.forEach(t=>{const c=t.querySelectorAll("th");c.length>0&&c.forEach((a,n)=>{n===c.length-1&&(a.style.borderRight="none")});const d=t.querySelectorAll("td");d.length>0&&d.forEach((a,n)=>{n===d.length-1&&(a.style.borderRight="none")})});const h=this._getTbody();h&&Array.from(h.querySelectorAll("tr")).forEach((t,c)=>{const d=c%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)";t.querySelectorAll("td").forEach(a=>{a.style.backgroundColor=d})}),this._queueColumnWidthUpdate()}_queueColumnWidthUpdate(){this._columnWidthFrame!==null&&cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=requestAnimationFrame(()=>{this._columnWidthFrame=null,this._applyColumnWidthMode()})}_applyColumnWidthMode(){this._getTables().forEach(e=>{if(this._removeGeneratedColGroup(e),e.style.tableLayout="",e.style.width="",e.style.minWidth="",e.style.maxWidth="",this.columnWidthMode!=="header")return;const r=Array.from(e.querySelectorAll("thead tr")),s=r[r.length-1];if(!s)return;const o=Array.from(s.cells).map(i=>`${Math.ceil(this._measureCellContentWidth(i))}px`),l=o.reduce((i,h)=>i+parseFloat(h),0);this._applyGeneratedColGroup(e,o),e.style.tableLayout="fixed",e.style.width=`${Math.ceil(l)}px`,e.style.minWidth=`${Math.ceil(l)}px`,e.style.maxWidth="none"})}_applyGeneratedColGroup(e,r){const s=document.createElement("colgroup");s.setAttribute("data-scb-generated-column-widths","true"),r.forEach(o=>{const l=document.createElement("col");l.style.width=o,l.style.minWidth=o,s.appendChild(l)}),e.insertBefore(s,e.firstChild)}_removeGeneratedColGroup(e){e.querySelector('colgroup[data-scb-generated-column-widths="true"]')?.remove()}_measureCellContentWidth(e){const r=e.firstElementChild?.cloneNode(!0)??document.createElement("span");e.firstElementChild||(r.textContent=e.textContent??"");const s=window.getComputedStyle(e),o=document.createElement("div");o.style.position="absolute",o.style.left="-99999px",o.style.top="0",o.style.visibility="hidden",o.style.pointerEvents="none",o.style.width="max-content",o.style.maxWidth="none",o.style.whiteSpace="nowrap",o.style.fontFamily=s.fontFamily,o.style.fontSize=s.fontSize,o.style.fontWeight=s.fontWeight,o.style.lineHeight=s.lineHeight,o.style.letterSpacing=s.letterSpacing,r instanceof HTMLElement&&(r.style.width="max-content",r.style.maxWidth="none",r.style.whiteSpace="nowrap"),o.appendChild(r),document.body.appendChild(o);const l=parseFloat(s.paddingLeft||"0"),i=parseFloat(s.paddingRight||"0"),h=o.getBoundingClientRect().width+l+i;return document.body.removeChild(o),h}_onThClick(e){this.dataSorting&&(this._sortedColumn===e?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=e,this._sortDirection="asc"),this._sortTable(e,this._sortDirection),this._attachThListeners(),this.dispatchEvent(new CustomEvent("tablesortchange",{detail:{sortedColumn:this._sortedColumn,sortDirection:this._sortDirection},bubbles:!0,composed:!0})))}_sortTable(e,r){const s=this._getTbody();if(!s)return;const o=Array.from(s.querySelectorAll("tr"));o.sort((l,i)=>{const h=l.children[e]?.textContent?.trim()??"",t=i.children[e]?.textContent?.trim()??"",c=Date.parse(h.replace(/\s+/g," ")),d=Date.parse(t.replace(/\s+/g," "));if(!isNaN(c)&&!isNaN(d))return r==="asc"?c-d:d-c;const a=parseFloat(h.replace(",",".")),n=parseFloat(t.replace(",","."));if(!isNaN(a)&&!isNaN(n))return r==="asc"?a-n:n-a;const u=h.localeCompare(t,"sv");return r==="asc"?u:-u}),o.forEach(l=>s.appendChild(l))}},p.styles=_`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand, Inter);
+    }
+
+    .scb-table-scroll-wrapper {
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: auto;
+      max-width: 100%;
+      padding-bottom: 24px;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar {
+      border-radius: var(--md-sys-shape-corner-large);
+      height: 8px;
+      width: 10px;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar-thumb {
+      background: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-large);
+      cursor: pointer;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar-track {
+      background: var(--md-sys-color-secondary-container);
+      border-radius: var(--md-sys-shape-corner-large);
+    }
+
+    ::slotted(table) {
+      border-collapse: collapse;
+      border-spacing: 0;
+      min-width: 100%;
+      overflow: hidden;
+    }
+
+    ::slotted(th) .scb-sort-icon {
+      pointer-events: none;
+    }
+
+    ::slotted(th:hover) .scb-sort-icon {
+      pointer-events: auto;
+    }
+  `,p);f([b({type:Boolean,attribute:"data-sorting"})],m.prototype,"dataSorting",void 0);f([b({type:String,attribute:"column-width-mode"})],m.prototype,"columnWidthMode",void 0);m=f([v("scb-table")],m);

package/mvc/components/scb-table-advanced/scb-table-advanced.js

@@ -1 +1,76 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-search/scb-search.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-pagination/scb-pagination.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-table-advanced/scb-table-advanced.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,o,d){try{customElements.get(e)||r(e,o,d)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+import{_ as w,b as C,g as E,h as g,y as m}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as p}from"../../vendor/decorate.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-pagination/scb-pagination.js";(function(){try{var v=typeof globalThis<"u"?globalThis:window;if(!v.__scb_ce_guard_installed__){v.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,o,h){try{customElements.get(r)||e(r,o,h)}catch(t){var l=String(t||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw t}}}}catch{}})();var T,u=(T=class extends w{constructor(...e){super(...e),this.searchTerm="",this.pagination=!1,this.filteringSearch=!1,this.noScroll=!1,this.pageSize=10,this.currentPage=1,this.totalRows=0,this._sortedColumn=null,this._sortDirection="asc",this._filteredRows=null,this._tbodyObserver=null,this._observedTbody=null,this._pendingTableRefresh=!1,this._suppressTbodyObserver=!1,this._onSlotChange=()=>{this._attachTbodyObserver(),this._refreshFromTableContent()},this._onPaginationChange=r=>{const o=r.detail;o&&typeof o.page=="number"&&this._changePage(o.page)}}disconnectedCallback(){super.disconnectedCallback(),this._disconnectTbodyObserver()}attributeChangedCallback(e,r,o){if(super.attributeChangedCallback(e,r,o),r!==o){if(e==="searchterm"){queueMicrotask(()=>{this.isConnected&&this._filterTable()});return}if(e==="currentpage"){queueMicrotask(()=>{this.isConnected&&this._paginateTable()});return}(e==="page-size"||e==="with-filtering-search"||e==="with-pagination")&&this._scheduleTableRefresh()}}render(){const e=Math.ceil(this.totalRows/this.pageSize);return m`
+        ${this.filteringSearch?m`
+          <div style="margin-bottom: 12px;">
+            <scb-search
+              value=${this.searchTerm}
+              @input=${r=>this._onSearchInput(r)}
+            />
+          </div>
+        `:""}
+        ${this.noScroll?m`<slot @slotchange=${this._onSlotChange}></slot>`:m`
+          <div class="scb-table-scroll-wrapper">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        `}
+        <div class="pagination">
+          ${this.pagination&&e>1?m`
+            <scb-pagination
+              .page=${this.currentPage}
+              .totalPages=${e}
+              @page-change=${this._onPaginationChange}
+              variant="icon"
+            ></scb-pagination>
+          `:""}
+        </div>
+      `}_onSearchInput(e){const r=e.target.value;this.searchTerm=r,this._filterTable(),this.dispatchEvent(new CustomEvent("tableadvancedchange",{detail:{searchTerm:this.searchTerm,currentPage:this.currentPage},bubbles:!0,composed:!0}))}_filterTable(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let o=null;if(r.forEach(i=>{if(i.nodeType===Node.ELEMENT_NODE){const s=i.querySelector("tbody");s&&(o=s)}}),!o)return;const l=Array.from(o.querySelectorAll("tr")),t=this.searchTerm.trim().toLowerCase();if(!t)this._filteredRows=null,l.forEach(i=>i.style.display=""),this._updateTotalRows(),this._ensureCurrentPageWithinBounds(),this.pagination&&this._paginateTable(),this._sortedColumn!==null&&this._sortTable(this._sortedColumn,this._sortDirection);else{this._filteredRows=l.filter(s=>(s.textContent?.toLowerCase()??"").includes(t)),l.forEach(s=>s.style.display="none");let i=this._filteredRows;this._sortedColumn!==null&&(i=[...i],i.sort((s,c)=>{const n=s.children[this._sortedColumn]?.textContent?.trim()??"",a=c.children[this._sortedColumn]?.textContent?.trim()??"",d=Date.parse(n.replace(/\s+/g," ")),b=Date.parse(a.replace(/\s+/g," "));if(!isNaN(d)&&!isNaN(b))return this._sortDirection==="asc"?d-b:b-d;const f=parseFloat(n.replace(",",".")),y=parseFloat(a.replace(",","."));if(!isNaN(f)&&!isNaN(y))return this._sortDirection==="asc"?f-y:y-f;const _=n.localeCompare(a,"sv");return this._sortDirection==="asc"?_:-_}),this._filteredRows=i),this.totalRows=this._filteredRows.length,this._ensureCurrentPageWithinBounds(),this.pagination?this._paginateTable():this._filteredRows.forEach(s=>s.style.display="")}}firstUpdated(){const e=this.shadowRoot.querySelector("slot");e&&(e.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners(),this._attachTbodyObserver(),this._refreshFromTableContent())}updated(e){super.updated(e),(e.has("searchTerm")||e.has("currentPage")||e.has("pageSize")||e.has("filteringSearch")||e.has("pagination"))&&this.updateComplete.then(()=>{this.isConnected&&this._refreshFromTableContent()})}_disconnectTbodyObserver(){this._tbodyObserver&&(this._tbodyObserver.disconnect(),this._tbodyObserver=null),this._observedTbody=null}_attachTbodyObserver(){const e=this._getTbody();if(!e){this._disconnectTbodyObserver();return}this._observedTbody!==e&&(this._disconnectTbodyObserver(),this._observedTbody=e,this._tbodyObserver=new MutationObserver(()=>{this._suppressTbodyObserver||this._scheduleTableRefresh()}),this._tbodyObserver.observe(e,{childList:!0,subtree:!0,characterData:!0}))}_scheduleTableRefresh(){this._pendingTableRefresh||(this._pendingTableRefresh=!0,queueMicrotask(()=>{this._pendingTableRefresh=!1,this._refreshFromTableContent()}))}_refreshFromTableContent(){if(this._attachTbodyObserver(),this.filteringSearch){this._filterTable();return}if(this._updateTotalRows(),this._ensureCurrentPageWithinBounds(),this._sortedColumn!==null){this._sortTable(this._sortedColumn,this._sortDirection);return}this.pagination&&this._paginateTable()}_ensureCurrentPageWithinBounds(){const e=Math.max(1,Math.ceil(this.totalRows/this.pageSize)),r=Math.min(Math.max(1,this.currentPage),e);r!==this.currentPage&&(this.currentPage=r)}_getTbody(){const e=this.shadowRoot.querySelector("slot");if(!e)return null;const r=e.assignedNodes({flatten:!0});for(const o of r)if(o.nodeType===Node.ELEMENT_NODE){const h=o.querySelector("tbody");if(h)return h}return null}_attachThListeners(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0}),o=[],h=[],l=[];r.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&(o.push(...t.querySelectorAll("th")),h.push(...t.querySelectorAll("td")),l.push(...t.querySelectorAll("tr")))}),o.forEach((t,i)=>{t.style.textAlign="left",t.style.padding="16px 0px 16px 32px",t.style.position="relative",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-label-medium-font)",t.style.fontSize="var(--md-sys-typescale-label-medium-size)",t.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-label-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",t.style.verticalAlign="bottom";const s=t.firstChild;if(s&&s.nodeType===Node.TEXT_NODE&&s.textContent?.trim()||s&&s.nodeType===Node.ELEMENT_NODE&&s.tagName.toLowerCase()!=="p"){const n=document.createElement("p");n.textContent=s.textContent?s.textContent.trim():"",n.style.margin="0",t.replaceChild(n,s),t.querySelectorAll("scb-icon-button.scb-sort-icon").forEach(d=>d.remove());const a=document.createElement("scb-icon-button");a.className="scb-sort-icon",a.onclick=()=>this._onThClick(i),a.setAttribute("variant","standard"),a.setAttribute("size","small"),this._sortedColumn===i?(a.setAttribute("variant","filled-tonal"),a.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(a.setAttribute("icon","swap_horiz"),a.style.transform+=" rotate(90deg)",a.style.alignSelf="end");var c=document.createElement("div");c.style.display="flex",c.style.gap="8px",c.style.flexWrap="nowrap",c.style.alignItems="center",c.appendChild(n),c.appendChild(a),t.appendChild(c)}}),h.forEach(t=>{t.style.padding="16px 0px 16px 32px",t.style.textAlign="left",t.style.borderTop="1px solid var(--md-sys-color-outline-variant)",t.style.verticalAlign="text-top",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-body-medium-font)",t.style.fontSize="var(--md-sys-typescale-body-medium-size)",t.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)"}),l.forEach((t,i)=>{i%2===1&&t.querySelectorAll("td").forEach(n=>{n.style.backgroundColor="var(--scb-background-row)"});const s=t.querySelectorAll("th");s.length>0&&s.forEach((n,a)=>{a===0&&(n.style.paddingLeft="24px"),a===s.length-1?n.style.paddingRight="24px":n.style.paddingRight=""});const c=t.querySelectorAll("td");c.length>0&&c.forEach((n,a)=>{a===0&&(n.style.paddingLeft="24px"),a===c.length-1?n.style.paddingRight="24px":n.style.paddingRight=""})}),this.pagination&&this._paginateTable()}_onThClick(e){this._sortedColumn===e?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=e,this._sortDirection="asc"),this._sortTable(e,this._sortDirection),this._attachThListeners()}_sortTable(e,r){const o=this.shadowRoot.querySelector("slot");if(!o)return;const h=o.assignedNodes({flatten:!0});let l=null;if(h.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const c=s.querySelector("tbody");c&&(l=c)}}),!l)return;let t;this._filteredRows?t=[...this._filteredRows]:t=Array.from(l.querySelectorAll("tr")),t.sort((s,c)=>{const n=s.children[e]?.textContent?.trim()??"",a=c.children[e]?.textContent?.trim()??"",d=Date.parse(n.replace(/\s+/g," ")),b=Date.parse(a.replace(/\s+/g," "));if(!isNaN(d)&&!isNaN(b))return r==="asc"?d-b:b-d;const f=parseFloat(n.replace(",",".")),y=parseFloat(a.replace(",","."));if(!isNaN(f)&&!isNaN(y))return r==="asc"?f-y:y-f;const _=n.localeCompare(a,"sv");return r==="asc"?_:-_});const i=this._tbodyObserver!==null;i&&this._disconnectTbodyObserver();try{t.forEach(s=>l.appendChild(s))}finally{i&&this._attachTbodyObserver()}this._filteredRows&&(this._filteredRows=t,this.totalRows=this._filteredRows.length),this.pagination&&this._paginateTable()}_updateTotalRows(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let o=null;r.forEach(h=>{if(h.nodeType===Node.ELEMENT_NODE){const l=h.querySelector("tbody");l&&(o=l)}}),o&&(this.totalRows=o.querySelectorAll("tr").length,this._ensureCurrentPageWithinBounds())}_paginateTable(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let o=null;if(r.forEach(i=>{if(i.nodeType===Node.ELEMENT_NODE){const s=i.querySelector("tbody");s&&(o=s)}}),!o)return;let h;this._filteredRows?h=this._filteredRows:h=Array.from(o.querySelectorAll("tr")),Array.from(o.querySelectorAll("tr")).forEach(i=>i.style.display="none");const l=(this.currentPage-1)*this.pageSize,t=l+this.pageSize;h.slice(l,t).forEach(i=>i.style.display="")}_changePage(e){const r=Math.ceil(this.totalRows/this.pageSize);e<1||e>r||(this.currentPage=e,this._paginateTable(),this.dispatchEvent(new CustomEvent("tableadvancedchange",{detail:{searchTerm:this.searchTerm,currentPage:this.currentPage},bubbles:!0,composed:!0})),this.requestUpdate())}},T.styles=C`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand, Inter);
+        --scb-background-row: var(--md-sys-color-surface);
+      }
+      scb-search{
+        max-width: 400px;
+      }
+      .scb-table-scroll-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: auto;
+        max-width: 100%;
+        padding-bottom: 24px;
+        /* Optional: set max-height if you want vertical scroll */
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar {
+        border-radius: var(--md-sys-shape-corner-large);
+        height: 8px;
+        width: 10px;
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar-thumb {
+        background: var(--md-sys-color-on-surface);
+        border-radius: var(--md-sys-shape-corner-large);
+        cursor: pointer;
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar-track {
+        background: var(--md-sys-color-secondary-container);
+        border-radius: var(--md-sys-shape-corner-large);
+      }
+      ::slotted(table) {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border-radius: 24px;
+        min-width: 100%;
+            overflow: hidden;
+        /* Remove overflow: hidden to allow scroll */
+      }
+      .pagination {
+        margin-top: 16px;
+        display: flex;
+        justify-self: center;
+      }
+      ::slotted(th) .scb-sort-icon {
+        pointer-events: none;
+      }
+      ::slotted(th:hover) .scb-sort-icon {
+        pointer-events: auto;
+      }
+    `,T);p([g({type:String})],u.prototype,"searchTerm",void 0);p([g({type:Boolean,attribute:"with-pagination"})],u.prototype,"pagination",void 0);p([g({type:Boolean,attribute:"with-filtering-search"})],u.prototype,"filteringSearch",void 0);p([g({type:Boolean,attribute:"no-scroll"})],u.prototype,"noScroll",void 0);p([g({type:Number,attribute:"page-size"})],u.prototype,"pageSize",void 0);p([g({type:Number})],u.prototype,"currentPage",void 0);p([g({type:Number})],u.prototype,"totalRows",void 0);u=p([E("scb-table-advanced")],u);