scb-wc-test 0.1.117 → 0.1.118

package/scb-calendar/scb-calendar.js

@@ -0,0 +1,212 @@
+import { css as _, LitElement as w, html as i } from "lit";
+import { property as f, customElement as $ } 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;
+};
+let u = class extends w {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this._today = /* @__PURE__ */ new Date(), this._current = /* @__PURE__ */ new Date(), this._popupEvent = null;
+  }
+  _daysInMonth(t, e) {
+    return new Date(t, e + 1, 0).getDate();
+  }
+  _firstDayOfWeek(t, e) {
+    return new Date(t, e, 1).getDay();
+  }
+  _prevMonth() {
+    this._current = new Date(this._current.getFullYear(), this._current.getMonth() - 1, 1), this.requestUpdate();
+  }
+  _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();
+      };
+      window.addEventListener("mousedown", e, { once: !0 });
+    }, 0);
+  }
+  _closePopup() {
+    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 = [
+      "Januari",
+      "Februari",
+      "Mars",
+      "April",
+      "Maj",
+      "Juni",
+      "Juli",
+      "Augusti",
+      "September",
+      "Oktober",
+      "November",
+      "December"
+    ];
+    return i`
+      <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>
+      </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>
+      </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>
+      ` : ""}
+    `;
+  }
+};
+u.styles = _`
+    :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;
+    }
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+        border-bottom: 1px solid rgb(224, 224, 224);
+        padding-bottom: 8px;
+    }
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+    margin-bottom: 4px;
+    }
+    .calendar-grid-days{
+        font-weight: 600;
+        margin-bottom: 16px;
+    }
+    .calendar-weeks {
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+    .calendar-titles-wrapper{
+        display: grid;
+        gap: 4px;
+    }
+    .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;
+        flex-direction: column;
+    }
+    .calendar-day--other {
+      opacity: 0.4;
+    }
+    .calendar-day-number {
+      font-size: 1em;
+      line-height: 1.2;
+    }
+    .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%;
+    }
+    .calendar-day.today {
+      border: 1px solid var(--md-sys-color-primary);
+    }
+    .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%;
+    }
+    
+  `;
+b([
+  f({ type: String })
+], u.prototype, "label", 2);
+b([
+  f({ type: String })
+], u.prototype, "value", 2);
+u = b([
+  $("scb-calendar")
+], u);
+export {
+  u as ScbCalendar
+};