scb-wc 0.1.2 → 0.1.4

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

@@ -0,0 +1,346 @@
+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 z,b as w,g as k,h as t,y as l}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as _,t as m}from"../../vendor/assertClassBrand.js";import{t as y}from"../../vendor/preload-helper.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,c,s){try{customElements.get(r)||e(r,c,s)}catch(g){var h=String(g||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var d,o,p,a=(d=new WeakSet,o=class extends z{constructor(...e){super(...e),_(this,d),this.variant="default",this.size="medium",this.date=null,this.direction="horizontal",this.title="",this.calendarCardTitle="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}async firstUpdated(){p.__iconLoaded||(await y(()=>import("../../vendor/vendor-material.js").then(e=>e.p),__vite__mapDeps([0,1,2]),import.meta.url),p.__iconLoaded=!0),p.__rippleLoaded||(await y(()=>import("../../vendor/vendor-material.js").then(e=>e.f),__vite__mapDeps([0,1,2]),import.meta.url),p.__rippleLoaded=!0),this.__applyInnerSizing(),m(d,this,u).call(this)}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",c=this.cardHref?"clickable":"",{day:s,month:h}=m(d,this,S).call(this),g=this.mediaWidth&&this.mediaWidth.trim()!==""?this.mediaWidth:"",b=this.mediaHeight&&this.mediaHeight.trim()!==""?this.mediaHeight:"",v=this.mediaAspect&&this.mediaAspect.trim()!==""?this.mediaAspect:"",x=`${g?`inline-size:${g};`:""}${b?`block-size:${b};`:""}${v?`aspect-ratio:${v};`:""}`;return l`
+      <div
+        class="calendar-card ${r} ${c} ${e}"
+        role="${this.cardHref?"link":"group"}"
+        aria-label="${f.call(m(d,this))||"Kalenderkort"}"
+        tabindex="${this.cardHref?"0":"-1"}"
+        @click=${this.cardHref?this._handleHrefNavigation:null}
+        @keydown=${this.cardHref?this._onKeyDown:null}
+        style="cursor: ${this.cardHref?"pointer":"default"};"
+      >
+        ${this.cardHref?l`<md-ripple></md-ripple>`:""}
+        ${this.showMedia?l`
+              <div class="media" style="${x}" aria-label="Datum: ${s} ${h}">
+                <div class="day">${s}</div>
+                <div class="month">${h}</div>
+              </div>
+            `:""}
+        <div class="container">
+        <div class="header-container">
+          <div class="title-container">
+            <div class="title">${f.call(m(d,this))}</div>
+            ${this.cardHref?l`<div class="icon-container"><md-icon>arrow_forward</md-icon></div>`:""}
+          </div>
+          ${this.subtitle?l`<div class="subtitle">${this.subtitle}</div>`:""}</div>
+          ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:""}
+        </div>
+      </div>
+      ${this.cardHref?l`<md-focus-ring></md-focus-ring>`:""}
+    `}__applyInnerSizing(){const e=this.renderRoot.querySelector(".calendar-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"))}_onKeyDown(e){(e.key==="Enter"||e.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),e.preventDefault())}_handleHrefNavigation(){this.cardHref&&(this.cardHrefNav==="tab"?window.open(this.cardHref,"_blank"):this.cardHrefNav==="window"?window.open(this.cardHref,"_blank","noopener,noreferrer,width=800,height=600"):window.open(this.cardHref,"_self"))}mapSpacingToken(e){if(!e)return;const r=String(e).trim();if(r)return/^\d+$/.test(r)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(r,10)))})`:r}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("minWidth")&&(this.minWidth?this.style.minInlineSize=this.minWidth:this.style.removeProperty("min-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("minHeight")&&(this.minHeight?this.style.minBlockSize=this.minHeight:this.style.removeProperty("min-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"))&&m(d,this,u).call(this)}},p=o,o.__iconLoaded=!1,o.__rippleLoaded=!1,o.styles=w`
+    :host {
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      padding: var(--scb-calendar-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-calendar-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-calendar-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-calendar-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-calendar-card-spacing-inline-end, 0);
+
+      --scb-calendar-card-padding: var(--spacing-spacing-7, 24px);
+      --scb-calendar-card-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-6, 20px);
+      --scb-calendar-card-horizontal-min-block-size: 112px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-11, 64px);
+      --scb-calendar-card-media-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-day-size: var(--scale-07, 28px);
+      --scb-calendar-card-day-letter-spacing: -0.6px;
+      --scb-calendar-card-month-size: var(--scale-02, 14px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-title-min-block-size: 32px;
+      --scb-calendar-card-icon-size: 20px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-headline-small-size, 24px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    :host([size='medium']) {
+      --scb-calendar-card-padding: var(--spacing-spacing-6, 20px);
+      --scb-calendar-card-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-5, 16px);
+      --scb-calendar-card-horizontal-min-block-size: 96px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-10, 56px);
+      --scb-calendar-card-day-size: var(--scale-06, 24px);
+      --scb-calendar-card-day-letter-spacing: -0.4px;
+      --scb-calendar-card-month-size: var(--scale-01, 12px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-1, 2px);
+      --scb-calendar-card-title-min-block-size: 28px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='small']) {
+      --scb-calendar-card-padding: var(--spacing-spacing-5, 16px);
+      --scb-calendar-card-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-horizontal-min-block-size: 84px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-9, 48px);
+      --scb-calendar-card-day-size: var(--scale-05, 20px);
+      --scb-calendar-card-day-letter-spacing: -0.3px;
+      --scb-calendar-card-month-size: var(--scale-01, 12px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-1, 2px);
+      --scb-calendar-card-title-min-block-size: 24px;
+      --scb-calendar-card-icon-size: 18px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :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']) .calendar-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-calendar-card-focus-ring-radius, var(--radius-large, 16px));
+    }
+    .calendar-card:focus-visible + md-focus-ring {
+      display: block;
+    }
+
+    .calendar-card {
+      box-sizing: border-box;
+      overflow: hidden;
+
+      position: relative;
+      display: flex;
+      color: var(--md-sys-color-on-surface, #0f0865);
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-style: normal;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--scb-calendar-card-gap);
+      align-self: stretch;
+      cursor: pointer;
+      transition:
+        box-shadow 0.18s ease,
+        transform 0.18s ease,
+        background-color 0.18s ease,
+        border-color 0.18s ease;
+
+      inline-size: 100%;
+      max-inline-size: 100%;
+    }
+
+    /* Lås standard till proportionella siffror i kortet */
+    .calendar-card,
+    .calendar-card .title,
+    .calendar-card .subtitle,
+    .calendar-card .supporting-text {
+      font-variant-numeric: proportional-nums;
+      font-feature-settings: 'tnum' 0, 'pnum' 1;
+    }
+
+    .calendar-card:focus,
+    .calendar-card:focus-visible {
+      outline: none;
+    }
+
+    .calendar-card.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      max-width: none;
+      width: 100%;
+      gap: var(--scb-calendar-card-horizontal-gap);
+      min-block-size: var(--scb-calendar-card-horizontal-min-block-size);
+    }
+
+    .calendar-card.outlined {
+      border-radius: var(--radius-large, 16px);
+      border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+      background: var(--md-sys-color-surface, #fff);
+      padding: var(--scb-calendar-card-padding);
+    }
+
+    .calendar-card.filled {
+      border-radius: var(--radius-large, 16px);
+      background: var(--md-sys-color-surface-dim, #f9f8ef);
+      padding: var(--scb-calendar-card-padding);
+    }
+
+    .calendar-card.filled .media {
+      background: var(--md-sys-color-surface, #fff);
+    }
+
+    md-ripple {
+      border-radius: var(--radius-l, 16px);
+    }
+
+    .media {
+      display: flex;
+      width: var(--scb-calendar-card-media-size);
+      min-width: var(--scb-calendar-card-media-size);
+      max-width: var(--scb-calendar-card-media-size);
+      height: var(--scb-calendar-card-media-size);
+      padding: var(--spacing-spacing-0, 0) 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: var(--scb-calendar-card-media-gap);
+      border-radius: var(--md-sys-shape-corner-small);
+      background: var(--md-sys-color-surface-dim, #f9f8ef);
+    }
+
+    .calendar-card.horizontal .media {
+      align-self: flex-start;
+    }
+
+    .media .day {
+      font-size: var(--scb-calendar-card-day-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: 100%;
+      letter-spacing: var(--scb-calendar-card-day-letter-spacing);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media .month {
+      font-size: var(--scb-calendar-card-month-size);
+      font-weight: var(--weight-regular, 400);
+      line-height: 100%;
+    }
+
+    .container {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-calendar-card-content-gap);
+      width: 100%;
+      align-self: flex-start;
+    }
+
+    .header-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-calendar-card-header-gap);
+    }
+
+    .title-container {
+      width: 100%;
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-3, 8px);
+      color: inherit;
+      text-decoration: none;
+      min-block-size: var(--scb-calendar-card-title-min-block-size);
+    }
+
+    .title {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-title-font-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-calendar-card-title-line-height);
+      letter-spacing: var(--scb-calendar-card-title-letter-spacing);
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .title-container md-icon {
+      inline-size: var(--scb-calendar-card-icon-size);
+      block-size: var(--scb-calendar-card-icon-size);
+      flex: 0 0 auto;
+    }
+
+    .icon-container{
+      display: flex;
+      width: var(--spacing-spacing-7, 24px);
+      height: var(--spacing-spacing-7, 24px);
+      align-items: center;
+      justify-content: center;
+    }
+
+    .subtitle {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-subtitle-font-size);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-calendar-card-subtitle-line-height);
+      letter-spacing: var(--scb-calendar-card-subtitle-letter-spacing);
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .supporting-text {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-supporting-font-size);
+      font-weight: var(--weight-regular, 400);
+      line-height: var(--scb-calendar-card-supporting-line-height);
+      letter-spacing: var(--scb-calendar-card-supporting-letter-spacing);
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+      overflow: visible;
+      text-overflow: clip;
+    }
+  `,o);function f(){return this.calendarCardTitle||this.title}function S(){const n={day:1,month:"Jan"};if(!this.date)return n;const e=this.date instanceof Date?this.date:(()=>{const s=new Date(String(this.date));return Number.isNaN(s.getTime())?null:s})();if(!e)return n;const r=e.getDate(),c=new Intl.DateTimeFormat("sv-SE",{month:"short"}).format(e).replace(".","").trim();return{day:r,month:c.charAt(0).toUpperCase()+c.slice(1)}}function u(){const n=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??n,r=this.mapSpacingToken(this.spacingBottom)??n,c=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-calendar-card-spacing-block-start",e):this.style.removeProperty("--scb-calendar-card-spacing-block-start"),r?this.style.setProperty("--scb-calendar-card-spacing-block-end",r):this.style.removeProperty("--scb-calendar-card-spacing-block-end"),c?this.style.setProperty("--scb-calendar-card-spacing-inline-start",c):this.style.removeProperty("--scb-calendar-card-spacing-inline-start"),s?this.style.setProperty("--scb-calendar-card-spacing-inline-end",s):this.style.removeProperty("--scb-calendar-card-spacing-inline-end")}i([t({type:String,reflect:!0})],a.prototype,"variant",void 0);i([t({type:String,reflect:!0})],a.prototype,"size",void 0);i([t({type:String,attribute:"date"})],a.prototype,"date",void 0);i([t({type:String,reflect:!0})],a.prototype,"direction",void 0);i([t({type:String,reflect:!0})],a.prototype,"title",void 0);i([t({type:String,attribute:"calendar-card-title",reflect:!0})],a.prototype,"calendarCardTitle",void 0);i([t({type:String,reflect:!0})],a.prototype,"subtitle",void 0);i([t({type:String,attribute:"supporting-text",reflect:!0})],a.prototype,"supportingText",void 0);i([t({type:String,attribute:"card-href"})],a.prototype,"cardHref",void 0);i([t({type:String,attribute:"card-href-nav"})],a.prototype,"cardHrefNav",void 0);i([t({type:Boolean,reflect:!0,attribute:"show-media"})],a.prototype,"showMedia",void 0);i([t({type:String,attribute:"media-width"})],a.prototype,"mediaWidth",void 0);i([t({type:String,attribute:"media-height"})],a.prototype,"mediaHeight",void 0);i([t({type:String,attribute:"media-aspect"})],a.prototype,"mediaAspect",void 0);i([t({type:String,reflect:!0})],a.prototype,"width",void 0);i([t({type:String,reflect:!0,attribute:"max-width"})],a.prototype,"maxWidth",void 0);i([t({type:String,attribute:"min-width"})],a.prototype,"minWidth",void 0);i([t({type:String,reflect:!0})],a.prototype,"height",void 0);i([t({type:String,reflect:!0,attribute:"max-height"})],a.prototype,"maxHeight",void 0);i([t({type:String,attribute:"min-height"})],a.prototype,"minHeight",void 0);i([t({type:String,reflect:!0})],a.prototype,"sizing",void 0);i([t({type:String,reflect:!0})],a.prototype,"spacing",void 0);i([t({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);i([t({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);i([t({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);i([t({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);a=p=i([k("scb-calendar-card")],a);