scb-wc 0.1.2 → 0.1.4

package/scb-drawer/scb-drawer.js

@@ -0,0 +1,297 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-divider/scb-divider.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-drawer/scb-drawer.ts
+var s, c = class extends t {
+	static {
+		s = this;
+	}
+	constructor(...e) {
+		super(...e), this.floating = !0, this.left = !0, this.right = !1, this.open = !1, this.overlay = !1, this.lockScroll = !1, this.closeOnOverlay = !0, this.modal = !1, this.__effectiveSide = "left", this.__lastTriggerEl = null, this.__lastTriggerWasAriaControls = !1, this.__onDocumentClick = (e) => {
+			let t = this.__getActionFromEvent(e);
+			if (t) {
+				t === "open" && this.__setOpen(!0), t === "close" && this.__setOpen(!1), t === "toggle" && this.__setOpen(!this.open), e.stopPropagation();
+				return;
+			}
+			this.floating && this.open && !this.overlay && (e.composedPath().includes(this) || this.__setOpen(!1));
+		}, this.__onDocumentKeydown = (e) => {
+			if (this.open) {
+				if (e.key === "Escape") {
+					this.__setOpen(!1);
+					return;
+				}
+				if (this.overlay && e.key === "Tab") {
+					let t = this.__getFocusable();
+					if (t.length === 0) return;
+					let n = t[0], r = t[t.length - 1], i = document.activeElement;
+					e.shiftKey ? (i === n || !i || !this.contains(i)) && (e.preventDefault(), r.focus()) : (i === r || !i || !this.contains(i)) && (e.preventDefault(), n.focus());
+				}
+			}
+		};
+	}
+	static {
+		this.__overlayEl = null;
+	}
+	static {
+		this.__overlayStack = [];
+	}
+	static {
+		this.__lockedCount = 0;
+	}
+	static {
+		this.__prevDocOverflow = null;
+	}
+	static {
+		this.__prevBodyOverflow = null;
+	}
+	static {
+		this.__prevDocPaddingRight = null;
+	}
+	static {
+		this.__prevBodyPaddingRight = null;
+	}
+	static __ensureOverlayStyles() {
+		if (typeof document > "u" || document.getElementById("scb-drawer-overlay-styles")) return;
+		let e = document.createElement("style");
+		e.id = "scb-drawer-overlay-styles", e.textContent = "\n      .scb-drawer-global-overlay {\n        position: fixed;\n        inset: 0;\n        background: var(--scb-drawer-overlay-color, rgba(0,0,0,0.32));\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 200ms ease;\n        z-index: var(--scb-drawer-overlay-z, 999);\n      }\n      .scb-drawer-global-overlay.is-visible {\n        opacity: 1;\n        pointer-events: auto;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .scb-drawer-global-overlay { transition: none; }\n      }\n    ", document.head.appendChild(e);
+	}
+	static __ensureOverlay() {
+		if (typeof document > "u" || s.__overlayEl) return;
+		s.__ensureOverlayStyles();
+		let e = document.createElement("div");
+		e.className = "scb-drawer-global-overlay", e.addEventListener("pointerdown", () => {
+			let e = s.__overlayStack[s.__overlayStack.length - 1];
+			e && e.closeOnOverlay && e.__setOpen(!1);
+		}, { passive: !0 }), document.body.appendChild(e), s.__overlayEl = e;
+	}
+	static __showOverlay(e) {
+		s.__ensureOverlay(), s.__overlayEl && (s.__overlayStack.includes(e) || s.__overlayStack.push(e), s.__overlayEl.classList.add("is-visible"));
+	}
+	static __hideOverlay(e) {
+		let t = s.__overlayStack.indexOf(e);
+		t >= 0 && s.__overlayStack.splice(t, 1), s.__overlayStack.length === 0 && s.__overlayEl && s.__overlayEl.classList.remove("is-visible");
+	}
+	static __lockScrollEnable() {
+		if (!(typeof document > "u")) {
+			if (s.__lockedCount === 0) {
+				s.__prevDocOverflow = document.documentElement.style.overflow || "", s.__prevBodyOverflow = document.body.style.overflow || "", s.__prevDocPaddingRight = document.documentElement.style.paddingRight || "", s.__prevBodyPaddingRight = document.body.style.paddingRight || "";
+				let e = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+				if (e > 0) {
+					let t = Number.parseFloat(getComputedStyle(document.documentElement).paddingRight || "0"), n = Number.parseFloat(getComputedStyle(document.body).paddingRight || "0");
+					document.documentElement.style.paddingRight = `${t + e}px`, document.body.style.paddingRight = `${n + e}px`;
+				}
+				document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden";
+			}
+			s.__lockedCount++;
+		}
+	}
+	static __lockScrollDisable() {
+		typeof document > "u" || (s.__lockedCount = Math.max(0, s.__lockedCount - 1), s.__lockedCount === 0 && (document.documentElement.style.overflow = s.__prevDocOverflow ?? "", document.body.style.overflow = s.__prevBodyOverflow ?? "", document.documentElement.style.paddingRight = s.__prevDocPaddingRight ?? "", document.body.style.paddingRight = s.__prevBodyPaddingRight ?? ""));
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: var(--scb-drawer-padding, var(--spacing-4, 12px));
+      background: var(
+        --scb-drawer-background,
+        var(--md-sys-color-surface-container)
+      );
+      font-family: var(--brand-font);
+    }
+
+    :host([floating]) {
+      position: fixed;
+      top: 0;
+      height: 100vh;
+      height: 100dvh;
+      width: clamp(
+        var(--scb-drawer-min-width, 280px),
+        var(--scb-drawer-fluid-width, 70vw),
+        var(--scb-drawer-max-width, 360px)
+      );
+      --scb-drawer-background: var(--md-sys-color-surface-container-lowest);
+      box-shadow: var(
+        --scb-drawer-elevation,
+        2px 0 12px rgba(0, 0, 0, 0.15)
+      );
+      border-radius: var(--scb-drawer-surface-radius, 0);
+      z-index: var(--scb-drawer-z, 1000);
+      transition:
+        transform 0.3s ease,
+        opacity 0.3s ease,
+        visibility 0.3s;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      will-change: transform;
+      font-family: var(--brand-font);
+      overflow: hidden;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([floating]) {
+        transition: none;
+      }
+    }
+
+    :host([floating][data-side="left"]) {
+      left: 0;
+      transform: translateX(-100%);
+    }
+    :host([floating][data-side="left"][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    :host([floating][data-side="right"]) {
+      right: 0;
+      transform: translateX(100%);
+      box-shadow: var(
+        --scb-drawer-elevation,
+        -2px 0 12px rgba(0, 0, 0, 0.15)
+      );
+    }
+    :host([floating][data-side="right"][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    ::slotted(scb-menu) {
+      background: var(--md-sys-color-surface-container-lowest);
+      --scb-menu-background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .root {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .panel {
+      contain: layout paint style;
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+      scrollbar-gutter: stable;
+      -webkit-overflow-scrolling: touch;
+    }
+    :host([floating]:not([open])) .panel {
+      content-visibility: auto;
+      contain-intrinsic-size: 0 600px;
+    }
+
+    @supports not (scrollbar-gutter: stable) {
+      .panel {
+        overflow-y: scroll;
+      }
+    }
+  `;
+	}
+	render() {
+		let e = this.modal && this.overlay && this.floating;
+		return r`
+      <div
+        class="root"
+        role=${e ? "dialog" : i}
+        aria-modal=${e ? "true" : i}
+      >
+        <div class="panel"><slot></slot></div>
+      </div>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.__syncEffectiveSide(/* @__PURE__ */ new Map()), document.addEventListener("click", this.__onDocumentClick, !1);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), this.overlay && (s.__hideOverlay(this), this.lockScroll && s.__lockScrollDisable()), super.disconnectedCallback();
+	}
+	__getActionFromEvent(e) {
+		if (!this.id) return null;
+		let t = e.composedPath();
+		for (let e of t) if (e instanceof Element) {
+			if (e.getAttribute("data-drawer-open") === this.id) return this.__lastTriggerEl = e, this.__lastTriggerWasAriaControls = !1, "open";
+			if (e.getAttribute("data-drawer-close") === this.id) return this.__lastTriggerEl = e, this.__lastTriggerWasAriaControls = !1, "close";
+			if (e.getAttribute("data-drawer-toggle") === this.id) return this.__lastTriggerEl = e, this.__lastTriggerWasAriaControls = !1, "toggle";
+			if (e.getAttribute("aria-controls") === this.id) return this.__lastTriggerEl = e, this.__lastTriggerWasAriaControls = !0, "toggle";
+		}
+		return null;
+	}
+	__getFocusable() {
+		let e = /* @__PURE__ */ new Set(), t = (t) => {
+			t.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])").forEach((t) => e.add(t));
+		};
+		return t(this), t(this.renderRoot), Array.from(e).filter((e) => !e.hasAttribute("disabled") && e.tabIndex >= 0);
+	}
+	__setOpen(e) {
+		this.open = e;
+	}
+	__syncLastTriggerExpanded(e) {
+		this.__lastTriggerEl && this.__lastTriggerWasAriaControls && this.__lastTriggerEl.getAttribute("aria-controls") === this.id && this.__lastTriggerEl.setAttribute("aria-expanded", String(e));
+	}
+	__syncEffectiveSide(e) {
+		let t = this.left && this.right, n;
+		n = t ? e.has("left") && this.left && !e.has("right") ? "left" : "right" : this.right ? "right" : "left", this.__effectiveSide !== n && (this.__effectiveSide = n), this.getAttribute("data-side") !== n && this.setAttribute("data-side", n);
+	}
+	willUpdate(e) {
+		this.__syncEffectiveSide(e);
+	}
+	updated(e) {
+		if (e.has("open")) {
+			let t = !!e.get("open");
+			this.__applyOpenSideEffects(t, this.open);
+		}
+	}
+	__applyOpenSideEffects(e, t) {
+		t && !e ? (this.__syncLastTriggerExpanded(!0), this.floating && this.overlay && (s.__showOverlay(this), this.lockScroll && s.__lockScrollEnable()), document.addEventListener("keydown", this.__onDocumentKeydown, !0), this.updateComplete.then(() => {
+			this.__getFocusable()[0]?.focus?.();
+		}), this.dispatchEvent(new CustomEvent("scb-drawer-opened", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("scbdraweropened", {
+			bubbles: !0,
+			composed: !0
+		}))) : !t && e && (this.__syncLastTriggerExpanded(!1), this.floating && this.overlay && (s.__hideOverlay(this), this.lockScroll && s.__lockScrollDisable()), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), this.__lastTriggerEl?.focus?.(), this.dispatchEvent(new CustomEvent("scb-drawer-closed", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("scbdrawerclosed", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "floating", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "left", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "right", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "overlay", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "lock-scroll"
+})], c.prototype, "lockScroll", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "close-on-overlay"
+})], c.prototype, "closeOnOverlay", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "modal", void 0), c = s = e([a("scb-drawer")], c);
+//#endregion
+export { c as ScbDrawer };