scb-wc 0.1.2 → 0.1.4

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

@@ -0,0 +1,505 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+//#region src/scb-test-components/scb-calendar-card/scb-calendar-card.ts
+var o, s = class extends t {
+	static {
+		o = this;
+	}
+	constructor(...e) {
+		super(...e), this.variant = "default", this.size = "medium", this.date = null, this.direction = "horizontal", this.title = "", this.calendarCardTitle = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "stretch", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.__iconLoaded = !1;
+	}
+	static {
+		this.__rippleLoaded = !1;
+	}
+	get #e() {
+		return this.calendarCardTitle || this.title;
+	}
+	async firstUpdated() {
+		o.__iconLoaded || (await import("@material/web/icon/icon.js"), o.__iconLoaded = !0), o.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), o.__rippleLoaded = !0), this.__applyInnerSizing(), this.#n();
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      padding: var(--scb-calendar-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-calendar-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-calendar-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-calendar-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-calendar-card-spacing-inline-end, 0);
+
+      --scb-calendar-card-padding: var(--spacing-spacing-7, 24px);
+      --scb-calendar-card-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-6, 20px);
+      --scb-calendar-card-horizontal-min-block-size: 112px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-11, 64px);
+      --scb-calendar-card-media-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-day-size: var(--scale-07, 28px);
+      --scb-calendar-card-day-letter-spacing: -0.6px;
+      --scb-calendar-card-month-size: var(--scale-02, 14px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-title-min-block-size: 32px;
+      --scb-calendar-card-icon-size: 20px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-headline-small-size, 24px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    :host([size='medium']) {
+      --scb-calendar-card-padding: var(--spacing-spacing-6, 20px);
+      --scb-calendar-card-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-5, 16px);
+      --scb-calendar-card-horizontal-min-block-size: 96px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-10, 56px);
+      --scb-calendar-card-day-size: var(--scale-06, 24px);
+      --scb-calendar-card-day-letter-spacing: -0.4px;
+      --scb-calendar-card-month-size: var(--scale-01, 12px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-1, 2px);
+      --scb-calendar-card-title-min-block-size: 28px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='small']) {
+      --scb-calendar-card-padding: var(--spacing-spacing-5, 16px);
+      --scb-calendar-card-gap: var(--spacing-spacing-3, 8px);
+      --scb-calendar-card-horizontal-gap: var(--spacing-spacing-4, 12px);
+      --scb-calendar-card-horizontal-min-block-size: 84px;
+
+      --scb-calendar-card-media-size: var(--spacing-spacing-9, 48px);
+      --scb-calendar-card-day-size: var(--scale-05, 20px);
+      --scb-calendar-card-day-letter-spacing: -0.3px;
+      --scb-calendar-card-month-size: var(--scale-01, 12px);
+
+      --scb-calendar-card-content-gap: var(--spacing-spacing-2, 4px);
+      --scb-calendar-card-header-gap: var(--spacing-spacing-1, 2px);
+      --scb-calendar-card-title-min-block-size: 24px;
+      --scb-calendar-card-icon-size: 18px;
+
+      --scb-calendar-card-title-font-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-calendar-card-title-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-calendar-card-title-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-calendar-card-subtitle-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-calendar-card-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-calendar-card-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-calendar-card-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-calendar-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-calendar-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([sizing='stretch']) {
+      inline-size: 100%;
+      block-size: 100%;
+      max-inline-size: none;
+    }
+
+    :host([sizing='content-width']) {
+      display: inline-block;
+      inline-size: auto;
+      block-size: auto;
+    }
+    :host([sizing='content-width']) .calendar-card {
+      inline-size: max-content;
+    }
+
+    :host([sizing='content-height']) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-calendar-card-focus-ring-radius, var(--radius-large, 16px));
+    }
+    .calendar-card:focus-visible + md-focus-ring {
+      display: block;
+    }
+
+    .calendar-card {
+      box-sizing: border-box;
+      overflow: hidden;
+
+      position: relative;
+      display: flex;
+      color: var(--md-sys-color-on-surface, #0f0865);
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-style: normal;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--scb-calendar-card-gap);
+      align-self: stretch;
+      cursor: pointer;
+      transition:
+        box-shadow 0.18s ease,
+        transform 0.18s ease,
+        background-color 0.18s ease,
+        border-color 0.18s ease;
+
+      inline-size: 100%;
+      max-inline-size: 100%;
+    }
+
+    /* Lås standard till proportionella siffror i kortet */
+    .calendar-card,
+    .calendar-card .title,
+    .calendar-card .subtitle,
+    .calendar-card .supporting-text {
+      font-variant-numeric: proportional-nums;
+      font-feature-settings: 'tnum' 0, 'pnum' 1;
+    }
+
+    .calendar-card:focus,
+    .calendar-card:focus-visible {
+      outline: none;
+    }
+
+    .calendar-card.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      max-width: none;
+      width: 100%;
+      gap: var(--scb-calendar-card-horizontal-gap);
+      min-block-size: var(--scb-calendar-card-horizontal-min-block-size);
+    }
+
+    .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(--scb-calendar-card-padding);
+    }
+
+    .calendar-card.filled {
+      border-radius: var(--radius-large, 16px);
+      background: var(--md-sys-color-surface-dim, #f9f8ef);
+      padding: var(--scb-calendar-card-padding);
+    }
+
+    .calendar-card.filled .media {
+      background: var(--md-sys-color-surface, #fff);
+    }
+
+    md-ripple {
+      border-radius: var(--radius-l, 16px);
+    }
+
+    .media {
+      display: flex;
+      width: var(--scb-calendar-card-media-size);
+      min-width: var(--scb-calendar-card-media-size);
+      max-width: var(--scb-calendar-card-media-size);
+      height: var(--scb-calendar-card-media-size);
+      padding: var(--spacing-spacing-0, 0) 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: var(--scb-calendar-card-media-gap);
+      border-radius: var(--md-sys-shape-corner-small);
+      background: var(--md-sys-color-surface-dim, #f9f8ef);
+    }
+
+    .calendar-card.horizontal .media {
+      align-self: flex-start;
+    }
+
+    .media .day {
+      font-size: var(--scb-calendar-card-day-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: 100%;
+      letter-spacing: var(--scb-calendar-card-day-letter-spacing);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media .month {
+      font-size: var(--scb-calendar-card-month-size);
+      font-weight: var(--weight-regular, 400);
+      line-height: 100%;
+    }
+
+    .container {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-calendar-card-content-gap);
+      width: 100%;
+      align-self: flex-start;
+    }
+
+    .header-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-calendar-card-header-gap);
+    }
+
+    .title-container {
+      width: 100%;
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-3, 8px);
+      color: inherit;
+      text-decoration: none;
+      min-block-size: var(--scb-calendar-card-title-min-block-size);
+    }
+
+    .title {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-title-font-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-calendar-card-title-line-height);
+      letter-spacing: var(--scb-calendar-card-title-letter-spacing);
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .title-container md-icon {
+      inline-size: var(--scb-calendar-card-icon-size);
+      block-size: var(--scb-calendar-card-icon-size);
+      flex: 0 0 auto;
+    }
+
+    .icon-container{
+      display: flex;
+      width: var(--spacing-spacing-7, 24px);
+      height: var(--spacing-spacing-7, 24px);
+      align-items: center;
+      justify-content: center;
+    }
+
+    .subtitle {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-subtitle-font-size);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-calendar-card-subtitle-line-height);
+      letter-spacing: var(--scb-calendar-card-subtitle-letter-spacing);
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .supporting-text {
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-size: var(--scb-calendar-card-supporting-font-size);
+      font-weight: var(--weight-regular, 400);
+      line-height: var(--scb-calendar-card-supporting-line-height);
+      letter-spacing: var(--scb-calendar-card-supporting-letter-spacing);
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: break-word;
+      hyphens: manual;
+      overflow: visible;
+      text-overflow: clip;
+    }
+  `;
+	}
+	render() {
+		let e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", n = this.cardHref ? "clickable" : "", { day: i, month: a } = this.#t(), o = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", s = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", c = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", l = `${o ? `inline-size:${o};` : ""}${s ? `block-size:${s};` : ""}${c ? `aspect-ratio:${c};` : ""}`;
+		return r`
+      <div
+        class="calendar-card ${t} ${n} ${e}"
+        role="${this.cardHref ? "link" : "group"}"
+        aria-label="${this.#e || "Kalenderkort"}"
+        tabindex="${this.cardHref ? "0" : "-1"}"
+        @click=${this.cardHref ? this._handleHrefNavigation : null}
+        @keydown=${this.cardHref ? this._onKeyDown : null}
+        style="cursor: ${this.cardHref ? "pointer" : "default"};"
+      >
+        ${this.cardHref ? r`<md-ripple></md-ripple>` : ""}
+        ${this.showMedia ? r`
+              <div class="media" style="${l}" aria-label="Datum: ${i} ${a}">
+                <div class="day">${i}</div>
+                <div class="month">${a}</div>
+              </div>
+            ` : ""}
+        <div class="container">
+        <div class="header-container">
+          <div class="title-container">
+            <div class="title">${this.#e}</div>
+            ${this.cardHref ? r`<div class="icon-container"><md-icon>arrow_forward</md-icon></div>` : ""}
+          </div>
+          ${this.subtitle ? r`<div class="subtitle">${this.subtitle}</div>` : ""}</div>
+          ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+        </div>
+      </div>
+      ${this.cardHref ? r`<md-focus-ring></md-focus-ring>` : ""}
+    `;
+	}
+	#t() {
+		let e = {
+			day: 1,
+			month: "Jan"
+		};
+		if (!this.date) return e;
+		let t = this.date instanceof Date ? this.date : (() => {
+			let e = new Date(String(this.date));
+			return Number.isNaN(e.getTime()) ? null : e;
+		})();
+		if (!t) return e;
+		let n = t.getDate(), r = new Intl.DateTimeFormat("sv-SE", { month: "short" }).format(t).replace(".", "").trim();
+		return {
+			day: n,
+			month: r.charAt(0).toUpperCase() + r.slice(1)
+		};
+	}
+	__applyInnerSizing() {
+		let e = this.renderRoot.querySelector(".calendar-card");
+		e && (this.width && this.width.trim() !== "" ? (e.style.inlineSize = "100%", e.style.maxInlineSize = "100%") : (e.style.removeProperty("inline-size"), e.style.removeProperty("max-inline-size")), this.height && this.height.trim() !== "" || this.sizing === "stretch" ? e.style.blockSize = "100%" : e.style.removeProperty("block-size"), this.maxHeight && this.maxHeight.trim() !== "" ? e.style.maxBlockSize = "100%" : e.style.removeProperty("max-block-size"));
+	}
+	_onKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && this.cardHref && (window.open(this.cardHref, "_self"), e.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"));
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#n() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-calendar-card-spacing-block-start", t) : this.style.removeProperty("--scb-calendar-card-spacing-block-start"), n ? this.style.setProperty("--scb-calendar-card-spacing-block-end", n) : this.style.removeProperty("--scb-calendar-card-spacing-block-end"), r ? this.style.setProperty("--scb-calendar-card-spacing-inline-start", r) : this.style.removeProperty("--scb-calendar-card-spacing-inline-start"), i ? this.style.setProperty("--scb-calendar-card-spacing-inline-end", i) : this.style.removeProperty("--scb-calendar-card-spacing-inline-end");
+	}
+	updated(e) {
+		e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("minWidth") && (this.minWidth ? this.style.minInlineSize = this.minWidth : this.style.removeProperty("min-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), e.has("minHeight") && (this.minHeight ? this.style.minBlockSize = this.minHeight : this.style.removeProperty("min-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	attribute: "date"
+})], s.prototype, "date", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "direction", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "title", void 0), e([a({
+	type: String,
+	attribute: "calendar-card-title",
+	reflect: !0
+})], s.prototype, "calendarCardTitle", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "subtitle", void 0), e([a({
+	type: String,
+	attribute: "supporting-text",
+	reflect: !0
+})], s.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "card-href"
+})], s.prototype, "cardHref", void 0), e([a({
+	type: String,
+	attribute: "card-href-nav"
+})], s.prototype, "cardHrefNav", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "show-media"
+})], s.prototype, "showMedia", void 0), e([a({
+	type: String,
+	attribute: "media-width"
+})], s.prototype, "mediaWidth", void 0), e([a({
+	type: String,
+	attribute: "media-height"
+})], s.prototype, "mediaHeight", void 0), e([a({
+	type: String,
+	attribute: "media-aspect"
+})], s.prototype, "mediaAspect", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "width", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-width"
+})], s.prototype, "maxWidth", void 0), e([a({
+	type: String,
+	attribute: "min-width"
+})], s.prototype, "minWidth", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "height", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-height"
+})], s.prototype, "maxHeight", void 0), e([a({
+	type: String,
+	attribute: "min-height"
+})], s.prototype, "minHeight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "sizing", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = o = e([i("scb-calendar-card")], s);
+//#endregion
+export { s as ScbCalendarCard };