scb-wc 0.1.2 → 0.1.4

package/scb-button/scb-button.js

@@ -0,0 +1,398 @@
+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, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/button/filled-button.js";
+import "@material/web/button/outlined-button.js";
+import "@material/web/button/filled-tonal-button.js";
+import "@material/web/button/text-button.js";
+//#region src/scb-test-components/scb-button/scb-button.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "filled", this.size = "medium", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.iconFilled = !1, this.disabled = !1, this.fullWidth = !1, this.href = "", this.target = "", this.rel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	__getMdHost() {
+		return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button");
+	}
+	__getInnerNativeButton(e) {
+		return e?.shadowRoot?.querySelector("button") ?? null;
+	}
+	__syncAriaToInner() {
+		let e = this.__getMdHost(), t = this.__getInnerNativeButton(e);
+		if (!e || !t) return;
+		let n = (this.getAttribute("aria-label") || "").trim(), r = (e.getAttribute("aria-label") || "").trim(), i = this.label.trim() === "" ? (this.icon || "").trim() : "", a = n || r || i;
+		a ? t.setAttribute("aria-label", a) : t.removeAttribute("aria-label");
+		let o = this.getAttribute("aria-controls");
+		o === null ? t.removeAttribute("aria-controls") : t.setAttribute("aria-controls", o);
+		let s = this.getAttribute("aria-expanded");
+		s === null ? t.removeAttribute("aria-expanded") : t.setAttribute("aria-expanded", s), e.removeAttribute("aria-label"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), this.__ariaObserver?.disconnect(), this.__ariaObserver = new MutationObserver((e) => {
+			let t = this.__getMdHost(), n = this.__getInnerNativeButton(t);
+			if (!(!t || !n)) {
+				for (let r of e) {
+					if (r.type !== "attributes" || !r.attributeName) continue;
+					let e = r.attributeName, i = this.getAttribute(e);
+					if (e === "aria-label") {
+						let e = (t.getAttribute("aria-label") || "").trim(), r = (i || e || (this.label.trim() === "" ? (this.icon || "").trim() : "")).trim();
+						r ? n.setAttribute("aria-label", r) : n.removeAttribute("aria-label"), t.removeAttribute("aria-label");
+					} else (e === "aria-controls" || e === "aria-expanded") && (i === null ? n.removeAttribute(e) : n.setAttribute(e, i), e === "aria-expanded" && this.removeAttribute("aria-expanded"));
+				}
+				t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded");
+			}
+		}), this.__ariaObserver.observe(this, {
+			attributes: !0,
+			attributeFilter: [
+				"aria-label",
+				"aria-controls",
+				"aria-expanded"
+			]
+		});
+	}
+	firstUpdated() {
+		(this.type === "submit" || this.type === "reset") && this.addEventListener("click", () => {
+			if (!this.disabled) {
+				let e = this.closest("form");
+				e && (this.type === "submit" && e.requestSubmit(), this.type === "reset" && e.reset());
+			}
+		}), this.__syncAriaToInner(), this.#e();
+	}
+	updated(e) {
+		e.has("variant") && this.__syncAriaToInner(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	disconnectedCallback() {
+		this.__ariaObserver?.disconnect(), super.disconnectedCallback();
+	}
+	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;
+	}
+	#e() {
+		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-button-spacing-block-start", t) : this.style.removeProperty("--scb-button-spacing-block-start"), n ? this.style.setProperty("--scb-button-spacing-block-end", n) : this.style.removeProperty("--scb-button-spacing-block-end"), r ? this.style.setProperty("--scb-button-spacing-inline-start", r) : this.style.removeProperty("--scb-button-spacing-inline-start"), i ? this.style.setProperty("--scb-button-spacing-inline-end", i) : this.style.removeProperty("--scb-button-spacing-inline-end");
+	}
+	static get styles() {
+		return n`
+      /* Gör hosten stretchbar i t.ex. flex/grid */
+      :host {
+        display: inline-flex;
+        block-size: var(--scb-button-block-size, auto);
+        margin-block-start: var(--scb-button-spacing-block-start, 0);
+        margin-block-end: var(--scb-button-spacing-block-end, 0);
+        margin-inline-start: var(--scb-button-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-button-spacing-inline-end, 0);
+        --scb-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        --scb-button-padding-block: calc(var(--spacing-4) - var(--spacing-1));
+        --scb-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --scb-button-container-height: calc(
+          var(--scb-button-label-text-line-height) + var(--scb-button-padding-block) + var(--scb-button-padding-block)
+        );
+
+
+        --scb-button-padding-inline: var(--spacing-5);
+        --scb-button-icon-edge-space: var(--spacing-5);
+        --scb-button-icon-gap: var(--spacing-3);
+        --scb-button-icon-size: var(--icon-size-small, 20px);
+
+        /* Label, mappar till md-sys-typescale-label-small */
+        --md-filled-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-text-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-text-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-text-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        /* Grundpadding (utan ikon) */
+        --md-filled-button-leading-space: var(--scb-button-padding-inline);
+        --md-filled-button-trailing-space: var(--scb-button-padding-inline);
+        --md-outlined-button-leading-space: var(--scb-button-padding-inline);
+        --md-outlined-button-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-leading-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-trailing-space: var(--scb-button-padding-inline);
+        --md-text-button-leading-space: var(--scb-button-padding-inline);
+        --md-text-button-trailing-space: var(--scb-button-padding-inline);
+
+        /* Med ikon: avstånd till ytterkanter + mellan ikon och label */
+        --md-filled-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-filled-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-filled-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-outlined-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-outlined-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-outlined-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-outlined-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-filled-tonal-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-filled-tonal-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-text-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-text-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-text-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-text-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        /* Ikonstorlek */
+        --md-filled-button-icon-size: var(--scb-button-icon-size);
+        --md-outlined-button-icon-size: var(--scb-button-icon-size);
+        --md-filled-tonal-button-icon-size: var(--scb-button-icon-size);
+        --md-text-button-icon-size: var(--scb-button-icon-size);
+      }
+
+      :host([size='small']) {
+        --scb-button-padding-block: calc(var(--spacing-3) - var(--spacing-1));
+        --scb-button-padding-inline: var(--spacing-4);
+        --scb-button-icon-edge-space: var(--spacing-4);
+        --scb-button-icon-gap: var(--spacing-2);
+        --scb-button-icon-size: var(--icon-size-small, 20px);
+      }
+
+      :host([size='large']) {
+        --scb-button-padding-block: var(--spacing-5);
+        --scb-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+
+        --scb-button-padding-inline: var(--spacing-7);
+        --scb-button-icon-edge-space: var(--spacing-7);
+        --scb-button-icon-gap: var(--spacing-3);
+        --scb-button-icon-size: var(--icon-size-medium, 24px);
+
+        /* Label, mappar till md-sys-typescale-label-medium */
+        --md-filled-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-text-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-text-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-text-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      }
+
+      :host([icon-filled]) {
+        --scb-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      }
+
+      md-icon {
+        --md-icon-font-variation-settings: var(--scb-button-font-variation-settings) !important;
+        font-variation-settings: var(--scb-button-font-variation-settings) !important;
+      }
+
+      :host([full-width]) {
+        display: flex;
+        inline-size: 100%;
+      }
+
+      /* Låt inre md-knappar fylla hostens höjd */
+      md-filled-button,
+      md-outlined-button,
+      md-filled-tonal-button,
+      md-text-button {
+        block-size: var(--scb-button-block-size, auto);
+        gap: var(--scb-button-icon-gap);
+        --md-filled-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-outlined-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-filled-tonal-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-text-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+      }
+
+      :host([full-width]) md-filled-button,
+      :host([full-width]) md-outlined-button,
+      :host([full-width]) md-filled-tonal-button,
+      :host([full-width]) md-text-button {
+        inline-size: 100%;
+        flex: 1 1 auto;
+      }
+
+      /*  Errorvarianter  */
+      /*
+      md-filled-button[variant='error'],
+      md-outlined-button[variant='error'],
+      md-filled-tonal-button[variant='error'],
+      md-text-button[variant='error'] {
+        --md-sys-color-primary: var(--md-sys-color-error);
+        --md-sys-color-on-primary: var(--md-sys-color-on-error);
+      }
+      */
+
+      /* Outlined – röd outline vid error + tjockare vid hover */
+      /*
+      md-outlined-button[variant='error'] {
+        --_outline-color: var(--md-sys-color-error);
+        --md-outlined-button-pressed-outline-color: var(--md-sys-color-error);
+      }
+      */
+      /* md-outlined-button[variant='error']:hover, */
+      md-outlined-button:hover {
+        --md-outlined-button-outline-width: var(--spacing-1, 1px);
+      }
+
+      /* Filled-tonal – error-färger */
+      /*
+      md-filled-tonal-button[variant='error'] {
+        --md-filled-tonal-button-container-color: var(--md-sys-color-error-container);
+        --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+      }
+      @media (prefers-color-scheme: dark) {
+        md-filled-tonal-button[variant='error'] {
+          --md-filled-tonal-button-container-color: var(--md-sys-color-on-error);
+        }
+      }
+      */
+    `;
+	}
+	render() {
+		let e = !!this.icon?.trim(), t = e ? r`<md-icon slot="icon" part="icon" ?filled=${this.iconFilled} aria-hidden="true">${this.icon}</md-icon>` : i, n = i, a = this.label.trim() === "" ? this.icon : void 0;
+		switch (this.variant) {
+			case "filled": return r`
+          <md-filled-button
+            type=${this.type}
+            variant=${n}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${a}
+            href=${this.href || i}
+            target=${this.target || i}
+            rel=${this.rel || i}
+          >
+            ${e && !this.trailingIcon ? t : i}
+            ${this.label}
+            ${e && this.trailingIcon ? t : i}
+          </md-filled-button>
+        `;
+			case "outlined": return r`
+          <md-outlined-button
+            type=${this.type}
+            variant=${n}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${a}
+            href=${this.href || i}
+            target=${this.target || i}
+            rel=${this.rel || i}
+          >
+            ${e && !this.trailingIcon ? t : i}
+            ${this.label}
+            ${e && this.trailingIcon ? t : i}
+          </md-outlined-button>
+        `;
+			case "filled-tonal": return r`
+          <md-filled-tonal-button
+            type=${this.type}
+            variant=${n}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${a}
+            href=${this.href || i}
+            target=${this.target || i}
+            rel=${this.rel || i}
+          >
+            ${e && !this.trailingIcon ? t : i}
+            ${this.label}
+            ${e && this.trailingIcon ? t : i}
+          </md-filled-tonal-button>
+        `;
+			case "text": return r`
+          <md-text-button
+            type=${this.type}
+            variant=${n}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${a}
+            href=${this.href || i}
+            target=${this.target || i}
+            rel=${this.rel || i}
+          >
+            ${e && !this.trailingIcon ? t : i}
+            ${this.label}
+            ${e && this.trailingIcon ? t : i}
+          </md-text-button>
+        `;
+			default: return r``;
+		}
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), e([o({ type: String })], s.prototype, "label", void 0), e([o({
+	type: Boolean,
+	attribute: "trailing-icon"
+})], s.prototype, "trailingIcon", void 0), e([o({ type: String })], s.prototype, "icon", void 0), e([o({
+	type: Boolean,
+	attribute: "icon-filled",
+	reflect: !0
+})], s.prototype, "iconFilled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	attribute: "full-width",
+	reflect: !0
+})], s.prototype, "fullWidth", void 0), e([o({ type: String })], s.prototype, "href", void 0), e([o({ type: String })], s.prototype, "target", void 0), e([o({ type: String })], s.prototype, "rel", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = e([a("scb-button")], s);
+//#endregion
+export { s as ScbButton };

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

@@ -0,0 +1,48 @@
+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";
+//#region src/scb-test-components/scb-calendar/scb-calendar-event.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "", this.description = "", this.startDate = "", this.endDate = "", this.href = "";
+	}
+	get date() {
+		return this.startDate;
+	}
+	set date(e) {
+		let t = (e ?? "") + "";
+		t !== this.startDate && (this.startDate = t);
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes ?? [], "date"];
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), e === "date" && (this.date = n ?? "");
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+    }
+    `;
+	}
+	updated(e) {
+		super.updated?.(e), (e.has("title") || e.has("description") || e.has("startDate") || e.has("endDate") || e.has("href")) && this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return r`
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "title", void 0), e([a({ type: String })], o.prototype, "description", void 0), e([a({
+	type: String,
+	attribute: "start-date"
+})], o.prototype, "startDate", void 0), e([a({
+	type: String,
+	attribute: "end-date"
+})], o.prototype, "endDate", void 0), e([a({ type: String })], o.prototype, "href", void 0), o = e([i("scb-calendar-event")], o);
+//#endregion
+export { o as ScbCalendarEvent };