scb-wc 0.1.2 → 0.1.4

package/scb-datepicker/scb-datepicker.js

@@ -0,0 +1,470 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-divider/scb-divider.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-datepicker/scb-datepicker.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "date", this.lang = "sv", this.selectedValue = "", this.open = !0, this._selectedHour = 0, this._selectedMinute = 0, this._viewportMargin = 8, this._popupOffset = 4, this._onWindowReposition = () => {
+			this._positionPopupWithinViewport();
+		}, this._monthNames = [
+			this.lang == "sv" ? "Januari" : "January",
+			this.lang == "sv" ? "Februari" : "February",
+			this.lang == "sv" ? "Mars" : "March",
+			(this.lang, "April"),
+			this.lang == "sv" ? "Maj" : "May",
+			this.lang == "sv" ? "Juni" : "June",
+			this.lang == "sv" ? "Juli" : "July",
+			this.lang == "sv" ? "Augusti" : "August",
+			(this.lang, "September"),
+			this.lang == "sv" ? "Oktober" : "October",
+			(this.lang, "November"),
+			(this.lang, "December")
+		], this._outsideClickHandler = (e) => {
+			this.open && (e.composedPath().includes(this) || this._close());
+		}, this._prevMonth = () => {
+			let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+			t === 0 ? this._currentDate = new Date(e - 1, 11, 1) : this._currentDate = new Date(e, t - 1, 1);
+		}, this._prevYear = () => {
+			let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+			this._currentDate = new Date(e - 1, t, 1);
+		}, this._nextMonth = () => {
+			let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+			t === 11 ? this._currentDate = new Date(e + 1, 0, 1) : this._currentDate = new Date(e, t + 1, 1);
+		}, this._nextYear = () => {
+			let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+			this._currentDate = new Date(e + 1, t, 1);
+		}, this._onTimeChange = (e) => {
+			let [t, n] = e.target.value.split(":"), r = parseInt(t, 10), i = parseInt(n, 10);
+			this._selectedHour = isNaN(r) ? 0 : Math.max(0, Math.min(23, r)), this._selectedMinute = isNaN(i) ? 0 : Math.max(0, Math.min(59, i)), this._fireDateTimeChange();
+		}, this._close = () => {
+			this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	_isRenderedInsideDialog() {
+		let e = this.getRootNode(), t = e instanceof ShadowRoot ? e.host : null;
+		return t instanceof HTMLElement && t.closest("scb-dialog") ? !0 : !!this.closest("scb-dialog");
+	}
+	_positionPopupWithinViewport() {
+		if (!this.open) return;
+		let e = this.renderRoot.querySelector(".datepicker-popup");
+		if (!e) return;
+		let t = this.parentElement?.getBoundingClientRect();
+		if (!t) return;
+		let n = window.innerWidth, r = window.innerHeight, i = Math.max(220, n - this._viewportMargin * 2);
+		if (this._isRenderedInsideDialog()) {
+			let a = Math.min(e.offsetWidth || 380, i), o = e.offsetHeight || 420, s = (n - a) / 2, c = (r - o) / 2, l = s - t.left, u = c - t.top;
+			this.style.setProperty("--scb-datepicker-position", "absolute"), this.style.setProperty("--scb-datepicker-top", `${u}px`), this.style.setProperty("--scb-datepicker-bottom", "auto"), this.style.setProperty("--scb-datepicker-left", `${l}px`), this.style.setProperty("--scb-datepicker-transform", "none"), this.style.setProperty("--scb-datepicker-computed-width", `${a}px`), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(220, r - this._viewportMargin * 2)}px`);
+			return;
+		}
+		let a = Math.min(e.offsetWidth || 380, i), o = e.offsetHeight || 420, s = Math.min(Math.max(t.left, this._viewportMargin), n - this._viewportMargin - a) - t.left, c = r - t.bottom - this._viewportMargin, l = t.top - this._viewportMargin, u = c < o + this._popupOffset && l > c;
+		this.style.setProperty("--scb-datepicker-position", "absolute"), this.style.setProperty("--scb-datepicker-computed-width", `${a}px`), this.style.setProperty("--scb-datepicker-left", "0"), this.style.setProperty("--scb-datepicker-transform", `translateX(${s}px)`), u ? (this.style.setProperty("--scb-datepicker-top", "auto"), this.style.setProperty("--scb-datepicker-bottom", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, l - this._popupOffset)}px`)) : (this.style.setProperty("--scb-datepicker-top", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-bottom", "auto"), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, c - this._popupOffset)}px`));
+	}
+	static {
+		this.styles = [n`
+    :host {
+        --scb-datepicker-width: 380px;
+      --scb-datepicker-z-index: 1100;
+      --scb-datepicker-viewport-margin: 8px;
+      --scb-datepicker-offset: var(--spacing-2, 4px);
+        max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
+        font-family: var(--brand-font);
+        color: var(--md-sys-color-on-surface);
+      display: block;
+      position: var(--scb-datepicker-position, absolute);
+      top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
+      bottom: var(--scb-datepicker-bottom, auto);
+      left: var(--scb-datepicker-left, 0);
+      width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
+      transform: var(--scb-datepicker-transform, translateX(0px));
+      z-index: var(--scb-datepicker-z-index);
+    }
+    .month-selector, .year-selector {
+      display: flex;
+      align-items: center;
+      &.disable{
+        pointer-events: none;
+        opacity: 0.3;
+        scb-icon-button{
+            visibility: hidden;
+        }
+      }
+        &.open{
+            scb-icon-button{
+                visibility: hidden;
+            }
+            .dropdown-selected{
+                background: var(--md-sys-color-secondary-container);
+            }
+        }
+    }
+    .dropdown-selected {
+        position: relative;
+        border-radius: 8px;
+        font-size: 16px;
+        cursor: pointer;
+        text-align: left;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 4px 8px;
+    }
+    .dropdown-selected:focus {
+      outline: none;
+    }
+    .dropdown-selected md-focus-ring {
+        border-radius: 8px;
+    }
+    .dropdown-list {
+      position: relative;
+      background: var(--md-sys-color-surface);
+      padding: 4px 0;
+    }
+    .dropdown-item {
+        display: flex;
+        position: relative;
+        cursor: pointer;
+        padding: var(--spacing-3) 56px;
+        min-height: 40px;
+        align-items: center;
+    }
+    .dropdown-item:focus-within {
+      outline: none;
+    }
+    .dropdown-item md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    .dropdown-item.selected {
+      background: var(--md-sys-color-secondary-container, #e3f2fd);
+      font-weight: 500;
+      padding-left: 16px;
+        gap: 16px;
+    }
+      .datepicker-popup {
+        background: var(--md-sys-color-surface);
+        border-radius: var(--md-sys-shape-corner-small);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+        max-width: 100%;
+        width: 100%;
+        max-height: var(--scb-datepicker-max-height, 80vh);
+        overflow: auto;
+        font-family: var(--brand-font);
+      }
+      .datepicker-content{
+        overflow-y: auto;
+        max-height: 290px;
+      }
+      		.datepicker-content::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+			.datepicker-content::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: var(--md-sys-shape-corner-small);
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.datepicker-content::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+      .popup {
+        position:absolute;
+        top:0;
+        left:0;
+        z-index:1;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        padding: 20px 16px 0px 16px;
+        flex-wrap: wrap;
+      }
+      .datepicker-footer{
+        padding: 8px 16px 24px 16px;
+      }
+      .month-label {
+        font-size: 18px;
+        font-weight: 500;
+      }
+      .datepicker-calendar{
+        padding: 0 16px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 8px;
+      }
+      th {
+        color: var(--md-sys-color-on-surface-variant, #757575);
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 20px;
+      }
+      td {
+        text-align: center;
+      }
+
+      .day:focus-within{
+        outline: none;
+      }
+      .day {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: none;
+        background: none;
+        font-size: 16px;
+        cursor: pointer;
+        font-family: 'Inter';
+        align-content: center;
+      }
+      .day.selected {
+        background: var(--md-sys-color-secondary-container);
+      }
+      .close-datepicker {
+        margin-top: 8px;
+        background: none;
+        border-color: none;
+        color: var(--md-sys-color-primary, #0057b8);
+        font-size: 16px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 8px;
+      }
+      .close-datepicker:hover {
+        background: var(--md-sys-color-primary-container, #e3f2fd);
+      }
+    `];
+	}
+	updated(e) {
+		if (super.updated(e), this.open ? (window.addEventListener("mousedown", this._outsideClickHandler), window.addEventListener("resize", this._onWindowReposition, { passive: !0 }), window.addEventListener("scroll", this._onWindowReposition, {
+			passive: !0,
+			capture: !0
+		}), requestAnimationFrame(() => this._positionPopupWithinViewport())) : (window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0)), e.has("selectedValue") && this.selectedValue) {
+			let e = new Date(this.selectedValue);
+			isNaN(e.getTime()) || (this._selectedDate = e, this._currentDate = new Date(e.getFullYear(), e.getMonth(), 1), this.variant === "datetime-local" && (this._selectedHour = e.getHours(), this._selectedMinute = e.getMinutes()));
+		}
+		this.open && requestAnimationFrame(() => this._positionPopupWithinViewport());
+	}
+	disconnectedCallback() {
+		window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0), super.disconnectedCallback();
+	}
+	render() {
+		if (!this.open) return r``;
+		let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), n = /* @__PURE__ */ new Date(), i = this._getMonthDays(e, t), a = Array.from({ length: 101 }, (e, t) => n.getFullYear() - 50 + t), o = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
+		return r`
+      <div class="datepicker-popup popup">
+        <div class="header">
+            <div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang == "sv" ? "Föregående månad" : "Previous month"}></scb-icon-button>
+                <div class="custom-dropdown month-dropdown">
+                      <div
+                        tabindex=${this._showYearDropdown ? -1 : 0}
+                        class="dropdown-selected"
+                        @click=${() => this._toggleMonthDropdown()}
+                        @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleMonthDropdown());
+		}}
+                      >
+                        ${this._monthNames[t].slice(0, 3)}
+                        <md-icon>arrow_drop_down</md-icon>
+                        <md-focus-ring></md-focus-ring>
+                        <md-ripple></md-ripple>
+                      </div>
+                </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang == "sv" ? "Nästa månad" : "Next month"}></scb-icon-button>
+            </div>
+            <div class="year-selector ${this._showMonthDropdown ? "disable" : ""} ${this._showYearDropdown ? "open" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang == "sv" ? "Föregående år" : "Previous year"}></scb-icon-button>
+                    <div class="custom-dropdown year-dropdown">
+                        <div
+                          tabindex=${this._showMonthDropdown ? -1 : 0}
+                          class="dropdown-selected"
+                          @click=${() => this._toggleYearDropdown()}
+                          @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleYearDropdown());
+		}}
+                        >
+                          ${e}
+                          <md-icon>arrow_drop_down</md-icon>
+                          <md-focus-ring></md-focus-ring>
+                          <md-ripple></md-ripple>
+                        </div>
+                    </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
+            </div>
+        </div>
+        ${this._showMonthDropdown || this._showYearDropdown ? r`<scb-divider></scb-divider>` : ""}
+        <div class="datepicker-content" style="position:relative;">
+          ${this._showMonthDropdown ? r`
+            <div class="dropdown-list">
+              ${this._monthNames.map((e, n) => r`
+                <div
+                    @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onMonthChangeCustom(n));
+		}}
+                  tabindex="0"
+                  class="dropdown-item${n === t ? " selected" : ""}"
+                  @click=${() => this._onMonthChangeCustom(n)}
+                  id=${n === t ? "selected-month" : ""}
+                >
+                ${n === t ? r`<md-icon>check</md-icon>` : ""}
+                  ${e}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${this._showYearDropdown ? r`
+            <div class="dropdown-list">
+              ${a.map((t) => r`
+                <div
+                @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onYearChangeCustom(t));
+		}}
+                  tabindex="0"
+                  class="dropdown-item${t === e ? " selected" : ""}"
+                  @click=${() => this._onYearChangeCustom(t)}
+                  id=${t === e ? "selected-year" : ""}
+                >
+                ${t === e ? r`<md-icon>check</md-icon>` : ""}
+                  ${t}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${!this._showMonthDropdown && !this._showYearDropdown ? r`
+            <div class="datepicker-calendar">
+            <table>
+              <thead>
+                <tr>
+                  <th>${this.lang == "sv" ? "Må" : "Mo"}</th><th>${this.lang == "sv" ? "Ti" : "Tu"}</th><th>${this.lang == "sv" ? "On" : "We"}</th><th>${this.lang == "sv" ? "To" : "Th"}</th><th>${this.lang, "Fr"}</th><th>${this.lang == "sv" ? "Lö" : "Sa"}</th><th>${this.lang == "sv" ? "Sö" : "Su"}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${i.map((e) => r`
+                  <tr>
+                    ${e.map((e) => e ? r`
+                      <td>
+                        <div
+                        @keydown=${(t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._selectDate(e));
+		}}
+                            role="button"
+                            tabindex="0"
+                          class="day${this._isToday(e, n) ? " today" : ""}${this._isSelected(e) ? " selected" : ""}"
+                          @click=${() => this._selectDate(e)}
+                        >${e.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                      </td>
+                    ` : r`<td></td>`)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+            </div>
+          ` : ""}
+        </div>
+        ${o ? r`
+            <div style="padding: 0 24px;">
+            <label style="display:flex;align-items:center;gap:8px;">
+                <span>${this.lang == "sv" ? "Tid:" : "Time:"}</span>
+                <scb-textfield type="time" .value=${`${String(this._selectedHour).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`} @blur=${this._onTimeChange} aria-label="${this.lang == "sv" ? "Tid" : "Time"}"></scb-textfield>
+            </label>
+            </div>
+        ` : ""}
+        <div class="datepicker-footer">
+        ${!this._showMonthDropdown && !this._showYearDropdown ? r`
+            <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
+        ` : ""}
+        </div>
+         </div>
+    `;
+	}
+	_getMonthDays(e, t) {
+		let n = new Date(Date.UTC(e, t, 1)), r = new Date(Date.UTC(e, t + 1, 0)), i = [], a = [], o = n.getUTCDay(), s = o === 0 ? 6 : o - 1;
+		for (let e = 0; e < s; e++) a.push(null);
+		for (let n = 1; n <= r.getUTCDate(); n++) {
+			let r = new Date(Date.UTC(e, t, n));
+			a.push(r), a.length === 7 && (i.push(a), a = []);
+		}
+		if (a.length) {
+			for (; a.length < 7;) a.push(null);
+			i.push(a);
+		}
+		return i;
+	}
+	_toggleMonthDropdown() {
+		this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
+			let e = this.renderRoot.querySelector("#selected-month");
+			e && e.scrollIntoView({ block: "center" });
+		}, 0));
+	}
+	_toggleYearDropdown() {
+		this._showYearDropdown = !this._showYearDropdown, this._showYearDropdown && (this._showMonthDropdown = !1, setTimeout(() => {
+			let e = this.renderRoot.querySelector("#selected-year");
+			e && e.scrollIntoView({ block: "center" });
+		}, 0));
+	}
+	_onMonthChangeCustom(e) {
+		let t = this._currentDate.getFullYear();
+		this._currentDate = new Date(t, e, 1), this._showMonthDropdown = !1;
+	}
+	_onYearChangeCustom(e) {
+		let t = this._currentDate.getMonth();
+		this._currentDate = new Date(e, t, 1), this._showYearDropdown = !1;
+	}
+	_isToday(e, t) {
+		return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+	}
+	_isSelected(e) {
+		return this._selectedDate && e.getDate() === this._selectedDate.getDate() && e.getMonth() === this._selectedDate.getMonth() && e.getFullYear() === this._selectedDate.getFullYear();
+	}
+	_selectDate(e) {
+		if (this._selectedDate = e, this.variant === "datetime-local") {
+			let t = new Date(e);
+			t.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0), this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes();
+			let n = (e) => e.toString().padStart(2, "0"), r = `${t.getFullYear()}-${n(t.getMonth() + 1)}-${n(t.getDate())} ${n(t.getHours())}:${n(t.getMinutes())}`;
+			this.dispatchEvent(new CustomEvent("date-selected", {
+				detail: { value: r },
+				bubbles: !0,
+				composed: !0
+			}));
+		} else {
+			let t = e.toISOString().slice(0, 10);
+			this.dispatchEvent(new CustomEvent("date-selected", {
+				detail: { value: t },
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	_fireDateTimeChange() {
+		if (this.variant === "datetime-local" && this._selectedDate) {
+			let e = new Date(this._selectedDate);
+			e.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0);
+			let t = (e) => e.toString().padStart(2, "0"), n = `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;
+			this.dispatchEvent(new CustomEvent("date-selected", {
+				detail: { value: n },
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+};
+e([o()], s.prototype, "_currentDate", void 0), e([o()], s.prototype, "_selectedDate", void 0), e([o()], s.prototype, "_showMonthDropdown", void 0), e([o()], s.prototype, "_showYearDropdown", void 0), e([a({ type: String })], s.prototype, "variant", void 0), e([a({ type: String })], s.prototype, "lang", void 0), e([a({ type: String })], s.prototype, "selectedValue", void 0), e([a({ type: Boolean })], s.prototype, "open", void 0), e([o()], s.prototype, "_selectedHour", void 0), e([o()], s.prototype, "_selectedMinute", void 0), s = e([i("scb-datepicker")], s);
+//#endregion
+export { s as ScbDatepicker };