scb-wc 0.1.11 → 0.1.13

package/mvc/components/scb-fact-card/scb-fact-card.js

@@ -1 +1,226 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-fact-card/scb-fact-card-content.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-fact-card/scb-fact-card.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{}})();
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js"])))=>i.map(i=>d[i]);
+import{_ as m,b as u,g as v,h as a,y as g}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import{n as y,t as b}from"../../vendor/assertClassBrand.js";import{t as x}from"../../vendor/preload-helper.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";import"./scb-fact-card-content.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,r,o){try{customElements.get(e)||t(e,r,o)}catch(l){var n=String(l||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var h,p,c,i=(h=new WeakSet,p=class extends m{constructor(...t){super(...t),y(this,h),this.__onCloseClick=e=>{e.stopPropagation(),this.__setOpen(!1)},this.variant="filled",this.size="large",this.title="",this.subtitle="",this.supportingText="",this.icon="",this.showCloseButton=!1,this.open=!0,this.__lastTriggerEl=null,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}static __handleDocClick(t){const e=t.composedPath();for(const r of e){if(!(r instanceof Element))continue;const o=r.getAttribute("data-fact-card-toggle")||r.getAttribute("aria-controls");if(!o)continue;const n=c.__instances.get(o);if(!n){c.__instances.delete(o);continue}n.__lastTriggerEl=r,n.__setOpen(!n.open);break}}static __ensureDocListener(){c.__docListenerAttached||(document.addEventListener("click",c.__handleDocClick,!0),c.__docListenerAttached=!0)}static __maybeRemoveDocListener(){c.__docListenerAttached&&c.__instances.size===0&&(document.removeEventListener("click",c.__handleDocClick,!0),c.__docListenerAttached=!1)}connectedCallback(){super.connectedCallback(),this.id&&c.__instances.set(this.id,this),c.__ensureDocListener()}disconnectedCallback(){this.id&&c.__instances.delete(this.id),c.__maybeRemoveDocListener(),super.disconnectedCallback()}updated(t){t.has("open")&&this.__updateTriggersExpanded(),t.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),t.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),t.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),t.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&b(h,this,f).call(this)}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-fact-card-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__setOpen(t){const e=this.open;e!==t&&(this.open=t,this.dispatchEvent(new CustomEvent("openchange",{bubbles:!0,composed:!0,detail:{open:this.open}})),t&&!e?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):!t&&e&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}render(){if(!this.open)return g``;const t=this.variant==="outlined"?"outlined":"filled",e=!!this.icon;return g`
+      <div class="outer ${e?"has-icon":""}">
+        ${e?g`<div class="icon-wrapper ${t}"><md-icon>${this.icon}</md-icon></div>`:""}
+        <div class="scb-fact-card ${t} ${this.showCloseButton?"has-close":""}">
+          ${this.showCloseButton?g`
+                <scb-icon-button
+                  variant="standard"
+                  icon="close"
+                  @click=${this.__onCloseClick}
+                ></scb-icon-button>
+              `:""}
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}async firstUpdated(){b(h,this,f).call(this),c.__iconLoaded||(await x(()=>import("../../vendor/vendor-material.js").then(t=>t.p),__vite__mapDeps([0,1,2]),import.meta.url),c.__iconLoaded=!0)}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}},c=p,p.__iconLoaded=!1,p.__instances=new Map,p.__docListenerAttached=!1,p.styles=u`
+    :host {
+      --scb-fact-card-icon-overhang: 40px;
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: var(--scb-fact-card-max-w, none);
+      height: auto;
+      padding: 0;
+      margin-block-start: var(--scb-fact-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-fact-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-fact-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-fact-card-spacing-inline-end, 0);
+
+      --scb-fact-card-padding: var(--spacing-7, 24px);
+      --scb-fact-card-content-gap: var(--spacing-8, 32px);
+      --scb-fact-card-close-padding-right: var(--spacing-12, 80px);
+      --scb-fact-card-icon-padding-block: var(--spacing-5, 16px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-7, 24px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-headline-small-size, 22px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-headline-small-line-height, 28px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.5px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-3, 8px);
+      --scb-fact-card-content-links-offset: var(--spacing-3, 8px);
+      --scb-fact-card-content-block-gap: var(--spacing-4, 12px);
+    }
+
+    :host([size='medium']) {
+      --scb-fact-card-icon-overhang: 36px;
+      --scb-fact-card-padding: var(--spacing-6, 20px);
+      --scb-fact-card-content-gap: var(--spacing-6, 20px);
+      --scb-fact-card-close-padding-right: var(--spacing-11, 64px);
+      --scb-fact-card-icon-padding-block: var(--spacing-4, 12px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-6, 20px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-2, 4px);
+      --scb-fact-card-content-links-offset: var(--spacing-2, 4px);
+      --scb-fact-card-content-block-gap: var(--spacing-3, 8px);
+    }
+
+    :host([size='small']) {
+      --scb-fact-card-icon-overhang: 32px;
+      --scb-fact-card-padding: var(--spacing-5, 16px);
+      --scb-fact-card-content-gap: var(--spacing-5, 16px);
+      --scb-fact-card-close-padding-right: var(--spacing-10, 56px);
+      --scb-fact-card-icon-padding-block: var(--spacing-3, 8px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-5, 16px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-2, 4px);
+      --scb-fact-card-content-links-offset: var(--spacing-2, 4px);
+      --scb-fact-card-content-block-gap: var(--spacing-2, 4px);
+    }
+
+    :host([sizing='stretch']) {
+      inline-size: 100%;
+      block-size: 100%;
+      max-inline-size: none;
+    }
+    :host([sizing='content-width']) {
+      display: inline-block;
+      inline-size: auto;
+      block-size: auto;
+      max-inline-size: var(--scb-fact-card-max-w, none);
+    }
+    :host([sizing='content-height']) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    .outer {
+      position: relative;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      --_icon-pad: 0px;
+      padding-top: var(--_icon-pad);
+      box-sizing: border-box;
+    }
+    :host([sizing='content-width']) .outer {
+      inline-size: max-content;
+    }
+
+    :host([height]) .outer,
+    :host([max-height]) .outer,
+    :host([sizing='stretch']) .outer {
+      block-size: 100%;
+    }
+
+    .scb-fact-card {
+      color: var(--md-sys-color-on-surface, #0F0865);
+      font-family: var(--brand-font, "Inter", sans-serif);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      padding: var(--scb-fact-card-padding);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      overflow: hidden;
+      block-size: auto;
+    }
+
+    :host([height]) .scb-fact-card,
+    :host([max-height]) .scb-fact-card,
+    :host([sizing='stretch']) .scb-fact-card {
+      block-size: calc(100% - var(--_icon-pad));
+    }
+
+    .scb-fact-card.has-close {
+      padding-right: var(--scb-fact-card-close-padding-right);
+    }
+
+    .scb-fact-card.outlined {
+      border: 1px solid var(--md-sys-color-outline, #808080);
+      background: var(--md-sys-color-surface, #FFFFFF);
+    }
+
+    .outer.has-icon {
+      --_icon-pad: var(--scb-fact-card-icon-overhang);
+    }
+    .outer.has-icon .scb-fact-card {
+      border-top-left-radius: 0;
+    }
+
+    .icon-wrapper {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      padding: var(--scb-fact-card-icon-padding-block) var(--scb-fact-card-icon-padding-inline);
+      padding-bottom: 0;
+      width: fit-content;
+      border-radius: var(--md-sys-shape-corner-full, 1000px) var(--md-sys-shape-corner-full, 1000px) 0 0 /
+        var(--md-sys-shape-corner-full, 1000px) var(--md-sys-shape-corner-full, 1000px) 0 0;
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      line-height: 0;
+    }
+    .icon-wrapper.outlined {
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline, #808080);
+      border-bottom: none;
+      background: var(--md-sys-color-surface, #FFFFFF);
+    }
+
+    scb-icon-button {
+      position: absolute;
+      right: var(--scale-01, 12px);
+      top: var(--scale-01, 12px);
+    }
+
+    .scb-fact-card.clickable {
+      cursor: pointer;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-fact-card-content-gap);
+      inline-size: 100%;
+      min-inline-size: 0;
+    }
+
+    .content .label,
+    .content .sub-label,
+    .content .supporting-text {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+    }
+  `,p);function f(){const d=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop),e=this.mapSpacingToken(this.spacingBottom),r=this.mapSpacingToken(this.spacingLeft),o=this.mapSpacingToken(this.spacingRight),n=t??d,l=e??d;n?this.style.setProperty("--scb-fact-card-spacing-block-start",n):this.style.removeProperty("--scb-fact-card-spacing-block-start"),l?this.style.setProperty("--scb-fact-card-spacing-block-end",l):this.style.removeProperty("--scb-fact-card-spacing-block-end"),r?this.style.setProperty("--scb-fact-card-spacing-inline-start",r):this.style.removeProperty("--scb-fact-card-spacing-inline-start"),o?this.style.setProperty("--scb-fact-card-spacing-inline-end",o):this.style.removeProperty("--scb-fact-card-spacing-inline-end")}s([a({type:String})],i.prototype,"variant",void 0);s([a({type:String,reflect:!0})],i.prototype,"size",void 0);s([a({type:String,attribute:"title"})],i.prototype,"title",void 0);s([a({type:String,attribute:"subtitle"})],i.prototype,"subtitle",void 0);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",void 0);s([a({type:String})],i.prototype,"icon",void 0);s([a({type:Boolean,attribute:"show-close-button"})],i.prototype,"showCloseButton",void 0);s([a({type:Boolean,reflect:!0})],i.prototype,"open",void 0);s([a({type:String,reflect:!0})],i.prototype,"sizing",void 0);s([a({type:String,reflect:!0})],i.prototype,"width",void 0);s([a({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",void 0);s([a({type:String,reflect:!0})],i.prototype,"height",void 0);s([a({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",void 0);s([a({type:String,reflect:!0})],i.prototype,"spacing",void 0);s([a({type:String,reflect:!0,attribute:"spacing-top"})],i.prototype,"spacingTop",void 0);s([a({type:String,reflect:!0,attribute:"spacing-bottom"})],i.prototype,"spacingBottom",void 0);s([a({type:String,reflect:!0,attribute:"spacing-left"})],i.prototype,"spacingLeft",void 0);s([a({type:String,reflect:!0,attribute:"spacing-right"})],i.prototype,"spacingRight",void 0);i=c=s([v("scb-fact-card")],i);

package/mvc/components/scb-footer/scb-footer-section.js

@@ -1 +1,3 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-footer/scb-footer-section.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as d,b as _,g as u,h as f,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as c}from"../../vendor/decorate.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(o,a,l){try{customElements.get(o)||e(o,a,l)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var r,s=(r=class extends d{constructor(...e){super(...e),this.title=""}render(){return b`<slot></slot>`}},r.styles=_`
+    :host { display: none; }
+  `,r);c([f({type:String,reflect:!0})],s.prototype,"title",void 0);s=c([u("scb-footer-section")],s);

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

@@ -1 +1,210 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-footer/scb-footer-section.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-grid/scb-grid-item.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-grid/scb-grid.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-footer/scb-footer.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,n,c){try{customElements.get(e)||r(e,n,c)}catch(o){var i=String(o||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();
+import{_ as N,b as B,g as P,h as g,y as v}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as p}from"../../vendor/decorate.js";import{n as O,t as r}from"../../vendor/assertClassBrand.js";import{n,r as b,t as d}from"../../vendor/classPrivateFieldGet2.js";import"../scb-link/scb-link.js";import"./scb-footer-section.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.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(a,o,i){try{customElements.get(a)||t(a,o,i)}catch(x){var l=String(x||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw x}}}}catch{}})();var h,m,f,u,s,y,C,c=(h=new WeakMap,m=new WeakMap,f=new WeakMap,u=new WeakMap,s=new WeakSet,y=new WeakMap,C=class extends N{constructor(...t){super(...t),O(this,s),b(this,h,void 0),b(this,m,void 0),b(this,f,void 0),b(this,u,void 0),b(this,y,void 0),this.maxWidth="1440px",this.deferPaint=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.sections=[],this.description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.",n(h,this,null),n(m,this,""),n(u,this,!1),n(y,this,8)}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-footer-max-width",this.maxWidth),r(s,this,S).call(this),r(s,this,V).call(this,!0),r(s,this,T).call(this)}updated(t){t.has("maxWidth")&&this.style.setProperty("--scb-footer-max-width",this.maxWidth),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&r(s,this,S).call(this)}disconnectedCallback(){super.disconnectedCallback(),d(f,this)?.disconnect()}render(){const t=W.call(r(s,this));return v`
+      <footer class="outer" role="contentinfo">
+        <nav aria-label="Sidfot med länkar">
+          <scb-grid
+            .colsCompact=${4}
+            .colsMedium=${8}
+            .colsExpanded=${8}
+            padding-block="0"
+            .maxWidth=${this.maxWidth}
+          >
+            ${r(s,this,E).call(this,t)}
+          </scb-grid>
+        </nav>
+
+        <div class="brand">
+          <div class="brand-inner">
+            <svg class="logo" viewBox="0 0 48 54" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <g clip-path="url(#clip0_4974_83818)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M25.6527 6.07812C25.6527 5.15909 24.9076 4.41482 23.9877 4.41482C23.0677 4.41482 22.3226 5.15909 22.3226 6.07812V48.0391C22.3226 48.9601 23.0677 49.7061 23.9877 49.7061C24.9076 49.7061 25.6527 48.9601 25.6527 48.0391V32.9153C25.6527 32.8056 25.744 32.7163 25.8527 32.7163H31.3245C31.4342 32.7163 31.5245 32.8056 31.5245 32.9153V48.1711C31.5245 51.3899 28.1496 54 23.9877 54C19.8241 54 16.4501 51.3899 16.4501 48.1711V5.82708C16.4501 2.6103 19.8241 0 23.9877 0C28.1496 0 31.5245 2.6103 31.5245 5.82708V20.8893C31.5245 21.0009 31.4342 21.0883 31.3245 21.0883H25.8527C25.744 21.0883 25.6527 21.0009 25.6527 20.8893V6.07812Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.198901 10.8446C-0.152687 13.293 -0.0290117 17.3078 0.49751 19.5627C1.07611 22.0203 4.41288 26.9878 5.91609 29.2948C7.42127 31.5999 9.42869 34.0073 9.39892 37.2185V44.9097C9.39892 45.8287 8.65375 46.5748 7.73382 46.5748C6.81659 46.5748 6.0715 45.8287 6.0715 44.9097V33.1217C6.0715 33.012 5.9803 32.9208 5.86868 32.9208H0.39893C0.287311 32.9208 0.198901 33.012 0.198901 33.1217V45.2613C0.198901 48.4798 3.57282 51.0901 7.73382 51.0901C11.8975 51.0901 15.2714 48.4798 15.2714 45.2613V37.2185C15.2463 31.7023 13.7412 30.8985 11.7877 27.5906C10.3886 25.2148 6.94682 20.3143 6.37003 17.8566C5.8417 15.6018 5.86491 12.9916 6.0715 10.6194C6.0715 9.70039 6.81659 8.95432 7.73382 8.95432C8.65375 8.95432 9.39892 9.70039 9.39892 10.6194V21.1032C9.39892 21.2129 9.48913 21.3022 9.60166 21.3022H15.0706C15.183 21.3022 15.2714 21.2129 15.2714 21.1032V10.8446C15.2714 7.62408 11.8975 5.01575 7.73382 5.01575C3.57282 5.01575 0.198901 7.62408 0.198901 10.8446Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8911 5.46411H41.2883C44.7561 5.46411 47.5674 8.27534 47.5674 11.7414V20.547C47.5674 23.0158 45.9488 25.0995 43.7161 25.8139V25.933C45.9488 26.6456 47.5674 28.7312 47.5674 31.2018V44.6438C47.5674 47.6988 45.0873 50.1768 42.0344 50.1768L32.8911 50.1823C32.7786 50.1823 32.6892 50.0911 32.6892 49.9832V5.66324C32.6892 5.55539 32.7786 5.46411 32.8911 5.46411ZM38.7636 9.83067C38.6502 9.83067 38.5608 9.92179 38.5608 10.0316V23.9255C38.5608 24.039 38.6502 24.1284 38.7636 24.1284H39.5898C40.6948 24.1284 41.5916 23.2297 41.5916 22.1246V11.8343C41.5916 10.7293 40.6948 9.83067 39.5898 9.83067H38.7636ZM38.7636 28.5432C38.6502 28.5432 38.5608 28.6325 38.5608 28.7423V45.7971C38.5608 45.9088 38.6502 46 38.7636 46H39.7514C40.8584 46 41.7534 45.1014 41.7534 43.9962V30.5469C41.7534 29.4381 40.8584 28.5432 39.7514 28.5432H38.7636Z" fill="white"/>
+              </g>
+              <defs><clipPath id="clip0_4974_83818"><rect width="48" height="54" fill="white"/></clipPath></defs>
+            </svg>
+
+            <p class="desc">${this.description}</p>
+          </div>
+        </div>
+      </footer>
+    `}},C.styles=B`
+    :host {
+      display: block;
+      color: var(--p-100);
+      background: var(--scb-footer-bg, var(--p-20));
+      margin-block-start: var(--scb-footer-spacing-block-start, 0);
+      margin-block-end: var(--scb-footer-spacing-block-end, 0);
+      /* Token för loggans bredd och proportion i footer */
+      --scb-footer-logo-w: 48px;
+      --scb-footer-logo-aspect: 48 / 54;
+    }
+
+    .outer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--spacing-10, 48px) 0 var(--spacing-5, 16px);
+      gap: var(--spacing-4, 12px);
+      align-self: stretch;
+    }
+
+    :host([defer-paint]) .outer {
+      content-visibility: auto;
+      contain-intrinsic-size: var(--scb-footer-cis, 560px);
+    }
+
+    nav { width: 100%; }
+
+    scb-grid {
+      --scb-grid-padding-inline: var(--spacing-8, 32px);
+      --scb-grid-row-gap: var(--spacing-9, 40px);
+      --scb-grid-column-gap: var(--spacing-9, 40px);
+      --scb-grid-gap: var(--spacing-9, 40px) var(--spacing-9, 40px);
+      --scb-grid-max-width: var(--scb-footer-max-width, 1440px);
+    }
+    @media (max-width: 839.98px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+    @media (min-width: 840px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-7, 24px);
+      min-width: 248px;
+      flex: 1 0 0;
+      align-self: stretch;
+    }
+
+    @media (min-width: 840px) {
+      .group--centered {
+        flex: 0 1 auto;
+        min-width: 248px;
+        max-width: 420px;
+      }
+    }
+
+    @media (min-width: 840px) {
+      .center-row {
+        display: flex;
+        align-items: start;
+        justify-content: center;
+        gap: var(--spacing-9, 40px);
+        width: 100%;
+      }
+    }
+
+    @media (max-width: 599px) {
+      scb-grid-item:nth-child(n+2) .group { margin-top: var(--spacing-7, 24px); }
+    }
+    @media (min-width: 600px) and (max-width: 839px) {
+      scb-grid-item:nth-child(n+3) .group { margin-top: var(--spacing-7, 24px); }
+    }
+
+    .title {
+      margin: 0;
+      color: var(--p-100);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      line-height: var(--md-sys-typescale-title-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+      font-weight: var(--weight-semibold);
+      align-self: stretch;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5, 16px);
+    }
+
+    scb-link {
+      --scb-link-color: var(--p-100);
+      --scb-link-visited-color: var(--p-100);
+    }
+    scb-link::part(anchor) {
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    .brand {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      padding: var(--spacing-9, 40px) var(--spacing-8, 32px);
+      gap: var(--spacing-5, 16px);
+    }
+    .brand-inner {
+      width: 100%;
+      max-width: var(--scb-footer-max-width, 1440px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-5, 16px);
+      margin-inline: auto;
+    }
+
+    /* tokeniserad storlek samt låst proportion för loggan */
+    .logo {
+      display: block;
+      inline-size: var(--scb-footer-logo-w);
+      block-size: calc(var(--scb-footer-logo-w) * (54 / 48));
+      aspect-ratio: var(--scb-footer-logo-aspect);
+    }
+
+    .desc {
+      margin: 0;
+      text-align: center;
+      opacity: .9;
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+      color: var(--p-100);
+      width: min(100%, 312px);
+      overflow-wrap: anywhere;
+    }
+    @media (min-width: 600px) { .desc { width: min(100%, 376px); } }
+
+    .spacer { display: none; }
+    @media (min-width: 840px) { .spacer { display: block; } }
+  `,C);function w(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}function S(){const e=r(s,this,w).call(this,this.spacing),t=r(s,this,w).call(this,this.spacingTop)??e,a=r(s,this,w).call(this,this.spacingBottom)??e;t?this.style.setProperty("--scb-footer-spacing-block-start",t):this.style.removeProperty("--scb-footer-spacing-block-start"),a?this.style.setProperty("--scb-footer-spacing-block-end",a):this.style.removeProperty("--scb-footer-spacing-block-end")}function T(){d(f,this)?.disconnect(),n(f,this,new MutationObserver(e=>{for(const t of e){if(t.type==="childList"){const a=[...t.addedNodes].some(i=>i.tagName==="SCB-FOOTER-SECTION"||i.tagName==="SCB-LINK"),o=[...t.removedNodes].some(i=>i.tagName==="SCB-FOOTER-SECTION"||i.tagName==="SCB-LINK");if(a||o){r(s,this,$).call(this);return}}if(t.type==="attributes"&&(t.target.tagName==="SCB-FOOTER-SECTION"||t.target.tagName==="SCB-LINK")){r(s,this,$).call(this);return}}})),d(f,this).observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["title","href","target"]})}function $(){d(u,this)||(n(u,this,!0),queueMicrotask(()=>{n(u,this,!1),r(s,this,V).call(this,!1)}))}function W(){return d(h,this)??this.sections??[]}function V(e=!1){const t=Array.from(this.querySelectorAll("scb-footer-section"));if(!t.length){d(h,this)!==null&&(n(h,this,null),n(m,this,""),e||this.requestUpdate());return}const a=t.map(i=>({title:(i.getAttribute("title")||"").trim(),links:Array.from(i.querySelectorAll("scb-link")).map(l=>{const x=(l.getAttribute("href")||"").trim(),k=l.getAttribute("target"),_={label:(l.textContent||"").trim(),href:x};return k&&(_.target=k),_})})),o=JSON.stringify(a);o!==d(m,this)&&(n(m,this,o),n(h,this,a),e||this.requestUpdate())}function E(e){const t=[],o=e.length;if(o>0&&o<4)return t.push(v`
+        <scb-grid-item
+          col-span-compact="4"
+          col-span-medium="8"
+          col-span-expanded="${d(y,this)}"
+        >
+          <div class="center-row">
+            ${e.map((i,l)=>r(s,this,M).call(this,i,l,!0))}
+          </div>
+        </scb-grid-item>
+      `),t;for(let i=0;i<o;i++)t.push(r(s,this,F).call(this,e[i],i));return t}function F(e,t){return v`
+      <scb-grid-item
+        col-span-compact="4"
+        col-span-medium="4"
+        col-span-expanded="2"
+      >
+        ${r(s,this,M).call(this,e,t,!1)}
+      </scb-grid-item>
+    `}function M(e,t,a){return v`
+      <section class="group ${a?"group--centered":""}" aria-labelledby=${`scb-footer-sec-${t}`}>
+        <h3 id=${`scb-footer-sec-${t}`} class="title">${e.title}</h3>
+        <ul>
+          ${e.links.map(o=>v`
+            <li>
+              <scb-link .href=${o.href} .target=${o.target??void 0}>${o.label}</scb-link>
+            </li>
+          `)}
+        </ul>
+      </section>
+    `}p([g({type:String,attribute:"max-width",reflect:!0,converter:{fromAttribute:e=>{if(e==null)return"1440px";const t=e.trim();return t===""?"1440px":/^\d+$/.test(t)?`${t}px`:t}}})],c.prototype,"maxWidth",void 0);p([g({type:Boolean,reflect:!0,attribute:"defer-paint"})],c.prototype,"deferPaint",void 0);p([g({type:String,reflect:!0})],c.prototype,"spacing",void 0);p([g({type:String,attribute:"spacing-top",reflect:!0})],c.prototype,"spacingTop",void 0);p([g({type:String,attribute:"spacing-bottom",reflect:!0})],c.prototype,"spacingBottom",void 0);p([g({type:Array})],c.prototype,"sections",void 0);p([g({type:String})],c.prototype,"description",void 0);c=p([P("scb-footer")],c);

package/mvc/components/scb-gallery-grid/scb-gallery-grid.js

@@ -1 +1,131 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-horizontal-scroller/scb-horizontal-scroller.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-overlay/scb-overlay.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-gallery-grid/scb-gallery-grid.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var n=customElements.define.bind(customElements);customElements.define=function(e,o,d){try{customElements.get(e)||n(e,o,d)}catch(r){var i=String(r||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
+import{_ as M,b as z,g as S,h as E,m as w,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as y}from"../../vendor/decorate.js";import{n as L,t as n}from"../../vendor/assertClassBrand.js";import{n as l,r as d,t as i}from"../../vendor/classPrivateFieldGet2.js";import"../scb-horizontal-scroller/scb-horizontal-scroller.js";import"../scb-overlay/scb-overlay.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(a,t,o){try{customElements.get(a)||r(a,t,o)}catch(C){var c=String(C||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw C}}}}catch{}})();var g,u,f,b,m,p,s,v,x,h=(g=new WeakMap,u=new WeakMap,f=new WeakMap,b=new WeakMap,m=new WeakMap,p=new WeakMap,s=new WeakSet,v=new WeakMap,x=class extends M{constructor(...r){super(...r),L(this,s),d(this,g,void 0),d(this,u,void 0),d(this,f,void 0),d(this,b,void 0),d(this,m,void 0),d(this,p,void 0),d(this,v,void 0),this.variant="default",this.enableClickCarousel=!0,this.overlayOpen=!1,this.overlayIndex=0,this.overlayImages=[],l(g,this,[]),l(u,this,a=>{a.key==="Escape"&&this.overlayOpen&&i(v,this).call(this)}),l(f,this,()=>{n(s,this,_).call(this)}),l(b,this,a=>{if(!this.enableClickCarousel)return;const t=a.currentTarget;t instanceof HTMLElement&&t.setAttribute("data-scb-gallery-hover","")}),l(m,this,a=>{if(!this.enableClickCarousel)return;const t=a.currentTarget;t instanceof HTMLElement&&t.removeAttribute("data-scb-gallery-hover")}),l(p,this,a=>{if(!this.enableClickCarousel)return;const t=a.currentTarget;if(!(t instanceof HTMLElement))return;const o=t.getAttribute("data-scb-gallery-slide-index");if(o==null)return;const c=Number(o);Number.isFinite(c)&&n(s,this,G).call(this,c)}),l(v,this,()=>{this.overlayOpen=!1})}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",i(u,this))}disconnectedCallback(){window.removeEventListener("keydown",i(u,this)),n(s,this,I).call(this),super.disconnectedCallback()}firstUpdated(){n(s,this,_).call(this)}updated(r){r.has("enableClickCarousel")&&(this.enableClickCarousel||i(v,this).call(this),n(s,this,_).call(this))}render(){return k`
+      <div class="gallery">
+        <slot @slotchange=${i(f,this)}></slot>
+      </div>
+      ${this.overlayOpen&&this.enableClickCarousel?k`
+            <scb-overlay open aria-label="Bildkarusell" @scb-overlay-dismiss=${i(v,this)}>
+              <div class="overlay-dialog">
+                <scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
+                  ${n(s,this,T).call(this).map((r,a)=>k`
+                      <div
+                        class="overlay-slide ${a===0?"is-active":""}"
+                        data-overlay-slide-index="${a}"
+                      >
+                        <img src="${r.src}" alt="${r.alt}" />
+                      </div>
+                    `)}
+                </scb-horizontal-scroller>
+              </div>
+            </scb-overlay>
+          `:""}
+    `}},x.styles=z`
+    :host {
+      display: block;
+      --scb-gallery-grid-gap: var(--spacing-4, 12px);
+      --scb-gallery-grid-item-min: 180px;
+      --scb-gallery-grid-item-height: 220px;
+      --scb-gallery-grid-masonry-columns: 3;
+      --scb-gallery-overlay-max-width: 980px;
+      --scb-gallery-overlay-slide-height: min(68vh, 620px);
+    }
+
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--scb-gallery-grid-item-min), 1fr));
+      gap: var(--scb-gallery-grid-gap);
+      align-items: start;
+    }
+
+    .gallery > slot {
+      display: contents;
+    }
+
+    .gallery ::slotted(*) {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      block-size: var(--scb-gallery-grid-item-height);
+      overflow: hidden;
+      transition:
+        transform 160ms ease,
+        box-shadow 160ms ease;
+      will-change: transform;
+    }
+
+    .gallery ::slotted([data-scb-gallery-hover]) {
+      transform: translateY(-6px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .gallery ::slotted([data-scb-gallery-clickable]) {
+      cursor: pointer;
+    }
+
+    .gallery ::slotted(img),
+    .gallery ::slotted(picture),
+    .gallery ::slotted(video) {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      display: block;
+        border-radius: var(--md-sys-shape-corner-medium, 12px);
+    }
+
+    :host([variant='masonry']) .gallery {
+      display: block;
+      column-count: var(--scb-gallery-grid-masonry-columns);
+      column-gap: var(--scb-gallery-grid-gap);
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(*) {
+      break-inside: avoid;
+      -webkit-column-break-inside: avoid;
+      margin-block-end: var(--scb-gallery-grid-gap);
+      block-size: auto;
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(img),
+    :host([variant='masonry']) .gallery ::slotted(picture),
+    :host([variant='masonry']) .gallery ::slotted(video) {
+      block-size: auto;
+    }
+
+    @media (max-width: 960px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 1;
+      }
+    }
+
+    .overlay-dialog {
+      position: relative;
+      inline-size: min(var(--scb-gallery-overlay-max-width), 100%);
+      max-block-size: 100%;
+      border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+      background: var(--md-sys-color-surface-container-low, #1f1f1f);
+      padding: var(--spacing-4, 12px);
+      overflow: hidden;
+    }
+
+    .overlay-slide {
+      inline-size: 100%;
+      flex: 0 0 100%;
+      block-size: var(--scb-gallery-overlay-slide-height);
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      overflow: hidden;
+      box-shadow: inset 0 0 0 2px transparent;
+      transition: box-shadow 160ms ease;
+    }
+
+    .overlay-slide img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  `,x);function I(){i(g,this).forEach(e=>{e.removeEventListener("pointerenter",i(b,this)),e.removeEventListener("pointerleave",i(m,this)),e.removeEventListener("click",i(p,this)),e.removeAttribute("data-scb-gallery-hover"),e.removeAttribute("data-scb-gallery-clickable"),e.removeAttribute("data-scb-gallery-slide-index")}),l(g,this,[])}function O(e){if(e instanceof HTMLImageElement){const r=e.currentSrc||e.src;return r?{src:r,alt:e.alt||"Galleri-bild"}:null}return null}function _(){n(s,this,I).call(this);const e=this.renderRoot.querySelector("slot");if(!(e instanceof HTMLSlotElement)){this.overlayImages=[];return}const r=e.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement);l(g,this,r);const a=[];r.forEach(t=>{if(!this.enableClickCarousel)return;const o=n(s,this,O).call(this,t);if(!o)return;t.addEventListener("pointerenter",i(b,this)),t.addEventListener("pointerleave",i(m,this));const c=a.length;a.push(o),t.setAttribute("data-scb-gallery-clickable",""),t.setAttribute("data-scb-gallery-slide-index",String(c)),t.addEventListener("click",i(p,this))}),this.overlayImages=a}function T(){if(this.overlayImages.length===0)return[];const e=Math.max(0,Math.min(this.overlayIndex,this.overlayImages.length-1));return[...this.overlayImages.slice(e),...this.overlayImages.slice(0,e)]}function G(e){if(!this.enableClickCarousel||this.overlayImages.length===0)return;const r=Math.max(0,Math.min(e,this.overlayImages.length-1));this.overlayIndex=r,this.overlayOpen=!0}y([E({type:String,reflect:!0})],h.prototype,"variant",void 0);y([E({type:Boolean,reflect:!0,attribute:"enable-carousel"})],h.prototype,"enableClickCarousel",void 0);y([w()],h.prototype,"overlayOpen",void 0);y([w()],h.prototype,"overlayIndex",void 0);y([w()],h.prototype,"overlayImages",void 0);h=y([S("scb-gallery-grid")],h);

package/mvc/components/scb-grid/scb-grid-item.js

@@ -1 +1,11 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-grid/scb-grid-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+import{_ as y,b as f,g as b,h as i,y as S}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import{n as g,t as r}from"../../vendor/assertClassBrand.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(p,h,m){try{customElements.get(p)||a(p,h,m)}catch(u){var c=String(u||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var e,n,t=(e=new WeakSet,n=class extends y{constructor(...a){super(...a),g(this,e),this.fit=!1}firstUpdated(){r(e,this,d).call(this)}updated(){r(e,this,d).call(this)}render(){return S`<slot></slot>`}},n.styles=f`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      align-self:  var(--scb-grid-item-align, auto);
+      justify-self: var(--scb-grid-item-justify, auto);
+      block-size: auto;
+    }
+    :host([fit]) { block-size: 100%; }
+    :host([fit]) ::slotted(*) { block-size: 100%; }
+  `,n);function d(){r(e,this,o).call(this,"--col-span",this.hasAttribute("col-span")?String(this.colSpan):null),r(e,this,o).call(this,"--col-span-compact",this.hasAttribute("col-span-compact")?String(this.colSpanCompact):null),r(e,this,o).call(this,"--col-span-medium",this.hasAttribute("col-span-medium")?String(this.colSpanMedium):null),r(e,this,o).call(this,"--col-span-expanded",this.hasAttribute("col-span-expanded")?String(this.colSpanExpanded):null),r(e,this,o).call(this,"--row-rule",this.hasAttribute("row-span")?`span ${this.rowSpan}`:null),r(e,this,o).call(this,"--row-rule-compact",this.hasAttribute("row-span-compact")?`span ${this.rowSpanCompact}`:null),r(e,this,o).call(this,"--row-rule-medium",this.hasAttribute("row-span-medium")?`span ${this.rowSpanMedium}`:null),r(e,this,o).call(this,"--row-rule-expanded",this.hasAttribute("row-span-expanded")?`span ${this.rowSpanExpanded}`:null),this.align?(this.style.setProperty("--scb-grid-item-align",this.align),this.style.setProperty("align-self",this.align)):(this.style.removeProperty("--scb-grid-item-align"),this.style.removeProperty("align-self")),this.justify?(this.style.setProperty("--scb-grid-item-justify",this.justify),this.style.setProperty("justify-self",this.justify)):(this.style.removeProperty("--scb-grid-item-justify"),this.style.removeProperty("justify-self"))}function o(l,a){a===null||a===""?this.style.removeProperty(l):this.style.setProperty(l,a)}s([i({type:Number,attribute:"col-span",reflect:!0})],t.prototype,"colSpan",void 0);s([i({type:Number,attribute:"col-span-compact",reflect:!0})],t.prototype,"colSpanCompact",void 0);s([i({type:Number,attribute:"col-span-medium",reflect:!0})],t.prototype,"colSpanMedium",void 0);s([i({type:Number,attribute:"col-span-expanded",reflect:!0})],t.prototype,"colSpanExpanded",void 0);s([i({type:Number,attribute:"row-span",reflect:!0})],t.prototype,"rowSpan",void 0);s([i({type:Number,attribute:"row-span-compact",reflect:!0})],t.prototype,"rowSpanCompact",void 0);s([i({type:Number,attribute:"row-span-medium",reflect:!0})],t.prototype,"rowSpanMedium",void 0);s([i({type:Number,attribute:"row-span-expanded",reflect:!0})],t.prototype,"rowSpanExpanded",void 0);s([i({type:String,reflect:!0})],t.prototype,"align",void 0);s([i({type:String,reflect:!0})],t.prototype,"justify",void 0);s([i({type:Boolean,reflect:!0})],t.prototype,"fit",void 0);t=s([b("scb-grid-item")],t);