scb-wc-test 0.1.11 → 0.1.13

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

@@ -1,190 +1,243 @@
-import { css as c, LitElement as h, html as d } from "lit";
-import { property as s, customElement as g } from "lit/decorators.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (i, n, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? f(n, o) : n, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (t = (r ? p(n, o, t) : p(t)) || t);
-  return r && t && v(n, o, t), t;
+import { css as p, LitElement as h, html as o } from "lit";
+import { property as i, customElement as f } from "lit/decorators.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (r, l, n, s) => {
+  for (var a = s > 1 ? void 0 : s ? v(l, n) : l, d = r.length - 1, c; d >= 0; d--)
+    (c = r[d]) && (a = (s ? c(l, n, a) : c(a)) || a);
+  return s && a && g(l, n, a), a;
 };
 let e = class extends h {
   constructor() {
-    super(...arguments), this.variant = "default", this.direction = "horizontal", this.header = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.showMedia = null;
+    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;
   }
-  // Ladda in md-icon + md-ripple on-demand (första gången komponenten mountas)
   async firstUpdated() {
     e.__iconLoaded || (await import("@material/web/icon/icon.js"), e.__iconLoaded = !0), e.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), e.__rippleLoaded = !0);
   }
   render() {
-    const i = this.variant ? `${this.variant.toLowerCase()}` : "", n = this.direction ? `${this.direction.toLowerCase()}` : "", o = this.cardHref ? "clickable" : "", r = (/* @__PURE__ */ new Date()).getDate(), t = (/* @__PURE__ */ new Date()).toLocaleString("default", { month: "short" }).replace(".", "");
-    return d`
+    const r = this.variant ? `${this.variant.toLowerCase()}` : "", l = this.direction ? `${this.direction.toLowerCase()}` : "", n = this.cardHref ? "clickable" : "", s = 1, a = "Jan";
+    return o`
     <div
-      class="calendar-card ${n} ${o} ${i}"
+      class="calendar-card ${l} ${n} ${r}"
       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 ? d`<md-ripple></md-ripple>` : ""}
-      ${this.showMedia ? d`
-        <div class="media" aria-label="Datum: ${r} ${t}">
-          <div class="day">${r}</div>
-          <div class="month">${t}</div>
+      ${this.cardHref ? o`<md-ripple></md-ripple>` : ""}
+      ${this.showMedia ? o`
+        <div class="media" aria-label="Datum: ${s} ${a}">
+          <div class="day">${s}</div>
+          <div class="month">${a}</div>
         </div>` : ""}
       <div class="container">
         <div class="header-container">
-          <div class="header">${this.header}</div>
-          ${this.cardHref ? d`<md-icon>arrow_forward</md-icon>` : ""}
+          <div class="header">${this.title}</div>
+          ${this.cardHref ? o`<md-icon>arrow_forward</md-icon>` : ""}
         </div>
-        ${this.subtitle ? d`<div class="subtitle">${this.subtitle}</div>` : ""}
-        ${this.supportingText ? d`<div class="supporting-text">${this.supportingText}</div>` : ""}
+        ${this.subtitle ? o`<div class="subtitle">${this.subtitle}</div>` : ""}
+        ${this.supportingText ? o`<div class="supporting-text">${this.supportingText}</div>` : ""}
       </div>
     </div>
   `;
   }
-  _onKeyDown(i) {
-    (i.key === "Enter" || i.key === " ") && this.cardHref && (window.open(this.cardHref, "_self"), i.preventDefault());
+  _onKeyDown(r) {
+    (r.key === "Enter" || r.key === " ") && this.cardHref && (window.open(this.cardHref, "_self"), r.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 = c`
-  /* 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);
-    }
+e.styles = p`
+  :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([
-  s({ type: String, reflect: !0 })
+t([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-a([
-  s({ type: String, reflect: !0 })
+t([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "direction", 2);
-a([
-  s({ type: String })
-], e.prototype, "header", 2);
-a([
-  s({ type: String })
+t([
+  i({ type: String })
+], e.prototype, "title", 2);
+t([
+  i({ type: String })
 ], e.prototype, "subtitle", 2);
-a([
-  s({ type: String, attribute: "supporting-text" })
+t([
+  i({ type: String, attribute: "supporting-text" })
 ], e.prototype, "supportingText", 2);
-a([
-  s({ type: String, attribute: "card-href" })
+t([
+  i({ type: String, attribute: "card-href" })
 ], e.prototype, "cardHref", 2);
-a([
-  s({ type: Boolean, reflect: !0, attribute: "show-media" })
+t([
+  i({ type: String, attribute: "card-href-nav" })
+], e.prototype, "cardHrefNav", 2);
+t([
+  i({ type: Boolean, reflect: !0, attribute: "show-media" })
 ], e.prototype, "showMedia", 2);
-e = a([
-  g("scb-calendar-card")
+t([
+  i({ type: Boolean, reflect: !0, attribute: "full-height" })
+], e.prototype, "fullHeight", 2);
+t([
+  i({ type: Boolean, reflect: !0, attribute: "full-width" })
+], e.prototype, "fullWidth", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "stretch", 2);
+e = t([
+  f("scb-calendar-card")
 ], e);
 export {
   e as ScbCalendarCard

package/scb-card/scb-card.d.ts

@@ -1,7 +1,4 @@
 import { LitElement } from 'lit';
-/**
- * Enkel kort-komponent för SCB-designsystemet
- */
 export declare class ScbCard extends LitElement {
     type: string;
     variant: string;
@@ -17,7 +14,15 @@ export declare class ScbCard extends LitElement {
     comments: number;
     likesText: string;
     likes: number;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    stretch: boolean;
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-card': ScbCard;
+    }
+}