Components/Daisy/ wraps all 69 components in daisyUI's llms.txt, grouped by daisyUI's categories (Actions, DataDisplay, Navigation, Feedback, DataInput, Layout, Mockup), with part components where daisyUI has repeating parts (DTab, DMenuItem, DTimelineItem, ...). - Each enum maps to whole literal class names in a switch, so Tailwind's scanner generates them. Nothing is concatenated. - Value-holding fields derive from DInputBase<TValue>, Blazor's InputBase, so @bind-Value and EditForm validation work. Invalid fields get the component's *-error class. - Open and active state lives in C# (@bind-IsOpen, @bind-Active) and is rendered with daisyUI's *-open modifiers. DDropdown adds an outside-click layer and Escape. No component uses JS interop. - The one exception is DCalendar, which wraps the Cally web component, vendored as wwwroot/vendor/cally.js (0.9.2, MIT). /styleguide (not linked) renders every component in all its colours, sizes and states, with a theme and hue picker that previews without saving. neo.css follows what the styleguide showed: - select keeps daisyUI's arrow; - skeleton-text isn't sunk; - the phone mockup and dock are raised; - active menu items and OTP digits are inset; - a joined accordion is raised as one block. The primary, secondary and accent colours are deeper, so they still read as text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
1305 lines
38 KiB
JavaScript
1305 lines
38 KiB
JavaScript
// Cally 0.9.2 (https://github.com/WickyNilliams/cally, npm cally/dist/cally.js), MIT License, Copyright 2024-present Nick Williams
|
|
class le {
|
|
/**
|
|
* @type {T}
|
|
*/
|
|
#t;
|
|
#e = /* @__PURE__ */ new Set();
|
|
/**
|
|
* @param {T} current
|
|
*/
|
|
constructor(t) {
|
|
this.#t = t;
|
|
}
|
|
/**
|
|
* @return {T}
|
|
*/
|
|
get current() {
|
|
return this.#t;
|
|
}
|
|
/**
|
|
* @param {T} value
|
|
*/
|
|
set current(t) {
|
|
this.#t != t && (this.#t = t, this.#e.forEach((n) => n(t)));
|
|
}
|
|
/**
|
|
* @type {import("hooks").Ref["on"]}
|
|
*/
|
|
on(t) {
|
|
return this.#e.add(t), () => this.#e.delete(t);
|
|
}
|
|
}
|
|
const Rt = (e) => new le(e), st = Symbol.for("atomico.hooks");
|
|
globalThis[st] = globalThis[st] || {};
|
|
let A = globalThis[st];
|
|
const ue = Symbol.for("Atomico.suspense"), Yt = Symbol.for("Atomico.effect"), fe = Symbol.for("Atomico.layoutEffect"), Ft = Symbol.for("Atomico.insertionEffect"), R = (e, t, n) => {
|
|
const { i: s, hooks: o } = A.c, r = o[s] = o[s] || {};
|
|
return r.value = e(r.value), r.effect = t, r.tag = n, A.c.i++, o[s].value;
|
|
}, It = (e) => R((t = Rt(e)) => t), W = () => R((e = Rt(A.c.host)) => e), Lt = () => A.c.update, de = (e, t, n = 0) => {
|
|
let s = {}, o = !1;
|
|
const r = () => o, a = (l, c) => {
|
|
for (const d in s) {
|
|
const i = s[d];
|
|
i.effect && i.tag === l && (i.value = i.effect(i.value, c));
|
|
}
|
|
};
|
|
return { load: (l) => {
|
|
A.c = { host: t, hooks: s, update: e, i: 0, id: n };
|
|
let c;
|
|
try {
|
|
o = !1, c = l();
|
|
} catch (d) {
|
|
if (d !== ue) throw d;
|
|
o = !0;
|
|
} finally {
|
|
A.c = null;
|
|
}
|
|
return c;
|
|
}, cleanEffects: (l) => (a(Ft, l), () => (a(fe, l), () => {
|
|
a(Yt, l);
|
|
})), isSuspense: r };
|
|
}, x = Symbol.for;
|
|
function xt(e, t) {
|
|
const n = e.length;
|
|
if (n !== t.length) return !1;
|
|
for (let s = 0; s < n; s++) {
|
|
let o = e[s], r = t[s];
|
|
if (o !== r) return !1;
|
|
}
|
|
return !0;
|
|
}
|
|
const M = (e) => typeof e == "function", F = (e) => typeof e == "object", { isArray: he } = Array, ot = (e, t) => (t ? e instanceof HTMLStyleElement : !0) && "hydrate" in (e?.dataset || {});
|
|
function _t(e, t) {
|
|
let n;
|
|
const s = (o) => {
|
|
let { length: r } = o;
|
|
for (let a = 0; a < r; a++) {
|
|
const u = o[a];
|
|
if (u && Array.isArray(u))
|
|
s(u);
|
|
else {
|
|
const f = typeof u;
|
|
if (u == null || f === "function" || f === "boolean")
|
|
continue;
|
|
f === "string" || f === "number" ? (n == null && (n = ""), n += u) : (n != null && (t(n), n = null), t(u));
|
|
}
|
|
}
|
|
};
|
|
s(e), n != null && t(n);
|
|
}
|
|
const jt = (e, t, n) => (e.addEventListener(t, n), () => e.removeEventListener(t, n));
|
|
class Bt {
|
|
/**
|
|
*
|
|
* @param {HTMLElement} target
|
|
* @param {string} message
|
|
* @param {string} value
|
|
*/
|
|
constructor(t, n, s) {
|
|
this.message = n, this.target = t, this.value = s;
|
|
}
|
|
}
|
|
class qt extends Bt {
|
|
}
|
|
class me extends Bt {
|
|
}
|
|
const z = "Custom", ye = null, pe = { true: 1, "": 1, 1: 1 };
|
|
function ge(e, t, n, s, o) {
|
|
const {
|
|
type: r,
|
|
reflect: a,
|
|
event: u,
|
|
value: f,
|
|
attr: l = be(t)
|
|
} = n?.name != z && F(n) && n != ye ? n : { type: n }, c = r?.name === z && r.map, d = f != null ? r == Function || !M(f) ? () => f : f : null;
|
|
Object.defineProperty(e, t, {
|
|
configurable: !0,
|
|
/**
|
|
* @this {import("dom").AtomicoThisInternal}
|
|
* @param {any} newValue
|
|
*/
|
|
set(i) {
|
|
const m = this[t];
|
|
d && r != Boolean && i == null && (i = d());
|
|
const { error: g, value: b } = (c ? Te : Ee)(
|
|
r,
|
|
i
|
|
);
|
|
if (g && b != null)
|
|
throw new qt(
|
|
this,
|
|
`The value defined for prop '${t}' must be of type '${r.name}'`,
|
|
b
|
|
);
|
|
m != b && (this._props[t] = b ?? void 0, this.update(), u && zt(this, u), this.updated.then(() => {
|
|
a && (this._ignoreAttr = l, De(this, r, l, this[t]), this._ignoreAttr = null);
|
|
}));
|
|
},
|
|
/**
|
|
* @this {import("dom").AtomicoThisInternal}
|
|
*/
|
|
get() {
|
|
return this._props[t];
|
|
}
|
|
}), d && (o[t] = d()), s[l] = { prop: t, type: r };
|
|
}
|
|
const zt = (e, { type: t, base: n = CustomEvent, ...s }) => e.dispatchEvent(new n(t, s)), be = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), De = (e, t, n, s) => s == null || t == Boolean && !s ? e.removeAttribute(n) : e.setAttribute(
|
|
n,
|
|
t?.name === z && t?.serialize ? t?.serialize(s) : F(s) ? JSON.stringify(s) : t == Boolean ? "" : s
|
|
), Ce = (e, t) => e == Boolean ? !!pe[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == z ? t : (
|
|
// TODO: If when defining reflect the prop can also be of type string?
|
|
new e(t)
|
|
), Te = ({ map: e }, t) => {
|
|
try {
|
|
return { value: e(t), error: !1 };
|
|
} catch {
|
|
return { value: t, error: !0 };
|
|
}
|
|
}, Ee = (e, t) => e == null || t == null ? { value: t, error: !1 } : e != String && t === "" ? { value: void 0, error: !1 } : e == Object || e == Array || e == Symbol ? {
|
|
value: t,
|
|
error: {}.toString.call(t) !== `[object ${e.name}]`
|
|
} : t instanceof e ? {
|
|
value: t,
|
|
error: e == Number && Number.isNaN(t.valueOf())
|
|
} : e == String || e == Number || e == Boolean ? {
|
|
value: t,
|
|
error: e == Number ? typeof t != "number" ? !0 : Number.isNaN(t) : e == String ? typeof t != "string" : typeof t != "boolean"
|
|
} : { value: t, error: !0 };
|
|
let ve = 0;
|
|
const we = (e) => {
|
|
const t = (e?.dataset || {})?.hydrate || "";
|
|
return t || "c" + ve++;
|
|
}, k = (e, t = HTMLElement) => {
|
|
const n = {}, s = {}, o = "prototype" in t && t.prototype instanceof Element, r = o ? t : "base" in t ? t.base : HTMLElement, { props: a, styles: u } = o ? e : t;
|
|
class f extends r {
|
|
constructor() {
|
|
super(), this._setup(), this._render = () => e({ ...this._props });
|
|
for (const c in s) this[c] = s[c];
|
|
}
|
|
/**
|
|
* @returns {import("core").Sheets[]}
|
|
*/
|
|
static get styles() {
|
|
return [super.styles, u];
|
|
}
|
|
async _setup() {
|
|
if (this._props) return;
|
|
this._props = {};
|
|
let c, d;
|
|
this.mounted = new Promise(
|
|
(y) => this.mount = () => {
|
|
y(), c != this.parentNode && (d != c ? this.unmounted.then(this.update) : this.update()), c = this.parentNode;
|
|
}
|
|
), this.unmounted = new Promise(
|
|
(y) => this.unmount = () => {
|
|
y(), (c != this.parentNode || !this.isConnected) && (i.cleanEffects(!0)()(), d = this.parentNode, c = null);
|
|
}
|
|
), this.symbolId = this.symbolId || Symbol(), this.symbolIdParent = Symbol();
|
|
const i = de(
|
|
() => this.update(),
|
|
this,
|
|
we(this)
|
|
);
|
|
let m, g = !0;
|
|
const b = ot(this);
|
|
this.update = () => (m || (m = !0, this.updated = (this.updated || this.mounted).then(() => {
|
|
try {
|
|
const y = i.load(this._render), p = i.cleanEffects();
|
|
return y && //@ts-ignore
|
|
y.render(this, this.symbolId, b), m = !1, g && !i.isSuspense() && (g = !1, !b && Se(this)), p();
|
|
} finally {
|
|
m = !1;
|
|
}
|
|
}).then(
|
|
/**
|
|
* @param {import("internal/hooks.js").CleanUseEffects} [cleanUseEffect]
|
|
*/
|
|
(y) => {
|
|
y && y();
|
|
}
|
|
)), this.updated), this.update();
|
|
}
|
|
connectedCallback() {
|
|
this.mount(), super.connectedCallback && super.connectedCallback();
|
|
}
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback && super.disconnectedCallback(), this.unmount();
|
|
}
|
|
/**
|
|
* @this {import("dom").AtomicoThisInternal}
|
|
* @param {string} attr
|
|
* @param {(string|null)} oldValue
|
|
* @param {(string|null)} value
|
|
*/
|
|
attributeChangedCallback(c, d, i) {
|
|
if (n[c]) {
|
|
if (c === this._ignoreAttr || d === i) return;
|
|
const { prop: m, type: g } = n[c];
|
|
try {
|
|
this[m] = Ce(g, i);
|
|
} catch {
|
|
throw new me(
|
|
this,
|
|
`The value defined as attr '${c}' cannot be parsed by type '${g.name}'`,
|
|
i
|
|
);
|
|
}
|
|
} else
|
|
super.attributeChangedCallback(c, d, i);
|
|
}
|
|
static get props() {
|
|
return { ...super.props, ...a };
|
|
}
|
|
static get observedAttributes() {
|
|
const c = super.observedAttributes || [];
|
|
for (const d in a)
|
|
ge(this.prototype, d, a[d], n, s);
|
|
return Object.keys(n).concat(c);
|
|
}
|
|
}
|
|
return f;
|
|
};
|
|
function Se(e) {
|
|
const { styles: t } = e.constructor, { shadowRoot: n } = e;
|
|
if (n && t.length) {
|
|
const s = [];
|
|
_t(t, (o) => {
|
|
o && (o instanceof Element ? n.appendChild(o.cloneNode(!0)) : s.push(o));
|
|
}), s.length && (n.adoptedStyleSheets = s);
|
|
}
|
|
}
|
|
const Ht = (e) => (t, n) => {
|
|
R(
|
|
/**
|
|
* Clean the effect hook
|
|
* @type {import("internal/hooks.js").CollectorEffect}
|
|
*/
|
|
([s, o] = []) => ((o || !o) && (o && xt(o, n) ? s = s || !0 : (M(s) && s(), s = null)), [s, n]),
|
|
/**
|
|
* @returns {any}
|
|
*/
|
|
([s, o], r) => r ? (M(s) && s(), []) : [s || t(), o],
|
|
e
|
|
);
|
|
}, L = Ht(Yt), Me = Ht(Ft);
|
|
class Wt extends Array {
|
|
/**
|
|
*
|
|
* @param {any} initialState
|
|
* @param {(nextState: any, state:any[], mount: boolean )=>void} mapState
|
|
*/
|
|
constructor(t, n) {
|
|
let s = !0;
|
|
const o = (r) => {
|
|
try {
|
|
n(r, this, s);
|
|
} finally {
|
|
s = !1;
|
|
}
|
|
};
|
|
super(void 0, o, n), o(t);
|
|
}
|
|
/**
|
|
* The following code allows a mutable approach to useState
|
|
* and useProp this with the idea of allowing an alternative
|
|
* approach similar to Vue or Qwik of state management
|
|
* @todo pending review with the community
|
|
*/
|
|
// get value() {
|
|
// return this[0];
|
|
// }
|
|
// set value(nextState) {
|
|
// this[2](nextState, this);
|
|
// }
|
|
}
|
|
const it = (e) => {
|
|
const t = Lt();
|
|
return R(
|
|
(n = new Wt(e, (s, o, r) => {
|
|
s = M(s) ? s(o[0]) : s, s !== o[0] && (o[0] = s, r || t());
|
|
})) => n
|
|
);
|
|
}, w = (e, t) => {
|
|
const [n] = R(([s, o, r = 0] = []) => ((!o || o && !xt(o, t)) && (s = e()), [s, t, r]));
|
|
return n;
|
|
}, lt = (e) => {
|
|
const { current: t } = W();
|
|
if (!(e in t))
|
|
throw new qt(
|
|
t,
|
|
`For useProp("${e}"), the prop does not exist on the host.`,
|
|
e
|
|
);
|
|
return R(
|
|
(n = new Wt(t[e], (s, o) => {
|
|
s = M(s) ? s(t[e]) : s, t[e] = s;
|
|
})) => (n[0] = t[e], n)
|
|
);
|
|
}, N = (e, t = {}) => {
|
|
const n = W();
|
|
return n[e] || (n[e] = (s = t.detail) => zt(n.current, {
|
|
type: e,
|
|
...t,
|
|
detail: s
|
|
})), n[e];
|
|
}, rt = x("atomico/options");
|
|
globalThis[rt] = globalThis[rt] || {
|
|
sheet: !!document.adoptedStyleSheets
|
|
};
|
|
const K = globalThis[rt], Ne = new Promise((e) => {
|
|
K.ssr || (document.readyState === "loading" ? jt(document, "DOMContentLoaded", e) : e());
|
|
}), Pe = {
|
|
checked: 1,
|
|
value: 1,
|
|
selected: 1
|
|
}, ke = {
|
|
list: 1,
|
|
type: 1,
|
|
size: 1,
|
|
form: 1,
|
|
width: 1,
|
|
height: 1,
|
|
src: 1,
|
|
href: 1,
|
|
slot: 1
|
|
}, Oe = {
|
|
shadowDom: 1,
|
|
staticNode: 1,
|
|
cloneNode: 1,
|
|
children: 1,
|
|
key: 1
|
|
}, q = {}, at = [];
|
|
class ct extends Text {
|
|
}
|
|
const Ae = x("atomico/id"), I = x("atomico/type"), Q = x("atomico/ref"), Kt = x("atomico/vnode"), Jt = () => {
|
|
};
|
|
function Ue(e, t, n) {
|
|
return Xt(this, e, t, n);
|
|
}
|
|
const Zt = (e, t, ...n) => {
|
|
const s = t || q;
|
|
let { children: o } = s;
|
|
if (o = o ?? (n.length ? n : at), e === Jt)
|
|
return o;
|
|
const r = e ? e instanceof Node ? 1 : (
|
|
//@ts-ignore
|
|
e.prototype instanceof HTMLElement && 2
|
|
) : 0;
|
|
if (r === !1 && e instanceof Function)
|
|
return e(
|
|
o != at ? { children: o, ...s } : s
|
|
);
|
|
const a = K.render || Ue;
|
|
return {
|
|
[I]: Kt,
|
|
type: e,
|
|
props: s,
|
|
children: o,
|
|
key: s.key,
|
|
// key for lists by keys
|
|
// define if the node declares its shadowDom
|
|
shadow: s.shadowDom,
|
|
// allows renderings to run only once
|
|
static: s.staticNode,
|
|
// defines whether the type is a childNode `1` or a constructor `2`
|
|
raw: r,
|
|
// defines whether to use the second parameter for document.createElement
|
|
is: s.is,
|
|
// clone the node if it comes from a reference
|
|
clone: s.cloneNode,
|
|
render: a
|
|
};
|
|
};
|
|
function Xt(e, t, n = Ae, s, o) {
|
|
let r;
|
|
if (t && t[n] && t[n].vnode == e || e[I] != Kt)
|
|
return t;
|
|
(e || !t) && (o = o || e.type == "svg", r = e.type != "host" && (e.raw == 1 ? (t && e.clone ? t[Q] : t) != e.type : e.raw == 2 ? !(t instanceof e.type) : t ? t[Q] || t.localName != e.type : !t), r && e.type != null && (e.raw == 1 && e.clone ? (s = !0, t = e.type.cloneNode(!0), t[Q] = e.type) : t = e.raw == 1 ? e.type : e.raw == 2 ? new e.type() : o ? document.createElementNS(
|
|
"http://www.w3.org/2000/svg",
|
|
e.type
|
|
) : document.createElement(
|
|
e.type,
|
|
e.is ? { is: e.is } : void 0
|
|
)));
|
|
const a = t[n] ? t[n] : q, { vnode: u = q, cycle: f = 0 } = a;
|
|
let { fragment: l, handlers: c } = a;
|
|
const { children: d = at, props: i = q } = u;
|
|
if (c = r ? {} : c || {}, e.static && !r) return t;
|
|
if (e.shadow && !t.shadowRoot && // @ts-ignore
|
|
t.attachShadow({ mode: "open", ...e.shadow }), e.props != i && Ye(t, i, e.props, c, o), e.children !== d) {
|
|
const m = e.shadow ? t.shadowRoot : t;
|
|
l = Re(
|
|
e.children,
|
|
/**
|
|
* @todo for hydration use attribute and send childNodes
|
|
*/
|
|
l,
|
|
m,
|
|
n,
|
|
// add support to foreignObject, children will escape from svg
|
|
!f && s,
|
|
o && e.type == "foreignObject" ? !1 : o
|
|
);
|
|
}
|
|
return t[n] = { vnode: e, handlers: c, fragment: l, cycle: f + 1 }, t;
|
|
}
|
|
function $e(e, t) {
|
|
const n = new ct(""), s = new ct("");
|
|
let o;
|
|
if (e[t ? "prepend" : "append"](n), t) {
|
|
let { lastElementChild: r } = e;
|
|
for (; r; ) {
|
|
const { previousElementSibling: a } = r;
|
|
if (ot(r, !0) && !ot(a, !0)) {
|
|
o = r;
|
|
break;
|
|
}
|
|
r = a;
|
|
}
|
|
}
|
|
return o ? o.before(s) : e.append(s), {
|
|
markStart: n,
|
|
markEnd: s
|
|
};
|
|
}
|
|
function Re(e, t, n, s, o, r) {
|
|
e = e == null ? null : he(e) ? e : [e];
|
|
const a = t || $e(n, o), { markStart: u, markEnd: f, keyes: l } = a;
|
|
let c;
|
|
const d = l && /* @__PURE__ */ new Set();
|
|
let i = u;
|
|
if (e && _t(e, (m) => {
|
|
if (typeof m == "object" && !m[I])
|
|
return;
|
|
const g = m[I] && m.key, b = l && g != null && l.get(g);
|
|
i != f && i === b ? d.delete(i) : i = i == f ? f : i.nextSibling;
|
|
const y = l ? b : i;
|
|
let p = y;
|
|
if (m[I])
|
|
p = Xt(m, y, s, o, r);
|
|
else {
|
|
const v = m + "";
|
|
!(p instanceof Text) || p instanceof ct ? p = new Text(v) : p.data != v && (p.data = v);
|
|
}
|
|
p != i && (l && d.delete(p), !y || l ? (n.insertBefore(p, i), l && i != f && d.add(i)) : y == f ? n.insertBefore(p, f) : (n.replaceChild(p, y), i = p)), g != null && (c = c || /* @__PURE__ */ new Map(), c.set(g, p));
|
|
}), i = i == f ? f : i.nextSibling, t && i != f)
|
|
for (; i != f; ) {
|
|
const m = i;
|
|
i = i.nextSibling, m.remove();
|
|
}
|
|
return d && d.forEach((m) => m.remove()), a.keyes = c, a;
|
|
}
|
|
function Ye(e, t, n, s, o) {
|
|
for (const r in t)
|
|
!(r in n) && St(e, r, t[r], null, o, s);
|
|
for (const r in n)
|
|
St(e, r, t[r], n[r], o, s);
|
|
}
|
|
function St(e, t, n, s, o, r) {
|
|
if (t = t == "class" && !o ? "className" : t, n = n ?? null, s = s ?? null, t in e && Pe[t] && (n = e[t]), !(s === n || Oe[t] || t[0] == "_"))
|
|
if (e.localName === "slot" && t === "assignNode" && "assign" in e)
|
|
e.assign(s);
|
|
else if (t[0] == "o" && t[1] == "n" && (M(s) || M(n)))
|
|
Fe(e, t.slice(2), s, r);
|
|
else if (t == "ref")
|
|
s && (M(s) ? s(e) : s.current = e);
|
|
else if (t == "style") {
|
|
const { style: a } = e;
|
|
n = n || "", s = s || "";
|
|
const u = F(n), f = F(s);
|
|
if (u)
|
|
for (const l in n)
|
|
if (f)
|
|
!(l in s) && Mt(a, l, null);
|
|
else
|
|
break;
|
|
if (f)
|
|
for (const l in s) {
|
|
const c = s[l];
|
|
u && n[l] === c || Mt(a, l, c);
|
|
}
|
|
else
|
|
a.cssText = s;
|
|
} else {
|
|
const a = t[0] == "$" ? t.slice(1) : t;
|
|
a === t && (!o && !ke[t] && t in e || M(s) || M(n)) ? e[t] = s ?? "" : s == null ? e.removeAttribute(a) : e.setAttribute(
|
|
a,
|
|
F(s) ? JSON.stringify(s) : s
|
|
);
|
|
}
|
|
}
|
|
function Fe(e, t, n, s) {
|
|
if (s.handleEvent || (s.handleEvent = (o) => s[o.type].call(e, o)), n) {
|
|
if (!s[t]) {
|
|
const o = n.capture || n.once || n.passive ? Object.assign({}, n) : null;
|
|
e.addEventListener(t, s, o);
|
|
}
|
|
s[t] = n;
|
|
} else
|
|
s[t] && (e.removeEventListener(t, s), delete s[t]);
|
|
}
|
|
function Mt(e, t, n) {
|
|
let s = "setProperty";
|
|
n == null && (s = "removeProperty", n = null), ~t.indexOf("-") ? e[s](t, n) : e[t] = n;
|
|
}
|
|
const Ie = Zt("host", { style: "display: contents" }), Gt = "value", Le = (e, t) => {
|
|
const n = W(), s = It();
|
|
Me(
|
|
() => jt(
|
|
n.current,
|
|
"ConnectContext",
|
|
/**
|
|
* @param {CustomEvent<import("context").DetailConnectContext>} event
|
|
*/
|
|
(o) => {
|
|
o.composedPath().at(0) !== o.currentTarget && e === o.detail.id && (o.stopPropagation(), o.detail.connect(s));
|
|
}
|
|
),
|
|
[e]
|
|
), s.current = t;
|
|
}, ut = (e) => {
|
|
const t = N("ConnectContext", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}), [n, s] = it(() => {
|
|
if (K.ssr) return;
|
|
let r;
|
|
return t({
|
|
id: e,
|
|
/**
|
|
* @param {import("core").Ref} parentContext
|
|
*/
|
|
connect(a) {
|
|
r = a;
|
|
}
|
|
}), r;
|
|
}), o = Lt();
|
|
return L(() => {
|
|
Ne.then(
|
|
() => t({
|
|
id: e,
|
|
connect: s
|
|
})
|
|
);
|
|
}, [e]), L(() => {
|
|
if (n)
|
|
return n.on(o);
|
|
}, [n]), n?.current || e[Gt];
|
|
}, Qt = (e) => {
|
|
const t = k(
|
|
({ value: n }) => (Le(t, n), Ie),
|
|
{
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
value: () => e
|
|
}
|
|
}
|
|
}
|
|
);
|
|
return t[Gt] = e, t;
|
|
};
|
|
Qt({
|
|
/**
|
|
*
|
|
* @param {string} type
|
|
* @param {string} id
|
|
*/
|
|
dispatch(e, t) {
|
|
}
|
|
});
|
|
const Nt = {};
|
|
function J(e, ...t) {
|
|
const n = (e.raw || e).reduce(
|
|
(s, o, r) => s + o + (t[r] || ""),
|
|
""
|
|
);
|
|
return Nt[n] = Nt[n] || xe(n);
|
|
}
|
|
function xe(e) {
|
|
if (K.sheet) {
|
|
const t = new CSSStyleSheet();
|
|
return t.replaceSync(e), t;
|
|
} else {
|
|
const t = document.createElement("style");
|
|
return t.textContent = e, t;
|
|
}
|
|
}
|
|
const h = (e, t, n) => (t == null ? t = { key: n } : t.key = n, Zt(e, t)), S = h, ft = J`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, dt = J`.vh{position:absolute;transform:scale(0)}`;
|
|
function ht() {
|
|
const e = /* @__PURE__ */ new Date();
|
|
return new C(e.getFullYear(), e.getMonth() + 1, e.getDate());
|
|
}
|
|
const _e = 864e5;
|
|
function je(e) {
|
|
const t = E(e);
|
|
t.setUTCDate(t.getUTCDate() + 3 - (t.getUTCDay() + 6) % 7);
|
|
const n = new Date(Date.UTC(t.getUTCFullYear(), 0, 4));
|
|
return 1 + Math.round(
|
|
((t.getTime() - n.getTime()) / _e - 3 + (n.getUTCDay() + 6) % 7) / 7
|
|
);
|
|
}
|
|
function mt(e, t = 0) {
|
|
const n = E(e), s = n.getUTCDay(), o = (s < t ? 7 : 0) + s - t;
|
|
return n.setUTCDate(n.getUTCDate() - o), C.from(n);
|
|
}
|
|
function Vt(e, t = 0) {
|
|
return mt(e, t).add({ days: 6 });
|
|
}
|
|
function te(e) {
|
|
return C.from(new Date(Date.UTC(e.year, e.month, 0)));
|
|
}
|
|
function Z(e, t, n) {
|
|
return t && C.compare(e, t) < 0 ? t : n && C.compare(e, n) > 0 ? n : e;
|
|
}
|
|
const Be = { days: 1 };
|
|
function qe(e, t = 0) {
|
|
let n = mt(e.toPlainDate(), t);
|
|
const s = Vt(te(e), t), o = [];
|
|
for (; C.compare(n, s) < 0; ) {
|
|
const r = [];
|
|
for (let a = 0; a < 7; a++)
|
|
r.push(n), n = n.add(Be);
|
|
o.push(r);
|
|
}
|
|
return o;
|
|
}
|
|
function E(e) {
|
|
return new Date(Date.UTC(e.year, e.month - 1, e.day ?? 1));
|
|
}
|
|
const ze = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/, V = (e, t) => e.toString().padStart(t, "0");
|
|
class C {
|
|
constructor(t, n, s) {
|
|
this.year = t, this.month = n, this.day = s;
|
|
}
|
|
// this is an incomplete implementation that only handles arithmetic on a single unit at a time.
|
|
// i didn't want to get into more complex arithmetic since it get tricky fast
|
|
// this is enough to serve my needs and will still be a drop-in replacement when actual Temporal API lands
|
|
add(t) {
|
|
const n = E(this);
|
|
if ("days" in t)
|
|
return n.setUTCDate(this.day + t.days), C.from(n);
|
|
let { year: s, month: o } = this;
|
|
"months" in t ? (o = this.month + t.months, n.setUTCMonth(o - 1)) : (s = this.year + t.years, n.setUTCFullYear(s));
|
|
const r = C.from(E({ year: s, month: o, day: 1 }));
|
|
return Z(C.from(n), r, te(r));
|
|
}
|
|
toString() {
|
|
return `${V(this.year, 4)}-${V(this.month, 2)}-${V(this.day, 2)}`;
|
|
}
|
|
toPlainYearMonth() {
|
|
return new U(this.year, this.month);
|
|
}
|
|
equals(t) {
|
|
return C.compare(this, t) === 0;
|
|
}
|
|
static compare(t, n) {
|
|
return t.year < n.year ? -1 : t.year > n.year ? 1 : t.month < n.month ? -1 : t.month > n.month ? 1 : t.day < n.day ? -1 : t.day > n.day ? 1 : 0;
|
|
}
|
|
static from(t) {
|
|
if (typeof t == "string") {
|
|
const n = t.match(ze);
|
|
if (!n)
|
|
throw new TypeError(t);
|
|
const [, s, o, r] = n;
|
|
return new C(
|
|
parseInt(s, 10),
|
|
parseInt(o, 10),
|
|
parseInt(r, 10)
|
|
);
|
|
}
|
|
return new C(
|
|
t.getUTCFullYear(),
|
|
t.getUTCMonth() + 1,
|
|
t.getUTCDate()
|
|
);
|
|
}
|
|
}
|
|
class U {
|
|
constructor(t, n) {
|
|
this.year = t, this.month = n;
|
|
}
|
|
add(t) {
|
|
const n = E(this), s = (t.months ?? 0) + (t.years ?? 0) * 12;
|
|
return n.setUTCMonth(n.getUTCMonth() + s), new U(n.getUTCFullYear(), n.getUTCMonth() + 1);
|
|
}
|
|
equals(t) {
|
|
return this.year === t.year && this.month === t.month;
|
|
}
|
|
toPlainDate() {
|
|
return new C(this.year, this.month, 1);
|
|
}
|
|
static compare(t, n) {
|
|
return t.year < n.year ? -1 : t.year > n.year ? 1 : t.month < n.month ? -1 : t.month > n.month ? 1 : 0;
|
|
}
|
|
}
|
|
function H(e, t) {
|
|
if (t)
|
|
try {
|
|
return e.from(t);
|
|
} catch {
|
|
}
|
|
}
|
|
function P(e) {
|
|
const [t, n] = lt(e);
|
|
return [w(() => H(C, t), [t]), (r) => n(r?.toString())];
|
|
}
|
|
function He(e) {
|
|
const [t = "", n] = lt(e);
|
|
return [w(() => {
|
|
const [r, a] = t.split("/"), u = H(C, r), f = H(C, a);
|
|
return u && f ? [u, f] : [];
|
|
}, [t]), (r) => n(`${r[0]}/${r[1]}`)];
|
|
}
|
|
function We(e) {
|
|
const [t = "", n] = lt(e);
|
|
return [w(() => {
|
|
const r = [];
|
|
for (const a of t.trim().split(/\s+/)) {
|
|
const u = H(C, a);
|
|
u && r.push(u);
|
|
}
|
|
return r;
|
|
}, [t]), (r) => n(r.join(" "))];
|
|
}
|
|
function $(e, t) {
|
|
return w(
|
|
() => new Intl.DateTimeFormat(t, { timeZone: "UTC", ...e }),
|
|
[t, e]
|
|
);
|
|
}
|
|
function Pt(e, t, n) {
|
|
const s = $(e, n);
|
|
return w(() => {
|
|
const o = [], r = /* @__PURE__ */ new Date();
|
|
for (var a = 0; a < 7; a++) {
|
|
const u = (r.getUTCDay() - t + 7) % 7;
|
|
o[u] = s.format(r), r.setUTCDate(r.getUTCDate() + 1);
|
|
}
|
|
return o;
|
|
}, [t, s]);
|
|
}
|
|
const kt = (e, t, n) => Z(e, t, n) === e, Ot = (e) => e.target.matches(":dir(ltr)"), Ke = { month: "long", day: "numeric" }, Je = { month: "long" }, Ze = { weekday: "long" }, tt = { bubbles: !0 };
|
|
function Xe({ props: e, context: t }) {
|
|
const { offset: n } = e, {
|
|
firstDayOfWeek: s,
|
|
isDateDisallowed: o,
|
|
min: r,
|
|
max: a,
|
|
today: u,
|
|
page: f,
|
|
locale: l,
|
|
focusedDate: c,
|
|
formatWeekday: d
|
|
} = t, i = u ?? ht(), m = Pt(Ze, s, l), g = w(
|
|
() => ({ weekday: d }),
|
|
[d]
|
|
), b = Pt(g, s, l), y = $(Ke, l), p = $(Je, l), v = w(
|
|
() => f.start.add({ months: n }),
|
|
[f, n]
|
|
), X = w(
|
|
() => qe(v, s),
|
|
[v, s]
|
|
), se = N("focusday", tt), oe = N("selectday", tt), re = N("hoverday", tt);
|
|
function Dt(D) {
|
|
se(Z(D, r, a));
|
|
}
|
|
function ae(D) {
|
|
let T;
|
|
switch (D.key) {
|
|
case "ArrowRight":
|
|
T = c.add({ days: Ot(D) ? 1 : -1 });
|
|
break;
|
|
case "ArrowLeft":
|
|
T = c.add({ days: Ot(D) ? -1 : 1 });
|
|
break;
|
|
case "ArrowDown":
|
|
T = c.add({ days: 7 });
|
|
break;
|
|
case "ArrowUp":
|
|
T = c.add({ days: -7 });
|
|
break;
|
|
case "PageUp":
|
|
T = c.add(D.shiftKey ? { years: -1 } : { months: -1 });
|
|
break;
|
|
case "PageDown":
|
|
T = c.add(D.shiftKey ? { years: 1 } : { months: 1 });
|
|
break;
|
|
case "Home":
|
|
T = mt(c, s);
|
|
break;
|
|
case "End":
|
|
T = Vt(c, s);
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
Dt(T), D.preventDefault();
|
|
}
|
|
function ce(D) {
|
|
const T = v.equals(D);
|
|
if (!t.showOutsideDays && !T)
|
|
return;
|
|
const ie = D.equals(c), Ct = D.equals(i), j = E(D), B = o?.(j), Tt = !kt(D, r, a);
|
|
let Et = "", O;
|
|
if (t.type === "range") {
|
|
const [Y, G] = t.value, vt = Y?.equals(D), wt = G?.equals(D);
|
|
O = Y && G && kt(D, Y, G), Et = `${vt ? "range-start" : ""} ${wt ? "range-end" : ""} ${O && !vt && !wt ? "range-inner" : ""}`;
|
|
} else t.type === "multi" ? O = t.value.some((Y) => Y.equals(D)) : O = t.value?.equals(D);
|
|
return {
|
|
part: `${`button day day-${j.getUTCDay()} ${// we don't want outside days to ever be shown as selected
|
|
T ? O ? "selected" : "" : "outside"} ${B ? "disallowed" : ""} ${Ct ? "today" : ""} ${t.getDayParts?.(j) ?? ""}`} ${Et}`,
|
|
tabindex: T && ie ? 0 : -1,
|
|
disabled: Tt,
|
|
"aria-disabled": B ? "true" : void 0,
|
|
"aria-pressed": T && O,
|
|
"aria-current": Ct ? "date" : void 0,
|
|
"aria-label": y.format(j),
|
|
onkeydown: ae,
|
|
onclick() {
|
|
B || oe(D), Dt(D);
|
|
},
|
|
onmouseover() {
|
|
!B && !Tt && re(D);
|
|
}
|
|
};
|
|
}
|
|
return {
|
|
weeks: X,
|
|
yearMonth: v,
|
|
daysLong: m,
|
|
daysVisible: b,
|
|
formatter: p,
|
|
getDayProps: ce
|
|
};
|
|
}
|
|
const et = ht(), _ = Qt({
|
|
type: "date",
|
|
firstDayOfWeek: 1,
|
|
focusedDate: et,
|
|
page: { start: et.toPlainYearMonth(), end: et.toPlainYearMonth() }
|
|
});
|
|
customElements.define("calendar-ctx", _);
|
|
const Ge = (e, t) => (t + e) % 7, Qe = k(
|
|
(e) => {
|
|
const t = ut(_), n = It(), s = Xe({ props: e, context: t });
|
|
function o() {
|
|
n.current.querySelector("button[tabindex='0']")?.focus();
|
|
}
|
|
return /* @__PURE__ */ S("host", { shadowDom: !0, focus: o, children: [
|
|
/* @__PURE__ */ h("div", { id: "h", part: "heading", children: s.formatter.format(E(s.yearMonth)) }),
|
|
/* @__PURE__ */ S("table", { ref: n, "aria-labelledby": "h", part: "table", children: [
|
|
/* @__PURE__ */ S("colgroup", { children: [
|
|
t.showWeekNumbers && /* @__PURE__ */ h("col", { part: "col-weeknumber" }),
|
|
/* @__PURE__ */ h("col", { part: "col-1" }),
|
|
/* @__PURE__ */ h("col", { part: "col-2" }),
|
|
/* @__PURE__ */ h("col", { part: "col-3" }),
|
|
/* @__PURE__ */ h("col", { part: "col-4" }),
|
|
/* @__PURE__ */ h("col", { part: "col-5" }),
|
|
/* @__PURE__ */ h("col", { part: "col-6" }),
|
|
/* @__PURE__ */ h("col", { part: "col-7" })
|
|
] }),
|
|
/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ S("tr", { part: "tr head", children: [
|
|
t.showWeekNumbers && /* @__PURE__ */ h("th", { part: "th weeknumber", children: /* @__PURE__ */ S("slot", { name: "weeknumber", children: [
|
|
/* @__PURE__ */ h("span", { class: "vh", children: "Week" }),
|
|
/* @__PURE__ */ h("span", { "aria-hidden": "true", children: "#" })
|
|
] }) }),
|
|
s.daysLong.map((r, a) => /* @__PURE__ */ S(
|
|
"th",
|
|
{
|
|
part: `th day day-${Ge(t.firstDayOfWeek, a)}`,
|
|
scope: "col",
|
|
children: [
|
|
/* @__PURE__ */ h("span", { class: "vh", children: r }),
|
|
/* @__PURE__ */ h("span", { "aria-hidden": "true", children: s.daysVisible[a] })
|
|
]
|
|
}
|
|
))
|
|
] }) }),
|
|
/* @__PURE__ */ h("tbody", { children: s.weeks.map((r, a) => /* @__PURE__ */ S("tr", { part: "tr week", children: [
|
|
t.showWeekNumbers && /* @__PURE__ */ h("th", { class: "num", part: "th weeknumber", scope: "row", children: je(r[0]) }),
|
|
r.map((u, f) => {
|
|
const l = s.getDayProps(u);
|
|
return /* @__PURE__ */ h("td", { part: "td", children: l && /* @__PURE__ */ h("button", { class: "num", ...l, children: u.day }) }, f);
|
|
})
|
|
] }, a)) })
|
|
] })
|
|
] });
|
|
},
|
|
{
|
|
props: {
|
|
offset: {
|
|
type: Number,
|
|
value: 0
|
|
}
|
|
},
|
|
styles: [
|
|
ft,
|
|
dt,
|
|
J`:host{--color-accent: black;--color-text-on-accent: white;display:flex;flex-direction:column;gap:.25rem;text-align:center;inline-size:fit-content}table{border-collapse:collapse;font-size:.875rem}th{inline-size:2.25rem;block-size:2.25rem}td{padding-inline:0}.num{font-variant-numeric:tabular-nums}button{color:inherit;font-size:inherit;background:transparent;border:0;block-size:2.25rem;inline-size:2.25rem}button:hover:where(:not(:disabled,[aria-disabled])){background:#0000000d}button:is([aria-pressed=true],:focus-visible){background:var(--color-accent);color:var(--color-text-on-accent)}button:focus-visible{outline:1px solid var(--color-text-on-accent);outline-offset:-2px}button:disabled,:host::part(outside),:host::part(disallowed){cursor:default;opacity:.5}`
|
|
]
|
|
}
|
|
);
|
|
customElements.define("calendar-month", Qe);
|
|
function At(e) {
|
|
return /* @__PURE__ */ h(
|
|
"button",
|
|
{
|
|
part: `button ${e.name} ${e.onclick ? "" : "disabled"}`,
|
|
onclick: e.onclick,
|
|
"aria-disabled": e.onclick ? null : "true",
|
|
children: /* @__PURE__ */ h("slot", { name: e.name, children: e.children })
|
|
}
|
|
);
|
|
}
|
|
function yt(e) {
|
|
const t = E(e.page.start), n = E(e.page.end);
|
|
return /* @__PURE__ */ h(
|
|
_,
|
|
{
|
|
value: e,
|
|
onselectday: e.onSelect,
|
|
onfocusday: e.onFocus,
|
|
onhoverday: e.onHover,
|
|
children: /* @__PURE__ */ S("div", { role: "group", "aria-labelledby": "h", part: "container", children: [
|
|
/* @__PURE__ */ h("div", { id: "h", class: "vh", "aria-live": "polite", "aria-atomic": "true", children: e.formatVerbose.formatRange(t, n) }),
|
|
/* @__PURE__ */ S("div", { part: "header", children: [
|
|
/* @__PURE__ */ h(At, { name: "previous", onclick: e.previous, children: "Previous" }),
|
|
/* @__PURE__ */ h("slot", { part: "heading", name: "heading", children: /* @__PURE__ */ h("div", { "aria-hidden": "true", children: e.format.formatRange(t, n) }) }),
|
|
/* @__PURE__ */ h(At, { name: "next", onclick: e.next, children: "Next" })
|
|
] }),
|
|
/* @__PURE__ */ h("slot", { part: "months" })
|
|
] })
|
|
}
|
|
);
|
|
}
|
|
const pt = {
|
|
value: {
|
|
type: String,
|
|
value: ""
|
|
},
|
|
min: {
|
|
type: String,
|
|
value: ""
|
|
},
|
|
max: {
|
|
type: String,
|
|
value: ""
|
|
},
|
|
today: {
|
|
type: String,
|
|
value: ""
|
|
},
|
|
isDateDisallowed: {
|
|
type: Function,
|
|
value: (e) => !1
|
|
},
|
|
formatWeekday: {
|
|
type: String,
|
|
value: () => "narrow"
|
|
},
|
|
getDayParts: {
|
|
type: Function,
|
|
value: (e) => ""
|
|
},
|
|
firstDayOfWeek: {
|
|
type: Number,
|
|
value: () => 1
|
|
},
|
|
showOutsideDays: {
|
|
type: Boolean,
|
|
value: !1
|
|
},
|
|
locale: {
|
|
type: String,
|
|
value: () => {
|
|
}
|
|
},
|
|
months: {
|
|
type: Number,
|
|
value: 1
|
|
},
|
|
focusedDate: {
|
|
type: String,
|
|
value: () => {
|
|
}
|
|
},
|
|
pageBy: {
|
|
type: String,
|
|
value: () => "months"
|
|
},
|
|
showWeekNumbers: {
|
|
type: Boolean,
|
|
value: !1
|
|
}
|
|
}, gt = [
|
|
ft,
|
|
dt,
|
|
J`:host{display:block;inline-size:fit-content}:host::part(container){display:flex;flex-direction:column;gap:1em}:host::part(header){display:flex;align-items:center;justify-content:space-between}:host::part(heading){font-weight:700;font-size:1.25em}:host::part(button){display:flex;align-items:center;justify-content:center}:host::part(button disabled){cursor:default;opacity:.5}`
|
|
], Ve = { year: "numeric" }, tn = { year: "numeric", month: "long" };
|
|
function nt(e, t) {
|
|
return (t.year - e.year) * 12 + t.month - e.month;
|
|
}
|
|
const Ut = (e, t) => (e = t === 12 ? new U(e.year, 1) : e, {
|
|
start: e,
|
|
end: e.add({ months: t - 1 })
|
|
});
|
|
function en({
|
|
pageBy: e,
|
|
focusedDate: t,
|
|
months: n,
|
|
max: s,
|
|
min: o,
|
|
goto: r
|
|
}) {
|
|
const a = e === "single" ? 1 : n, [u, f] = it(
|
|
() => Ut(t.toPlainYearMonth(), n)
|
|
), l = (d) => f(Ut(u.start.add({ months: d }), n)), c = (d) => {
|
|
const i = nt(u.start, d.toPlainYearMonth());
|
|
return i >= 0 && i < n;
|
|
};
|
|
return L(() => {
|
|
if (c(t))
|
|
return;
|
|
const d = nt(t.toPlainYearMonth(), u.start);
|
|
r(t.add({ months: d }));
|
|
}, [u.start]), L(() => {
|
|
if (c(t))
|
|
return;
|
|
const d = nt(u.start, t.toPlainYearMonth());
|
|
l(d === -1 ? -a : d === n ? a : Math.floor(d / n) * n);
|
|
}, [t, a, n]), {
|
|
page: u,
|
|
previous: !o || !c(o) ? () => l(-a) : void 0,
|
|
next: !s || !c(s) ? () => l(a) : void 0
|
|
};
|
|
}
|
|
function bt({
|
|
months: e,
|
|
pageBy: t,
|
|
locale: n,
|
|
focusedDate: s,
|
|
setFocusedDate: o
|
|
}) {
|
|
const [r] = P("min"), [a] = P("max"), [u] = P("today"), f = N("focusday"), l = N("change"), c = w(
|
|
() => Z(s ?? u ?? ht(), r, a),
|
|
[s, u, r, a]
|
|
);
|
|
function d(p) {
|
|
o(p), f(E(p));
|
|
}
|
|
const { next: i, previous: m, page: g } = en({
|
|
pageBy: t,
|
|
focusedDate: c,
|
|
months: e,
|
|
min: r,
|
|
max: a,
|
|
goto: d
|
|
}), b = W();
|
|
function y(p) {
|
|
const v = p?.target ?? "day";
|
|
v === "day" ? b.current.querySelectorAll("calendar-month").forEach((X) => X.focus(p)) : b.current.shadowRoot.querySelector(`[part~='${v}']`).focus(p);
|
|
}
|
|
return {
|
|
format: $(Ve, n),
|
|
formatVerbose: $(tn, n),
|
|
page: g,
|
|
focusedDate: c,
|
|
dispatch: l,
|
|
onFocus(p) {
|
|
p.stopPropagation(), d(p.detail), setTimeout(y);
|
|
},
|
|
min: r,
|
|
max: a,
|
|
today: u,
|
|
next: i,
|
|
previous: m,
|
|
focus: y
|
|
};
|
|
}
|
|
const nn = k(
|
|
(e) => {
|
|
const [t, n] = P("value"), [s = t, o] = P("focusedDate"), r = bt({
|
|
...e,
|
|
focusedDate: s,
|
|
setFocusedDate: o
|
|
});
|
|
function a(u) {
|
|
n(u.detail), r.dispatch();
|
|
}
|
|
return /* @__PURE__ */ h("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ h(
|
|
yt,
|
|
{
|
|
...e,
|
|
...r,
|
|
type: "date",
|
|
value: t,
|
|
onSelect: a
|
|
}
|
|
) });
|
|
},
|
|
{ props: pt, styles: gt }
|
|
);
|
|
customElements.define("calendar-date", nn);
|
|
function ee(e) {
|
|
return /* @__PURE__ */ S(Jt, { children: [
|
|
/* @__PURE__ */ h("label", { part: "label", for: "s", children: /* @__PURE__ */ h("slot", { name: "label", children: e.label }) }),
|
|
/* @__PURE__ */ h("select", { id: "s", part: "select", onchange: e.onChange, children: e.options.map((t) => /* @__PURE__ */ h("option", { part: "option", ...t })) })
|
|
] });
|
|
}
|
|
const ne = [ft, dt];
|
|
function sn(e, t) {
|
|
return Array.from({ length: e }, (n, s) => t(s));
|
|
}
|
|
function on(e) {
|
|
const { min: t, max: n, focusedDate: s } = ut(_), o = N("focusday", { bubbles: !0 }), r = s.toPlainYearMonth(), a = r.year, u = Math.floor(e.maxYears / 2), f = a - u, l = a + (e.maxYears - u - 1), c = Math.max(f, t?.year ?? -1 / 0), d = Math.min(l, n?.year ?? 1 / 0), i = sn(d - c + 1, (g) => {
|
|
const b = c + g;
|
|
return {
|
|
label: `${b}`,
|
|
value: `${b}`,
|
|
selected: b === r.year
|
|
};
|
|
});
|
|
function m(g) {
|
|
const y = parseInt(g.currentTarget.value) - r.year;
|
|
o(s.add({ years: y }));
|
|
}
|
|
return { options: i, onChange: m };
|
|
}
|
|
const rn = k(
|
|
(e) => {
|
|
const t = on(e);
|
|
return /* @__PURE__ */ h("host", { shadowDom: !0, children: /* @__PURE__ */ h(ee, { label: "Year", ...t }) });
|
|
},
|
|
{
|
|
props: {
|
|
maxYears: { type: Number, value: 20 }
|
|
},
|
|
styles: ne
|
|
}
|
|
);
|
|
customElements.define("calendar-select-year", rn);
|
|
function an(e) {
|
|
const { min: t, max: n, focusedDate: s, locale: o } = ut(_), r = N("focusday", { bubbles: !0 }), a = w(
|
|
() => ({ month: e.formatMonth }),
|
|
[e.formatMonth]
|
|
), u = $(a, o), f = w(() => {
|
|
const i = [], m = /* @__PURE__ */ new Date();
|
|
m.setUTCDate(1);
|
|
for (var g = 0; g < 12; g++) {
|
|
const b = (m.getUTCMonth() + 12) % 12;
|
|
i[b] = u.format(m), m.setUTCMonth(m.getUTCMonth() + 1);
|
|
}
|
|
return i;
|
|
}, [u]), l = s.toPlainYearMonth(), c = f.map((i, m) => {
|
|
const g = m + 1, b = l.add({ months: g - l.month }), y = t != null && U.compare(b, t) < 0 || n != null && U.compare(b, n) > 0;
|
|
return {
|
|
label: i,
|
|
value: `${g}`,
|
|
disabled: y,
|
|
selected: g === l.month
|
|
};
|
|
});
|
|
function d(i) {
|
|
const g = parseInt(i.currentTarget.value) - l.month;
|
|
r(s.add({ months: g }));
|
|
}
|
|
return { options: c, onChange: d };
|
|
}
|
|
const cn = k(
|
|
(e) => {
|
|
const t = an(e);
|
|
return /* @__PURE__ */ h("host", { shadowDom: !0, children: /* @__PURE__ */ h(ee, { label: "Month", ...t }) });
|
|
},
|
|
{
|
|
props: {
|
|
formatMonth: {
|
|
type: String,
|
|
value: () => "long"
|
|
}
|
|
},
|
|
styles: ne
|
|
}
|
|
);
|
|
customElements.define("calendar-select-month", cn);
|
|
const $t = (e, t) => C.compare(e, t) < 0 ? [e, t] : [t, e], ln = k(
|
|
(e) => {
|
|
const [t, n] = He("value"), [s = t[0], o] = P("focusedDate"), r = bt({
|
|
...e,
|
|
focusedDate: s,
|
|
setFocusedDate: o
|
|
}), a = N("rangestart"), u = N("rangeend"), [f, l] = P(
|
|
"tentative"
|
|
), [c, d] = it();
|
|
L(() => d(void 0), [f]);
|
|
function i(y) {
|
|
r.onFocus(y), m(y);
|
|
}
|
|
function m(y) {
|
|
y.stopPropagation(), f && d(y.detail);
|
|
}
|
|
function g(y) {
|
|
const p = y.detail;
|
|
y.stopPropagation(), f ? (n($t(f, p)), l(void 0), u(E(p)), r.dispatch()) : (l(p), a(E(p)));
|
|
}
|
|
const b = f ? $t(f, c ?? f) : t;
|
|
return /* @__PURE__ */ h("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ h(
|
|
yt,
|
|
{
|
|
...e,
|
|
...r,
|
|
type: "range",
|
|
value: b,
|
|
onFocus: i,
|
|
onHover: m,
|
|
onSelect: g
|
|
}
|
|
) });
|
|
},
|
|
{
|
|
props: {
|
|
...pt,
|
|
tentative: {
|
|
type: String,
|
|
value: ""
|
|
}
|
|
},
|
|
styles: gt
|
|
}
|
|
);
|
|
customElements.define("calendar-range", ln);
|
|
const un = k(
|
|
(e) => {
|
|
const [t, n] = We("value"), [s = t[0], o] = P("focusedDate"), r = bt({
|
|
...e,
|
|
focusedDate: s,
|
|
setFocusedDate: o
|
|
});
|
|
function a(u) {
|
|
const f = [...t], l = t.findIndex((c) => c.equals(u.detail));
|
|
l < 0 ? f.push(u.detail) : f.splice(l, 1), n(f), r.dispatch();
|
|
}
|
|
return /* @__PURE__ */ h("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ h(
|
|
yt,
|
|
{
|
|
...e,
|
|
...r,
|
|
type: "multi",
|
|
value: t,
|
|
onSelect: a
|
|
}
|
|
) });
|
|
},
|
|
{ props: pt, styles: gt }
|
|
);
|
|
customElements.define("calendar-multi", un);
|
|
export {
|
|
nn as CalendarDate,
|
|
Qe as CalendarMonth,
|
|
un as CalendarMulti,
|
|
ln as CalendarRange,
|
|
cn as CalendarSelectMonth,
|
|
rn as CalendarSelectYear
|
|
};
|