scb-wc 0.1.2 → 0.1.4

package/scb-options-menu/scb-options-menu.js

@@ -0,0 +1,237 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-options-menu-item.js";
+import "./scb-options-sub-menu.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-options-menu/scb-options-menu.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.size = "large", this.inSb = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__lastTriggerEl = null, this.__onViewportChange = () => {
+			this.open && this.__positionToTrigger();
+		}, this.__onDocumentClick = (e) => {
+			let t = this.__getActionFromEvent(e);
+			if (t) {
+				t === "open" && (this.__setOpen(!0), this.dispatchEvent(new CustomEvent("open", {
+					bubbles: !0,
+					composed: !0
+				}))), t === "close" && (this.__setOpen(!1), this.dispatchEvent(new CustomEvent("close", {
+					bubbles: !0,
+					composed: !0
+				}))), t === "toggle" && (this.__setOpen(!this.open), this.dispatchEvent(new CustomEvent("toggle", {
+					bubbles: !0,
+					composed: !0
+				}))), e.stopPropagation();
+				return;
+			}
+			if (!this.inSb && this.open && !this.isClickInScbMenu(e)) {
+				this.__setOpen(!1);
+				return;
+			}
+		}, this.__onDocumentKeydown = (e) => {
+			if (this.open && e.key === "Escape") {
+				this.__setOpen(!1);
+				return;
+			}
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      position: absolute;
+      display: block;
+      width: fit-content;
+      font-family: var(--brand-font);
+      --scb-options-menu-max-width: 300px;
+      --scb-options-menu-max-height: 600px;
+      --scb-options-menu-panel-padding-block: var(--spacing-3, 8px);
+      --scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
+      --scb-options-menu-item-padding-block: var(--spacing-3, 8px);
+      --scb-options-menu-item-gap: var(--spacing-4, 12px);
+      --scb-options-menu-item-min-height: 56px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-large-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-large-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      --scb-options-menu-icon-size: 24px;
+      --scb-options-sub-menu-offset-top: -44px;
+      z-index: 1000;
+
+      margin-block-start: var(--scb-options-menu-spacing-block-start, 0);
+      margin-block-end: var(--scb-options-menu-spacing-block-end, 0);
+      margin-inline-start: var(--scb-options-menu-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-options-menu-spacing-inline-end, 0);
+    }
+
+    :host([size='medium']) {
+      --scb-options-menu-panel-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
+      --scb-options-menu-item-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-gap: var(--spacing-3, 8px);
+      --scb-options-menu-item-min-height: 48px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-medium-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      --scb-options-menu-icon-size: 20px;
+      --scb-options-sub-menu-offset-top: -40px;
+    }
+
+    :host([size='small']) {
+      --scb-options-menu-panel-padding-block: var(--spacing-1, 2px);
+      --scb-options-menu-item-padding-inline: var(--spacing-4, 12px);
+      --scb-options-menu-item-padding-block: var(--spacing-2, 4px);
+      --scb-options-menu-item-gap: var(--spacing-3, 8px);
+      --scb-options-menu-item-min-height: 40px;
+      --scb-options-menu-label-font-size: var(--md-sys-typescale-body-small-size);
+      --scb-options-menu-label-line-height: var(--md-sys-typescale-body-small-line-height);
+      --scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+      --scb-options-menu-icon-size: 18px;
+      --scb-options-sub-menu-offset-top: -32px;
+    }
+
+    :host > .scb-options-menu-panel {
+      padding: var(--scb-options-menu-panel-padding-block) 0;
+      color: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+      background: var(--md-sys-color-surface, #FFF);
+      opacity: 0;
+      max-height: 0;
+      transform: scaleY(0.8);
+      transform-origin: var(--scb-options-menu-transform-origin, top);
+      transition:
+        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
+        transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
+      will-change: opacity, transform;
+
+    }
+    :host > .scb-options-menu-panel.open {
+      opacity: 1;
+      transform: scaleY(1);
+      max-width: var(--scb-options-menu-max-width);
+      max-height: var(--scb-options-menu-max-height);
+      min-width: 112px;
+      overflow: visible;
+      transition:
+        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
+        transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
+    }
+  `;
+	}
+	firstUpdated() {
+		this.__applySpacing();
+	}
+	render() {
+		return r`
+      <div
+        role="menu"
+        class="scb-options-menu-panel${this.open ? " open" : ""}"
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this.__onDocumentClick, !1), document.addEventListener("keydown", this.__onDocumentKeydown, !0), window.addEventListener("resize", this.__onViewportChange, { passive: !0 }), window.addEventListener("scroll", this.__onViewportChange, {
+			passive: !0,
+			capture: !0
+		});
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), window.removeEventListener("resize", this.__onViewportChange), window.removeEventListener("scroll", this.__onViewportChange, !0), super.disconnectedCallback();
+	}
+	__setOpen(e) {
+		this.open = e;
+	}
+	__getActionFromEvent(e) {
+		if (!this.id) return null;
+		let t = e.composedPath();
+		for (let e of t) if (e instanceof Element) {
+			if (e.getAttribute("data-menu-open") === this.id) return this.__lastTriggerEl = e, "open";
+			if (e.getAttribute("data-menu-close") === this.id) return this.__lastTriggerEl = e, "close";
+			if (e.getAttribute("data-menu-toggle") === this.id || e.getAttribute("aria-controls") === this.id) return this.__lastTriggerEl = e, "toggle";
+		}
+		return null;
+	}
+	isClickInScbMenu(e) {
+		return e.composedPath().some((e) => e instanceof Element && (e.tagName === "SCB-OPTIONS-MENU" || e.tagName === "SCB-OPTIONS-SUB-MENU"));
+	}
+	updated(e) {
+		e.has("open") && (this.__applyOpenSideEffects(), this.open ? this.dispatchEvent(new CustomEvent("open", {
+			bubbles: !0,
+			composed: !0
+		})) : this.dispatchEvent(new CustomEvent("close", {
+			bubbles: !0,
+			composed: !0
+		}))), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
+	}
+	__applyOpenSideEffects() {
+		this.__updateTriggersExpanded(), this.open ? this.__positionToTrigger() : this.__restoreFocusToTrigger();
+	}
+	__positionToTrigger() {
+		if (!this.open || !this.__lastTriggerEl) return;
+		let e = this.__lastTriggerEl, t = this.shadowRoot?.querySelector(".scb-options-menu-panel");
+		t && requestAnimationFrame(() => {
+			if (!this.open) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, o = n.left, s = n.bottom + 4, c = r.width, l = r.height;
+			o + c > i - 8 && (o = Math.max(8, i - 8 - c)), o < 8 && (o = 8);
+			let u = "top";
+			if (s + l > a - 8) {
+				let e = n.top - 4 - l;
+				e >= 8 && (s = e, u = "bottom");
+			}
+			this.style.position = "fixed", this.style.left = `${Math.round(o)}px`, this.style.top = `${Math.round(s)}px`, this.style.setProperty("--scb-options-menu-transform-origin", u);
+		});
+	}
+	__restoreFocusToTrigger() {
+		this.__lastTriggerEl && requestAnimationFrame(() => {
+			this.__lastTriggerEl?.focus?.();
+		});
+	}
+	__updateTriggersExpanded() {
+		if (!this.id) return;
+		let e = String(this.open), t = (t) => {
+			t.getAttribute("aria-controls") === this.id && t.setAttribute("aria-expanded", e);
+		};
+		this.__lastTriggerEl && t(this.__lastTriggerEl), document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(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-options-menu-spacing-block-start", t) : this.style.removeProperty("--scb-options-menu-spacing-block-start"), n ? this.style.setProperty("--scb-options-menu-spacing-block-end", n) : this.style.removeProperty("--scb-options-menu-spacing-block-end"), r ? this.style.setProperty("--scb-options-menu-spacing-inline-start", r) : this.style.removeProperty("--scb-options-menu-spacing-inline-start"), i ? this.style.setProperty("--scb-options-menu-spacing-inline-end", i) : this.style.removeProperty("--scb-options-menu-spacing-inline-end");
+	}
+	__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([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "open", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), e([a({
+	type: Boolean,
+	attribute: !1
+})], o.prototype, "inSb", 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-options-menu")], o);
+//#endregion
+export { o as ScbOptionsMenu };

package/scb-options-menu/scb-options-sub-menu.js

@@ -0,0 +1,69 @@
+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-options-menu/scb-options-sub-menu.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this._show = () => {
+			this.setAttribute("open", ""), this.open = !0;
+		}, this._hide = (e) => {
+			this.removeAttribute("open"), this.open = !1, e && e.stopPropagation();
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      position: relative;
+        --scb-options-sub-menu-max-width: 300px;
+        --scb-options-sub-menu-max-height: 600px;
+    }
+    .submenu {
+        max-width: var(--scb-options-sub-menu-max-width);
+        max-height: var(--scb-options-sub-menu-max-height);
+      min-width: 112px;
+      display: none;
+      position: absolute;
+      left: 100%;
+      top: var(--scb-options-sub-menu-offset-top, -44px);
+      z-index: 100;
+      padding: var(--scb-options-menu-panel-padding-block, var(--spacing-3, 8px)) 0;
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host([open-left]) .submenu {
+      left: auto;
+      right: 100%;
+    }
+    :host([open]) .submenu,
+    .submenu.open {
+      display: block;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("show-submenu", this._show), this.addEventListener("showsubmenu", this._show), this.addEventListener("hide-submenu", this._hide), this.addEventListener("hidesubmenu", this._hide);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("show-submenu", this._show), this.removeEventListener("showsubmenu", this._show), this.removeEventListener("hide-submenu", this._hide), this.removeEventListener("hidesubmenu", this._hide), super.disconnectedCallback();
+	}
+	firstUpdated() {
+		let e = 0, t = this.parentElement;
+		for (; t;) t.tagName === "SCB-OPTIONS-SUB-MENU" && e++, t = t.parentElement;
+		e % 2 == 1 ? this.setAttribute("open-left", "") : this.removeAttribute("open-left");
+	}
+	render() {
+		return r`
+      <div role="menu" class="submenu${this.open ? " open" : ""}">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "open", void 0), o = e([i("scb-options-sub-menu")], o);
+//#endregion
+export { o as ScbOptionsSubMenu };

package/scb-overlay/scb-overlay.js

@@ -0,0 +1,144 @@
+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";
+//#region src/scb-test-components/scb-overlay/scb-overlay.ts
+var s, c = class extends t {
+	static {
+		s = this;
+	}
+	constructor(...e) {
+		super(...e), this.open = !1, this.variant = "scrim", this.isStatic = !1, this.ariaLabel = "", this.__lastTriggerEl = null, this.#r = (e) => {
+			this.isStatic || this.#n(e) || this.#t();
+		}, this.#i = (e) => {
+			this.open && e.key === "Escape" && this.#t();
+		};
+	}
+	static {
+		this.__instances = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.__docListenerAttached = !1;
+	}
+	static __handleDocClick(e) {
+		let t = e.composedPath();
+		for (let e of t) {
+			if (!(e instanceof Element)) continue;
+			let t = e.getAttribute("data-overlay-open"), n = e.getAttribute("data-overlay-close"), r = e.getAttribute("data-overlay-toggle"), i = e.getAttribute("aria-controls"), a = t || n || r || i;
+			if (!a) continue;
+			let o = s.__instances.get(a);
+			if (!o) {
+				s.__instances.delete(a);
+				continue;
+			}
+			o.__lastTriggerEl = e, t ? o.#e(!0) : n ? o.#e(!1) : o.#e(!o.open);
+			break;
+		}
+	}
+	static __ensureDocListener() {
+		s.__docListenerAttached || (document.addEventListener("click", s.__handleDocClick, !0), s.__docListenerAttached = !0);
+	}
+	static __maybeRemoveDocListener() {
+		!s.__docListenerAttached || s.__instances.size > 0 || (document.removeEventListener("click", s.__handleDocClick, !0), s.__docListenerAttached = !1);
+	}
+	static {
+		this.styles = n`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: var(--scb-overlay-z-index, 1000);
+      display: none;
+      box-sizing: border-box;
+    }
+
+    :host([open]) {
+      display: block;
+    }
+
+    .scrim {
+      display: grid;
+      place-items: center;
+      inline-size: 100%;
+      block-size: 100%;
+      padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
+      background: var(
+        --scb-overlay-backdrop,
+        color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent)
+      );
+      box-sizing: border-box;
+    }
+
+    :host([variant='solid']) .scrim {
+      background: var(--md-sys-color-surface);
+    }
+
+    .content {
+      position: relative;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+      box-sizing: border-box;
+    }
+
+    .content ::slotted(*) {
+      margin: auto;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+    }
+  `;
+	}
+	#e(e) {
+		this.open = e;
+	}
+	#t() {
+		this.open && (this.isStatic || (this.#e(!1), this.dispatchEvent(new CustomEvent("scb-overlay-dismiss", {
+			bubbles: !0,
+			composed: !0
+		}))));
+	}
+	#n(e) {
+		let t = this.renderRoot.querySelector("slot");
+		if (!(t instanceof HTMLSlotElement)) return !1;
+		let n = e.composedPath();
+		return t.assignedNodes({ flatten: !0 }).some((e) => n.includes(e));
+	}
+	#r;
+	#i;
+	#a() {
+		this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-overlay-toggle="${this.id}"], [data-overlay-open="${this.id}"], [data-overlay-close="${this.id}"]`).forEach((e) => {
+			e.hasAttribute("aria-controls") && e.setAttribute("aria-expanded", String(this.open));
+		});
+	}
+	render() {
+		return this.open ? r`
+      <div class="scrim" @click=${this.#r}>
+        <div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel || i}">
+          <slot></slot>
+        </div>
+      </div>
+    ` : i;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id && s.__instances.set(this.id, this), s.__ensureDocListener(), window.addEventListener("keydown", this.#i);
+	}
+	updated(e) {
+		e.has("open") && this.#a();
+	}
+	disconnectedCallback() {
+		this.id && s.__instances.delete(this.id), s.__maybeRemoveDocListener(), window.removeEventListener("keydown", this.#i), super.disconnectedCallback();
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "static"
+})], c.prototype, "isStatic", void 0), e([o({
+	type: String,
+	attribute: "aria-label"
+})], c.prototype, "ariaLabel", void 0), c = s = e([a("scb-overlay")], c);
+//#endregion
+export { c as ScbOverlay };