scb-wc-test 0.1.11 → 0.1.13

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

@@ -1,140 +1,179 @@
 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 c}from"../../vendor/preload-helper.js";import{b as h,n as d,i as g,x as p,t as u}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(a,r,i){try{customElements.get(a)||s(a,r,i)}catch(l){var o=String(l||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(t,s,a,r)=>{for(var i=r>1?void 0:r?v(s,a):s,o=t.length-1,l;o>=0;o--)(l=t[o])&&(i=(r?l(s,a,i):l(i))||i);return r&&i&&f(s,a,i),i};let e=class extends g{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.header="",this.subtitle="",this.supportingText="",this.cardHref="",this.showMedia=null}async firstUpdated(){e.__iconLoaded||(await c(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await c(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",a=this.cardHref?"clickable":"",r=new Date().getDate(),i=new Date().toLocaleString("default",{month:"short"}).replace(".","");return p`
+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";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(s,n,i){try{customElements.get(s)||l(s,n,i)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,l,s,n)=>{for(var i=n>1?void 0:n?v(l,s):l,o=t.length-1,d;o>=0;o--)(d=t[o])&&(i=(n?d(l,s,i):d(i))||i);return n&&i&&u(l,s,i),i};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(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",l=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",n=1,i="Jan";return c`
     <div
-      class="calendar-card ${s} ${a} ${t}"
+      class="calendar-card ${l} ${s} ${t}"
       role="${this.cardHref?"link":"group"}"
-      aria-label="${this.header||"Kalenderkort"}"
+      aria-label="${this.title||"Kalenderkort"}"
       tabindex="${this.cardHref?"0":"-1"}"
-      @click="${this.cardHref?()=>window.open(this.cardHref,"_self"):null}"
+      @click="${this.cardHref?this._handleHrefNavigation:null}"
       @keydown="${this.cardHref?this._onKeyDown:null}"
       style="cursor: ${this.cardHref?"pointer":"default"};"
     >
-      ${this.cardHref?p`<md-ripple></md-ripple>`:""}
-      ${this.showMedia?p`
-        <div class="media" aria-label="Datum: ${r} ${i}">
-          <div class="day">${r}</div>
+      ${this.cardHref?c`<md-ripple></md-ripple>`:""}
+      ${this.showMedia?c`
+        <div class="media" aria-label="Datum: ${n} ${i}">
+          <div class="day">${n}</div>
           <div class="month">${i}</div>
         </div>`:""}
       <div class="container">
         <div class="header-container">
-          <div class="header">${this.header}</div>
-          ${this.cardHref?p`<md-icon>arrow_forward</md-icon>`:""}
+          <div class="header">${this.title}</div>
+          ${this.cardHref?c`<md-icon>arrow_forward</md-icon>`:""}
         </div>
-        ${this.subtitle?p`<div class="subtitle">${this.subtitle}</div>`:""}
-        ${this.supportingText?p`<div class="supporting-text">${this.supportingText}</div>`:""}
+        ${this.subtitle?c`<div class="subtitle">${this.subtitle}</div>`:""}
+        ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
       </div>
     </div>
-  `}_onKeyDown(t){(t.key==="Enter"||t.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),t.preventDefault())}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
-  /* Grundläggande stilar för kortet */
-    :host {     
-        .calendar-card {
-            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;
-
-            &.vertical {
-                max-width: 360px;
-            }
-
-            &.horizontal {
-                flex-direction: row;
-                max-width: 576px;
-                gap: var(--spacing-spacing-6, 20px);
-            }
-
-            &.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);
-            }
-
-            &.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);
-                .media {
-                    background: var(--md-sys-color-surface, #FFF);
-                }
-            }           
-        }
-    }
-
-    /* Media-del */
-    .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);
-
-        .day {
-            font-size: var(--scale-07, 28px);
-            font-weight: var(--weight-bold, 700);
-            line-height: 100%;
-            letter-spacing: -0.6px;
-        }
-
-        .month {
-            font-size: var(--scale-02, 14px);
-            font-weight: var(--weight-regular, 400);
-            line-height: 100%; 
-        }
-    }
-
-     md-ripple {
-        border-radius: var(--radius-l, 16px);
-    }
-
-    /* Textstilar */
-    .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;
-    }
-
-    .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;
-    }
-
-    .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);
-    }
-    
-    .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);
-    }
-  `;n([d({type:String,reflect:!0})],e.prototype,"variant",2);n([d({type:String,reflect:!0})],e.prototype,"direction",2);n([d({type:String})],e.prototype,"header",2);n([d({type:String})],e.prototype,"subtitle",2);n([d({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);n([d({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);n([d({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);e=n([u("scb-calendar-card")],e);
+  `}_onKeyDown(t){(t.key==="Enter"||t.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),t.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; }
+
+  :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%;
+  }
+
+  .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.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);