@pnx-mixtape/mxds 0.1.0-rc.3 → 0.1.0-rc.5

package/dist/build/chunks/Sticky-DoVndENm.js

@@ -0,0 +1,51 @@
+import { t as e } from "./utilities-Dd-08SW6.js";
+//#region src/Component/Sticky/Elements/Sticky.ts
+var t = class extends HTMLElement {
+	internals_;
+	iO;
+	rO;
+	offsetPropName;
+	root = null;
+	rootMargin = "0px 0px 0px 0px";
+	thresholds = [0];
+	constructor() {
+		super(), this.internals_ = this.attachInternals();
+	}
+	connectedCallback() {
+		this.offsetPropName = this.getAttribute("offsetpropname") || "--sticky-offset";
+		let e = {
+			root: this.root,
+			rootMargin: this.rootMargin,
+			thresholds: this.thresholds
+		};
+		this.iO = new IntersectionObserver(([{ boundingClientRect: t }]) => {
+			let n = t.y < 0;
+			this.classList.toggle("is-stuck", n);
+			let r = new CustomEvent("sticky-toggle", {
+				bubbles: !0,
+				cancelable: !0,
+				detail: {
+					isSticky: n,
+					options: e,
+					target: this
+				}
+			});
+			this.dispatchEvent(r);
+		}, e), this.iO.observe(this.trigger), this.offsetPropName && (this.rO = new ResizeObserver((e) => {
+			e.forEach(({ borderBoxSize: e }) => {
+				let [{ blockSize: t }] = e;
+				document.body.style.setProperty(this.offsetPropName, `${t.toFixed(1)}px`);
+			});
+		}), this.rO.observe(this));
+	}
+	disconnectedCallback() {
+		this.iO.disconnect(), this.rO?.disconnect();
+	}
+	get trigger() {
+		let t = this.querySelector(".mx-sticky__trigger");
+		return t || (t = e("<div class=\"mx-sticky__trigger\"></div>"), this.insertAdjacentElement("beforebegin", t)), t;
+	}
+};
+customElements.get("mx-sticky") || customElements.define("mx-sticky", t);
+//#endregion
+export { t };

package/dist/build/chunks/Tabs-BDlxCDNh.js

