scb-wc-test 0.1.23 → 0.1.24

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

@@ -1,198 +1,226 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
-import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(s,n,t){try{customElements.get(s)||o(s,n,t)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(i,o,s,n)=>{for(var t=n>1?void 0:n?v(o,s):o,l=i.length-1,d;l>=0;l--)(d=i[l])&&(t=(n?d(o,s,t):d(t))||t);return n&&t&&u(o,s,t),t};let e=class extends f{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}async firstUpdated(){e.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",o=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",n=1,t="Jan";return c`
-    <div
-      class="calendar-card ${o} ${s} ${i}"
-      role="${this.cardHref?"link":"group"}"
-      aria-label="${this.title||"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?c`<md-ripple></md-ripple>`:""}
-      ${this.showMedia?c`
-        <div class="media" aria-label="Datum: ${n} ${t}">
-          <div class="day">${n}</div>
-          <div class="month">${t}</div>
-        </div>`:""}
-      <div class="container">
-        <div class="header-container">
-          <div class="header">${this.title}</div>
-          ${this.cardHref?c`<md-icon>arrow_forward</md-icon>`:""}
+import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as g,x as c,t as m}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(n,o,a){try{customElements.get(n)||s(n,o,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,t=(i,s,n,o)=>{for(var a=o>1?void 0:o?y(s,n):s,l=i.length-1,d;l>=0;l--)(d=i[l])&&(a=(o?d(s,n,a):d(a))||a);return o&&a&&f(s,n,a),a};let e=class extends g{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch"}async firstUpdated(){e.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0),this.__applyInnerSizing()}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",n=this.cardHref?"clickable":"",o=1,a="Jan";return c`
+      <div
+        class="calendar-card ${s} ${n} ${i}"
+        role="${this.cardHref?"link":"group"}"
+        aria-label="${this.title||"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?c`<md-ripple></md-ripple>`:""}
+        ${this.showMedia?c`
+              <div class="media" aria-label="Datum: ${o} ${a}">
+                <div class="day">${o}</div>
+                <div class="month">${a}</div>
+              </div>
+            `:""}
+        <div class="container">
+          <div class="header-container">
+            <div class="header">${this.title}</div>
+            ${this.cardHref?c`<md-icon>arrow_forward</md-icon>`:""}
+          </div>
+          ${this.subtitle?c`<div class="subtitle">${this.subtitle}</div>`:""}
+          ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
         </div>
-        ${this.subtitle?c`<div class="subtitle">${this.subtitle}</div>`:""}
-        ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
       </div>
-    </div>
-    <md-focus-ring></md-focus-ring>
-  `}_onKeyDown(i){(i.key==="Enter"||i.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),i.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"))}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
-  :host {
-    display: block;
-    position: relative;
-    padding: var(--scb-calendar-card-focus-ring-gap, 4px);
-  }
-
-  :host([stretch]) { block-size: 100%; }
-  :host([stretch]) .calendar-card { block-size: 100%; }
-
-  :host([full-height]) { block-size: 100%; }
-  :host([full-height]) .calendar-card { block-size: 100%; }
-
-  :host([full-width]) { max-width: none; width: 100%; }
-  :host([full-width]) .calendar-card.horizontal,
-  :host([full-width]) .calendar-card.vertical {
-    max-width: none;
-    width: 100%;
-  }
-
-  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));
-  }
-  :host(:focus-within) 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, Inter);
-    font-style: normal;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-spacing-3, 8px);
-    align-self: stretch;
-    cursor: pointer;
-    transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
-  }
-
-  .calendar-card:focus,
-  .calendar-card:focus-visible { outline: none; }
-
-  .calendar-card.vertical {
-    max-width: var(--scb-calendar-card-max-w, 360px);
-  }
-
-  .calendar-card.horizontal {
-    flex-direction: row;
-    max-width: none;
-    width: 100%;
-    gap: var(--spacing-spacing-6, 20px);
-    min-block-size: 112px;
-  }
-
-  .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(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
-  }
-
-  .calendar-card.filled {
-    border-radius: var(--radius-large, 16px);
-    background: var(--md-sys-color-surface-dim, #F9F8EF);
-    padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
-  }
-
-  .calendar-card.filled .media {
-    background: var(--md-sys-color-surface, #FFF);
-  }
-
-  md-ripple { border-radius: var(--radius-l, 16px); }
-
-  .media {
-    display: flex;
-    width: var(--spacing-spacing-11, 64px);
-    min-width: var(--spacing-spacing-11, 64px);
-    max-width: var(--spacing-spacing-11, 64px);
-    height: var(--spacing-spacing-11, 64px);
-    padding: var(--spacing-spacing-0, 0) 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-spacing-2, 4px);
-    border-radius: var(--radius-small, 8px);
-    background: var(--md-sys-color-surface-dim, #F9F8EF);
-  }
-  .calendar-card.horizontal .media { align-self: center; }
-
-  .media .day {
-    font-size: var(--scale-07, 28px);
-    font-weight: var(--weight-bold, 700);
-    line-height: 100%;
-    letter-spacing: -0.6px;
-  }
-
-  .media .month {
-    font-size: var(--scale-02, 14px);
-    font-weight: var(--weight-regular, 400);
-    line-height: 100%;
-  }
-
-  .container {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-spacing-2, 4px);
-    width: 100%;
-  }
-
-  .header-container {
-    width: 100%;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding-top: var(--spacing-pacing-1, 2px);
-    color:inherit;
-    text-decoration: none;
-    min-block-size: 32px;
-  }
-
-  .header {
-    font-size: var(--md-sys-typescale-headline-small-size, 24px);
-    font-weight: var(--weight-bold, 700);
-    line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
-    letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
-    flex: 1 1 0;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .header-container md-icon {
-    inline-size: 20px;
-    block-size: 20px;
-    flex: 0 0 auto;
-  }
-
-  .subtitle {
-    font-size: var(--md-sys-typescale-title-medium-size, 18px);
-    font-weight: var(--weight-semibold, 600);
-    line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
-    letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .supporting-text {
-    font-size: var(--md-sys-typescale-body-large-size, 18px);
-    font-weight: var(--weight-regular, 400);
-    line-height: var(--md-sys-typescale-body-large-line-height, 26px);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  `;a([r({type:String,reflect:!0})],e.prototype,"variant",2);a([r({type:String,reflect:!0})],e.prototype,"direction",2);a([r({type:String})],e.prototype,"title",2);a([r({type:String})],e.prototype,"subtitle",2);a([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);a([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);a([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);a([r({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);a([r({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);a([r({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=a([g("scb-calendar-card")],e);
+      <md-focus-ring></md-focus-ring>
+    `}__applyInnerSizing(){const i=this.renderRoot.querySelector(".calendar-card");if(!i)return;this.width&&this.width.trim()!==""?(i.style.inlineSize="100%",i.style.maxInlineSize="100%"):(i.style.removeProperty("inline-size"),i.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?i.style.blockSize="100%":i.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?i.style.maxBlockSize="100%":i.style.removeProperty("max-block-size")}_onKeyDown(i){(i.key==="Enter"||i.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),i.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"))}updated(i){i.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),i.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),i.has("minWidth")&&(this.minWidth?this.style.minInlineSize=this.minWidth:this.style.removeProperty("min-inline-size")),i.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),i.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),i.has("minHeight")&&(this.minHeight?this.style.minBlockSize=this.minHeight:this.style.removeProperty("min-block-size")),(i.has("width")||i.has("height")||i.has("maxHeight")||i.has("sizing"))&&this.__applyInnerSizing()}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=p`
+    :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);
+    }
+
+    :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));
+    }
+    :host(:focus-within) 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, Inter);
+      font-style: normal;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-spacing-3, 8px);
+      align-self: stretch;
+      cursor: pointer;
+      transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
+
+      inline-size: 100%;
+      max-inline-size: 100%;
+    }
+
+    .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(--spacing-spacing-6, 20px);
+      min-block-size: 112px;
+    }
+
+    .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(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+    }
+
+    .calendar-card.filled {
+      border-radius: var(--radius-large, 16px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+    }
+
+    .calendar-card.filled .media {
+      background: var(--md-sys-color-surface, #FFF);
+    }
+
+    md-ripple { border-radius: var(--radius-l, 16px); }
+
+    .media {
+      display: flex;
+      width: var(--spacing-spacing-11, 64px);
+      min-width: var(--spacing-spacing-11, 64px);
+      max-width: var(--spacing-spacing-11, 64px);
+      height: var(--spacing-spacing-11, 64px);
+      padding: var(--spacing-spacing-0, 0) 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-spacing-2, 4px);
+      border-radius: var(--radius-small, 8px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+    }
+
+    .calendar-card.horizontal .media { align-self: flex-start; }
+
+    .media .day {
+      font-size: var(--scale-07, 28px);
+      font-weight: var(--weight-bold, 700);
+      line-height: 100%;
+      letter-spacing: -0.6px;
+    }
+
+    .media .month {
+      font-size: var(--scale-02, 14px);
+      font-weight: var(--weight-regular, 400);
+      line-height: 100%;
+    }
+
+    .container {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-spacing-2, 4px);
+      width: 100%;
+      align-self: flex-start;
+    }
+
+    .header-container {
+      width: 100%;
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding-top: var(--spacing-pacing-1, 2px);
+      color: inherit;
+      text-decoration: none;
+      min-block-size: 32px;
+    }
+
+    .header {
+      font-size: var(--md-sys-typescale-headline-small-size, 24px);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
+      letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+      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;
+    }
+
+    .header-container md-icon {
+      inline-size: 20px;
+      block-size: 20px;
+      flex: 0 0 auto;
+    }
+
+    .subtitle {
+      font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .supporting-text {
+      font-size: var(--md-sys-typescale-body-large-size, 18px);
+      font-weight: var(--weight-regular, 400);
+      line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+      letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+
+      overflow: visible;
+      text-overflow: clip;
+    }
+  `;t([r({type:String,reflect:!0})],e.prototype,"variant",2);t([r({type:String,reflect:!0})],e.prototype,"direction",2);t([r({type:String})],e.prototype,"title",2);t([r({type:String})],e.prototype,"subtitle",2);t([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);t([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);t([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);t([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);t([r({type:String})],e.prototype,"width",2);t([r({type:String,attribute:"max-width"})],e.prototype,"maxWidth",2);t([r({type:String,attribute:"min-width"})],e.prototype,"minWidth",2);t([r({type:String})],e.prototype,"height",2);t([r({type:String,attribute:"max-height"})],e.prototype,"maxHeight",2);t([r({type:String,attribute:"min-height"})],e.prototype,"minHeight",2);t([r({type:String,reflect:!0})],e.prototype,"sizing",2);e=t([m("scb-calendar-card")],e);