scb-wc-test 0.1.104 → 0.1.106

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

@@ -1,4 +1,4 @@
-import{a as h,n as l,i as u,x as c,t as p}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(s,a,o){try{customElements.get(s)||t(s,a,o)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(e,t,s,a)=>{for(var o=a>1?void 0:a?f(t,s):t,n=e.length-1,d;n>=0;n--)(d=e[n])&&(o=(a?d(t,s,o):d(o))||o);return a&&o&&b(t,s,o),o};let i=class extends u{constructor(){super(),this._internals=null,this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="","attachInternals"in this&&(this._internals=this.attachInternals())}render(){const e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=this.error?c`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const s=this.underLabel?`${this._inputId}-supporting-text`:void 0,a=this.type==="search"&&this.value?c`
+import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="","attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,l=this.type==="search"&&this.value?h`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -32,7 +32,7 @@ import{a as h,n as l,i as u,x as c,t as p}from"../../vendor/vendor.js";import"..
                 ></line>
               </svg>
             </button>
-          `:null;return this.type==="textarea"?c`
+          `:null;return this.type==="textarea"?h`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -47,12 +47,12 @@ import{a as h,n as l,i as u,x as c,t as p}from"../../vendor/vendor.js";import"..
             id="${this._inputId}"
             ?required=${this.required}
             aria-invalid=${this.error?"true":"false"}
-            aria-describedby=${s}
+            aria-describedby=${i}
           >
 ${this.value}</textarea
           >
         </div>
-      `:c`
+      `:h`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
         class="scb-textfield-supporting-text"
@@ -60,7 +60,7 @@ ${this.value}</textarea
         >${this.underLabel}</span
       >
       <div class="scb-textfield-wrapper">
-        ${e}
+        ${t}
         <input
           class="scb-textfield${this.error?" has-error-icon":""}"
           .value=${this.value}
@@ -70,12 +70,12 @@ ${this.value}</textarea
           ?disabled=${this.disabled}
           ?required=${this.required}
           aria-invalid=${this.error?"true":"false"}
-          aria-describedby=${s}
+          aria-describedby=${i}
         />
-        ${a}
-        ${t}
+        ${l}
+        ${e}
       </div>
-    `}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t.addEventListener("input",()=>{const s=t;if(this.value=s.value,this._internals){const a=this.disabled?null:this.value;this._internals.setFormValue(a)}if(this.pattern){const a=new RegExp(this.pattern);this.error=!a.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),t.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}))}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0))}reportValidity(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const t=e.reportValidity();this.error=!t;const s=t?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return t||(this.errorText=s),this._internals&&(t?this._internals.setValidity({}):this._internals.setValidity({customError:!0},s,e)),t}return!0}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}};i.formAssociated=!0;i.styles=[h`
+    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern){const l=new RegExp(this.pattern);this.error=!l.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))})),p(this,n,b).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,n,b).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0))}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};n=new WeakSet;b=function(){const t=p(this,n,u).call(this,this.spacing),e=p(this,n,u).call(this,this.spacingTop)??t,i=p(this,n,u).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};u=function(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};s.formAssociated=!0;s.styles=[m`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -87,6 +87,10 @@ ${this.value}</textarea
         --scb-textfield-textarea-max-width: 600px;
         font-family: var(--brand-font);
         color: var(--md-sys-color-on-surface);
+
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-textfield-spacing-block-start, 0);
+        margin-block-end: var(--scb-textfield-spacing-block-end, 0);
       }
 
       :host([type='number']) {
@@ -248,4 +252,4 @@ ${this.value}</textarea
         height: 100%;
         display: block;
       }
-    `];r([l({type:String,reflect:!0})],i.prototype,"type",2);r([l({type:String})],i.prototype,"label",2);r([l({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);r([l({type:String,attribute:"error-text"})],i.prototype,"errorText",2);r([l({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);r([l({type:String})],i.prototype,"name",2);r([l({type:String})],i.prototype,"pattern",2);r([l({type:String,attribute:"value"})],i.prototype,"value",2);r([l({type:String})],i.prototype,"underLabel",2);r([l({type:Boolean,reflect:!0})],i.prototype,"error",2);r([l({type:Boolean,reflect:!0})],i.prototype,"disabled",2);r([l({type:Boolean,reflect:!0})],i.prototype,"required",2);i=r([p("scb-textfield")],i);
+    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);s=r([v("scb-textfield")],s);

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

@@ -1,13 +1,16 @@
-import{a,n as d,i as _,x as p,t as f}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(t,s,e){try{customElements.get(t)||r(t,s,e)}catch(i){var o=String(i||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,n=(c,r,t,s)=>{for(var e=s>1?void 0:s?b(r,t):r,o=c.length-1,i;o>=0;o--)(i=c[o])&&(e=(s?i(r,t,e):i(e))||e);return s&&e&&u(r,t,e),e};let l=class extends _{constructor(){super(...arguments),this.detached=!1}render(){return p`
+import{a as _,n as h,i as g,x as b,t as v}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,o,i){try{customElements.get(e)||s(e,o,i)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=t=>{throw TypeError(t)},l=(t,s,e,o)=>{for(var i=o>1?void 0:o?y(s,e):s,c=t.length-1,n;c>=0;c--)(n=t[c])&&(i=(o?n(s,e,i):n(i))||i);return o&&i&&m(s,e,i),i},S=(t,s,e)=>s.has(t)||u("Cannot "+e),k=(t,s,e)=>s.has(t)?u("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),p=(t,s,e)=>(S(t,s,"access private method"),e),r,f,d;let a=class extends g{constructor(){super(...arguments),k(this,r),this.detached=!1,this.spacing="",this.spacingTop="",this.spacingBottom=""}firstUpdated(t){p(this,r,f).call(this)}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,r,f).call(this)}render(){return b`
       <div class="scb-toc-list" role="list">
         <slot></slot>
       </div>
-    `}};l.styles=[a`
+    `}};r=new WeakSet;f=function(){const t=p(this,r,d).call(this,this.spacing),s=p(this,r,d).call(this,this.spacingTop)??t,e=p(this,r,d).call(this,this.spacingBottom)??t;s?this.style.setProperty("--scb-toc-spacing-block-start",s):this.style.removeProperty("--scb-toc-spacing-block-start"),e?this.style.setProperty("--scb-toc-spacing-block-end",e):this.style.removeProperty("--scb-toc-spacing-block-end")};d=function(t){if(!t)return;const s=String(t).trim();if(s)return/^\d+$/.test(s)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(s,10)))})`:s};a.styles=[_`
       :host {
         display: block;
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-toc-spacing-block-start, 0);
+        margin-block-end: var(--scb-toc-spacing-block-end, 0);
       }
 
       .scb-toc-list {
         display: block;
       }
-    `];n([d({type:Boolean,reflect:!0})],l.prototype,"detached",2);l=n([f("scb-toc")],l);
+    `];l([h({type:Boolean,reflect:!0})],a.prototype,"detached",2);l([h({type:String,reflect:!0})],a.prototype,"spacing",2);l([h({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);l([h({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);a=l([v("scb-toc")],a);

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

@@ -1,184 +1,183 @@
-import{a as h,n as c,i as v,x as t,t as m}from"../../vendor/vendor.js";import"../scb-chip/scb-chip.js";import"../scb-segmented-button/scb-segmented-button.js";import"../scb-segmented-button/scb-segmented-item.js";import"../scb-accordion/scb-accordion.js";import"../scb-divider/scb-divider.js";import"../scb-horizontal-scroller/scb-horizontal-scroller.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-accordion/scb-accordion-item.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(s,i,a){try{customElements.get(s)||l(s,i,a)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(e,l,s,i)=>{for(var a=i>1?void 0:i?p(l,s):l,n=e.length-1,d;n>=0;n--)(d=e[n])&&(a=(i?d(l,s,a):d(a))||a);return i&&a&&b(l,s,a),a};let o=class extends v{constructor(){super(...arguments),this.variant="Standard",this.selectedChip="Diagram",this.title="",this.subtitle="",this.description="",this.comment="",this.source="",this.footnote="",this.lang="sv",this.imageHref=""}get descriptionLabel(){return this.lang==="en"?"Description of the chart":"Beskrivning av diagrammet"}get moreAboutStatsLabel(){return this.lang==="en"?"More about the statistics":"Mer om statistiken"}get commentLabel(){return this.lang==="en"?"Comments":"Kommentar"}get sourceLabel(){return this.lang==="en"?"Source":"Källa"}get footnoteLabel(){return this.lang==="en"?"Footnotes":"Fotnot"}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="table"]');e&&(e.addEventListener("slotchange",()=>this._styleSlottedTable()),this._styleSlottedTable())}updated(){this._styleSlottedTable()}_styleSlottedTable(){const e=this.shadowRoot?.querySelector('slot[name="table"]');if(!e)return;e.assignedElements({flatten:!0}).forEach(s=>{s.tagName==="TABLE"&&(s.style.borderCollapse="collapse",s.style.width="100%",s.querySelectorAll("tbody tr:nth-child(odd)").forEach(i=>{i.style.background="var(--md-sys-color-surface-container)"}),s.querySelectorAll("th").forEach(i=>{i.style.border="1px solid var(--md-sys-color-on-surface)",i.style.padding="8px"}),s.querySelectorAll("td").forEach(i=>{i.style.border="1px solid var(--md-sys-color-on-surface)",i.style.padding="8px"}),s.querySelectorAll("tr").forEach(i=>{const a=Array.from(i.children).filter(n=>n.tagName==="TD"||n.tagName==="TH");a.length>0&&(a[0].style.borderLeft="none",a[a.length-1].style.borderRight="none")}))})}render(){switch(this.variant){case"Table":return t`
+import{a as g,n as c,i as u,x as i,t as y}from"../../vendor/vendor.js";import"../scb-chip/scb-chip.js";import"../scb-segmented-button/scb-segmented-button.js";import"../scb-segmented-button/scb-segmented-item.js";import"../scb-accordion/scb-accordion.js";import"../scb-divider/scb-divider.js";import"../scb-horizontal-scroller/scb-horizontal-scroller.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-accordion/scb-accordion-item.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,n,a){try{customElements.get(s)||e(s,n,a)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var f=Object.defineProperty,$=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},l=(t,e,s,n)=>{for(var a=n>1?void 0:n?$(e,s):e,o=t.length-1,d;o>=0;o--)(d=t[o])&&(a=(n?d(e,s,a):d(a))||a);return n&&a&&f(e,s,a),a},S=(t,e,s)=>e.has(t)||m("Cannot "+s),_=(t,e,s)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),p=(t,e,s)=>(S(t,e,"access private method"),s),h,b,v;let r=class extends u{constructor(){super(...arguments),_(this,h),this.variant="Standard",this.selectedChip="Diagram",this.title="",this.subtitle="",this.description="",this.comment="",this.source="",this.footnote="",this.lang="sv",this.imageHref="",this.spacing="",this.spacingTop="",this.spacingBottom=""}get descriptionLabel(){return this.lang==="en"?"Description of the chart":"Beskrivning av diagrammet"}get moreAboutStatsLabel(){return this.lang==="en"?"More about the statistics":"Mer om statistiken"}get commentLabel(){return this.lang==="en"?"Comments":"Kommentar"}get sourceLabel(){return this.lang==="en"?"Source":"Källa"}get footnoteLabel(){return this.lang==="en"?"Footnotes":"Fotnot"}firstUpdated(t){const e=this.shadowRoot?.querySelector('slot[name="table"]');e&&(e.addEventListener("slotchange",()=>this._styleSlottedTable()),this._styleSlottedTable()),p(this,h,b).call(this)}updated(t){super.updated(t),this._styleSlottedTable(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,h,b).call(this)}_styleSlottedTable(){const t=this.shadowRoot?.querySelector('slot[name="table"]');if(!t)return;t.assignedElements({flatten:!0}).forEach(s=>{if(s.tagName==="TABLE"){const n=s;n.style.borderCollapse="collapse",n.style.width="100%",s.querySelectorAll("tbody tr:nth-child(odd)").forEach(a=>{a.style.background="var(--md-sys-color-surface-container)"}),s.querySelectorAll("th").forEach(a=>{const o=a;o.style.border="1px solid var(--md-sys-color-on-surface)",o.style.padding="8px"}),s.querySelectorAll("td").forEach(a=>{const o=a;o.style.border="1px solid var(--md-sys-color-on-surface)",o.style.padding="8px"}),s.querySelectorAll("tr").forEach(a=>{const o=Array.from(a.children).filter(d=>d.tagName==="TD"||d.tagName==="TH");o.length>0&&(o[0].style.borderLeft="none",o[o.length-1].style.borderRight="none")})}})}render(){switch(this.variant){case"Table":return i`
           <div part="container">
             <div class="header">
-            ${this.title?t`
-                <div class="label">${this.title}</div>`:""}
-            ${this.subtitle?t`
-                <div class="subtitle">${this.subtitle}</div>`:""}
+              ${this.title?i` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?i` <div class="subtitle">${this.subtitle}</div> `:""}
             </div>
             <div class="content">
-              <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
+              <scb-horizontal-scroller
+                width="600px"
+                class="table-scroller"
+                variant="inline"
+                show-scrollbar
+              >
                 <slot name="table"></slot>
               </scb-horizontal-scroller>
             </div>
             <div class="footer">
-              ${this.description?t`
-              <div class="description section">
-                <div class="secondary-label">${this.descriptionLabel}</div>
-                <div>${this.description}</div>
-              </div>
-              `:""}
-              ${this.comment||this.source||this.footnote?t`
-              <scb-divider></scb-divider>
-              <scb-accordion>
-                <scb-accordion-item
-                  title="${this.moreAboutStatsLabel}"
-                >
-                  <div class="more-about-stats-content">    
-                    ${this.comment?t`
-                    <div class="section">
-                      <div class="secondary-label">${this.commentLabel}</div>
-                      <div>${this.comment}</div>
+              ${this.description?i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
                     </div>
-                    `:""}
-                    ${this.source?t`
-                      <div class="section">
-                      
-                        <div class="secondary-label">${this.sourceLabel}</div>
-                        <div>${this.source}</div>
-                      </div>`:""}
-                    ${this.footnote?t`
-                    <div class="section">
-                      <div class="secondary-label">${this.footnoteLabel}</div>
-                      <div>${this.footnote}</div>
-                    </div>
-                    `:""}
-                  </div>
-                </scb-accordion-item>
-              </scb-accordion>
-              `:""}
+                  `:""}
+              ${this.comment||this.source||this.footnote?i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              `:""}
+                          ${this.source?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              `:""}
+                          ${this.footnote?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              `:""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  `:""}
             </div>
             <slot></slot>
           </div>
-        `;case"Image":return t`
+        `;case"Image":return i`
           <div part="container">
             <div class="header">
-              ${this.title?t`
-                <div class="label">${this.title}</div>
-                `:""}
-              ${this.subtitle?t`
-                <div class="subtitle">${this.subtitle}</div>
-                `:""}
+              ${this.title?i` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?i` <div class="subtitle">${this.subtitle}</div> `:""}
             </div>
             <div class="content image-content">
-              <img src="${this.imageHref}" alt="Image figure"/>
+              <img src="${this.imageHref}" alt="Image figure" />
             </div>
             <div class="footer">
-              ${this.description?t`
-                <div class="description section">
-                  <div class="secondary-label">${this.descriptionLabel}</div>
-                  <div>${this.description}</div>
-                </div>
-              `:""}
-              ${this.comment||this.source||this.footnote?t`
-              <scb-divider></scb-divider>
-              <scb-accordion>
-                <scb-accordion-item
-                  title="${this.moreAboutStatsLabel}"
-                >
-                  <div class="more-about-stats-content">    
-                  ${this.comment?t`
-                    <div class="section">
-                      <div class="secondary-label">${this.commentLabel}</div>
-                      <div>${this.comment}</div>
+              ${this.description?i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
                     </div>
-                    `:""}
-                    ${this.source?t`
-                    <div class="section">
-                      <div class="secondary-label">${this.sourceLabel}</div>
-                      <div>${this.source}</div>
-                    </div>
-                    `:""}
-                    ${this.footnote?t`
-                    <div class="section">
-                      <div class="secondary-label">${this.footnoteLabel}</div>
-                      <div>${this.footnote}</div>
-                    </div>
-                    `:""}
-                  </div>
-                </scb-accordion-item>
-              </scb-accordion>
-              `:""}
+                  `:""}
+              ${this.comment||this.source||this.footnote?i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              `:""}
+                          ${this.source?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              `:""}
+                          ${this.footnote?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              `:""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  `:""}
             </div>
             <slot></slot>
           </div>
-        `;default:const e=this.selectedChip==="Diagram"?"chip-diagram":this.selectedChip==="Table"?"chip-table":"";return this.className!==e&&(this.className=e),t`
-            <div part="container">
-              <div class="header">
-                ${this.title?t`
-                  <div class="label">${this.title}</div>
-                  `:""}
-                ${this.subtitle?t`
-                  <div class="subtitle">${this.subtitle}</div>
-                  `:""}
-              </div>
-              ${this.variant==="Standard"?t`
-                <div class="flipp-wrapper">
-                  <scb-segmented-button
-                    .value=${this.selectedChip||""}
-                    @change=${l=>this._onSegmentedChange(l)}
-                  >
-                    <scb-segmented-item
-                      label=${this.lang==="en"?"Figure":"Diagram"}
-                      value="Diagram"
-                      icon="bar_chart"
-                    ></scb-segmented-item>
-                    <scb-segmented-item
-                      label="${this.lang==="en"?"Table":"Tabell"}"
-                      value="Table"
-                      icon="table"
-                    ></scb-segmented-item>
-                  </scb-segmented-button>
-                </div>
-              `:""}
-              <div class="content">
-                <scb-horizontal-scroller width="600px" class="diagram-scroller" variant="inline" show-scrollbar>
-                  <slot name="diagram"></slot>
-                </scb-horizontal-scroller>
-                <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
-                  <slot name="table"></slot>
-                </scb-horizontal-scroller>
-              </div>
-              <div class="footer">
-                ${this.description?t`
-                <div class="description section">
-                  <div class="secondary-label">${this.descriptionLabel}</div>
-                  <div>${this.description}</div>
-                </div>
-                `:""}
-                ${this.comment||this.source||this.footnote?t`
-                <scb-divider></scb-divider>
-                  <scb-accordion>
-                    <scb-accordion-item
-                      title="${this.moreAboutStatsLabel}"
+        `;default:{const t=this.selectedChip==="Diagram"?"chip-diagram":this.selectedChip==="Table"?"chip-table":"";return this.className!==t&&(this.className=t),i`
+          <div part="container">
+            <div class="header">
+              ${this.title?i` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?i` <div class="subtitle">${this.subtitle}</div> `:""}
+            </div>
+            ${this.variant==="Standard"?i`
+                  <div class="flipp-wrapper">
+                    <scb-segmented-button
+                      .value=${this.selectedChip||""}
+                      @change=${e=>this._onSegmentedChange(e)}
                     >
-                      <div class="more-about-stats-content">
-                        ${this.comment?t`
-                          <div class="section">
-                            <div class="secondary-label">${this.commentLabel}</div>
-                            <div>${this.comment}</div>
-                          </div>
-                        `:""}
-                        ${this.source?t`
-                          <div class="section">
-                            <div class="secondary-label">${this.sourceLabel}</div>
-                            <div>${this.source}</div>
-                          </div>
-                        `:""}
-                        ${this.footnote?t`
-                        <div class="section">
-                          <div class="secondary-label">${this.footnoteLabel}</div>
-                          <div>${this.footnote}</div>
-                        </div>
-                        `:""}
-                      </div>
-                    </scb-accordion-item>
-                  </scb-accordion>
+                      <scb-segmented-item
+                        label=${this.lang==="en"?"Figure":"Diagram"}
+                        value="Diagram"
+                        icon="bar_chart"
+                      ></scb-segmented-item>
+                      <scb-segmented-item
+                        label="${this.lang==="en"?"Table":"Tabell"}"
+                        value="Table"
+                        icon="table"
+                      ></scb-segmented-item>
+                    </scb-segmented-button>
+                  </div>
                 `:""}
-              </div>
-              <slot></slot>
+            <div class="content">
+              <scb-horizontal-scroller
+                width="600px"
+                class="diagram-scroller"
+                variant="inline"
+                show-scrollbar
+              >
+                <slot name="diagram"></slot>
+              </scb-horizontal-scroller>
+              <scb-horizontal-scroller
+                width="600px"
+                class="table-scroller"
+                variant="inline"
+                show-scrollbar
+              >
+                <slot name="table"></slot>
+              </scb-horizontal-scroller>
             </div>
-          `}}_onSegmentedChange(e){const l=e.detail?.value;this.selectedChip===l?this.selectedChip=null:this.selectedChip=l}};o.styles=h`
+            <div class="footer">
+              ${this.description?i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
+                    </div>
+                  `:""}
+              ${this.comment||this.source||this.footnote?i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              `:""}
+                          ${this.source?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              `:""}
+                          ${this.footnote?i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              `:""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  `:""}
+            </div>
+            <slot></slot>
+          </div>
+        `}}}_onSegmentedChange(t){const e=t.detail?.value;this.selectedChip===e?this.selectedChip=null:this.selectedChip=e}};h=new WeakSet;b=function(){const t=p(this,h,v).call(this,this.spacing),e=p(this,h,v).call(this,this.spacingTop)??t,s=p(this,h,v).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-viz-spacing-block-start",e):this.style.removeProperty("--scb-viz-spacing-block-start"),s?this.style.setProperty("--scb-viz-spacing-block-end",s):this.style.removeProperty("--scb-viz-spacing-block-end")};v=function(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};r.styles=g`
     :host {
       display: block;
       font-family: var(--brand-font);
@@ -188,8 +187,11 @@ import{a as h,n as c,i as v,x as t,t as m}from"../../vendor/vendor.js";import"..
       max-width: 100%;
       border-radius: var(--spacing-04, 16px);
       border: 1px solid var(--md-sys-color-outline-variant);
-      
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-viz-spacing-block-start, 0);
+      margin-block-end: var(--scb-viz-spacing-block-end, 0);
     }
+
     scb-segmented-button {
       --scb-segmented-button-height: var(--icon-size-small);
     }
@@ -200,65 +202,76 @@ import{a as h,n as c,i as v,x as t,t as m}from"../../vendor/vendor.js";import"..
       line-height: var(--md-sys-typescale-title-large-line-height);
       letter-spacing: var(--md-sys-typescale-title-large-tracking);
     }
-    .sub-label{
+
+    .sub-label {
       font-size: var(--md-sys-typescale-body-large-size);
       line-height: var(--md-sys-typescale-body-large-line-height);
       letter-spacing: var(--md-sys-typescale-body-large-tracking);
     }
+
     .secondary-label {
       font-size: var(--md-sys-typescale-title-medium-size);
       font-weight: var(--weight-semibold);
       line-height: var(--md-sys-typescale-title-medium-line-height);
       letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     }
+
     .section {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-2); 
+      gap: var(--spacing-2);
     }
+
     .more-about-stats-content {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-7);
-      max-width: 600px
+      max-width: 600px;
     }
+
     .header {
       margin-bottom: var(--spacing-7);
-      max-width: 600px
+      max-width: 600px;
     }
+
     .flipp-wrapper {
       margin-bottom: var(--spacing-9);
-      max-width: 234px
+      max-width: 234px;
     }
-    .description{
+
+    .description {
       margin-bottom: var(--spacing-8);
     }
+
     .footer {
       margin-top: var(--spacing-7);
-      
     }
-    .description.section{
-    max-width: 600px
+
+    .description.section {
+      max-width: 600px;
     }
+
     .table-scroller,
     .diagram-scroller {
       display: none;
     }
-    :host([variant='Table']) slot[name="table"] {
+
+    :host([variant='Table']) slot[name='table'] {
       display: block;
     }
     :host([variant='Table']) .table-scroller {
       display: flex;
     }
+
     :host([variant='Image']) {
       img {
         height: auto;
         max-width: 100%;
       }
-      slot[name="table"] {
+      slot[name='table'] {
         display: none;
       }
-      slot[name="diagram"] {
+      slot[name='diagram'] {
         display: none;
       }
       .image-content {
@@ -275,22 +288,19 @@ import{a as h,n as c,i as v,x as t,t as m}from"../../vendor/vendor.js";import"..
     :host([variant='Standard'].chip-diagram) .diagram-scroller {
       display: flex;
     }
-     :host([variant='Standard'].chip-table) .table-scroller {
+    :host([variant='Standard'].chip-table) .table-scroller {
       display: flex;
     }
-    :host([variant='Standard'].chip-table) slot[name="table"] {
+    :host([variant='Standard'].chip-table) slot[name='table'] {
       display: block;
     }
-    :host([variant='Standard'].chip-table) slot[name="diagram"] {
+    :host([variant='Standard'].chip-table) slot[name='diagram'] {
       display: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name="table"] {
+    :host([variant='Standard'].chip-diagram) slot[name='table'] {
       display: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name="diagram"] {
+    :host([variant='Standard'].chip-diagram) slot[name='diagram'] {
       display: block;
     }
-
-
-
-  `;r([c({type:String,reflect:!0})],o.prototype,"variant",2);r([c({type:String})],o.prototype,"selectedChip",2);r([c({type:String,reflect:!0})],o.prototype,"title",2);r([c({type:String,reflect:!0})],o.prototype,"subtitle",2);r([c({type:String,reflect:!0})],o.prototype,"description",2);r([c({type:String,reflect:!0})],o.prototype,"comment",2);r([c({type:String,reflect:!0})],o.prototype,"source",2);r([c({type:String,reflect:!0})],o.prototype,"footnote",2);r([c({type:String,reflect:!0,attribute:"lang"})],o.prototype,"lang",2);r([c({type:String,reflect:!0,attribute:"image-href"})],o.prototype,"imageHref",2);o=r([m("scb-viz")],o);
+  `;l([c({type:String,reflect:!0})],r.prototype,"variant",2);l([c({type:String})],r.prototype,"selectedChip",2);l([c({type:String,reflect:!0})],r.prototype,"title",2);l([c({type:String,reflect:!0})],r.prototype,"subtitle",2);l([c({type:String,reflect:!0})],r.prototype,"description",2);l([c({type:String,reflect:!0})],r.prototype,"comment",2);l([c({type:String,reflect:!0})],r.prototype,"source",2);l([c({type:String,reflect:!0})],r.prototype,"footnote",2);l([c({type:String,reflect:!0,attribute:"lang"})],r.prototype,"lang",2);l([c({type:String,reflect:!0,attribute:"image-href"})],r.prototype,"imageHref",2);l([c({type:String,reflect:!0})],r.prototype,"spacing",2);l([c({type:String,attribute:"spacing-top",reflect:!0})],r.prototype,"spacingTop",2);l([c({type:String,attribute:"spacing-bottom",reflect:!0})],r.prototype,"spacingBottom",2);r=l([y("scb-viz")],r);