@@ -0,0 +1,160 @@
+import { s as e, t } from "./utilities-Dd-08SW6.js";
+import { t as n } from "./DropMenu-CSTZq0Zt.js";
+import { PopoverPlacementModifier as r } from "@pnx-mixtape/ids-shape";
+//#region src/Component/Tabs/Elements/Tabs.ts
+var i = class extends HTMLElement {
+	internals_;
+	controller;
+	tabs;
+	mq;
+	locationHash;
+	tabFocus = 0;
+	tabListClasses;
+	dropTriggerClasses;
+	dropMenuId;
+	constructor() {
+		super(), this.internals_ = this.attachInternals(), this.controller = new AbortController(), this.mq = this.getAttribute("mq") || "(max-width: 720px)";
+	}
+	connectedCallback() {
+		if (!this.panels) return;
+		this.locationHash = window.location.hash, this.tabFocus = 0, this.tabs = /* @__PURE__ */ new Map(), this.panels.forEach((e) => {
+			let n = e.id, r = `<button type="button" role="tab" aria-controls="${n}" aria-selected="false">${e.getAttribute("aria-label")}</button>`, i = t(r);
+			this.tabList.appendChild(i);
+			let a = t(r);
+			this.dropMenuMenu.appendChild(a), n && e && a && this.tabs.set(n, {
+				panel: e,
+				tab: i,
+				button: a
+			});
+		});
+		let { signal: e } = this.controller;
+		this.handleBreakpoint(this.breakpoint), this.breakpoint.addEventListener("change", this.handleBreakpoint, { signal: e });
+		let n = this.locationHash ? this.querySelector(this.locationHash) : null;
+		n ? this.active = n.id : this.active ||= this.panels[0].id;
+	}
+	disconnectedCallback() {
+		this.controller.abort();
+	}
+	handleBreakpoint = ({ matches: e }) => {
+		let { signal: t } = this.controller;
+		this.dropMenuTrigger.toggleAttribute("hidden", !e), this.tabList.toggleAttribute("hidden", e), e ? (this.dropMenuMenu.addEventListener("drop-menu-select", this.handleDropMenuSelect, { signal: t }), this.tabList.removeEventListener("click", this.handleClick), this.tabList.removeEventListener("keydown", this.handleKeydown)) : (this.tabList.addEventListener("click", this.handleClick, { signal: t }), this.tabList.addEventListener("keydown", this.handleKeydown, { signal: t }), this.dropMenuMenu.removeEventListener("drop-menu-select", this.handleDropMenuSelect));
+	};
+	handleKeydown = (e) => {
+		let { key: t, target: n } = e, r = [...this.triggers], i = r.indexOf(n);
+		if (i === -1) return;
+		let a = 0;
+		switch (t) {
+			case "ArrowRight":
+				a = (i + 1) % r.length;
+				break;
+			case "ArrowLeft":
+				a = (i - 1 + r.length) % r.length;
+				break;
+			case "Home":
+				a = 0;
+				break;
+			case "End":
+				a = r.length - 1;
+				break;
+			default: return;
+		}
+		e.preventDefault(), e.stopPropagation(), r[a].focus();
+	};
+	handleClick = (e) => {
+		let t = e.target;
+		if (!(t instanceof HTMLButtonElement)) return;
+		e.preventDefault();
+		let n = t.getAttribute("aria-controls");
+		this.handleTabChange(n);
+	};
+	handleDropMenuSelect = (e) => {
+		let t = e.detail.target;
+		if (!(t instanceof HTMLButtonElement)) return;
+		let n = t.getAttribute("aria-controls");
+		this.handleTabChange(n);
+	};
+	handleTabChange = (e) => {
+		this.active = e, this.handleUrlParams(e);
+		let { panel: t, tab: n, button: r } = this.tabs.get(e);
+		t.focus({ preventScroll: !0 });
+		let i = new CustomEvent("tab-toggle", {
+			bubbles: !0,
+			cancelable: !0,
+			detail: {
+				id: e,
+				tab: n,
+				button: r,
+				panel: t
+			}
+		});
+		this.dispatchEvent(i);
+	};
+	get dropMenu() {
+		let i = this.querySelector("mx-dropmenu");
+		if (i) return i;
+		this.dropTriggerClasses = this.getAttribute("dropTriggerClasses") || "mx-button mx-icon mx-icon--chevron-down mx-icon--end", this.dropMenuId = this.id ? `${this.id}-drop-menu` : e("tab-drop-menu");
+		let a = `${this.dropMenuId}-target`, o = `${a}-description`, s = `${this.dropMenuId}-description`, c = new n();
+		c.setAttribute("closeOnClick", "true");
+		let l = t(`<button
+                  id="${a}"
+                  class="mx-popover__trigger ${this.dropTriggerClasses}"
+                  popovertarget="${this.dropMenuId}"
+                  style="anchor-name: --${this.dropMenuId}"
+                  aria-describedby="${o}"
+                  hidden
+              ></button>`), u = t(`<span id="${o}" class="sr-only" aria-hidden="true">Select a tab</span>`), d = t(`<span id="${s}" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span>`), f = t(`<div
+                  class="mx-popover mx-drop-menu"
+                  id="${this.dropMenuId}"
+                  aria-labelledby="${a}"
+                  aria-describedby="${s}"
+                  style="position-anchor: --${this.dropMenuId}"
+                  data-placement="${r.BOTTOM_START}"
+                  popover
+                  role="tablist"
+              ></div>`);
+		return c.append(l, u, d, f), this.prepend(c), c;
+	}
+	get dropMenuMenu() {
+		return this.dropMenu.querySelector("[popover][role=\"tablist\"]");
+	}
+	get dropMenuTrigger() {
+		return this.dropMenu.querySelector("[popovertarget]");
+	}
+	get tabList() {
+		this.tabListClasses = this.getAttribute("tabListClasses") || "mx-tabs__list";
+		let e = this.querySelector("[role=\"tablist\"]:not([popover])");
+		if (e) return e;
+		let n = t(`<div class="${this.tabListClasses}" role="tablist" hidden></div>`);
+		return this.prepend(n), n;
+	}
+	get triggers() {
+		let e = this.tabList.querySelectorAll("[role=\"tab\"]");
+		if (!e.length) throw Error(`${this.localName} must contain [role="tab"]`);
+		return e;
+	}
+	get panels() {
+		let e = this.querySelectorAll("[data-tab]");
+		if (!e.length) throw Error(`${this.localName} must contain [data-tab]`);
+		return e.forEach((e) => {
+			e.setAttribute("role", "tabpanel"), e.setAttribute("tabindex", "-1"), e.setAttribute("aria-label", e.getAttribute("data-tab"));
+		}), e;
+	}
+	get active() {
+		return this.querySelector("[aria-selected=\"true\"]");
+	}
+	get breakpoint() {
+		return window.matchMedia(this.mq);
+	}
+	set active(e) {
+		this.tabs.forEach(({ tab: t, button: n, panel: r }, i) => {
+			i === e ? (t.setAttribute("aria-selected", "true"), n.setAttribute("aria-selected", "true"), t.setAttribute("tabindex", "0"), r.removeAttribute("inert"), this.dropMenuTrigger.textContent = t.textContent) : (t.setAttribute("aria-selected", "false"), n.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1"), r.setAttribute("inert", ""));
+		});
+	}
+	handleUrlParams = (e) => {
+		let t = new URLSearchParams(window.location.search);
+		t.get("tab") !== e && (t.set("tab", e), window.history.replaceState({}, "", `${window.location.pathname}?${t.toString()}`));
+	};
+};
+customElements.get("mx-tabs") || customElements.define("mx-tabs", i);
+//#endregion
+export { i as t };

package/dist/build/chunks/Translate-bmM38j6z.js

@@ -0,0 +1,46 @@
+import { l as e } from "./utilities-Dd-08SW6.js";
+import { t } from "./DropMenu-CSTZq0Zt.js";
+//#region src/Component/Translate/Elements/Translate.ts
+var n = class extends t {
+	widget;
+	async connectedCallback() {
+		if (await super.connectedCallback(), !this.container) return;
+		this.widget = new e(this, {
+			defaultLanguage: this.dataset.defaultLanguage || "en",
+			blockedPaths: (this.dataset.blockedPaths || "").split(",").map((e) => e.trim()).filter(Boolean),
+			scriptUrl: this.dataset.scriptUrl,
+			storageKey: this.dataset.storageKey,
+			updateTriggerLabel: this.dataset.updateTriggerLabel !== "false",
+			notice: this.dataset.noticeContent ? {
+				content: this.dataset.noticeContent,
+				blockedContent: this.dataset.noticeBlockedContent,
+				anchorSelector: this.dataset.noticeAnchor,
+				position: this.dataset.noticePosition
+			} : void 0,
+			onLanguageChange: (e) => this.dispatchLifecycleEvent("translate-language-change", e)
+		}), this.widget.init();
+		let { signal: t } = this.controller;
+		this.container.addEventListener("drop-menu-select", this.handleLanguageSelect, { signal: t }), this.container.addEventListener("toggle", (e) => {
+			let { newState: t } = e;
+			this.dispatchLifecycleEvent(t === "open" ? "translate-open" : "translate-close");
+		}, { signal: t });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.widget?.destroy();
+	}
+	handleLanguageSelect = (e) => {
+		let { target: t } = e.detail;
+		if (!(t instanceof HTMLAnchorElement)) return;
+		let n = t.dataset.language;
+		n && this.widget?.setLanguage(n);
+	};
+	dispatchLifecycleEvent(e, t) {
+		this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			detail: t ? { code: t } : {}
+		}));
+	}
+};
+customElements.get("mx-translate") || customElements.define("mx-translate", n);
+//#endregion
+export { n as t };

