scb-wc-test 0.1.119 → 0.1.121

package/scb-calendar/scb-calendar-event.js

@@ -1,42 +1,43 @@
-import { css as c, LitElement as d, html as f } from "lit";
-import { property as l, customElement as h } from "lit/decorators.js";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (a, r, i, s) => {
-  for (var t = s > 1 ? void 0 : s ? m(r, i) : r, o = a.length - 1, n; o >= 0; o--)
-    (n = a[o]) && (t = (s ? n(r, i, t) : n(t)) || t);
-  return s && t && v(r, i, t), t;
+import { css as u, LitElement as d, html as c } from "lit";
+import { property as i, customElement as y } from "lit/decorators.js";
+var b = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (t, e, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? h(e, n) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (r = (a ? l(e, n, r) : l(r)) || r);
+  return a && r && b(e, n, r), r;
 };
-let e = class extends d {
+let s = class extends d {
   constructor() {
-    super(...arguments), this.title = "", this.date = "", this.description = "";
+    super(...arguments), this.title = "", this.description = "", this.startDate = "", this.endDate = "";
+  }
+  updated(t) {
+    var e;
+    (e = super.updated) == null || e.call(this, t), (t.has("title") || t.has("description") || t.has("startDate") || t.has("endDate")) && this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   render() {
-    return f`
-      <div>
-        <h3>${this.title}</h3>
-        <p>${this.date}</p>
-        <p>${this.description}</p>
-      </div>
+    return c`
     `;
   }
 };
-e.styles = c`
+s.styles = u`
     :host {
       display: block;
-      font-family: var(--brand-font, Arial, sans-serif)
     }
     `;
 p([
-  l({ type: String })
-], e.prototype, "title", 2);
+  i({ type: String })
+], s.prototype, "title", 2);
+p([
+  i({ type: String })
+], s.prototype, "description", 2);
 p([
-  l({ type: String })
-], e.prototype, "date", 2);
+  i({ type: String, attribute: "start-date" })
+], s.prototype, "startDate", 2);
 p([
-  l({ type: String })
-], e.prototype, "description", 2);
-e = p([
-  h("scb-calendar-event")
-], e);
+  i({ type: String, attribute: "end-date" })
+], s.prototype, "endDate", 2);
+s = p([
+  y("scb-calendar-event")
+], s);
 export {
-  e as ScbCalendarEvent
+  s as ScbCalendarEvent
 };

package/scb-calendar/scb-calendar.d.ts

