scb-wc 0.1.3 → 0.1.4

package/scb-breadcrumb/scb-breadcrumb-item.js

@@ -0,0 +1,62 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-link/scb-link.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-breadcrumb/scb-breadcrumb-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.isCurrent = !1, this.href = "";
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), this.hasAttribute("current") && !this.hasAttribute("is-current") && (this.isCurrent = !0), !this.href) {
+			let e = this.getAttribute("href");
+			e && (this.href = e);
+		}
+	}
+	static get styles() {
+		return n`
+      .breadcrumb-separator {
+        margin: var(--spacing-0) var(--spacing-3);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .breadcrumb-current {
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      }
+    `;
+	}
+	updated(e) {
+		e.has("isCurrent") && (this.dispatchEvent(new CustomEvent("current-changed", {
+			detail: { isCurrent: this.isCurrent },
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("currentchanged", {
+			detail: {
+				isCurrent: this.isCurrent,
+				value: this.isCurrent
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		switch (!0) {
+			case this.isCurrent: return r`<span class="breadcrumb-current">${this.label}</span>`;
+			default: return r`
+          <scb-link href="${this.href || this.getAttribute("href") || ""}">${this.label}</scb-link>
+          <span class="breadcrumb-separator">/</span>
+        `;
+		}
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({
+	type: Boolean,
+	attribute: "is-current",
+	reflect: !0
+})], o.prototype, "isCurrent", void 0), e([a({
+	type: String,
+	attribute: "item-href"
+})], o.prototype, "href", void 0), o = e([i("scb-breadcrumb-item")], o);
+//#endregion
+export { o as SCBBreadcrumbItem };

package/scb-breadcrumb/scb-breadcrumb.js

@@ -0,0 +1,255 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-link/scb-link.js";
+import "./scb-breadcrumb-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/icon/icon.js";
+//#region src/scb-test-components/scb-breadcrumb/scb-breadcrumb.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.showAll = !1, this.currentIndex = void 0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static get styles() {
+		return n`
+      :host {
+        display: block;
+        margin-block-start: var(--scb-breadcrumb-spacing-block-start, 0);
+        margin-block-end: var(--scb-breadcrumb-spacing-block-end, 0);
+        margin-inline-start: var(--scb-breadcrumb-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-breadcrumb-spacing-inline-end, 0);
+      }
+
+      .scb-breadcrumb {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .breadcrumb-item {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .breadcrumb-separator {
+        margin: var(--spacing-0) var(--spacing-3);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .breadcrumb-current {
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      }
+
+      .ellipsis {
+        cursor: pointer;
+        display: inline-flex;
+        color: var(--md-sys-color-primary);
+        position: relative;
+      }
+
+      .ellipsis:focus {
+        outline: none;
+      }
+
+      .breadcrumb-animate {
+        opacity: 0;
+        transform: translateY(10px);
+        animation: fadeInBreadcrumb 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(
+          --scb-card-focus-ring-radius,
+          var(--md-sys-shape-corner-large)
+        );
+      }
+
+      .ellipsis:focus md-focus-ring {
+        display: block;
+      }
+
+      @keyframes fadeInBreadcrumb {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._observer = new MutationObserver(() => {
+			this.requestUpdate();
+		}), this._observer.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"label",
+				"item-href",
+				"href",
+				"is-current",
+				"current"
+			]
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._observer?.disconnect();
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated(e) {
+		e.has("showAll") && (this.dispatchEvent(new CustomEvent("show-all-changed", {
+			detail: { showAll: this.showAll },
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("showallchanged", {
+			detail: {
+				showAll: this.showAll,
+				value: this.showAll
+			},
+			bubbles: !0,
+			composed: !0
+		}))), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	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-breadcrumb-spacing-block-start", t) : this.style.removeProperty("--scb-breadcrumb-spacing-block-start"), n ? this.style.setProperty("--scb-breadcrumb-spacing-block-end", n) : this.style.removeProperty("--scb-breadcrumb-spacing-block-end"), r ? this.style.setProperty("--scb-breadcrumb-spacing-inline-start", r) : this.style.removeProperty("--scb-breadcrumb-spacing-inline-start"), i ? this.style.setProperty("--scb-breadcrumb-spacing-inline-end", i) : this.style.removeProperty("--scb-breadcrumb-spacing-inline-end");
+	}
+	_onEllipsisClick() {
+		this.showAll ? this.showAll = !1 : (this.showAll = !0, this.updateComplete.then(() => {
+			let e = this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded .breadcrumb-item");
+			e && (e.forEach((e, t) => {
+				e.classList.add("breadcrumb-animate"), e.style.animationDelay = `${t * 60}ms`;
+			}), setTimeout(() => {
+				e.forEach((e) => {
+					e.classList.remove("breadcrumb-animate"), e.style.animationDelay = "";
+				});
+			}, 600));
+		}));
+	}
+	getItemLabel(e) {
+		let t = e.label;
+		return typeof t == "string" ? t : e.getAttribute("label") ?? "";
+	}
+	getItemHref(e) {
+		let t = e;
+		return typeof t.itemHref == "string" ? t.itemHref : typeof t.href == "string" ? t.href : e.getAttribute("item-href") ?? e.getAttribute("href") ?? "";
+	}
+	render() {
+		let e = Array.from(this.children).filter((e) => e.tagName.toLowerCase() === "scb-breadcrumb-item"), t = Math.max(0, e.length - 1), n = t;
+		if (e.length > 0) {
+			let t = typeof this.currentIndex == "number" && !Number.isNaN(this.currentIndex) ? Math.trunc(this.currentIndex) : void 0;
+			if (typeof t == "number" && t >= 0 && t < e.length) n = t;
+			else for (let t = e.length - 1; t >= 0; t--) {
+				let r = e[t];
+				if (typeof r.isCurrent == "boolean" ? r.isCurrent : e[t].hasAttribute("is-current") || e[t].hasAttribute("current")) {
+					n = t;
+					break;
+				}
+			}
+			e.forEach((e, t) => {
+				e.toggleAttribute("is-current", t === n);
+			});
+		}
+		let i = e.length > 6 && !this.showAll && n === t, a = [];
+		if (i) {
+			let t = e.slice(0, 3), r = e.slice(-3);
+			t.forEach((e, t) => {
+				a.push({
+					type: "item",
+					item: e,
+					isCurrent: t === n
+				});
+			}), a.push({ type: "ellipsis" }), r.forEach((t, r) => {
+				let i = e.length - 3 + r;
+				a.push({
+					type: "item",
+					item: t,
+					isCurrent: i === n
+				});
+			});
+		} else e.forEach((e, t) => {
+			a.push({
+				type: "item",
+				item: e,
+				isCurrent: t === n
+			});
+		});
+		return r`
+      <div class="scb-breadcrumb ${i ? "collapsed" : "expanded"}">
+        ${a.map((e, t) => {
+			let n = t === 0 ? r`` : r`<span class="breadcrumb-separator">/</span>`;
+			if (e.type === "ellipsis") return r`
+              ${n}
+              <span
+                class="breadcrumb-item ellipsis"
+                aria-label="Visa alla"
+                role="button"
+                tabindex="0"
+                @click=${this._onEllipsisClick}
+                @keydown=${(e) => {
+				(e.key === "Enter" || e.key === " ") && this._onEllipsisClick();
+			}}
+              >
+                <md-icon>
+                  <md-focus-ring></md-focus-ring>
+                  more_horiz
+                </md-icon>
+              </span>
+            `;
+			let i = this.getItemLabel(e.item), a = this.getItemHref(e.item);
+			return e.isCurrent ? r`
+                ${n}
+                <span class="breadcrumb-item breadcrumb-current">${i}</span>
+              ` : r`
+                ${n}
+                <span class="breadcrumb-item">
+                  <scb-link href="${a}">${i}</scb-link>
+                </span>
+              `;
+		})}
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	attribute: "show-all",
+	reflect: !0
+})], o.prototype, "showAll", void 0), e([a({
+	type: Number,
+	attribute: "current-index",
+	reflect: !0
+})], o.prototype, "currentIndex", 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-breadcrumb")], o);
+//#endregion
+export { o as SCBBreadcrumb };