package/dist/build/chunks/cookie-compliance-CG6x-TcV.js

@@ -0,0 +1,119 @@
+import e from "js-cookie";
+//#region src/Utility/Elements/validators.ts
+var t = {
+	url: (e, t = ["http:", "https:"]) => {
+		try {
+			let n = new URL(e);
+			return t.includes(n.protocol);
+		} catch {
+			return !1;
+		}
+	},
+	email: (e) => typeof e == "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),
+	number: (e, t, n) => {
+		let r = Number(e);
+		return !(isNaN(r) || t !== void 0 && r < t || n !== void 0 && r > n);
+	},
+	integer: (e, t, n) => {
+		let r = Number(e);
+		return !(isNaN(r) || !Number.isInteger(r) || t !== void 0 && r < t || n !== void 0 && r > n);
+	},
+	string: (e, t, n) => !(typeof e != "string" || t !== void 0 && e.length < t || n !== void 0 && e.length > n),
+	notEmpty: (e) => typeof e == "string" && e.trim().length > 0,
+	pattern: (e, t) => typeof e == "string" && (t.lastIndex = 0, t.test(e)),
+	oneOf: (e, t) => t.includes(e),
+	array: (e, t, n) => !(!Array.isArray(e) || t !== void 0 && e.length < t || n !== void 0 && e.length > n),
+	json: (e) => {
+		if (typeof e != "string") return !1;
+		try {
+			return JSON.parse(e), !0;
+		} catch {
+			return !1;
+		}
+	},
+	date: (e, t, n) => {
+		let r = e instanceof Date ? e : new Date(e);
+		return !(isNaN(r.getTime()) || t && r < t || n && r > n);
+	},
+	hexColor: (e) => typeof e == "string" && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(e)
+}, n = class n {
+	banner;
+	acceptBtn;
+	moreBtn;
+	rejectBtn;
+	controller;
+	bots;
+	cookieName;
+	waitRemove;
+	trackingCookiesNames;
+	hostname;
+	timeout;
+	defaultCookieSettings;
+	constructor(e) {
+		this.banner = e, this.acceptBtn = e.querySelector("[data-cookie-accept]"), this.moreBtn = e.querySelector("[data-cookie-more]"), this.rejectBtn = e.querySelector("[data-cookie-reject]"), this.controller = new AbortController(), this.bots = /bot|crawler|spider|crawling/i, this.cookieName = "has-cookie-consent";
+		let n = this.banner.dataset.waitRemove;
+		this.waitRemove = n && t.integer(n, 0) ? parseInt(n, 10) : 0, this.trackingCookiesNames = [
+			"__utma",
+			"__utmb",
+			"__utmc",
+			"__utmt",
+			"__utmv",
+			"__utmz",
+			"_ga",
+			"_gat",
+			"_gid"
+		];
+	}
+	init = () => {
+		this.hostname = document.location.hostname.replace(/^www\./, ""), this.defaultCookieSettings = {
+			path: "/",
+			expires: 365,
+			sameSite: "Lax"
+		};
+		let e = this.bots.test(navigator.userAgent), t = navigator.doNotTrack || navigator.msDoNotTrack || window.doNotTrack;
+		e || !(t == null || t && t !== "yes" && t !== 1 && t !== "1") || this.hasConsent() === !1 ? this.removeBanner(0) : this.hasConsent() !== !0 && this.showBanner();
+	};
+	showBanner = () => {
+		let { signal: e } = this.controller;
+		this.banner.removeAttribute("inert"), this.moreBtn && this.moreBtn.addEventListener("click", () => this.deleteCookie(), { signal: e }), this.acceptBtn && this.acceptBtn.addEventListener("click", this.accept, { signal: e }), this.rejectBtn && this.rejectBtn.addEventListener("click", this.reject, { signal: e }), window.CookieCompliance = this;
+	};
+	reject = () => {
+		this.removeBanner(this.waitRemove), this.setCookie("false"), this.trackingCookiesNames.forEach((e) => this.deleteCookie(e));
+	};
+	accept = () => {
+		this.removeBanner(this.waitRemove), this.setCookie("true");
+	};
+	hasConsent = () => {
+		let t = e.get(this.cookieName);
+		return t === "true" || t !== "false" && null;
+	};
+	setCookie = (t) => {
+		e.set(this.cookieName, t, this.defaultCookieSettings), e.set(this.cookieName, t, {
+			domain: `.${this.hostname}`,
+			...this.defaultCookieSettings
+		});
+	};
+	deleteCookie = (t = this.cookieName) => {
+		e.remove(t, this.defaultCookieSettings), e.remove(t, {
+			domain: `.${this.hostname}`,
+			...this.defaultCookieSettings
+		});
+	};
+	removeBanner = (e) => {
+		this.timeout = setTimeout(() => {
+			this.banner && this.banner.parentNode && (this.banner.parentNode.removeChild(this.banner), this.destroy());
+		}, e);
+	};
+	destroy() {
+		clearTimeout(this.timeout), this.controller.abort(), this.controller = new AbortController(), window.CookieCompliance === this && (window.CookieCompliance = void 0);
+	}
+	static create({ context: e = null } = {}) {
+		let [t] = window.once("cookie-compliance", "#cookie-compliance", e || document);
+		if (t) {
+			let e = new n(t);
+			e.init(), window.CookieCompliance = e;
+		}
+	}
+};
+//#endregion
+export { t as n, n as t };