@@ -1,8 +1,11 @@
 import { LitElement } from 'lit';
 export declare class ScbCalendar extends LitElement {
-    label: string;
-    value: string;
+    lang: string;
     static styles: import('lit').CSSResult;
+    private _mutationObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onEventChanged;
     private _today;
     private _current;
     private _popupEvent;

package/scb-calendar/scb-calendar.js

@@ -1,21 +1,35 @@
-import { css as _, LitElement as w, html as i } from "lit";
-import { property as f, customElement as $ } from "lit/decorators.js";
+import { css as k, LitElement as S, html as m } from "lit";
+import { property as O, customElement as C } from "lit/decorators.js";
 import "./scb-calendar-event.js";
 import "../scb-icon-button/scb-icon-button.js";
-var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, b = (t, e, o, s) => {
-  for (var a = s > 1 ? void 0 : s ? D(e, o) : e, c = t.length - 1, d; c >= 0; c--)
-    (d = t[c]) && (a = (s ? d(e, o, a) : d(a)) || a);
-  return s && a && M(e, o, a), a;
+import "../scb-dialog/scb-dialog.js";
+import "../scb-list/scb-list.js";
+import "@material/web/focus/md-focus-ring.js";
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, x = (l, a, h, g) => {
+  for (var p = g > 1 ? void 0 : g ? P(a, h) : a, i = l.length - 1, f; i >= 0; i--)
+    (f = l[i]) && (p = (g ? f(a, h, p) : f(p)) || p);
+  return g && p && A(a, h, p), p;
 };
-let u = class extends w {
+let w = class extends S {
   constructor() {
-    super(...arguments), this.label = "", this.value = "", this._today = /* @__PURE__ */ new Date(), this._current = /* @__PURE__ */ new Date(), this._popupEvent = null;
+    super(...arguments), this.lang = "sv", this._mutationObserver = null, this._onEventChanged = () => {
+      this.requestUpdate();
+    }, this._today = /* @__PURE__ */ new Date(), this._current = /* @__PURE__ */ new Date(), this._popupEvent = null;
   }
-  _daysInMonth(t, e) {
-    return new Date(t, e + 1, 0).getDate();
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("change", this._onEventChanged), this._mutationObserver = new MutationObserver(() => {
+      this.requestUpdate();
+    }), this._mutationObserver.observe(this, { childList: !0 });
   }
-  _firstDayOfWeek(t, e) {
-    return new Date(t, e, 1).getDay();
+  disconnectedCallback() {
+    this.removeEventListener("change", this._onEventChanged), super.disconnectedCallback(), this._mutationObserver && (this._mutationObserver.disconnect(), this._mutationObserver = null);
+  }
+  _daysInMonth(l, a) {
+    return new Date(l, a + 1, 0).getDate();
+  }
+  _firstDayOfWeek(l, a) {
+    const h = new Date(l, a, 1).getDay();
+    return h === 0 ? 6 : h - 1;
   }
   _prevMonth() {
     this._current = new Date(this._current.getFullYear(), this._current.getMonth() - 1, 1), this.requestUpdate();
@@ -23,57 +37,38 @@ let u = class extends w {
   _nextMonth() {
     this._current = new Date(this._current.getFullYear(), this._current.getMonth() + 1, 1), this.requestUpdate();
   }
-  _showEventPopup(t) {
-    this._popupEvent = t, this.requestUpdate(), setTimeout(() => {
-      const e = (o) => {
-        var s;
-        (s = o.target) != null && s.closest(".event-popup") || this._closePopup();
+  _showEventPopup(l) {
+    this._popupEvent = l, this.requestUpdate(), setTimeout(() => {
+      var g;
+      const a = (g = this.shadowRoot) == null ? void 0 : g.querySelector("scb-dialog");
+      a && a.setAttribute("open", "");
+      const h = (p) => {
+        var i;
+        (i = p.target) != null && i.closest(".event-popup") || this._closePopup();
       };
-      window.addEventListener("mousedown", e, { once: !0 });
+      window.addEventListener("mousedown", h, { once: !0 });
     }, 0);
   }
   _closePopup() {
-    this._popupEvent = null, this.requestUpdate();
+    var a;
+    const l = (a = this.shadowRoot) == null ? void 0 : a.querySelector("scb-dialog");
+    l && l.removeAttribute("open"), this._popupEvent = null, this.requestUpdate();
   }
   render() {
-    const t = this._current.getFullYear(), e = this._current.getMonth(), o = this._daysInMonth(t, e), s = this._firstDayOfWeek(t, e), a = this._today, c = Array.from(this.querySelectorAll("scb-calendar-event")), d = /* @__PURE__ */ new Map();
-    for (const r of c)
-      if (r.date && r.title) {
-        const p = d.get(r.date) || [];
-        p.push({ title: r.title, description: r.description }), d.set(r.date, p);
-      }
-    const m = [];
-    let l = 1;
-    for (let r = 0; r < 6; r++) {
-      const p = [];
-      for (let h = 0; h < 7; h++)
-        if (r === 0 && h < s) {
-          const g = e === 0 ? 11 : e - 1, y = e === 0 ? t - 1 : t, v = this._daysInMonth(y, g) - (s - h - 1);
-          p.push(i`
-            <div class="calendar-day calendar-day--other">
-              <span class="calendar-day-number">${v}</span>
-            </div>
-          `);
-        } else if (l > o)
-          p.push(i`<div></div>`);
-        else {
-          const g = a.getFullYear() === t && a.getMonth() === e && a.getDate() === l, y = `${t}-${String(e + 1).padStart(2, "0")}-${String(l).padStart(2, "0")}`, n = d.get(y) || [];
-          p.push(i`
-            <div
-              class="calendar-day${g ? " today" : ""}${n.length ? " has-event" : ""}"
-              @click=${n.length ? () => this._showEventPopup({ date: y, events: n }) : null}
-              title=${n.length === 1 ? n[0].title : n.length > 1 ? n.map((v) => v.title).join(", ") : ""}
-            >
-              <span class="calendar-day-number">${l}</span>
-              <div class="calendar-titles-wrapper">
-              ${n.map((v) => i`<span class="calendar-day-event-title">${v.title}</span>`)}
-              </div>
-            </div>
-          `), l++;
-        }
-      if (m.push(i`<div class="calendar-grid">${p}</div>`), l > o) break;
-    }
-    const x = [
+    const l = this._current.getFullYear(), a = this._current.getMonth(), h = this._daysInMonth(l, a), g = this._firstDayOfWeek(l, a), p = this._today, i = this.lang === "en", f = i ? [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ] : [
       "Januari",
       "Februari",
       "Mars",
@@ -86,59 +81,138 @@ let u = class extends w {
       "Oktober",
       "November",
       "December"
-    ];
-    return i`
+    ], E = i ? ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] : ["Mån", "Tis", "Ons", "Tor", "Fre", "Lör", "Sön"], M = Array.from(this.querySelectorAll("scb-calendar-event")), T = /* @__PURE__ */ new Map();
+    for (const e of M) {
+      const r = e.getAttribute("start-date") || "", o = e.getAttribute("end-date") || "";
+      if (r && o) {
+        const d = new Date(r), n = new Date(o);
+        for (let s = new Date(d); s <= n; s.setDate(s.getDate() + 1)) {
+          const u = s.toISOString().split("T")[0], t = T.get(u) || [];
+          t.push({
+            title: e.title,
+            description: e.description,
+            start: r,
+            end: o
+          }), T.set(u, t);
+        }
+      } else if (r && e.title) {
+        const d = r.split("T")[0], n = T.get(d) || [];
+        n.push({ title: e.title, description: e.description, start: r }), T.set(d, n);
+      }
+    }
+    const $ = [];
+    let y = 1;
+    for (let e = 0; e < 6; e++) {
+      const r = [];
+      for (let o = 0; o < 7; o++)
+        if (e === 0 && o < g) {
+          const d = a === 0 ? 11 : a - 1, n = a === 0 ? l - 1 : l, u = this._daysInMonth(n, d) - (g - o - 1);
+          r.push(m`
+            <div class="calendar-day calendar-day--other">
+              <span class="calendar-day-number">${u}</span>
+            </div>
+          `);
+        } else if (y > h)
+          r.push(m`<div></div>`);
+        else {
+          const d = p.getFullYear() === l && p.getMonth() === a && p.getDate() === y, n = `${l}-${String(a + 1).padStart(2, "0")}-${String(y).padStart(2, "0")}`;
+          let s = T.get(n) || [];
+          s = [...s].sort((t, c) => {
+            const b = t.start && n === t.start.split("T")[0] ? t.start : t.end && n === t.end.split("T")[0] ? t.end : "", v = c.start && n === c.start.split("T")[0] ? c.start : c.end && n === c.end.split("T")[0] ? c.end : "", _ = b && b.includes("T"), D = v && v.includes("T");
+            return _ && D ? b.localeCompare(v) : _ ? -1 : D ? 1 : t.title.localeCompare(c.title);
+          });
+          const u = [...s].map((t) => {
+            let c = "", b = "";
+            if (t.start && t.end) {
+              const v = t.start.split("T")[0], _ = t.end.split("T")[0];
+              n === v && n === _ && t.start.includes("T") && t.end.includes("T") ? c = t.start.split("T")[1].substring(0, 5) + "–" + t.end.split("T")[1].substring(0, 5) : n === v && t.start.includes("T") ? c = t.start.split("T")[1].substring(0, 5) : n === _ && t.end.includes("T") ? (c = t.end.split("T")[1].substring(0, 5), b = i ? "cont. " : "fort. ") : n !== v && (c = "", b = i ? "cont. " : "fort. ");
+            } else t.start && t.start.includes("T") && (c = t.start.split("T")[1].substring(0, 5));
+            return { ...t, time: c, prefix: b };
+          });
+          r.push(m`
+            <div
+              class="calendar-day${d ? " today" : ""}${s.length ? " has-event" : ""}"
+              ?tabindex=${s.length ? 0 : void 0}
+              @click=${s.length ? () => this._showEventPopup({ date: n, events: s }) : null}
+              tabindex=${s.length ? "0" : void 0}
+              @keydown=${s.length ? (t) => {
+            (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._showEventPopup({ date: n, events: s }));
+          } : null}
+              title=${s.length === 1 ? s[0].title : s.length > 1 ? s.map((t) => t.title).join(", ") : ""}
+              role=${s.length ? "button" : void 0}
+              aria-label=${s.length ? s.length === 1 ? s[0].title : s.map((t) => t.title).join(", ") : void 0}
+            >
+              <md-focus-ring inward></md-focus-ring>
+              <span class="calendar-day-number">${y}</span>
+              <div class="calendar-titles-wrapper">
+              ${u.map((t) => m`<span class="calendar-day-event-title">${t.prefix || ""}${t.title}</span>`)}
+              </div>
+            </div>
+          `), y++;
+        }
+      if ($.push(m`<div class="calendar-grid">${r}</div>`), y > h) break;
+    }
+    return m`
       <div class="calendar-header">
-        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="Föregående månad"></scb-icon-button>
-        <span>${x[e]} ${t}</span>
-        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="Nästa månad"></scb-icon-button>
+        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="${i ? "Previous month" : "Föregående månad"}"></scb-icon-button>
+        <span>${f[a]} ${l}</span>
+        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="${i ? "Next month" : "Nästa månad"}"></scb-icon-button>
       </div>
       <div class="calendar-grid calendar-grid-days">
-        <div>Mån</div><div>Tis</div><div>Ons</div><div>Tor</div><div>Fre</div><div>Lör</div><div>Sön</div>
+        ${E.map((e) => m`<div>${e}</div>`)}
       </div>
       <div class="calendar-weeks">
-      ${m}
-      <div>
-      ${this._popupEvent && Array.isArray(this._popupEvent.events) ? i`
-        <div class="event-popup-backdrop" @click=${this._closePopup}></div>
-        <div class="event-popup">
-          <button class="close-btn" @click=${this._closePopup} title="Stäng">×</button>
-          <div>${this._popupEvent.date}</div>
-          <ul>
-            ${this._popupEvent.events.map((r) => i`<li><strong>${r.title}</strong>${r.description ? i`<div>${r.description}</div>` : ""}</li>`)}
-          </ul>
-        </div>
+      ${$}
+      </div>
+      ${this._popupEvent && Array.isArray(this._popupEvent.events) ? m`
+        <scb-dialog variant="floating" open label="${i ? "Events" : "Händelser"} ${this._popupEvent.date}">
+          <scb-list>
+            ${[...this._popupEvent.events].sort((e, r) => {
+      const o = e.start && e.start.includes("T") ? e.start : e.end && e.end.includes("T") ? e.end : "", d = r.start && r.start.includes("T") ? r.start : r.end && r.end.includes("T") ? r.end : "", n = o && o.includes("T"), s = d && d.includes("T");
+      return n && s ? o.localeCompare(d) : n ? -1 : s ? 1 : e.title.localeCompare(r.title);
+    }).map((e) => {
+      var s;
+      const r = ((s = this._popupEvent) == null ? void 0 : s.date) ?? "";
+      let o = "", d = "", n = "";
+      if (e.start && e.end) {
+        const u = e.start.split("T")[0], t = e.end.split("T")[0];
+        u === t && e.start.includes("T") && e.end.includes("T") ? o = e.start.split("T")[1].substring(0, 5) + " – " + e.end.split("T")[1].substring(0, 5) : r === u && e.start.includes("T") && (o = "Start: " + e.start.split("T")[1].substring(0, 5) + (i ? " (Extended event) " : " (Flerdagsevenemang) ")), r === t && e.end.includes("T") && u !== t && (n = (i ? "End: " : "Slut: ") + e.end.split("T")[1].substring(0, 5)), r !== u && (d = i ? "cont. " : "fort. ");
+      } else e.start && e.start.includes("T") && (o = e.start.split("T")[1].substring(0, 5));
+      return m`
+                <scb-list-item label="${d}${e.title}" supporting-text="${e.description ? e.description : ""}" overline="${o || ""}${n || ""}">
+                </scb-list-item>`;
+    })}
+          </scb-list>
+        </scb-dialog>
       ` : ""}
     `;
   }
 };
-u.styles = _`
+w.styles = k`
     :host {
-      display: block;
-      font-family: var(--brand-font, Arial, sans-serif);
-      background: var(--md-sys-color-surface, #fff);
-      color: var(--md-sys-color-on-surface, #222);
-      border-radius: 12px;
-      border: var(--scb-elevation-2, 0 2px 8px rgba(0,0,0,0.08));
-      padding: 16px;
+        display: block;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        padding: var(--spacing-5);
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface);
     }
     .calendar-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-5);
         border-bottom: 1px solid rgb(224, 224, 224);
-        padding-bottom: 8px;
+        padding-bottom: var(--spacing-3);
     }
     .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 4px;
-    margin-bottom: 4px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--spacing-2);
+        margin-bottom: var(--spacing-2);
     }
     .calendar-grid-days{
         font-weight: 600;
-        margin-bottom: 16px;
+        margin-bottom: var(--spacing-5);
     }
     .calendar-weeks {
         display: grid;
@@ -146,67 +220,66 @@ u.styles = _`
     }
     .calendar-titles-wrapper{
         display: grid;
-        gap: 4px;
+        gap: var(--spacing-2);
     }
     .calendar-day {
-      border-radius: 6px;
-      min-height: 3.2em;
-      display: flex;
-      padding: 8px;
-      box-sizing: border-box;
-      overflow: hidden;
-        gap: 8px;
-        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        min-height: 50px;
+        display: flex;
+        padding: var(--spacing-3);
+        box-sizing: border-box;
+        overflow: hidden;
+        gap: var(--spacing-3);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
         flex-direction: column;
     }
+    .calendar-day.has-event:focus {
+        outline: none;
+    }
+    md-focus-ring {
+        border-radius: 6px;
+    }
     .calendar-day--other {
-      opacity: 0.4;
+        opacity: 0.4;
     }
     .calendar-day-number {
-      font-size: 1em;
-      line-height: 1.2;
+        font-size:  var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height); /* vissa tabeller i Figma visar 21 */
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
     }
     .calendar-day-event-title {
-      font-size: 12px;
-      color: var(--md-sys-color-primary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: block;
-      width: 100%;
+        font-size: 12px;
+        color: var(--md-sys-color-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
     }
     .calendar-day.today {
-      border: 1px solid var(--md-sys-color-primary);
+        background: var(--md-sys-color-secondary-container);
+      
     }
     .calendar-day.has-event {
         cursor: pointer;
-      border: 2px solid var(--md-sys-color-primary);
-      position: relative;
-    }
-    .event-popup {
-      position: fixed;
-      z-index: 1000;
-      background: #fff;
-      color: #222;
-      border-radius: 10px;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
-      min-width: 220px;
-      max-width: 320px;
-      padding: 16px 20px 16px 20px;
-      top: 30%;
-      left: 50%;
+        position: relative;
+        border: 1px solid var(--md-sys-color-primary);
+    }
+
+    .event-popup-list{
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-4);
     }
     
   `;
-b([
-  f({ type: String })
-], u.prototype, "label", 2);
-b([
-  f({ type: String })
-], u.prototype, "value", 2);
-u = b([
-  $("scb-calendar")
-], u);
+x([
+  O({ type: String })
+], w.prototype, "lang", 2);
+w = x([
+  C("scb-calendar")
+], w);
 export {
-  u as ScbCalendar
+  w as ScbCalendar
 };