scb-wc 0.1.3 → 0.1.4

package/scb-nav/scb-nav.js

@@ -0,0 +1,263 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-nav-item.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";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-nav/scb-nav.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.activeHref = "", this.activateOnClick = !0, this.sticky = !1, this.stickyTop = "0px", this.stickyZIndex = 5, this.stickyBackground = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__autoAriaLabel = !1, this.__itemIdPrefix = `scb-nav-${Math.random().toString(36).slice(2)}`, this.__itemIdCounter = 0, this.__onSlotChange = async () => {
+			await this.__decorateItems(), this.__applyActiveHref();
+		}, this.__onClick = (e) => {
+			let t = e.composedPath().find((e) => e instanceof HTMLElement && (e.tagName === "A" || e.tagName === "BUTTON" || e.tagName === "SCB-NAV-ITEM"));
+			if (!t) return;
+			let n = this.__getItemHref(t);
+			this.dispatchEvent(new CustomEvent("scb-nav-select", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					item: t,
+					href: n
+				}
+			})), this.dispatchEvent(new CustomEvent("scbnavselect", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					item: t,
+					href: n
+				}
+			})), this.activateOnClick && n && (this.activeHref = n);
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font, Inter);  
+      margin-block-start: var(--scb-nav-spacing-block-start, 0);
+      margin-block-end: var(--scb-nav-spacing-block-end, 0);
+      margin-inline-start: var(--scb-nav-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-nav-spacing-inline-end, 0);
+     }
+
+    :host([sticky]) {
+      position: sticky;
+      inset-block-start: var(
+        --_scb-nav-sticky-top,
+        var(--scb-nav-sticky-top, 0px)
+      );
+      z-index: var(
+        --_scb-nav-sticky-z-index,
+        var(--scb-nav-sticky-z-index, 5)
+      );
+      background: var(
+        --_scb-nav-sticky-background,
+        var(--scb-nav-sticky-background, var(--md-sys-color-surface-container-lowest))
+      );
+    }
+
+    .scb-nav {
+      max-inline-size: var(--scb-nav-max-width, 1400px);
+      margin-inline: auto;
+      padding-block: var(--scb-nav-padding-block, var(--spacing-5, 16px));
+      padding-inline: var(--scb-nav-padding-inline, var(--spacing-0, 0px));
+      box-sizing: border-box;
+    }
+
+    .scb-nav__items {
+      display: flex;
+      align-items: center;
+      gap: var(--scb-nav-gap, var(--spacing-3, 8px));
+
+      overflow-x: auto;
+      overflow-y: visible;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+    }
+
+    .scb-nav__items::-webkit-scrollbar {
+      display: none;
+    }
+
+    ::slotted(a),
+    ::slotted(button),
+    ::slotted(scb-nav-item) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      padding-block: var(--scb-nav-item-padding-block, var(--spacing-3, 8px));
+      padding-inline: var(--scb-nav-item-padding-inline, var(--spacing-5, 16px));
+
+      border-radius: var(--scb-nav-item-radius, var(--radius-full, 1000px));
+
+      background: transparent;
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+      border: 0;
+
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size);
+      line-height: var(--md-sys-typescale-label-large-line-height);
+      font-weight: var(--md-sys-typescale-label-large-weight);
+
+      cursor: pointer;
+      white-space: nowrap;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      box-sizing: border-box;
+      outline: none;
+
+      position: relative;
+      overflow: hidden;
+    }
+
+    ::slotted(a:focus),
+    ::slotted(button:focus),
+    ::slotted(scb-nav-item:focus) {
+      outline: none;
+    }
+
+    ::slotted(a[aria-current]),
+    ::slotted(button[aria-current]),
+    ::slotted(scb-nav-item[aria-current]),
+    ::slotted([data-active='true']) {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      font-weight: 600;
+    }
+  `;
+	}
+	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;
+	}
+	__applySpacing() {
+		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-nav-spacing-block-start", t) : this.style.removeProperty("--scb-nav-spacing-block-start"), n ? this.style.setProperty("--scb-nav-spacing-block-end", n) : this.style.removeProperty("--scb-nav-spacing-block-end"), r ? this.style.setProperty("--scb-nav-spacing-inline-start", r) : this.style.removeProperty("--scb-nav-spacing-inline-start"), i ? this.style.setProperty("--scb-nav-spacing-inline-end", i) : this.style.removeProperty("--scb-nav-spacing-inline-end");
+	}
+	__syncStickyStyles() {
+		if (!this.sticky) {
+			this.style.removeProperty("--_scb-nav-sticky-top"), this.style.removeProperty("--_scb-nav-sticky-z-index"), this.style.removeProperty("--_scb-nav-sticky-background");
+			return;
+		}
+		let e = (this.stickyTop || "").trim() || "0px";
+		this.style.setProperty("--_scb-nav-sticky-top", e);
+		let t = Number.isFinite(this.stickyZIndex) ? this.stickyZIndex : 5;
+		this.style.setProperty("--_scb-nav-sticky-z-index", String(t));
+		let n = (this.stickyBackground || "").trim();
+		if (!n) {
+			this.style.removeProperty("--_scb-nav-sticky-background");
+			return;
+		}
+		let r = n.startsWith("--") ? `var(${n})` : n;
+		this.style.setProperty("--_scb-nav-sticky-background", r);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "navigation"), this.__syncStickyStyles(), this.__syncAriaLabel();
+	}
+	async firstUpdated() {
+		await this.__decorateItems(), this.__applyActiveHref(), this.__applySpacing();
+	}
+	updated(e) {
+		e.has("label") && this.__syncAriaLabel(), (e.has("sticky") || e.has("stickyTop") || e.has("stickyZIndex") || e.has("stickyBackground")) && this.__syncStickyStyles(), e.has("activeHref") && this.__applyActiveHref(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
+	}
+	__syncAriaLabel() {
+		if (this.hasAttribute("aria-label")) {
+			this.__autoAriaLabel = !1;
+			return;
+		}
+		let e = (this.label || "").trim();
+		if (!e) {
+			this.__autoAriaLabel &&= (this.removeAttribute("aria-label"), !1);
+			return;
+		}
+		this.setAttribute("aria-label", e), this.__autoAriaLabel = !0;
+	}
+	async __decorateItems() {
+		let e = this.__getSlottedItems();
+		if (e.some((e) => e.tagName === "A" || e.tagName === "BUTTON" || e.tagName === "SCB-NAV-ITEM")) for (let t of e) {
+			let e = t instanceof HTMLAnchorElement, n = t instanceof HTMLButtonElement, r = t.tagName === "SCB-NAV-ITEM";
+			if (!e && !n && !r || (n && !t.hasAttribute("type") && t.setAttribute("type", "button"), t.getAttribute("data-scb-nav-decorated") === "true")) continue;
+			t.id ||= (this.__itemIdCounter += 1, `${this.__itemIdPrefix}-${this.__itemIdCounter}`);
+			let i = (e) => {
+				let n = t.querySelector(e);
+				if (n instanceof HTMLElement) return n;
+				let r = document.createElement(e);
+				return t.appendChild(r), r;
+			}, a = i("md-ripple");
+			a && a.style.setProperty("--md-ripple-focus-opacity", "0");
+			let o = i("md-focus-ring");
+			o && (o.setAttribute("inward", ""), o.setAttribute("for", t.id), o.style.position = "absolute", o.style.inset = "0", o.style.pointerEvents = "none", o.style.borderRadius = "24px"), t.setAttribute("data-scb-nav-decorated", "true");
+		}
+	}
+	__getSlottedItems() {
+		let e = this.renderRoot.querySelector("slot");
+		return e ? e.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement) : [];
+	}
+	__getItemHref(e) {
+		return e instanceof HTMLAnchorElement ? (e.getAttribute("href") || "").trim() : e.tagName === "SCB-NAV-ITEM" ? (e.getAttribute("href") || e.getAttribute("data-href") || e.href || e.dataHref || "").trim() : (e.getAttribute("data-href") || "").trim();
+	}
+	__applyActiveHref() {
+		let e = (this.activeHref || "").trim(), t = this.__getSlottedItems();
+		for (let n of t) {
+			let t = n instanceof HTMLAnchorElement, r = n instanceof HTMLButtonElement, i = n.tagName === "SCB-NAV-ITEM";
+			if (!t && !r && !i) continue;
+			r && !n.hasAttribute("type") && n.setAttribute("type", "button");
+			let a = this.__getItemHref(n);
+			e && a === e ? (n.setAttribute("aria-current", "location"), n.setAttribute("data-scb-nav-managed", "true"), n.setAttribute("data-active", "true")) : (n.getAttribute("data-scb-nav-managed") === "true" && (n.removeAttribute("aria-current"), n.removeAttribute("data-scb-nav-managed")), n.removeAttribute("data-active"));
+		}
+	}
+	render() {
+		return r`
+      <div class="scb-nav">
+        <div class="scb-nav__items" @click=${this.__onClick}>
+          <slot @slotchange=${this.__onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({
+	type: String,
+	attribute: "active-href"
+})], o.prototype, "activeHref", void 0), e([a({
+	type: Boolean,
+	attribute: "activate-on-click"
+})], o.prototype, "activateOnClick", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "sticky", void 0), e([a({
+	type: String,
+	attribute: "sticky-top"
+})], o.prototype, "stickyTop", void 0), e([a({
+	type: Number,
+	attribute: "sticky-z-index"
+})], o.prototype, "stickyZIndex", void 0), e([a({
+	type: String,
+	attribute: "sticky-background"
+})], o.prototype, "stickyBackground", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-nav")], o);
+//#endregion
+export { o as ScbNav };