scb-wc 0.1.11 → 0.1.13

package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-calendar-card/scb-calendar-card.js

@@ -1,346 +0,0 @@
-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);export{a as ScbCalendarCard};