package/dist/build/chunks/enums-BrHxPZZ_.js

@@ -0,0 +1,36 @@
+//#region src/enums.ts
+var e = [], t = 400, n = /* @__PURE__ */ function(e) {
+	return e.LEFT = "left", e.RIGHT = "right", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.DIV = "div", e.LI = "li", e.ARTICLE = "article", e.ASIDE = "aside", e.SECTION = "section", e;
+}({}), i = /* @__PURE__ */ function(e) {
+	return e.P = "p", e.DIV = "div", e.STRONG = "strong", e.ITALIC = "em", e;
+}({}), a = /* @__PURE__ */ function(e) {
+	return e.HEADLINE = "mx-headline", e.EYEBROW = "mx-text--eyebrow", e.EMBELLISHED = "mx-text--embellished", e.RESET = "mx-spacing--reset", e.RESETTOP = "mx-spacing--top-reset", e.RESETBOTTOM = "mx-spacing--bottom-reset", e;
+}({}), o = /* @__PURE__ */ function(e) {
+	return e.SECTION = "mx-text--eyebrow", e.EMBELLISHED = "mx-text--embellished", e.XXXL = "mx-text--xxxl", e.XXL = "mx-text--xxl", e.XL = "mx-text--xl", e.L = "mx-text--l", e.M = "mx-text--m", e.S = "mx-text--s", e.XS = "mx-text--xs", e.LEDE = "mx-text--lede", e.META = "mx-text--meta", e.PRIMARY = "mx-text--primary", e.ACCENT = "mx-text--accent", e.ALT = "mx-text--alt", e;
+}({}), s = /* @__PURE__ */ function(e) {
+	return e.NOTES = "mx-list--notes", e.REFS = "mx-list--refs", e.STATS = "mx-list--stats", e.COLUMNS = "mx-list--columns", e.SUMMARY = "mx-list--summary", e;
+}({}), c = /* @__PURE__ */ function(e) {
+	return e.ARROW_DOWN = "arrow-down", e.ARROW_LEFT = "arrow-left", e.ARROW_UP = "arrow-up", e.ARROW_RIGHT = "arrow-right", e.CHEVRON_DOWN = "chevron-down", e.CHEVRON_LEFT = "chevron-left", e.CHEVRON_RIGHT = "chevron-right", e.CHEVRON_UP = "chevron-up", e.BLUESKY = "bluesky", e.CLOSE = "close", e.COLLAPSE = "collapse", e.DOWNLOAD = "download", e.DRUPAL = "drupal", e.ERROR = "error", e.EXPAND = "expand", e.EXTERNAL = "external-link", e.FACEBOOK = "facebook", e.GOOGLE = "google", e.INFO = "info", e.FILE = "file", e.INSTAGRAM = "instagram", e.LINKEDIN = "linkedin", e.MASTODON = "mastodon", e.MENU = "menu", e.SEARCH = "search", e.SUCCESS = "success", e.TWITTER = "twitter", e.WARNING = "warning", e.YOUTUBE = "youtube", e.EMAIL = "email", e.HEART = "heart-selected", e.EMPTY_HEART = "heart-unselected", e.LINK = "link", e.LOCK = "lock", e.LOGIN = "login", e.MORE = "more", e.EDIT = "pencil", e.PHONE = "phone", e.PIN = "pin", e.PRINT = "print", e.RESTART = "restart", e.STAR = "star-selected", e.EMPTY_STAR = "star-unselected", e.TICK = "tick", e.TRASH = "trash", e.USER = "user", e.SHARE = "share", e.QUESTION = "question", e.THUMB = "thumb", e.GLOBE = "globe", e;
+}({}), l = /* @__PURE__ */ function(e) {
+	return e.NARROW = "narrow", e.FEATURE = "feature", e.FULL = "full", e;
+}({}), u = /* @__PURE__ */ function(e) {
+	return e.FLOW = "flow", e.GROUP = "group", e;
+}({}), d = /* @__PURE__ */ function(e) {
+	return e.DEFAULT = "", e.REVERSE = "sidebar-rev", e.REVERSE_L = "sidebar-rev-lg", e;
+}({}), f = /* @__PURE__ */ function(e) {
+	return e.PRIMARY = "primary", e.ACCENT = "accent", e.ALT = "alt", e.REVERSE = "reverse", e.RESET = "reset", e.BOX = "box", e.IMAGE = "image", e;
+}({}), p = /* @__PURE__ */ function(e) {
+	return e.FLUSH = "flush", e.STRIPED = "striped", e.SMALL = "small", e.BORDERED = "bordered", e;
+}({}), m = /* @__PURE__ */ function(e) {
+	return e.DEFAULT = "default", e.VALID = "valid", e.INVALID = "invalid", e;
+}({}), h = /* @__PURE__ */ function(e) {
+	return e.INFO = "info", e.SUCCESS = "success", e.WARNING = "warning", e.ERROR = "error", e.FEATURED = "featured", e;
+}({}), g = /* @__PURE__ */ function(e) {
+	return e.DEFAULT = "default", e.CENTERED = "centered", e.LINED = "lined", e;
+}({}), _ = /* @__PURE__ */ function(e) {
+	return e.TWITTER = "twitter", e.FACEBOOK = "facebook", e.LINKEDIN = "linkedin", e;
+}({});
+//#endregion
+export { o as _, e as a, c, u as d, d as f, h as g, p as h, t as i, s as l, g as m, r as n, m as o, _ as p, f as r, a as s, n as t, l as u, i as v };

