scb-wc 0.1.3 → 0.1.4

package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -0,0 +1,196 @@
+import"../../vendor/vendor-material.js";import{_ as v,b as S,g as m,h as i,m as g,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as e}from"../../vendor/decorate.js";import{n as y,t as p}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(t,s,r){try{customElements.get(t)||l(t,s,r)}catch(a){var c=String(a||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var d,b,o=(d=new WeakSet,b=class extends v{constructor(...l){super(...l),y(this,d),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.contentFlex=!1,this.internalGap="",this._canScrollLeft=!1,this._canScrollRight=!1,this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft&&(this._canScrollLeft=!1),this._canScrollRight&&(this._canScrollRight=!1),this.removeAttribute("data-scroll-left"),this.removeAttribute("data-scroll-right");return}const s=t.scrollLeft>0,r=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft!==s&&(this._canScrollLeft=s),this._canScrollRight!==r&&(this._canScrollRight=r),s?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left"),r?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)},this.handleWheel=t=>{const s=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!s||t.deltaY===0)return;const r=s.scrollLeft,c=r>0,a=r+s.clientWidth<s.scrollWidth-1;!c&&!a||(s.scrollLeft+=t.deltaY,s.scrollLeft!==r&&t.preventDefault())}}getScrollStep(){const l=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");return l?Math.max(Math.round(l.clientWidth*.8),120):200}doScrollBy(l){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&t.scrollBy({left:l,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){super.disconnectedCallback(),this.scrollerEl&&(this.scrollerEl.removeEventListener("scroll",this.handleScroll),this.scrollerEl.removeEventListener("wheel",this.handleWheel)),this.sizeObserver&&(this.sizeObserver.disconnect(),this.sizeObserver=null),this.resizeRaf!==null&&(cancelAnimationFrame(this.resizeRaf),this.resizeRaf=null),this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollerEl=null,this.slotEl=null}dispatchCustomEvent(l,t={}){this.dispatchEvent(new CustomEvent(l,{detail:t,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(l,t={}){if(this.dispatchCustomEvent(l,t),l.includes("-")){const s=l.replace(/-/g,"");this.dispatchCustomEvent(s,t)}}firstUpdated(){this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot");const l=this.shadowRoot?.querySelector(".scroll-shadow-left"),t=this.shadowRoot?.querySelector(".scroll-shadow-right");this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const s=()=>{if(this.slotEl&&l&&t){const a=this.slotEl.getBoundingClientRect();l.style.height=`${a.height}px`,t.style.height=`${a.height}px`}},r=()=>{s(),this.updateScrollButtons()},c=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,r()}))};requestAnimationFrame(()=>{r()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{c()}),this.sizeObserver=new ResizeObserver(()=>{c()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),p(d,this,u).call(this),p(d,this,f).call(this)}updated(l){l.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(l.has("spacing")||l.has("spacingTop")||l.has("spacingBottom")||l.has("spacingLeft")||l.has("spacingRight"))&&p(d,this,u).call(this),(l.has("internalGap")||l.has("contentFlex"))&&p(d,this,f).call(this)}mapSpacingToken(l){if(!l)return;const t=String(l).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const l=this.variant,t=this._canScrollLeft||this._canScrollRight;return l==="inline"?h`
+          <div class="scb-horizontal-scroller ${t?"canScroll":""}" tabindex="0">
+            ${this.variant!="inline"?h`<div class="scroll-shadow-left"></div>`:""}
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+            ${this.variant!="inline"?h`<div class="scroll-shadow-right"></div>`:""}
+          </div>
+          ${t?h`
+                <div class="scroll-buttons">
+                  ${this._canScrollLeft?h`
+                        <scb-button
+                          class="scroll-button-left"
+                          variant="text"
+                          label="${this.leftScrollButtonLabel}"
+                          aria-label="Scrolla vänster"
+                          icon="chevron_left"
+                          @click="${()=>this.doScrollBy(-this.getScrollStep())}"
+                        ></scb-button>
+                      `:""}
+
+                  ${this._canScrollRight?h`
+                        <scb-button
+                          class="scroll-button-right"
+                          variant="text"
+                          label="${this.rightScrollButtonLabel}"
+                          aria-label="Scrolla höger"
+                          icon="chevron_right"
+                          trailing-icon
+                          @click="${()=>this.doScrollBy(this.getScrollStep())}"
+                        ></scb-button>
+                      `:""}
+                </div>
+              `:""}
+        `:h`
+          ${this._canScrollLeft?h`
+                <scb-icon-button
+                  class="scroll-button-left"
+                  icon="chevron_left"
+                  aria-label="Scrolla vänster"
+                  variant="filled-tonal"
+                  @click="${()=>this.doScrollBy(-this.getScrollStep())}"
+                ></scb-icon-button>
+              `:""}
+          <div class="scroll-shadow-left"></div>
+          <div class="scb-horizontal-scroller ${t?"canScroll":""}">
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+          </div>
+          <div class="scroll-shadow-right"></div>
+          ${this._canScrollRight?h`
+                <scb-icon-button
+                  class="scroll-button-right"
+                  icon="chevron_right"
+                  aria-label="Scrolla höger"
+                  variant="filled-tonal"
+                  @click="${()=>this.doScrollBy(this.getScrollStep())}"
+                ></scb-icon-button>
+              `:""}
+        `}},b.styles=S`
+    :host {
+      display: flex;
+      position: relative;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: 0;
+      overflow: hidden;
+      margin-block-start: var(--scb-horizontal-scroller-spacing-block-start, 0);
+      margin-block-end: var(--scb-horizontal-scroller-spacing-block-end, 0);
+      margin-inline-start: var(--scb-horizontal-scroller-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-horizontal-scroller-spacing-inline-end, 0);
+    }
+    .scb-horizontal-scroller {
+      overflow-x: auto;
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none;
+      width: 100%;
+    }
+    :host([show-scrollbar]) .scb-horizontal-scroller {
+      scrollbar-width: auto;
+    }
+
+    :host([content-flex]) .scb-horizontal-scroller {
+      display: flex;
+      flex-direction: row;
+      flex: 1 1 auto;
+    }
+
+    .scb-horizontal-scroller::-webkit-scrollbar {
+      border-radius: var(--md-sys-shape-corner-large);
+      height: 4px;
+      width: 10px;
+    }
+    .scb-horizontal-scroller::-webkit-scrollbar-thumb {
+      background: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-large);
+      cursor: pointer;
+    }
+    .scb-horizontal-scroller::-webkit-scrollbar-track {
+      background: var(--md-sys-color-secondary-container);
+      border-radius: var(--md-sys-shape-corner-large);
+    }
+    .scb-horizontal-scroller:focus {
+      outline: none;
+    }
+    md-focus-ring {
+      border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
+    }
+
+    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll {
+      padding-bottom: var(--spacing-5);
+    }
+    slot {
+      display: block;
+      box-sizing: border-box;
+      padding-block: var(--spacing-3);
+      padding-inline: 2px;
+      min-width: var(--scb-horizontal-scroller-width, auto);
+    }
+    :host([content-flex]) .scb-horizontal-scroller slot {
+      display: flex;
+      gap: var(--scb-horizontal-scroller-internal-gap);
+    }
+    .scroll-button-left {
+      left: 0px;
+      position: absolute;
+      z-index: 3;
+    }
+    .scroll-button-right {
+      right: 2px;
+      position: absolute;
+      z-index: 3;
+    }
+    .scroll-shadow-left,
+    .scroll-shadow-right {
+      position: absolute;
+      top: 0;
+      width: 5px;
+      bottom: 0;
+      pointer-events: none;
+      background: none;
+      box-shadow: none;
+      transition: box-shadow 0.2s;
+      z-index: 2;
+    }
+    .scroll-shadow-left {
+      left: 0;
+    }
+    .scroll-shadow-right {
+      right: 0;
+    }
+    :host([data-scroll-left]) .scroll-shadow-left {
+      background: var(--md-sys-color-surface-container-lowest);
+      box-shadow:
+        12px 0 30px rgba(0, 0, 0, 0.24),
+        4px 0 12px rgba(78, 5, 5, 0.14);
+    }
+    :host([data-scroll-left]) .scroll-shadow-left::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+    }
+    :host([data-scroll-right]) .scroll-shadow-right {
+      background: var(--md-sys-color-surface-container-lowest);
+      box-shadow:
+        -12px 0 30px rgba(0, 0, 0, 0.24),
+        -4px 0 12px rgba(0, 0, 0, 0.14);      
+    }
+    :host([data-scroll-right]) .scroll-shadow-right::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+    }
+    :host([variant='inline']) {
+      flex-direction: column;
+      align-items: unset;
+      padding: 0;
+      .scroll-buttons {
+        display: flex;
+        gap: var(--spacing-3);
+      }
+      .scroll-button-right {
+        position: relative;
+        right: unset;
+        z-index: auto;
+        margin-left: auto;
+      }
+      .scroll-button-left {
+        position: relative;
+        left: unset;
+        z-index: auto;
+      }
+    }
+    :host([variant='inline'][show-scrollbar]) {
+      gap: var(--spacing-5);
+    }
+  `,b);function u(){const n=this.mapSpacingToken(this.spacing),l=this.mapSpacingToken(this.spacingTop),t=this.mapSpacingToken(this.spacingBottom),s=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight),c=l??n,a=t??n;c?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",c):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),a?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",a):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"),s?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start",s):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"),r?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end",r):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end")}function f(){const n=this.mapSpacingToken(this.internalGap);this.contentFlex&&n?this.style.setProperty("--scb-horizontal-scroller-internal-gap",n):this.style.removeProperty("--scb-horizontal-scroller-internal-gap")}e([i({type:String,reflect:!0})],o.prototype,"variant",void 0);e([i({type:String,reflect:!0})],o.prototype,"width",void 0);e([i({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],o.prototype,"showScrollbar",void 0);e([i({type:String,reflect:!0,attribute:"right-scroll-button-label"})],o.prototype,"rightScrollButtonLabel",void 0);e([i({type:String,reflect:!0,attribute:"left-scroll-button-label"})],o.prototype,"leftScrollButtonLabel",void 0);e([i({type:String,reflect:!0})],o.prototype,"spacing",void 0);e([i({type:String,reflect:!0,attribute:"spacing-top"})],o.prototype,"spacingTop",void 0);e([i({type:String,reflect:!0,attribute:"spacing-bottom"})],o.prototype,"spacingBottom",void 0);e([i({type:String,reflect:!0,attribute:"spacing-left"})],o.prototype,"spacingLeft",void 0);e([i({type:String,reflect:!0,attribute:"spacing-right"})],o.prototype,"spacingRight",void 0);e([i({type:Boolean,reflect:!0,attribute:"content-flex"})],o.prototype,"contentFlex",void 0);e([i({type:String,reflect:!0,attribute:"internal-gap"})],o.prototype,"internalGap",void 0);e([g()],o.prototype,"_canScrollLeft",void 0);e([g()],o.prototype,"_canScrollRight",void 0);o=e([m("scb-horizontal-scroller")],o);

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

@@ -0,0 +1,171 @@
+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"../../vendor/vendor-material.js";import{_ as m,b as _,g as v,h as s,v as i,y as r}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as o}from"../../vendor/decorate.js";import{n as y,t as g}from"../../vendor/assertClassBrand.js";import{t as b}from"../../vendor/preload-helper.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,a,c){try{customElements.get(e)||t(e,a,c)}catch(u){var d=String(u||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var h,p,n=(h=new WeakSet,p=class extends m{constructor(...t){super(...t),y(this,h),this.icon="home",this.ariaLabel="",this.variant="standard",this.size="medium",this.shape="round",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.href="",this.target="",this.rel="",this.__filledValue=!1,this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}get filled(){return this.__filledValue}set filled(t){const e=!!t,a=this.__filledValue;a!==e&&(this.__filledValue=e,this.requestUpdate("filled",a),this.requestUpdate("iconFilled",a))}get iconFilled(){return this.__filledValue}set iconFilled(t){const e=!!t,a=this.__filledValue;a!==e&&(this.__filledValue=e,this.requestUpdate("iconFilled",a),this.requestUpdate("filled",a))}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),g(h,this,f).call(this)}updated(t){if(super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&g(h,this,f).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await b(()=>import("../../vendor/vendor-material.js").then(t=>t.a),__vite__mapDeps([0,1,2]),import.meta.url);break;case"outlined":await b(()=>import("../../vendor/vendor-material.js").then(t=>t.n),__vite__mapDeps([0,1,2]),import.meta.url);break;case"filled-tonal":await b(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1,2]),import.meta.url);break;default:await b(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1,2]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await b(()=>import("../../vendor/vendor-material.js").then(t=>t.p),__vite__mapDeps([0,1,2]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const e=(this.getAttribute("title")||"").trim(),a=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),c=this.getAttribute("aria-controls"),d=this.getAttribute("aria-expanded"),u=a||e||this.icon.trim()||void 0;u?t.setAttribute("aria-label",u):t.removeAttribute("aria-label"),c!==null?t.setAttribute("aria-controls",c):t.removeAttribute("aria-controls"),d!==null?t.setAttribute("aria-expanded",d):t.removeAttribute("aria-expanded")}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}__renderToggleIcons(){return r`
+      <md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.toggleofficon}</md-icon>
+      <md-icon ?filled=${this.iconFilled||this.filled} slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
+    `}__renderSingleIcon(){return r`<md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return r`
+            <md-filled-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href||i}
+              target=${this.target||i}
+              rel=${this.rel||i}
+            >
+              ${t}
+            </md-filled-icon-button>
+          `;case"outlined":return r`
+            <md-outlined-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href||i}
+              target=${this.target||i}
+              rel=${this.rel||i}
+            >
+              ${t}
+            </md-outlined-icon-button>
+          `;case"filled-tonal":return r`
+            <md-filled-tonal-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href||i}
+              target=${this.target||i}
+              rel=${this.rel||i}
+            >
+              ${t}
+            </md-filled-tonal-icon-button>
+          `;default:return r`
+            <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
+              ${t}
+            </md-icon-button>
+          `}switch(this.variant){case"filled":return r`
+          <md-filled-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
+            ${t}
+          </md-filled-icon-button>
+        `;case"outlined":return r`
+          <md-outlined-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
+            ${t}
+          </md-outlined-icon-button>
+        `;case"filled-tonal":return r`
+          <md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
+            ${t}
+          </md-filled-tonal-icon-button>
+        `;default:return r`
+          <md-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
+            ${t}
+          </md-icon-button>
+        `}}render(){return this.__renderMd()}},p.styles=_`
+    :host {
+      display: inline-flex;
+      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
+      margin-inline-start: var(--scb-icon-button-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-icon-button-spacing-inline-end, 0);
+      --scb-icon-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      --scb-icon-button-shape-radius: var(--radius-full, 1000px);
+
+      --scb-icon-button-shape-square-radius: var(--radius-m, 12px);
+      --scb-icon-button-shape-square-radius-large: var(--radius-l, 16px);
+
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-3, 12px);
+      --scb-icon-button-container-size: calc(
+        var(--scb-icon-button-icon-size) + (var(--scb-icon-button-padding) * 2)
+      );
+    }
+
+    :host([size="tiny"]) {
+      --scb-icon-button-icon-size: var(--icon-size-tiny, 12px);
+      --scb-icon-button-padding: var(--spacing-1, 4px);
+    }
+
+    :host([size="extra-small"]) {
+      --scb-icon-button-icon-size: var(--icon-size-extra-small, 16px);
+      --scb-icon-button-padding: var(--spacing-2, 8px);
+    }
+
+    :host([size="small"]) {
+      --scb-icon-button-icon-size: var(--icon-size-small, 20px);
+      --scb-icon-button-padding: calc(var(--spacing-3, 12px) - var(--spacing-1, 4px));
+    }
+
+    :host([size="medium"]) {
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-3, 12px);
+    }
+
+    :host([size="large"]) {
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-5, 20px);
+    }
+
+    :host([shape="square"]) {
+      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius);
+    }
+
+    :host([shape="square"][size="large"]) {
+      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius-large);
+    }
+
+    :host([filled]),
+    :host([icon-filled]) {
+      --scb-icon-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    md-icon {
+      --md-icon-size: var(--scb-icon-button-icon-size);
+      font-size: var(--scb-icon-button-icon-size) !important;
+      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
+      font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
+    }
+
+    md-icon-button {
+      --md-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-icon-button-container-size: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-size: var(--scb-icon-button-container-size);
+      --md-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-icon-button-container-height: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-width: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-height: var(--scb-icon-button-container-size);
+      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+
+    md-filled-icon-button {
+      --md-filled-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-filled-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-filled-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-filled-tonal-icon-button {
+      --md-filled-tonal-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-filled-tonal-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-filled-tonal-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-outlined-icon-button {
+      --md-outlined-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-outlined-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-outlined-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-icon-button,
+    md-filled-icon-button,
+    md-outlined-icon-button,
+    md-filled-tonal-icon-button {
+      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-filled-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-outlined-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-filled-tonal-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings);
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+
+    md-icon-button::part(button),
+    md-filled-icon-button::part(button),
+    md-outlined-icon-button::part(button),
+    md-filled-tonal-icon-button::part(button) {
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+`,p);function f(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,a=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-icon-button-spacing-block-start",t):this.style.removeProperty("--scb-icon-button-spacing-block-start"),e?this.style.setProperty("--scb-icon-button-spacing-block-end",e):this.style.removeProperty("--scb-icon-button-spacing-block-end"),a?this.style.setProperty("--scb-icon-button-spacing-inline-start",a):this.style.removeProperty("--scb-icon-button-spacing-inline-start"),c?this.style.setProperty("--scb-icon-button-spacing-inline-end",c):this.style.removeProperty("--scb-icon-button-spacing-inline-end")}o([s({type:String})],n.prototype,"icon",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"filled",null);o([s({type:Boolean,attribute:"icon-filled",reflect:!0})],n.prototype,"iconFilled",null);o([s({type:String,attribute:"aria-label"})],n.prototype,"ariaLabel",void 0);o([s({type:String})],n.prototype,"variant",void 0);o([s({type:String,reflect:!0})],n.prototype,"size",void 0);o([s({type:String,reflect:!0})],n.prototype,"shape",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"toggle",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"selected",void 0);o([s({type:String})],n.prototype,"toggleofficon",void 0);o([s({type:String})],n.prototype,"toggleonicon",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);o([s({type:String,reflect:!0})],n.prototype,"spacing",void 0);o([s({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);o([s({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);o([s({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);o([s({type:String})],n.prototype,"href",void 0);o([s({type:String})],n.prototype,"target",void 0);o([s({type:String})],n.prototype,"rel",void 0);n=o([v("scb-icon-button")],n);

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

@@ -0,0 +1,212 @@
+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"../../vendor/vendor-material.js";import{_ as b,b as m,g as v,h as r,y as c}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import{n as k,t as y}from"../../vendor/assertClassBrand.js";import{t as h}from"../../vendor/preload-helper.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,a,n){try{customElements.get(i)||e(i,a,n)}catch(u){var l=String(u||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var d,p,g,t=(d=new WeakSet,p=class extends b{constructor(...e){super(...e),k(this,d),this.keyfigure=0,this.subtitle="",this.supportingText="",this.cardHref="",this.href="",this.icon="",this.size="large",this.unit="",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.sizing="stretch",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__onKeyDown=i=>{const a=this.__effectiveHref;(i.key==="Enter"||i.key===" ")&&a&&(i.preventDefault(),this.__navigate(a,i))},this.__handleHrefNavigation=i=>{const a=this.__effectiveHref;a&&(i.target.closest("a")||this.__navigate(a,i))}}formatNumber(e){if(typeof e=="number")return e.toLocaleString("sv-SE").replace(/\u00A0/g," ");const i=Number(e);return Number.isNaN(i)?String(e):i.toLocaleString("sv-SE").replace(/\u00A0/g," ")}async firstUpdated(){g.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.p),__vite__mapDeps([0,1,2]),import.meta.url),g.__iconLoaded=!0),g.__rippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.f),__vite__mapDeps([0,1,2]),import.meta.url),g.__rippleLoaded=!0),this.__applyInnerSizing(),y(d,this,f).call(this)}get __effectiveHref(){return(this.cardHref||this.href||"").trim()}render(){const e=this.__effectiveHref,i=!!e,a=this.formatNumber(this.keyfigure),n=(this.unit||"").trim(),l=n?`${a} ${n}`:a;return c`
+      <div
+        class="scb-keyfigure-card ${i?"clickable":""} ${this.size}"
+        role=${i?"link":"group"}
+        tabindex=${i?"0":"-1"}
+        aria-label=${this.subtitle||l}
+        @click=${i?this.__handleHrefNavigation:null}
+        @keydown=${i?this.__onKeyDown:null}
+        style="cursor:${i?"pointer":"default"};"
+      >
+        ${i?c`<md-ripple></md-ripple>`:""}
+        ${this.icon?c`<md-icon>${this.icon}</md-icon>`:""}
+
+        ${this.keyfigure!==void 0&&this.keyfigure!==null&&this.keyfigure!==""?c`
+          <div class="keyfigure">
+            <span class="value" aria-label="${l}">
+              ${a}${n?c`<span class="unit" aria-hidden="true">\u00A0${n}</span>`:""}
+            </span>
+            ${i?c`<md-icon>arrow_forward</md-icon>`:""}
+          </div>
+        `:""}
+
+        ${this.subtitle?c`
+          <div class="sub-label">
+            ${i?c`<a href="${e}" tabindex="-1">${this.subtitle}</a>`:this.subtitle}
+          </div>
+        `:""}
+
+        ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
+      </div>
+
+      ${i?c`<md-focus-ring></md-focus-ring>`:""}
+    `}__applyInnerSizing(){const e=this.renderRoot.querySelector(".scb-keyfigure-card");e&&(this.width&&this.width.trim()!==""?(e.style.inlineSize="100%",e.style.maxInlineSize="100%"):(e.style.removeProperty("inline-size"),e.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?e.style.blockSize="100%":e.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?e.style.maxBlockSize="100%":e.style.removeProperty("max-block-size"))}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),(e.has("width")||e.has("height")||e.has("maxHeight")||e.has("sizing"))&&this.__applyInnerSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&y(d,this,f).call(this)}mapSpacingToken(e){if(!e)return;const i=String(e).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}__dispatchNavigateEvents(e,i){const a={href:e},n=new CustomEvent("card-navigate",{detail:a,bubbles:!0,composed:!0,cancelable:!0}),l=new CustomEvent("cardnavigate",{detail:a,bubbles:!0,composed:!0,cancelable:!0});return this.dispatchEvent(n)&&this.dispatchEvent(l)}__navigate(e,i){this.__dispatchNavigateEvents(e,i)&&(window.location.href=e)}},g=p,p.__iconLoaded=!1,p.__rippleLoaded=!1,p.styles=m`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      inline-size: 100%;
+      min-inline-size: 0;
+      padding: var(--scb-keyfigure-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-keyfigure-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-keyfigure-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-keyfigure-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-keyfigure-card-spacing-inline-end, 0);
+
+      --scb-keyfigure-card-padding: var(--spacing-7, 24px);
+      --scb-keyfigure-card-gap: var(--spacing-4, 12px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-3, 8px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-large-size, 28px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-large-line-height, 34px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-large-tracking, -0.6px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    :host([size='medium']) {
+      --scb-keyfigure-card-padding: var(--spacing-6, 20px);
+      --scb-keyfigure-card-gap: var(--spacing-3, 8px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-2, 4px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-small-size, 24px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-small-line-height, 30px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='small']) {
+      --scb-keyfigure-card-padding: var(--spacing-5, 16px);
+      --scb-keyfigure-card-gap: var(--spacing-3, 8px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-2, 4px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='standard']) {
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-large-size, 28px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-large-line-height, 34px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-large-tracking, -0.6px);
+    }
+
+    /* Ska vi ha tabulära eller inte? */
+    .scb-keyfigure-card,
+    .scb-keyfigure-card .keyfigure,
+    .scb-keyfigure-card .value {
+      font-variant-numeric: proportional-nums !important;
+      font-feature-settings: "tnum" 0, "pnum" 1;
+    }
+
+    :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;
+    }
+    :host([sizing="content-width"]) .scb-keyfigure-card {
+      inline-size: max-content;
+    }
+
+    :host([sizing="content-height"]) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-keyfigure-card-focus-ring-radius, var(--md-sys-shape-corner-large, 16px));
+    }
+    .scb-keyfigure-card:focus-visible + md-focus-ring { display: block; }
+
+    .scb-keyfigure-card {
+      color: var(--md-sys-color-on-surface, #0F0865);
+      font-family: var(--brand-font, "Inter", sans-serif);
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-keyfigure-card-gap);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      padding: var(--scb-keyfigure-card-padding);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      overflow: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .scb-keyfigure-card:focus,
+    .scb-keyfigure-card:focus-visible { outline: none; }
+
+    .keyfigure {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--scb-keyfigure-card-keyfigure-gap);
+      font-size: var(--scb-keyfigure-card-value-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-keyfigure-card-value-line-height);
+      letter-spacing: var(--scb-keyfigure-card-value-letter-spacing);
+    }
+    .keyfigure .value { white-space: nowrap; }
+    .keyfigure .unit { margin-inline-start: .25em; white-space: nowrap; }
+
+    .sub-label {
+      font-size: var(--scb-keyfigure-card-subtitle-size);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-keyfigure-card-subtitle-line-height);
+      letter-spacing: var(--scb-keyfigure-card-subtitle-letter-spacing);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+    .sub-label a { color: inherit; text-decoration: none; }
+
+    .supporting-text {
+      font-size: var(--scb-keyfigure-card-supporting-size);
+      line-height: var(--scb-keyfigure-card-supporting-line-height);
+      letter-spacing: var(--scb-keyfigure-card-supporting-letter-spacing);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .scb-keyfigure-card.clickable { cursor: pointer; }
+
+    :host([size='large']) {
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-display-medium-size, 36px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-display-medium-line-height, 42px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-display-medium-tracking, -0.6px);
+    }
+  `,p);function f(){const o=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??o,i=this.mapSpacingToken(this.spacingBottom)??o,a=this.mapSpacingToken(this.spacingLeft),n=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-keyfigure-card-spacing-block-start",e):this.style.removeProperty("--scb-keyfigure-card-spacing-block-start"),i?this.style.setProperty("--scb-keyfigure-card-spacing-block-end",i):this.style.removeProperty("--scb-keyfigure-card-spacing-block-end"),a?this.style.setProperty("--scb-keyfigure-card-spacing-inline-start",a):this.style.removeProperty("--scb-keyfigure-card-spacing-inline-start"),n?this.style.setProperty("--scb-keyfigure-card-spacing-inline-end",n):this.style.removeProperty("--scb-keyfigure-card-spacing-inline-end")}s([r({attribute:"keyfigure"})],t.prototype,"keyfigure",void 0);s([r({type:String,attribute:"subtitle"})],t.prototype,"subtitle",void 0);s([r({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",void 0);s([r({type:String,attribute:"card-href"})],t.prototype,"cardHref",void 0);s([r({type:String,attribute:"href"})],t.prototype,"href",void 0);s([r({type:String})],t.prototype,"icon",void 0);s([r({type:String,reflect:!0})],t.prototype,"size",void 0);s([r({type:String})],t.prototype,"unit",void 0);s([r({type:String,reflect:!0})],t.prototype,"width",void 0);s([r({type:String,reflect:!0,attribute:"max-width"})],t.prototype,"maxWidth",void 0);s([r({type:String,reflect:!0})],t.prototype,"height",void 0);s([r({type:String,reflect:!0,attribute:"max-height"})],t.prototype,"maxHeight",void 0);s([r({type:String,reflect:!0})],t.prototype,"sizing",void 0);s([r({type:String,reflect:!0})],t.prototype,"spacing",void 0);s([r({type:String,reflect:!0,attribute:"spacing-top"})],t.prototype,"spacingTop",void 0);s([r({type:String,reflect:!0,attribute:"spacing-bottom"})],t.prototype,"spacingBottom",void 0);s([r({type:String,reflect:!0,attribute:"spacing-left"})],t.prototype,"spacingLeft",void 0);s([r({type:String,reflect:!0,attribute:"spacing-right"})],t.prototype,"spacingRight",void 0);t=g=s([v("scb-keyfigure-card")],t);