UNPKG

@xuda.io/xuda-framework-plugin-tailwind

Version:

Xuda Tailwind UI Framework plugin

1,224 lines (1,180 loc) 132 kB
const Nt = { primary: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", secondary: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", tertiary: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", success: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", warning: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", danger: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", light: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", medium: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 ", dark: " border-gray-300 bg-white bg-red-600 text-gray-700 hover:bg-gray-50 focus:ring-indigo-500 " }, On = { init: { type: "string", label: "Theme Configuration", value: ` window.tailwind = window.tailwind || {}; tailwind.config = { darkMode: 'class', theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, extend: { colors: { 'xuda-blue': '#1fb6ff', 'xuda-purple': '#7e5bef', 'xuda-pink': '#ff49db', 'xuda-orange': '#ff7849', 'xuda-green': '#13ce66', 'xuda-yellow': '#ffc82c', 'xuda-gray-dark': '#273444', 'xuda-gray': '#8492a6', 'xuda-gray-light': '#d3dce6', }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, spacing: { '128': '32rem', '144': '36rem', }, borderRadius: { '4xl': '2rem', } } } } `, helper: '<a target="_blank" href="https://ionicframework.com/docs/theming/color-generator"> Color Generator </a>', render: "code", render_params: { lang: "js" }, handler: function() { } } }; function ve(e) { const t = document.createElement("template"); return t.innerHTML = e.trim(), t.content.firstChild; } const _n = class { init(t) { var a; const n = ((a = t == null ? void 0 : t.theme) == null ? void 0 : a.init) || On.init.value; if (!n) return null; var o = "xuda-framework-plugin-tailwind-script-" + Date.now(); const r = document.createElement("script"); r.setAttribute("id", o); const i = ` document.currentScript?.setAttribute('data-xuda-executed', 'true'); window.tailwind = window.tailwind || {}; ${n} window.__xudaTailwindNormalizeTheme = function () { if (!window.tailwind) return; // Create config once if missing -- downstream scripts (theme setup + // the app's header) assume tailwind.config exists. But never re-read // an existing config Proxy and write it back: that re-wrapping on every // call is what froze the page. if (!window.tailwind.config) window.tailwind.config = {}; const config = window.tailwind.config; // Use if(!x) guards rather than x = x or {}: reading then writing // back a property of the Play CDN's reactive config Proxy re-wraps that // property in a fresh Proxy on every call. if (!config.darkMode) config.darkMode = 'class'; if (!config.theme) config.theme = {}; if (!config.theme.extend) config.theme.extend = {}; if (config.theme.colors) { config.theme.extend.colors = { ...config.theme.colors, ...(config.theme.extend.colors || {}), }; delete config.theme.colors; } const normalizeAlphaColor = function (value) { if (Array.isArray(value)) { return value.map(normalizeAlphaColor); } if (value && typeof value === 'object') { return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, normalizeAlphaColor(entry)])); } if (typeof value !== 'string') { return value; } return value.replace(/calc\\(\\s*100%\\s*\\*\\s*<alpha-value>\\s*\\)/g, '100%').replace(/<alpha-value>/g, '1'); }; config.theme.extend.colors = normalizeAlphaColor(config.theme.extend.colors || {}); // Do NOT reassign window.tailwind.config here. The mutations above // already persist through the live config Proxy; writing the Proxy back // re-wraps it in a new Proxy layer every call, and compounded over the // 0/10/50/250ms + per-refresh schedule that makes the CDN's recursive // config-Proxy traversal explode -> "Page Unresponsive". }; window.__xudaTailwindNormalizeTheme(); setTimeout(window.__xudaTailwindNormalizeTheme, 10); setTimeout(window.__xudaTailwindNormalizeTheme, 50); setTimeout(window.__xudaTailwindNormalizeTheme, 250); // The app header registers tailwind.config.plugins asynchronously (its own // setInterval), often after the scheduled refreshes have run. Poll for the // plugins and trigger a capture the moment they appear (or change), so the // custom components (.btn-primary etc.) get serialized to CSS. (function () { if (window.__xudaTailwindPluginWatcher) return; window.__xudaTailwindPluginWatcher = true; var lastLen = -1, ticks = 0, reExecuted = false; var iv = setInterval(function () { var cfg = window.tailwind && window.tailwind.config; // The app's components use theme('colors.primary'); ensure it resolves // (to the app's --primary CSS var) or Tailwind reports an "invalid theme // value" and skips generating the component. if (cfg && cfg.theme && cfg.theme.extend && cfg.theme.extend.colors && !cfg.theme.extend.colors.primary) { cfg.theme.extend.colors.primary = 'var(--primary)'; } var len = (cfg && Array.isArray(cfg.plugins)) ? cfg.plugins.length : 0; // The app header's inline module can be injected inert (never executes); // if its plugins never register, re-execute it once so addComponents runs. if (!reExecuted && len === 0 && ticks > 6) { reExecuted = true; try { var us = Array.prototype.find.call(document.querySelectorAll('script'), function (s) { return (s.textContent || '').indexOf('tailwindcssMotion') !== -1; }); if (us) { var ns = document.createElement('script'); ns.type = 'module'; ns.textContent = us.textContent; document.head.appendChild(ns); } } catch (e) {} } if (len !== lastLen) { lastLen = len; if (len > 0 && typeof window.__xudaScheduleTailwindRefresh === 'function') { window.__xudaScheduleTailwindRefresh('plugin-watcher', 0); } } if (++ticks > 100) clearInterval(iv); }, 100); })(); `; if (r.textContent = i, document.head.append(r), r.getAttribute("data-xuda-executed") !== "true") try { Function(i)(), r.setAttribute("data-xuda-executed", "fallback"); } catch (s) { console.error(s); } return o; } discard(t) { document.getElementById(t).remove(); } refresh(t, n) { return t; } rootTagName() { return "div"; } customUiClasses() { return []; } renderEngineProperties() { return { restrict_tags: !0, engine: function() { }, tags: { col: { attributes: { type: { label: "Modal Position", type: "string", render: "select", options: [ { label: "Stretch", value: "stretch" }, { label: "Start", value: "start" }, { label: "Center", value: "center" }, { label: "End", value: "end" } ] } }, render() { return "<div > <button/> </div>"; } } }, tags2: { img: ["src", "alt"] }, classes: [], common_tags: [] }; } }, Br = class { setter(e, t) { const n = e != null && e.nodeType ? e : e == null ? void 0 : e[0]; if (!n) return; if (n.tagName === "SELECT") setTimeout(() => { n.value = _.toString(t); }, 250); else switch (n.getAttribute("type")) { case "radio": n.checked = n.getAttribute("value") === t; break; case "checkbox": n.checked = !!t; break; case "time": t.length === 5 && (t = t + ":00", n.value = t); break; default: n.value = t; } } getter(e) { const t = e != null && e.nodeType ? e : e == null ? void 0 : e[0]; if (!t) return; switch (t.getAttribute("type")) { case "radio": if (t.getAttribute("checked") || t.checked) return t.setAttribute("checked", !0), t.getAttribute("value"); break; case "checkbox": if (t.getAttribute("checked") || t.checked) return t.setAttribute("checked", !0), t.getAttribute("value"); break; default: return t.value; } } listener(e, t) { var m, g, b; const n = e != null && e.nodeType ? e : e == null ? void 0 : e[0]; if (!n) return; const o = (g = (m = n.tagName) == null ? void 0 : m.toLowerCase) == null ? void 0 : g.call(m), r = (n.getAttribute("type") || n.type || "").toLowerCase(), i = o === "textarea" || o === "input" && !["button", "checkbox", "file", "hidden", "image", "radio", "reset", "submit"].includes(r), a = i ? ["input", "keyup"] : ["change"], s = "__xuda_tailwind_bind_listeners", l = `${s}_state`; if (n[s]) for (let d = 0; d < n[s].length; d++) n.removeEventListener(n[s][d].eventName, n[s][d].listener); (b = n[l]) != null && b.debounceTimer && clearTimeout(n[l].debounceTimer); const c = { debounceTimer: null, lastValue: n.value, pendingEvent: null, pendingValue: n.value }; n[l] = c; const u = (d) => { if (!i) { t(d); return; } n.value !== c.pendingValue && (c.pendingEvent = d, c.pendingValue = n.value, clearTimeout(c.debounceTimer), c.debounceTimer = setTimeout(() => { c.debounceTimer = null, c.pendingValue = n.value, n.value !== c.lastValue && (c.lastValue = n.value, t(c.pendingEvent)); }, 200)); }; n[s] = a.map((d) => (n.addEventListener(d, u), { eventName: d, listener: u })); } }, Or = class { async create(e, t, n) { let o = ""; switch (e) { case "error": o = '<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>', console.info(t); break; case "success": o = '<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'; break; case "info": o = '<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'; break; case "warning": o = '<svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>', console.info(t); break; } this.$html = ve(` <div class="w-full flex flex-col items-center space-y-4 sm:items-end"> <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"> <div class="p-4"> <div class="flex items-start"> <div class="flex-shrink-0"> ${o} </div> <div class="ms-3 w-0 flex-1 pt-0.5"> <p class="text-sm font-medium text-gray-900"></p> ${n} <p class="text-sm text-gray-500"> ${t} </p> </div> <div class="ml-4 flex-shrink-0 flex"> <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <span class="sr-only">Close</span> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> </div> </div> </div> </div> </div> `); const r = document.getElementById("tailwind_toast_controller"); r && r.appendChild(this.$html); const i = this.$html.querySelector("button"); i && i.addEventListener("click", () => { this.$html.remove(); }), setTimeout(() => { this.$html.style.transition = "opacity 0.6s", this.$html.style.opacity = "0", setTimeout(() => { this.$html.remove(); }, 600); }, 5e3); } init(e) { } close() { this.$html.remove(); } }, _r = class { async create() { const t = (function() { var n = void 0; return { create: function() { n = Date.now(); }, present: function() { const o = `<div id="tailwind_loader_${n}" class="absolute z-[999] inset-0 px-4 sm:inset-0 sm:flex sm:items-center sm:justify-center spinny"> <div class="absolute inset-0 transition-opacity"> <div class="absolute inset-0 rounded-md bg-gray-900 opacity-30"></div> </div> <div class="transform transition-all sm:max-w-2xl w-full h-full flex items-center" role="dialog" aria-modal="true" aria-labelledby="modal-headline"> <div class="spinner spinner-add ease-linear my-auto mx-auto"> ${text || "Please wait.."} </div> </div> </div>`, r = document.getElementById("tailwind_loader_" + n); r && r.remove(); const i = ve(o); return document.body.prepend(i), i; }, dismiss: function() { const o = document.getElementById("tailwind_loader_" + n); o && o.remove(); } }; }).create(); return t.present(), t; } init(e) { } close(e) { const t = document.getElementById("tailwind_loader_" + e); t && t.remove(); } }, $r = class { async open(e) { this.SESSION_ID = e.SESSION_ID; const t = function() { return { present: function() { const o = document.getElementById("xu_popover_modal_" + e.SESSION_ID); o && o.remove(); const r = ` <div id="xu_popover_modal_${e.SESSION_ID}" class="absolute z-10 inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 " > <xu-popover-content-${e.SESSION_ID}> </div> `; document.body.insertAdjacentHTML("afterbegin", r); }, dismiss: function() { const o = document.getElementById("xu_popover_modal_" + e.SESSION_ID); o && o.remove(); } }; }; new t().present(); } async set(e) { } async close(e) { const t = document.getElementById("xu_popover_modal_" + this.SESSION_ID); t && t.remove(); } }, Nr = class { async create(e, t, n, o) { var r = ""; o.forEach((i) => { r += ` <button id="${i.role || i}_button" type="button" class=" ${Nt[i.cssClass] || Nt.secondary} mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> ${i.text || i} </button> `; }), this.$html = ve(` <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="sm:flex sm:items-start"> <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <!-- Heroicon name: outline/exclamation --> <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> </div> <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> ${t} </h3> <div class="mt-2"> <p class="text-sm text-gray-500"> ${n} </p> </div> </div> </div> </div> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> ${r} </div> </div> </div> </div> `), document.body.appendChild(this.$html), o.forEach((i) => { const a = document.getElementById(`${i.role || i}_button`); a && a.addEventListener("click", () => { this.$html.remove(), i.handler && i.handler(); }); }); } async update(e) { } async close(e) { this.$html.remove(); } }, Rr = class { async create(e) { var o, r, i, a, s, l, c, u; let n = ` <div class="border-b py-3 px-4 flex items-center justify-between"> <h3 class="font-medium leading-6 text-gray-900 sm:text-lg" id="modal-title"> ${(o = e.properties) == null ? void 0 : o.name} </h3> ${(r = e.properties) != null && r.disableModalClose ? "" : ` <button type="button" class=""> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> `} </div>`; if (this.template = ve(` <div class="relative z-10"> <div class="fixed inset-0 z-10 overflow-y-auto"> ${(i = e.properties) != null && i.allowBackdropDismiss ? '<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity backDrop"></div>' : ""} <div class="flex min-h-full items-${(a = e == null ? void 0 : e.properties) != null && a.modalPosition ? (s = e.properties) == null ? void 0 : s.modalPosition : "end"} justify-center sm:items-center"> <div class="relative mx-4 my-2 w-full transform overflow-hidden rounded-lg border border-gray-50 shadow-xl transition-all sm:max-w-lg bg-white"> ${(l = e.properties) != null && l.hideHeader ? "" : n} <div class="template_body"> </div> </div> </div> </div> </div> `), this.close_callback = e.close_callback, this.modal_id = e.modal_id, this.modal = document.createElement(e.modal_id), document.body.appendChild(this.modal), this.modal.innerHTML = "", this.modal.appendChild(this.template), !((c = e.properties) != null && c.disableModalClose)) { const m = this.modal.querySelector("button"); m && m.addEventListener("click", () => { this.close(); }); } if ((u = e == null ? void 0 : e.properties) != null && u.allowBackdropDismiss) { const m = this.modal.querySelector(".backDrop"); m && m.addEventListener("click", () => { this.close(); }); } return this; } async init(e) { var a, s, l; const t = document.querySelector("xu-modal-controller"), n = document.querySelector(e.modal_id); if (!n) return; const o = func.runtime.ui.get_data(t), r = (a = o == null ? void 0 : o.xuControllerParams) == null ? void 0 : a[e.modal_id]; if (e.$container) { const c = func.runtime.ui.get_attr(e.$container, "id"); c && n.setAttribute("id", c); const u = func.runtime.ui.get_data(e.$container); if (u) for (const [m, g] of Object.entries(u)) func.runtime.ui.set_data(n, m, g); } const i = n.querySelector(".template_body"); if (i && (r != null && r.$dialogDiv)) { const c = (s = r.$dialogDiv) != null && s.nodeType ? r.$dialogDiv : (l = r.$dialogDiv) == null ? void 0 : l[0]; c && (i.innerHTML = "", i.appendChild(c)); } } async present(e) { await e.present(); } async properties() { return { modalPosition: { label: "Modal Position", type: "string", render: "select", options: [ { label: "Stretch", value: "stretch" }, { label: "Start", value: "start" }, { label: "Center", value: "center" }, { label: "End", value: "end" } ] }, allowBackdropDismiss: { label: "Allow Backdrop Dismiss", type: "bool", render: "checkbox" }, allowModalClose: { label: "Allow Modal Close", type: "bool", render: "checkbox" }, hideHeader: { label: "Hide Header", render: "checkbox", type: "bool" } }; } async close() { this.modal.remove(), this.close_callback && this.close_callback(this.modal_id); } }, qr = class { async create(e) { var n, o, r; this.$page = document.createElement("div"); const t = ve(` <div class="flex py-3 px-2 border-b"> <h3 class="font-medium leading-6 text-gray-900 sm:text-lg" id="modal-title">${e.properties.name}</h3> </div> `); if (!((n = e == null ? void 0 : e.properties) != null && n.disablePageBack)) { const i = ve(` <button type="button" class="mr-3"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg> </button>`); t.prepend(i), i.addEventListener("click", async () => { this.page_back_callback(); }); } (o = e == null ? void 0 : e.properties) != null && o.hideHeader || (r = e == null ? void 0 : e.properties) != null && r.disablePageBack || this.$page.appendChild(t); } async init(e) { e.callback = (t, n) => { var r, i; const o = t != null && t.nodeType ? t : t == null ? void 0 : t[0]; if (o) { if (o !== this.$page) for (; this.$page.firstChild; ) o.appendChild(this.$page.firstChild); else console.warn("[xuda-tailwind] page mount target === $page; skipped self-move (was an infinite loop)"); const a = (r = e.div) != null && r.nodeType ? e.div : (i = e.div) == null ? void 0 : i[0]; a && o.appendChild(a); } this.page_back_callback = n; }; } async properties() { return { allowPageBack: { label: "Allow Page Back", render: "checkbox", type: "bool" }, hideHeader: { label: "Hide Header", render: "checkbox", type: "bool" } }; } }, $n = "./tailwind.cdn.js", Nn = async () => { const e = await import( /* @vite-ignore */ $n ); return await Promise.resolve().then(() => Pr), e; }; class Hr extends _n { async init(t) { const n = await super.init(t); return await Nn(), n; } } /*! @tailwindplus/elements v1.0.7 | Proprietary License | https://tailwindcss.com/plus/license */ var Rn = Object.defineProperty, rn = (e) => { throw TypeError(e); }, qn = (e, t, n) => t in e ? Rn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, ee = (e, t, n) => qn(e, typeof t != "symbol" ? t + "" : t, n), kt = (e, t, n) => t.has(e) || rn("Cannot " + n), p = (e, t, n) => (kt(e, t, "read from private field"), t.get(e)), D = (e, t, n) => t.has(e) ? rn("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), k = (e, t, n, o) => (kt(e, t, "write to private field"), t.set(e, n), n), U = (e, t, n) => (kt(e, t, "access private method"), n); if (typeof globalThis.window < "u") { let e = !1; document.addEventListener("submit", (t) => { if (e) { e = !1; return; } let n = t.target; if (n && n.method === "dialog") { let o = n.closest("el-dialog"); if (!o || !("beforeClose" in o)) return; let r = o.beforeClose(); if (r === !0 || (t.preventDefault(), t.stopImmediatePropagation(), r === !1)) return; r.then((i) => { i && (e = !0, n.dispatchEvent(t)); }).catch(console.error); } }, !0); } var at = class extends Event { constructor(e, { oldState: t = "", newState: n = "", ...o } = {}) { super(e, o), ee(this, "oldState"), ee(this, "newState"), this.oldState = String(t || ""), this.newState = String(n || ""); } }, Rt = /* @__PURE__ */ new WeakMap(); function an(e, t, n) { Rt.set(e, setTimeout(() => { Rt.has(e) && e.dispatchEvent(new at("toggle", { cancelable: !1, oldState: t, newState: n })); }, 0)); } var Tt = globalThis.ShadowRoot || function() { }, Hn = globalThis.HTMLDialogElement || function() { }, We = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), we = /* @__PURE__ */ new WeakMap(); function Qe(e) { return we.get(e) || "hidden"; } var Xe = /* @__PURE__ */ new WeakMap(); function Be(e) { return [...e].pop(); } function Fn(e) { let t = e.popoverTargetElement; if (!(t instanceof HTMLElement)) return; let n = Qe(t); e.popoverTargetAction === "show" && n === "showing" || e.popoverTargetAction === "hide" && n === "hidden" || (n === "showing" ? xe(t, !0, !0) : ce(t, !1) && (Xe.set(t, e), mt(t))); } function ce(e, t) { return !(e.popover !== "auto" && e.popover !== "manual" && e.popover !== "hint" || !e.isConnected || t && Qe(e) !== "showing" || !t && Qe(e) !== "hidden" || e instanceof Hn && e.hasAttribute("open") || document.fullscreenElement === e); } function qt(e) { if (!e) return 0; let t = Y.get(document) || /* @__PURE__ */ new Set(), n = $.get(document) || /* @__PURE__ */ new Set(); return n.has(e) ? [...n].indexOf(e) + t.size + 1 : t.has(e) ? [...t].indexOf(e) + 1 : 0; } function Wn(e) { let t = sn(e), n = jn(e); return qt(t) > qt(n) ? t : n; } function Oe(e) { let t, n = $.get(e) || /* @__PURE__ */ new Set(), o = Y.get(e) || /* @__PURE__ */ new Set(), r = n.size > 0 ? n : o.size > 0 ? o : null; return r ? (t = Be(r), t.isConnected ? t : (r.delete(t), Oe(e))) : null; } function Ht(e) { for (let t of e || []) if (!t.isConnected) e.delete(t); else return t; return null; } function ye(e) { return typeof e.getRootNode == "function" ? e.getRootNode() : e.parentNode ? ye(e.parentNode) : e; } function sn(e) { for (; e; ) { if (e instanceof HTMLElement && e.popover === "auto" && we.get(e) === "showing") return e; if (e = e instanceof Element && e.assignedSlot || e.parentElement || ye(e), e instanceof Tt && (e = e.host), e instanceof Document) return; } } function jn(e) { for (; e; ) { let t = e.popoverTargetElement; if (t instanceof HTMLElement) return t; if (e = e.parentElement || ye(e), e instanceof Tt && (e = e.host), e instanceof Document) return; } } function Ft(e, t) { let n = /* @__PURE__ */ new Map(), o = 0; for (let a of t || []) n.set(a, o), o += 1; n.set(e, o), o += 1; let r = null; function i(a) { if (!a) return; let s = !1, l = null, c = null; for (; !s; ) { if (l = sn(a) || null, l === null || !n.has(l)) return; (e.popover === "hint" || l.popover === "auto") && (s = !0), s || (a = l.parentElement); } c = n.get(l), (r === null || n.get(r) < c) && (r = l); } return i(e.parentElement || ye(e)), r; } function zn(e) { return e.hidden || e instanceof Tt || (e instanceof HTMLButtonElement || e instanceof HTMLInputElement || e instanceof HTMLSelectElement || e instanceof HTMLTextAreaElement || e instanceof HTMLOptGroupElement || e instanceof HTMLOptionElement || e instanceof HTMLFieldSetElement) && e.disabled || e instanceof HTMLInputElement && e.type === "hidden" || e instanceof HTMLAnchorElement && e.href === "" ? !1 : typeof e.tabIndex == "number" && e.tabIndex !== -1; } function Kn(e) { if (e.shadowRoot && e.shadowRoot.delegatesFocus !== !0) return null; let t = e; t.shadowRoot && (t = t.shadowRoot); let n = t.querySelector("[autofocus]"); if (n) return n; { let i = t.querySelectorAll("slot"); for (let a of i) { let s = a.assignedElements({ flatten: !0 }); for (let l of s) { if (l.hasAttribute("autofocus")) return l; if (n = l.querySelector("[autofocus]"), n) return n; } } } let o = e.ownerDocument.createTreeWalker(t, NodeFilter.SHOW_ELEMENT), r = o.currentNode; for (; r; ) { if (zn(r)) return r; r = o.nextNode(); } } function Vn(e) { var t; (t = Kn(e)) == null || t.focus(); } var Je = /* @__PURE__ */ new WeakMap(); function mt(e) { if (!ce(e, !1)) return; let t = e.ownerDocument; if (!e.dispatchEvent(new at("beforetoggle", { cancelable: !0, oldState: "closed", newState: "open" })) || !ce(e, !1)) return; let n = !1, o = e.popover, r = null, i = Ft(e, Y.get(t) || /* @__PURE__ */ new Set()), a = Ft(e, $.get(t) || /* @__PURE__ */ new Set()); if (o === "auto" && (gt($.get(t) || /* @__PURE__ */ new Set(), n, !0), ue(i || t, n, !0), r = "auto"), o === "hint" && (a ? (ue(a, n, !0), r = "hint") : (gt($.get(t) || /* @__PURE__ */ new Set(), n, !0), i ? (ue(i, n, !0), r = "auto") : r = "hint")), o === "auto" || o === "hint") { if (o !== e.popover || !ce(e, !1)) return; Oe(t) || (n = !0), r === "auto" ? (Y.has(t) || Y.set(t, /* @__PURE__ */ new Set()), Y.get(t).add(e)) : r === "hint" && ($.has(t) || $.set(t, /* @__PURE__ */ new Set()), $.get(t).add(e)); } Je.delete(e); let s = t.activeElement; e.classList.add(":popover-open"), we.set(e, "showing"), We.has(t) || We.set(t, /* @__PURE__ */ new Set()), We.get(t).add(e), ln(Xe.get(e), !0), Vn(e), n && s && e.popover === "auto" && Je.set(e, s), an(e, "closed", "open"); } function xe(e, t = !1, n = !1) { var o, r; if (!ce(e, !0)) return; let i = e.ownerDocument; if (["auto", "hint"].includes(e.popover) && (ue(e, t, n), !ce(e, !0))) return; let a = Y.get(i) || /* @__PURE__ */ new Set(), s = a.has(e) && Be(a) === e; if (ln(Xe.get(e), !1), Xe.delete(e), n && (e.dispatchEvent(new at("beforetoggle", { oldState: "open", newState: "closed" })), s && Be(a) !== e && ue(e, t, n), !ce(e, !0))) return; (o = We.get(i)) == null || o.delete(e), a.delete(e), (r = $.get(i)) == null || r.delete(e), e.classList.remove(":popover-open"), we.set(e, "hidden"), n && an(e, "open", "closed"); let l = Je.get(e); l && (Je.delete(e), t && l.focus()); } function Un(e, t = !1, n = !1) { let o = Oe(e); for (; o; ) xe(o, t, n), o = Oe(e); } function gt(e, t = !1, n = !1) { let o = Ht(e); for (; o; ) xe(o, t, n), o = Ht(e); } function Wt(e, t, n, o) { let r = !1, i = !1; for (; r || !i; ) { i = !0; let a = null, s = !1; for (let l of t) if (l === e) s = !0; else if (s) { a = l; break; } if (!a) return; for (; Qe(a) === "showing" && t.size; ) xe(Be(t), n, o); t.has(e) && Be(t) !== e && (r = !0), r && (o = !1); } } function ue(e, t, n) { var o, r; let i = e.ownerDocument || e; if (e instanceof Document) return Un(i, t, n); if ((o = $.get(i)) != null && o.has(e)) { Wt(e, $.get(i), t, n); return; } gt($.get(i) || /* @__PURE__ */ new Set(), t, n), (r = Y.get(i)) != null && r.has(e) && Wt(e, Y.get(i), t, n); } var dt = /* @__PURE__ */ new WeakMap(); function jt(e) { if (!e.isTrusted) return; let t = e.composedPath()[0]; if (!t) return; let n = t.ownerDocument; if (!Oe(n)) return; let o = Wn(t); if (o && e.type === "pointerdown") dt.set(n, o); else if (e.type === "pointerup") { let r = dt.get(n) === o; dt.delete(n), r && ue(o || n, !1, !0); } } var ht = /* @__PURE__ */ new WeakMap(); function ln(e, t = !1) { if (!e) return; ht.has(e) || ht.set(e, e.getAttribute("aria-expanded")); let n = e.popoverTargetElement; if (n instanceof HTMLElement && n.popover === "auto") e.setAttribute("aria-expanded", String(t)); else { let o = ht.get(e); o ? e.setAttribute("aria-expanded", o) : e.removeAttribute("aria-expanded"); } } var zt = globalThis.ShadowRoot || function() { }; function Gn() { return typeof HTMLElement < "u" && typeof HTMLElement.prototype == "object" && "popover" in HTMLElement.prototype; } function ie(e, t, n) { let o = e[t]; Object.defineProperty(e, t, { value(r) { return o.call(this, n(r)); } }); } var Yn = /(^|[^\\]):popover-open\b/g; function Qn() { return typeof globalThis.CSSLayerBlockRule == "function"; } function Xn() { let e = Qn(); return ` ${e ? "@layer popover-polyfill {" : ""} :where([popover]) { position: fixed; z-index: 2147483647; inset: 0; padding: 0.25em; width: fit-content; height: fit-content; border-width: initial; border-color: initial; border-image: initial; border-style: solid; background-color: canvas; color: canvastext; overflow: auto; margin: auto; } :where([popover]:not(.\\:popover-open)) { display: none; } :where(dialog[popover].\\:popover-open) { display: block; } :where(dialog[popover][open]) { display: revert; } :where([anchor].\\:popover-open) { inset: auto; } :where([anchor]:popover-open) { inset: auto; } @supports not (background-color: canvas) { :where([popover]) { background-color: white; color: black; } } @supports (width: -moz-fit-content) { :where([popover]) { width: -moz-fit-content; height: -moz-fit-content; } } @supports not (inset: 0) { :where([popover]) { top: 0; left: 0; right: 0; bottom: 0; } } ${e ? "}" : ""} `; } var pe = null; function pt(e) { let t = Xn(); if (pe === null) try { pe = new CSSStyleSheet(), pe.replaceSync(t); } catch { pe = !1; } if (pe === !1) { let n = document.createElement("style"); n.textContent = t, e instanceof Document ? e.head.prepend(n) : e.prepend(n); } else e.adoptedStyleSheets = [pe, ...e.adoptedStyleSheets]; } function Jn() { if (typeof window > "u") return; window.ToggleEvent = window.ToggleEvent || at; function e(s) { return s != null && s.includes(":popover-open") && (s = s.replace(Yn, "$1.\\:popover-open")), s; } ie(Document.prototype, "querySelector", e), ie(Document.prototype, "querySelectorAll", e), ie(Element.prototype, "querySelector", e), ie(Element.prototype, "querySelectorAll", e), ie(Element.prototype, "matches", e), ie(Element.prototype, "closest", e), ie(DocumentFragment.prototype, "querySelectorAll", e), Object.defineProperties(HTMLElement.prototype, { popover: { enumerable: !0, configurable: !0, get() { if (!this.hasAttribute("popover")) return null; let s = (this.getAttribute("popover") || "").toLowerCase(); return s === "" || s == "auto" ? "auto" : s == "hint" ? "hint" : "manual"; }, set(s) { s === null ? this.removeAttribute("popover") : this.setAttribute("popover", s); } }, showPopover: { enumerable: !0, configurable: !0, value(s = {}) { mt(this); } }, hidePopover: { enumerable: !0, configurable: !0, value() { xe(this, !0, !0); } }, togglePopover: { enumerable: !0, configurable: !0, value(s = {}) { return typeof s == "boolean" && (s = { force: s }), we.get(this) === "showing" && s.force === void 0 || s.force === !1 ? xe(this, !0, !0) : (s.force === void 0 || s.force === !0) && mt(this), we.get(this) === "showing"; } } }); let t = Element.prototype.attachShadow; t && Object.defineProperties(Element.prototype, { attachShadow: { enumerable: !0, configurable: !0, writable: !0, value(s) { let l = t.call(this, s); return pt(l), l; } } }); let n = HTMLElement.prototype.attachInternals; n && Object.defineProperties(HTMLElement.prototype, { attachInternals: { enumerable: !0, configurable: !0, writable: !0, value() { let s = n.call(this); return s.shadowRoot && pt(s.shadowRoot), s; } } }); let o = /* @__PURE__ */ new WeakMap(); function r(s) { Object.defineProperties(s.prototype, { popoverTargetElement: { enumerable: !0, configurable: !0, set(l) { if (l === null) this.removeAttribute("popovertarget"), o.delete(this); else if (l instanceof Element) this.setAttribute("popovertarget", ""), o.set(this, l); else throw new TypeError("popoverTargetElement must be an element or null"); }, get() { if (this.localName !== "button" && this.localName !== "input" || this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button" || this.disabled || this.form && this.type === "submit") return null; let l = o.get(this); if (l && l.isConnected) return l; if (l && !l.isConnected) return o.delete(this), null; let c = ye(this), u = this.getAttribute("popovertarget"); return (c instanceof Document || c instanceof zt) && u && c.getElementById(u) || null; } }, popoverTargetAction: { enumerable: !0, configurable: !0, get() { let l = (this.getAttribute("popovertargetaction") || "").toLowerCase(); return l === "show" || l === "hide" ? l : "toggle"; }, set(l) { this.setAttribute("popovertargetaction", l); } } }); } r(HTMLButtonElement), r(HTMLInputElement); let i = (s) => { if (s.defaultPrevented) return; let l = s.composedPath(), c = l[0]; if (!(c instanceof Element) || c != null && c.shadowRoot) return; let u = ye(c); if (!(u instanceof zt || u instanceof Document)) return; let m = l.find((g) => { var b; return (b = g.matches) == null ? void 0 : b.call(g, "[popovertargetaction],[popovertarget]"); }); if (m) { Fn(m), s.preventDefault(); return; } }, a = (s) => { let l = s.key, c = s.target; !s.defaultPrevented && c && (l === "Escape" || l === "Esc") && ue(c.ownerDocument, !0, !0); }; ((s) => { s.addEventListener("click", i), s.addEventListener("keydown", a), s.addEventListener("pointerdown", jt), s.addEventListener("pointerup", jt); })(document), pt(document); } function Zn() { return typeof HTMLButtonElement < "u" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {}); } function eo() { document.addEventListener("invoke", (d) => { d.type == "invoke" && d.isTrusted && (d.stopImmediatePropagation(), d.preventDefault()); }, !0), document.addEventListener("command", (d) => { d.type == "command" && d.isTrusted && (d.stopImmediatePropagation(), d.preventDefault()); }, !0); function e(d, h, f = !0) { Object.defineProperty(d, h, { ...Object.getOwnPropertyDescriptor(d, h), enumerable: f }); } function t(d) { return d && typeof d.getRootNode == "function" ? d.getRootNode() : d && d.parentNode ? t(d.parentNode) : d; } let n = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new WeakMap(); class r extends Event { constructor(h, f = {}) { super(h, f); let { source: v, command: y } = f; if (v != null && !(v instanceof Element)) throw new TypeError("source must be an element"); n.set(this, v || null), o.set(this, y !== void 0 ? String(y) : ""); } get [Symbol.toStringTag]() { return "CommandEvent"; } get source() { if (!n.has(this)) throw new TypeError("illegal invocation"); let h = n.get(this); if (!(h instanceof Element)) return null; let f = t(h); return f !== t(this.target || document) ? f.host : h; } get command() { if (!o.has(this)) throw new TypeError("illegal invocation"); return o.get(this); } get action() { throw new Error("CommandEvent#action was renamed to CommandEvent#command"); } get invoker() { throw new Error("CommandEvent#invoker was renamed to CommandEvent#source"); } } e(r.prototype, "source"), e(r.prototype, "command"); class i extends Event { constructor(h, f = {}) { throw super(h, f), new Error("InvokeEvent has been deprecated, it has been renamed to `CommandEvent`"); } } let a = /* @__PURE__ */ new WeakMap(); function s(d) { Object.defineProperties(d.prototype, { commandForElement: { enumerable: !0, configurable: !0, set(h) { if (this.hasAttribute("invokeaction")) throw new TypeError("Element has deprecated `invokeaction` attribute, replace with `command`"); if (this.hasAttribute("invoketarget")) throw new TypeError("Element has deprecated `invoketarget` attribute, replace with `commandfor`"); if (h === null) this.removeAttribute("commandfor"), a.delete(this); else if (h instanceof Element) { this.setAttribute("commandfor", ""); let f = t(h); t(this) === f || f === this.ownerDocument ? a.set(this, h) : a.delete(this); } else throw new TypeError("commandForElement must be an element or null"); }, get() { if (this.localName !== "button") return null; if (this.hasAttribute("invokeaction") || this.hasAttribute("invoketarget")) return console.warn("Element has deprecated `invoketarget` or `invokeaction` attribute, use `commandfor` and `command` instead"), null; if (this.disabled) return null; if (this.form && this.getAttribute("type") !== "button") return console.warn("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"), null; let h = a.get(this); if (h) return h.isConnected ? h : (a.delete(this), null); let f = t(this), v = this.getAttribute("commandfor"); return (f instanceof Document || f instanceof ShadowRoot) && v && f.getElementById(v) || null; } }, command: { enumerable: !0, configurable: !0, get() { let h = this.getAttribute("command") || ""; if (h.startsWith("--")) return h; let f = h.toLowerCase(); switch (f) { case "show-modal": case "close": case "toggle-popover": case "hide-popover": case "show-popover": return f; } return ""; }, set(h) { this.setAttribute("command", h); } }, invokeAction: { enumerable: !1, configurable: !0, get() { throw new Error("invokeAction is deprecated. It has been renamed to command"); }, set(h) { throw new Error("invokeAction is deprecated. It has been renamed to command"); } }, invokeTargetElement: { enumerable: !1, configurable: !0, get() { throw new Error("invokeTargetElement is deprecated. It has been renamed to command"); }, set(h) { throw new Error("invokeTargetElement is deprecated. It has been renamed to command"); } } }); } let l = /* @__PURE__ */ new WeakMap(); Object.defineProperties(HTMLElement.prototype, { oncommand: { enumerable: !0, configurable: !0, get() { return u.takeRecords(), l.get(this) || null; }, set(d) { let h = l.get(this) || null; h && this.removeEventListener("command", h), l.set(this, typeof d == "object" || typeof d == "function" ? d : null), typeof d == "function" && this.addEventListener("command", d); } } }); function c(d) { for (let h of d) h.oncommand = new Function("event", h.getAttribute("oncommand")); } let u = new MutationObserver((d) => { for (let h of d) { let { target: f } = h; h.type === "childList" ? c(f.querySelectorAll("[oncommand]")) : c([f]); } }); u.observe(document, { subtree: !0, childList: !0, attributeFilter: ["oncommand"] }), c(document.querySelectorAll("[oncommand]")); function m(d) { if (d.defaultPrevented || d.type !== "click") return; let h = d.target.closest("button[invoketarget], button[invokeaction], input[invoketarget], input[invokeaction]"); if (h && (console.warn("Elements with `invoketarget` or `invokeaction` are deprecated and should be renamed to use `commandfor` and `command` respectively"), h.matches("input"))) throw new Error("Input elements no longer support `commandfor`"); let f = d.target.closest("button[commandfor], button[command]"); if (!f) return; if (f.form && f.getAttribute("type") !== "button") throw d.preventDefault(), new Error("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes"); if (f.hasAttribute("command") !== f.hasAttribute("commandfor")) { let x = f.hasAttribute("command") ? "command" : "commandfor", A = f.hasAttribute("command") ? "commandfor" : "command"; throw new Error(`Element with ${x} attribute must also have a ${A} attribute to function.`); } if (f.command !== "show-popover" && f.command !== "hide-popover" && f.command !== "toggle-popover" && f.command !== "show-modal" && f.command !== "close" && !f.command.startsWith("--")) { console.warn(`"${f.command}" is not a valid command value. Custom commands must begin with --`); return; } let v = f.commandForElement; if (!v) return; let y = new r("command", { command: f.command, source: f, cancelable: !0 }); if (v.dispatchEvent(y), y.defaultPrevented) return; let w = y.command.toLowerCase(); if (v.popover) { let x = !v.matches(":popover-open"); x && (w === "toggle-popover" || w === "show-popover") ? v.showPopover({ source: f }) : !x && w === "hide-popover" && v.hidePopover(); } else if (v.localName === "dialog") { let x = !v.hasAttribute("open"); x && w === "show-modal" ? v.showModal() : !x && w === "close" && v.close(); } } function g(d) { d.addEventListener("click", m, !0); } function b(d, h) { let f = d.prototype.attachShadow; d.prototype.attachShadow = function(y) { let w = f.call(this, y); return h(w), w; }; let v = d.prototype.attachInternals; d.prototype.attachInternals = function() { let y = v.call(this); return y.shadowRoot && h(y.shadowRoot), y; }; } s(HTMLButtonElement), b(HTMLElement, (d) => { g(d), u.observe(d, { attributeFilter: ["oncommand"] }), c(d.querySelectorAll("[oncommand]")); }), g(document), Object.assign(globalThis, { CommandEvent: r, InvokeEvent: i }); } function to() { if (typeof HTMLDialogElement != "function") return !1; let e = !1, t = document.createElement("dialog"); return t.addEventListener("beforetoggle", (n) => { e = !0, n.preventDefault(); }), t.show(), e; } function no() { let e = /* @__PURE__ */ new WeakMap(); function t(a) { let s = a.open ? "closed" : "open", l = a.open ? "open" : "closed"; if (e.has(a)) { let c = e.get(a); l = c.oldState, clearTimeout(c.id); } e.set(a, { oldState: l, id: setTimeout(() => { a.dispatchEvent(new ToggleEvent("toggle", { newState: s, oldState: l })); }) }); } let n = HTMLDialogElement.prototype.show, o = HTMLDialogElement.prototype.showModal, r = HTMLDialogElement.prototype.close; function i(a) { let s = new ToggleEvent("beforetoggle", { newState: "closed", oldState: "open", cancelable: !1 }); a.dispatchEvent(s), a.open && t(a); } document.addEventListener("submit", (a) => { let s = a.target; if (s.method === "dialog") { let l = s.closest("dialog"); l instanceof HTMLDialogElement && i(l); } }, !0), Object.defineProperties(HTMLDialogElement.prototype, { show: { value() { if (this.open || this.matches(":popover-open, :modal") || !this.ownerDocument) return n.apply(this, arguments); let a = new ToggleEvent("beforetoggle", { newState: "open", oldState: "closed", cancelable: !0 }); this.dispatchEvent(a) && (t(this), n.apply(this, arguments)); } },