package/dist/build/chunks/polyfills-D-qh1a_2.js

@@ -0,0 +1,33 @@
+//#region src/Component/Popover/polyfills.js
+var e, t = class {
+	constructor(e) {
+		this.popover = e, this.trigger = document.querySelector(`[popovertarget="${e.getAttribute("id")}"]`), this.init();
+	}
+	init = async () => {
+		this.trigger && this.popover && (this.supportsPopover() || await this.ensurePopoverPolyfill(), this.supportsAnchor() || (this.controller = new AbortController(), this.popover.addEventListener("toggle", this.positionPopover, { signal: this.controller.signal })));
+	};
+	supportsAnchor = () => "anchorName" in document.documentElement.style;
+	supportsPopover = () => "popover" in HTMLElement.prototype;
+	ensurePopoverPolyfill = () => (e ||= import("@oddbird/popover-polyfill"), e);
+	positionPopover = async ({ newState: e }) => {
+		if (e === "open") {
+			let { computePosition: e, flip: t, shift: n } = await import("@floating-ui/dom");
+			requestAnimationFrame(() => {
+				e(this.trigger, this.popover, {
+					placement: this.placement || "top",
+					middleware: [t({ padding: 10 }), n({ padding: 10 })]
+				}).then(({ x: e, y: t }) => {
+					this.popover.style.insetInlineStart = `${e}px`, this.popover.style.insetBlockStart = `${t}px`;
+				});
+			});
+		}
+	};
+	destroy() {
+		this.controller.abort();
+	}
+	get placement() {
+		return this.popover.getAttribute("data-placement");
+	}
+};
+//#endregion
+export { t as default };