diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c8c2d2a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,29 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[*.json] +indent_size = 2 + +[*.{html,js,md}] +block_comment_start = /** +block_comment = * +block_comment_end = */ diff --git a/.gitignore b/.gitignore index b12160e..5c4d921 100644 --- a/.gitignore +++ b/.gitignore @@ -1,115 +1,24 @@ -# Created by https://www.gitignore.io/api/node -# Edit at https://www.gitignore.io/?templates=node +## editors +/.idea +/.vscode -### Node ### -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* +## system files +.DS_Store -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json +## npm +/node_modules/ +/npm-debug.log -# Runtime data -pids -*.pid -*.seed -*.pid.lock +## testing +/coverage/ -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov +## temp folders +/.tmp/ -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# next.js build output -.next - -# nuxt.js build output -.nuxt -dist - -# Uncomment the public line if your project uses Gatsby -# https://nextjs.org/blog/next-9-1#public-directory-support -# https://create-react-app.dev/docs/using-the-public-folder/#docsNav -# public - -# Storybook build outputs -.out -.storybook-out - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# Temporary folders -tmp/ -temp/ - -# End of https://www.gitignore.io/api/node -api/** -storybook-static/ - -# Wireit's cache -.wireit +# build +/_site/ +/dist/ +/out-tsc/ +storybook-static custom-elements.json diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..f568382 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +./node_modules/.bin/lint-staged \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..8165259 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,8 @@ +const config = { + stories: ['../out-tsc/stories/**/*.stories.{js,md,mdx}'], + framework: { + name: '@web/storybook-framework-web-components', + }, +}; + +export default config; \ No newline at end of file diff --git a/.wireit/6275696c64/cache/28175b20f0bbda381f4d82e225e3ba776c14144c0a5991c3a38b907bf276d2b4/dist/index.js b/.wireit/6275696c64/cache/28175b20f0bbda381f4d82e225e3ba776c14144c0a5991c3a38b907bf276d2b4/dist/index.js new file mode 100644 index 0000000..55ce130 --- /dev/null +++ b/.wireit/6275696c64/cache/28175b20f0bbda381f4d82e225e3ba776c14144c0a5991c3a38b907bf276d2b4/dist/index.js @@ -0,0 +1,1074 @@ +var __defProp = Object.defineProperty; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __decorateClass = (decorators, target, key, kind) => { + var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target; + for (var i7 = decorators.length - 1, decorator; i7 >= 0; i7--) + if (decorator = decorators[i7]) + result = (kind ? decorator(target, key, result) : decorator(result)) || result; + if (kind && result) __defProp(target, key, result); + return result; +}; + +// node_modules/@lit/reactive-element/css-tag.js +var t = globalThis; +var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype; +var s = Symbol(); +var o = /* @__PURE__ */ new WeakMap(); +var n = class { + constructor(t6, e6, o8) { + if (this._$cssResult$ = true, o8 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead."); + this.cssText = t6, this.t = e6; + } + get styleSheet() { + let t6 = this.o; + const s4 = this.t; + if (e && void 0 === t6) { + const e6 = void 0 !== s4 && 1 === s4.length; + e6 && (t6 = o.get(s4)), void 0 === t6 && ((this.o = t6 = new CSSStyleSheet()).replaceSync(this.cssText), e6 && o.set(s4, t6)); + } + return t6; + } + toString() { + return this.cssText; + } +}; +var r = (t6) => new n("string" == typeof t6 ? t6 : t6 + "", void 0, s); +var i = (t6, ...e6) => { + const o8 = 1 === t6.length ? t6[0] : e6.reduce((e7, s4, o9) => e7 + ((t7) => { + if (true === t7._$cssResult$) return t7.cssText; + if ("number" == typeof t7) return t7; + throw Error("Value passed to 'css' function must be a 'css' function result: " + t7 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."); + })(s4) + t6[o9 + 1], t6[0]); + return new n(o8, t6, s); +}; +var S = (s4, o8) => { + if (e) s4.adoptedStyleSheets = o8.map((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet); + else for (const e6 of o8) { + const o9 = document.createElement("style"), n8 = t.litNonce; + void 0 !== n8 && o9.setAttribute("nonce", n8), o9.textContent = e6.cssText, s4.appendChild(o9); + } +}; +var c = e ? (t6) => t6 : (t6) => t6 instanceof CSSStyleSheet ? ((t7) => { + let e6 = ""; + for (const s4 of t7.cssRules) e6 += s4.cssText; + return r(e6); +})(t6) : t6; + +// node_modules/@lit/reactive-element/reactive-element.js +var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: r2, getOwnPropertyNames: h, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object; +var a = globalThis; +var c2 = a.trustedTypes; +var l = c2 ? c2.emptyScript : ""; +var p = a.reactiveElementPolyfillSupport; +var d = (t6, s4) => t6; +var u = { toAttribute(t6, s4) { + switch (s4) { + case Boolean: + t6 = t6 ? l : null; + break; + case Object: + case Array: + t6 = null == t6 ? t6 : JSON.stringify(t6); + } + return t6; +}, fromAttribute(t6, s4) { + let i7 = t6; + switch (s4) { + case Boolean: + i7 = null !== t6; + break; + case Number: + i7 = null === t6 ? null : Number(t6); + break; + case Object: + case Array: + try { + i7 = JSON.parse(t6); + } catch (t7) { + i7 = null; + } + } + return i7; +} }; +var f = (t6, s4) => !i2(t6, s4); +var y = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f }; +Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap(); +var b = class extends HTMLElement { + static addInitializer(t6) { + this._$Ei(), (this.l ??= []).push(t6); + } + static get observedAttributes() { + return this.finalize(), this._$Eh && [...this._$Eh.keys()]; + } + static createProperty(t6, s4 = y) { + if (s4.state && (s4.attribute = false), this._$Ei(), this.elementProperties.set(t6, s4), !s4.noAccessor) { + const i7 = Symbol(), r7 = this.getPropertyDescriptor(t6, i7, s4); + void 0 !== r7 && e2(this.prototype, t6, r7); + } + } + static getPropertyDescriptor(t6, s4, i7) { + const { get: e6, set: h5 } = r2(this.prototype, t6) ?? { get() { + return this[s4]; + }, set(t7) { + this[s4] = t7; + } }; + return { get() { + return e6?.call(this); + }, set(s5) { + const r7 = e6?.call(this); + h5.call(this, s5), this.requestUpdate(t6, r7, i7); + }, configurable: true, enumerable: true }; + } + static getPropertyOptions(t6) { + return this.elementProperties.get(t6) ?? y; + } + static _$Ei() { + if (this.hasOwnProperty(d("elementProperties"))) return; + const t6 = n2(this); + t6.finalize(), void 0 !== t6.l && (this.l = [...t6.l]), this.elementProperties = new Map(t6.elementProperties); + } + static finalize() { + if (this.hasOwnProperty(d("finalized"))) return; + if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) { + const t7 = this.properties, s4 = [...h(t7), ...o2(t7)]; + for (const i7 of s4) this.createProperty(i7, t7[i7]); + } + const t6 = this[Symbol.metadata]; + if (null !== t6) { + const s4 = litPropertyMetadata.get(t6); + if (void 0 !== s4) for (const [t7, i7] of s4) this.elementProperties.set(t7, i7); + } + this._$Eh = /* @__PURE__ */ new Map(); + for (const [t7, s4] of this.elementProperties) { + const i7 = this._$Eu(t7, s4); + void 0 !== i7 && this._$Eh.set(i7, t7); + } + this.elementStyles = this.finalizeStyles(this.styles); + } + static finalizeStyles(s4) { + const i7 = []; + if (Array.isArray(s4)) { + const e6 = new Set(s4.flat(1 / 0).reverse()); + for (const s5 of e6) i7.unshift(c(s5)); + } else void 0 !== s4 && i7.push(c(s4)); + return i7; + } + static _$Eu(t6, s4) { + const i7 = s4.attribute; + return false === i7 ? void 0 : "string" == typeof i7 ? i7 : "string" == typeof t6 ? t6.toLowerCase() : void 0; + } + constructor() { + super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev(); + } + _$Ev() { + this._$ES = new Promise((t6) => this.enableUpdating = t6), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t6) => t6(this)); + } + addController(t6) { + (this._$EO ??= /* @__PURE__ */ new Set()).add(t6), void 0 !== this.renderRoot && this.isConnected && t6.hostConnected?.(); + } + removeController(t6) { + this._$EO?.delete(t6); + } + _$E_() { + const t6 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties; + for (const i7 of s4.keys()) this.hasOwnProperty(i7) && (t6.set(i7, this[i7]), delete this[i7]); + t6.size > 0 && (this._$Ep = t6); + } + createRenderRoot() { + const t6 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions); + return S(t6, this.constructor.elementStyles), t6; + } + connectedCallback() { + this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach((t6) => t6.hostConnected?.()); + } + enableUpdating(t6) { + } + disconnectedCallback() { + this._$EO?.forEach((t6) => t6.hostDisconnected?.()); + } + attributeChangedCallback(t6, s4, i7) { + this._$AK(t6, i7); + } + _$EC(t6, s4) { + const i7 = this.constructor.elementProperties.get(t6), e6 = this.constructor._$Eu(t6, i7); + if (void 0 !== e6 && true === i7.reflect) { + const r7 = (void 0 !== i7.converter?.toAttribute ? i7.converter : u).toAttribute(s4, i7.type); + this._$Em = t6, null == r7 ? this.removeAttribute(e6) : this.setAttribute(e6, r7), this._$Em = null; + } + } + _$AK(t6, s4) { + const i7 = this.constructor, e6 = i7._$Eh.get(t6); + if (void 0 !== e6 && this._$Em !== e6) { + const t7 = i7.getPropertyOptions(e6), r7 = "function" == typeof t7.converter ? { fromAttribute: t7.converter } : void 0 !== t7.converter?.fromAttribute ? t7.converter : u; + this._$Em = e6, this[e6] = r7.fromAttribute(s4, t7.type), this._$Em = null; + } + } + requestUpdate(t6, s4, i7) { + if (void 0 !== t6) { + if (i7 ??= this.constructor.getPropertyOptions(t6), !(i7.hasChanged ?? f)(this[t6], s4)) return; + this.P(t6, s4, i7); + } + false === this.isUpdatePending && (this._$ES = this._$ET()); + } + P(t6, s4, i7) { + this._$AL.has(t6) || this._$AL.set(t6, s4), true === i7.reflect && this._$Em !== t6 && (this._$Ej ??= /* @__PURE__ */ new Set()).add(t6); + } + async _$ET() { + this.isUpdatePending = true; + try { + await this._$ES; + } catch (t7) { + Promise.reject(t7); + } + const t6 = this.scheduleUpdate(); + return null != t6 && await t6, !this.isUpdatePending; + } + scheduleUpdate() { + return this.performUpdate(); + } + performUpdate() { + if (!this.isUpdatePending) return; + if (!this.hasUpdated) { + if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) { + for (const [t8, s5] of this._$Ep) this[t8] = s5; + this._$Ep = void 0; + } + const t7 = this.constructor.elementProperties; + if (t7.size > 0) for (const [s5, i7] of t7) true !== i7.wrapped || this._$AL.has(s5) || void 0 === this[s5] || this.P(s5, this[s5], i7); + } + let t6 = false; + const s4 = this._$AL; + try { + t6 = this.shouldUpdate(s4), t6 ? (this.willUpdate(s4), this._$EO?.forEach((t7) => t7.hostUpdate?.()), this.update(s4)) : this._$EU(); + } catch (s5) { + throw t6 = false, this._$EU(), s5; + } + t6 && this._$AE(s4); + } + willUpdate(t6) { + } + _$AE(t6) { + this._$EO?.forEach((t7) => t7.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6); + } + _$EU() { + this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false; + } + get updateComplete() { + return this.getUpdateComplete(); + } + getUpdateComplete() { + return this._$ES; + } + shouldUpdate(t6) { + return true; + } + update(t6) { + this._$Ej &&= this._$Ej.forEach((t7) => this._$EC(t7, this[t7])), this._$EU(); + } + updated(t6) { + } + firstUpdated(t6) { + } +}; +b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d("elementProperties")] = /* @__PURE__ */ new Map(), b[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: b }), (a.reactiveElementVersions ??= []).push("2.0.4"); + +// node_modules/lit-html/lit-html.js +var t2 = globalThis; +var i3 = t2.trustedTypes; +var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0; +var e3 = "$lit$"; +var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`; +var o3 = "?" + h2; +var n3 = `<${o3}>`; +var r3 = document; +var l2 = () => r3.createComment(""); +var c3 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6; +var a2 = Array.isArray; +var u2 = (t6) => a2(t6) || "function" == typeof t6?.[Symbol.iterator]; +var d2 = "[ \n\f\r]"; +var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g; +var v = /-->/g; +var _ = />/g; +var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^ +\f\r"'\`<>=]|("|')|))|$)`, "g"); +var p2 = /'/g; +var g = /"/g; +var $ = /^(?:script|style|textarea|title)$/i; +var y2 = (t6) => (i7, ...s4) => ({ _$litType$: t6, strings: i7, values: s4 }); +var x = y2(1); +var b2 = y2(2); +var w = y2(3); +var T = Symbol.for("lit-noChange"); +var E = Symbol.for("lit-nothing"); +var A = /* @__PURE__ */ new WeakMap(); +var C = r3.createTreeWalker(r3, 129); +function P(t6, i7) { + if (!a2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array"); + return void 0 !== s2 ? s2.createHTML(i7) : i7; +} +var V = (t6, i7) => { + const s4 = t6.length - 1, o8 = []; + let r7, l3 = 2 === i7 ? "" : 3 === i7 ? "" : "")), o8]; +}; +var N = class _N { + constructor({ strings: t6, _$litType$: s4 }, n8) { + let r7; + this.parts = []; + let c5 = 0, a3 = 0; + const u3 = t6.length - 1, d3 = this.parts, [f5, v2] = V(t6, s4); + if (this.el = _N.createElement(f5, n8), C.currentNode = this.el.content, 2 === s4 || 3 === s4) { + const t7 = this.el.content.firstChild; + t7.replaceWith(...t7.childNodes); + } + for (; null !== (r7 = C.nextNode()) && d3.length < u3; ) { + if (1 === r7.nodeType) { + if (r7.hasAttributes()) for (const t7 of r7.getAttributeNames()) if (t7.endsWith(e3)) { + const i7 = v2[a3++], s5 = r7.getAttribute(t7).split(h2), e6 = /([.?@])?(.*)/.exec(i7); + d3.push({ type: 1, index: c5, name: e6[2], strings: s5, ctor: "." === e6[1] ? H : "?" === e6[1] ? I : "@" === e6[1] ? L : k }), r7.removeAttribute(t7); + } else t7.startsWith(h2) && (d3.push({ type: 6, index: c5 }), r7.removeAttribute(t7)); + if ($.test(r7.tagName)) { + const t7 = r7.textContent.split(h2), s5 = t7.length - 1; + if (s5 > 0) { + r7.textContent = i3 ? i3.emptyScript : ""; + for (let i7 = 0; i7 < s5; i7++) r7.append(t7[i7], l2()), C.nextNode(), d3.push({ type: 2, index: ++c5 }); + r7.append(t7[s5], l2()); + } + } + } else if (8 === r7.nodeType) if (r7.data === o3) d3.push({ type: 2, index: c5 }); + else { + let t7 = -1; + for (; -1 !== (t7 = r7.data.indexOf(h2, t7 + 1)); ) d3.push({ type: 7, index: c5 }), t7 += h2.length - 1; + } + c5++; + } + } + static createElement(t6, i7) { + const s4 = r3.createElement("template"); + return s4.innerHTML = t6, s4; + } +}; +function S2(t6, i7, s4 = t6, e6) { + if (i7 === T) return i7; + let h5 = void 0 !== e6 ? s4._$Co?.[e6] : s4._$Cl; + const o8 = c3(i7) ? void 0 : i7._$litDirective$; + return h5?.constructor !== o8 && (h5?._$AO?.(false), void 0 === o8 ? h5 = void 0 : (h5 = new o8(t6), h5._$AT(t6, s4, e6)), void 0 !== e6 ? (s4._$Co ??= [])[e6] = h5 : s4._$Cl = h5), void 0 !== h5 && (i7 = S2(t6, h5._$AS(t6, i7.values), h5, e6)), i7; +} +var M = class { + constructor(t6, i7) { + this._$AV = [], this._$AN = void 0, this._$AD = t6, this._$AM = i7; + } + get parentNode() { + return this._$AM.parentNode; + } + get _$AU() { + return this._$AM._$AU; + } + u(t6) { + const { el: { content: i7 }, parts: s4 } = this._$AD, e6 = (t6?.creationScope ?? r3).importNode(i7, true); + C.currentNode = e6; + let h5 = C.nextNode(), o8 = 0, n8 = 0, l3 = s4[0]; + for (; void 0 !== l3; ) { + if (o8 === l3.index) { + let i8; + 2 === l3.type ? i8 = new R(h5, h5.nextSibling, this, t6) : 1 === l3.type ? i8 = new l3.ctor(h5, l3.name, l3.strings, this, t6) : 6 === l3.type && (i8 = new z(h5, this, t6)), this._$AV.push(i8), l3 = s4[++n8]; + } + o8 !== l3?.index && (h5 = C.nextNode(), o8++); + } + return C.currentNode = r3, e6; + } + p(t6) { + let i7 = 0; + for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t6, s4, i7), i7 += s4.strings.length - 2) : s4._$AI(t6[i7])), i7++; + } +}; +var R = class _R { + get _$AU() { + return this._$AM?._$AU ?? this._$Cv; + } + constructor(t6, i7, s4, e6) { + this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t6, this._$AB = i7, this._$AM = s4, this.options = e6, this._$Cv = e6?.isConnected ?? true; + } + get parentNode() { + let t6 = this._$AA.parentNode; + const i7 = this._$AM; + return void 0 !== i7 && 11 === t6?.nodeType && (t6 = i7.parentNode), t6; + } + get startNode() { + return this._$AA; + } + get endNode() { + return this._$AB; + } + _$AI(t6, i7 = this) { + t6 = S2(this, t6, i7), c3(t6) ? t6 === E || null == t6 || "" === t6 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t6 !== this._$AH && t6 !== T && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : u2(t6) ? this.k(t6) : this._(t6); + } + O(t6) { + return this._$AA.parentNode.insertBefore(t6, this._$AB); + } + T(t6) { + this._$AH !== t6 && (this._$AR(), this._$AH = this.O(t6)); + } + _(t6) { + this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(r3.createTextNode(t6)), this._$AH = t6; + } + $(t6) { + const { values: i7, _$litType$: s4 } = t6, e6 = "number" == typeof s4 ? this._$AC(t6) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4); + if (this._$AH?._$AD === e6) this._$AH.p(i7); + else { + const t7 = new M(e6, this), s5 = t7.u(this.options); + t7.p(i7), this.T(s5), this._$AH = t7; + } + } + _$AC(t6) { + let i7 = A.get(t6.strings); + return void 0 === i7 && A.set(t6.strings, i7 = new N(t6)), i7; + } + k(t6) { + a2(this._$AH) || (this._$AH = [], this._$AR()); + const i7 = this._$AH; + let s4, e6 = 0; + for (const h5 of t6) e6 === i7.length ? i7.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i7[e6], s4._$AI(h5), e6++; + e6 < i7.length && (this._$AR(s4 && s4._$AB.nextSibling, e6), i7.length = e6); + } + _$AR(t6 = this._$AA.nextSibling, i7) { + for (this._$AP?.(false, true, i7); t6 && t6 !== this._$AB; ) { + const i8 = t6.nextSibling; + t6.remove(), t6 = i8; + } + } + setConnected(t6) { + void 0 === this._$AM && (this._$Cv = t6, this._$AP?.(t6)); + } +}; +var k = class { + get tagName() { + return this.element.tagName; + } + get _$AU() { + return this._$AM._$AU; + } + constructor(t6, i7, s4, e6, h5) { + this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t6, this.name = i7, this._$AM = e6, this.options = h5, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E; + } + _$AI(t6, i7 = this, s4, e6) { + const h5 = this.strings; + let o8 = false; + if (void 0 === h5) t6 = S2(this, t6, i7, 0), o8 = !c3(t6) || t6 !== this._$AH && t6 !== T, o8 && (this._$AH = t6); + else { + const e7 = t6; + let n8, r7; + for (t6 = h5[0], n8 = 0; n8 < h5.length - 1; n8++) r7 = S2(this, e7[s4 + n8], i7, n8), r7 === T && (r7 = this._$AH[n8]), o8 ||= !c3(r7) || r7 !== this._$AH[n8], r7 === E ? t6 = E : t6 !== E && (t6 += (r7 ?? "") + h5[n8 + 1]), this._$AH[n8] = r7; + } + o8 && !e6 && this.j(t6); + } + j(t6) { + t6 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? ""); + } +}; +var H = class extends k { + constructor() { + super(...arguments), this.type = 3; + } + j(t6) { + this.element[this.name] = t6 === E ? void 0 : t6; + } +}; +var I = class extends k { + constructor() { + super(...arguments), this.type = 4; + } + j(t6) { + this.element.toggleAttribute(this.name, !!t6 && t6 !== E); + } +}; +var L = class extends k { + constructor(t6, i7, s4, e6, h5) { + super(t6, i7, s4, e6, h5), this.type = 5; + } + _$AI(t6, i7 = this) { + if ((t6 = S2(this, t6, i7, 0) ?? E) === T) return; + const s4 = this._$AH, e6 = t6 === E && s4 !== E || t6.capture !== s4.capture || t6.once !== s4.once || t6.passive !== s4.passive, h5 = t6 !== E && (s4 === E || e6); + e6 && this.element.removeEventListener(this.name, this, s4), h5 && this.element.addEventListener(this.name, this, t6), this._$AH = t6; + } + handleEvent(t6) { + "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t6) : this._$AH.handleEvent(t6); + } +}; +var z = class { + constructor(t6, i7, s4) { + this.element = t6, this.type = 6, this._$AN = void 0, this._$AM = i7, this.options = s4; + } + get _$AU() { + return this._$AM._$AU; + } + _$AI(t6) { + S2(this, t6); + } +}; +var Z = { M: e3, P: h2, A: o3, C: 1, L: V, R: M, D: u2, V: S2, I: R, H: k, N: I, U: L, B: H, F: z }; +var j = t2.litHtmlPolyfillSupport; +j?.(N, R), (t2.litHtmlVersions ??= []).push("3.2.1"); +var B = (t6, i7, s4) => { + const e6 = s4?.renderBefore ?? i7; + let h5 = e6._$litPart$; + if (void 0 === h5) { + const t7 = s4?.renderBefore ?? null; + e6._$litPart$ = h5 = new R(i7.insertBefore(l2(), t7), t7, void 0, s4 ?? {}); + } + return h5._$AI(t6), h5; +}; + +// node_modules/lit-element/lit-element.js +var r4 = class extends b { + constructor() { + super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0; + } + createRenderRoot() { + const t6 = super.createRenderRoot(); + return this.renderOptions.renderBefore ??= t6.firstChild, t6; + } + update(t6) { + const s4 = this.render(); + this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = B(s4, this.renderRoot, this.renderOptions); + } + connectedCallback() { + super.connectedCallback(), this._$Do?.setConnected(true); + } + disconnectedCallback() { + super.disconnectedCallback(), this._$Do?.setConnected(false); + } + render() { + return T; + } +}; +r4._$litElement$ = true, r4["finalized"] = true, globalThis.litElementHydrateSupport?.({ LitElement: r4 }); +var i4 = globalThis.litElementPolyfillSupport; +i4?.({ LitElement: r4 }); +(globalThis.litElementVersions ??= []).push("4.1.1"); + +// node_modules/@lit/reactive-element/decorators/custom-element.js +var t3 = (t6) => (e6, o8) => { + void 0 !== o8 ? o8.addInitializer(() => { + customElements.define(t6, e6); + }) : customElements.define(t6, e6); +}; + +// node_modules/@lit/reactive-element/decorators/property.js +var o4 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f }; +var r5 = (t6 = o4, e6, r7) => { + const { kind: n8, metadata: i7 } = r7; + let s4 = globalThis.litPropertyMetadata.get(i7); + if (void 0 === s4 && globalThis.litPropertyMetadata.set(i7, s4 = /* @__PURE__ */ new Map()), s4.set(r7.name, t6), "accessor" === n8) { + const { name: o8 } = r7; + return { set(r8) { + const n9 = e6.get.call(this); + e6.set.call(this, r8), this.requestUpdate(o8, n9, t6); + }, init(e7) { + return void 0 !== e7 && this.P(o8, void 0, t6), e7; + } }; + } + if ("setter" === n8) { + const { name: o8 } = r7; + return function(r8) { + const n9 = this[o8]; + e6.call(this, r8), this.requestUpdate(o8, n9, t6); + }; + } + throw Error("Unsupported decorator location: " + n8); +}; +function n4(t6) { + return (e6, o8) => "object" == typeof o8 ? r5(t6, e6, o8) : ((t7, e7, o9) => { + const r7 = e7.hasOwnProperty(o9); + return e7.constructor.createProperty(o9, r7 ? { ...t7, wrapped: true } : t7), r7 ? Object.getOwnPropertyDescriptor(e7, o9) : void 0; + })(t6, e6, o8); +} + +// node_modules/lit-html/directive.js +var t4 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }; +var e4 = (t6) => (...e6) => ({ _$litDirective$: t6, values: e6 }); +var i5 = class { + constructor(t6) { + } + get _$AU() { + return this._$AM._$AU; + } + _$AT(t6, e6, i7) { + this._$Ct = t6, this._$AM = e6, this._$Ci = i7; + } + _$AS(t6, e6) { + return this.update(t6, e6); + } + update(t6, e6) { + return this.render(...e6); + } +}; + +// node_modules/lit-html/directives/style-map.js +var n5 = "important"; +var i6 = " !" + n5; +var o5 = e4(class extends i5 { + constructor(t6) { + if (super(t6), t6.type !== t4.ATTRIBUTE || "style" !== t6.name || t6.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute."); + } + render(t6) { + return Object.keys(t6).reduce((e6, r7) => { + const s4 = t6[r7]; + return null == s4 ? e6 : e6 + `${r7 = r7.includes("-") ? r7 : r7.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s4};`; + }, ""); + } + update(e6, [r7]) { + const { style: s4 } = e6.element; + if (void 0 === this.ft) return this.ft = new Set(Object.keys(r7)), this.render(r7); + for (const t6 of this.ft) null == r7[t6] && (this.ft.delete(t6), t6.includes("-") ? s4.removeProperty(t6) : s4[t6] = null); + for (const t6 in r7) { + const e7 = r7[t6]; + if (null != e7) { + this.ft.add(t6); + const r8 = "string" == typeof e7 && e7.endsWith(i6); + t6.includes("-") || r8 ? s4.setProperty(t6, r8 ? e7.slice(0, -11) : e7, r8 ? n5 : "") : s4[t6] = e7; + } + } + return T; + } +}); + +// node_modules/lit-html/directive-helpers.js +var { I: t5 } = Z; +var f3 = (o8) => void 0 === o8.strings; + +// node_modules/lit-html/async-directive.js +var s3 = (i7, t6) => { + const e6 = i7._$AN; + if (void 0 === e6) return false; + for (const i8 of e6) i8._$AO?.(t6, false), s3(i8, t6); + return true; +}; +var o6 = (i7) => { + let t6, e6; + do { + if (void 0 === (t6 = i7._$AM)) break; + e6 = t6._$AN, e6.delete(i7), i7 = t6; + } while (0 === e6?.size); +}; +var r6 = (i7) => { + for (let t6; t6 = i7._$AM; i7 = t6) { + let e6 = t6._$AN; + if (void 0 === e6) t6._$AN = e6 = /* @__PURE__ */ new Set(); + else if (e6.has(i7)) break; + e6.add(i7), c4(t6); + } +}; +function h3(i7) { + void 0 !== this._$AN ? (o6(this), this._$AM = i7, r6(this)) : this._$AM = i7; +} +function n6(i7, t6 = false, e6 = 0) { + const r7 = this._$AH, h5 = this._$AN; + if (void 0 !== h5 && 0 !== h5.size) if (t6) if (Array.isArray(r7)) for (let i8 = e6; i8 < r7.length; i8++) s3(r7[i8], false), o6(r7[i8]); + else null != r7 && (s3(r7, false), o6(r7)); + else s3(this, i7); +} +var c4 = (i7) => { + i7.type == t4.CHILD && (i7._$AP ??= n6, i7._$AQ ??= h3); +}; +var f4 = class extends i5 { + constructor() { + super(...arguments), this._$AN = void 0; + } + _$AT(i7, t6, e6) { + super._$AT(i7, t6, e6), r6(this), this.isConnected = i7._$AU; + } + _$AO(i7, t6 = true) { + i7 !== this.isConnected && (this.isConnected = i7, i7 ? this.reconnected?.() : this.disconnected?.()), t6 && (s3(this, i7), o6(this)); + } + setValue(t6) { + if (f3(this._$Ct)) this._$Ct._$AI(t6, this); + else { + const i7 = [...this._$Ct._$AH]; + i7[this._$Ci] = t6, this._$Ct._$AI(i7, this, 0); + } + } + disconnected() { + } + reconnected() { + } +}; + +// node_modules/lit-html/directives/ref.js +var e5 = () => new h4(); +var h4 = class { +}; +var o7 = /* @__PURE__ */ new WeakMap(); +var n7 = e4(class extends f4 { + render(i7) { + return E; + } + update(i7, [s4]) { + const e6 = s4 !== this.Y; + return e6 && void 0 !== this.Y && this.rt(void 0), (e6 || this.lt !== this.ct) && (this.Y = s4, this.ht = i7.options?.host, this.rt(this.ct = i7.element)), E; + } + rt(t6) { + if (this.isConnected || (t6 = void 0), "function" == typeof this.Y) { + const i7 = this.ht ?? globalThis; + let s4 = o7.get(i7); + void 0 === s4 && (s4 = /* @__PURE__ */ new WeakMap(), o7.set(i7, s4)), void 0 !== s4.get(this.Y) && this.Y.call(this.ht, void 0), s4.set(this.Y, t6), void 0 !== t6 && this.Y.call(this.ht, t6); + } else this.Y.value = t6; + } + get lt() { + return "function" == typeof this.Y ? o7.get(this.ht ?? globalThis)?.get(this.Y) : this.Y?.value; + } + disconnected() { + this.lt === this.ct && this.rt(void 0); + } + reconnected() { + this.rt(this.ct); + } +}); + +// src/lit-events.ts +var LitDragStart = class _LitDragStart extends Event { + // container: HTMLElement; + constructor(source) { + super(_LitDragStart.eventName, { bubbles: true, composed: true }); + this.offsetX = 0; + this.offsetY = 0; + this.offsetX = source.translateX; + this.offsetY = source.translateY; + this.node = source.host; + } + static { + this.eventName = "lit-drag-start"; + } +}; +var LitDragging = class _LitDragging extends Event { + // container: HTMLElement; + constructor(source) { + super(_LitDragging.eventName, { bubbles: true, composed: true }); + this.offsetX = 0; + this.offsetY = 0; + this.offsetX = source.translateX; + this.offsetY = source.translateY; + this.node = source.host; + } + static { + this.eventName = "lit-dragging"; + } +}; +var LitDragEnd = class _LitDragEnd extends Event { + // container: HTMLElement; + constructor(source) { + super(_LitDragEnd.eventName, { bubbles: true, composed: true }); + this.offsetX = 0; + this.offsetY = 0; + this.offsetX = source.initialX; + this.offsetY = source.initialY; + this.node = source.host; + } + static { + this.eventName = "lit-drag-end"; + } +}; + +// src/lit-draggable.ts +var defaultOptions = { + preventSelect: true +}; +var LitDraggable = class { + constructor(host, options = defaultOptions) { + this.translateX = 0; + this.translateY = 0; + this.initialX = 0; + this.initialY = 0; + this.handleOffsetX = 0; + this.handleOffsetY = 0; + this.dragging = false; + this.pointers = /* @__PURE__ */ new Set(); + (this.host = host).addController(this); + this.options = options; + this.dragStart = this.dragStart.bind(this); + this.drag = this.drag.bind(this); + this.dragEnd = this.dragEnd.bind(this); + } + // TODO: Make this work with a handle, which will be a `ref` object. + hostConnected() { + console.log(this.host); + this.host.addEventListener("pointerdown", this.dragStart); + } + hostDisconnected() { + this.host.removeEventListener("pointerdown", this.dragStart); + } + dragStart(ev) { + if (ev.button === 2) { + return; + } + document.addEventListener("pointerup", this.dragEnd); + document.addEventListener("pointermove", this.drag); + const event_target = ev.composedPath()[0]; + if (!(event_target === this.host || this.host.shadowRoot?.contains(event_target))) { + console.log("HUH?"); + return; + } + this.pointers.add(ev.pointerId); + this.dragging = true; + if (this.options.preventSelect) { + this.currentSelect = document.body.style.userSelect; + document.body.style.userSelect = "none"; + } + const hostRect = this.host.getBoundingClientRect(); + this.initialX = ev.clientX; + this.initialY = ev.clientY; + this.handleOffsetX = this.initialX - hostRect.left; + this.handleOffsetY = this.initialY - hostRect.top; + this.host.dataset.litDrag = "true"; + this.host.dispatchEvent(new LitDragStart(this)); + } + drag(ev) { + if (!this.dragging || !this.pointers.has(ev.pointerId)) { + return; + } + this.host.dataset.litDragging = "true"; + ev.preventDefault(); + this.translateX = ev.clientX - this.initialX; + this.translateY = ev.clientY - this.initialY; + this.host.dispatchEvent(new LitDragging(this)); + this.host.style.setProperty("transform", `translate3d(${+this.translateX}px, ${+this.translateY}px, 0)`); + } + dragEnd(ev) { + document.removeEventListener("pointerup", this.dragEnd); + document.removeEventListener("pointermove", this.drag); + if (!this.dragging || !this.pointers.has(ev.pointerId)) { + return; + } + this.pointers.delete(ev.pointerId); + this.dragging = false; + delete this.host.dataset.litDrag; + delete this.host.dataset.litDragging; + if (this.currentSelect) { + document.body.style.userSelect = this.currentSelect; + this.currentSelect = void 0; + } + this.initialX = ev.clientX - this.handleOffsetX; + this.initialY = ev.clientY - this.handleOffsetY; + this.host.dispatchEvent(new LitDragEnd(this)); + this.host.style.removeProperty("transform"); + } +}; + +// src/fridge-tile.ts +var FridgeTile = class extends r4 { + constructor() { + super(); + this.word = ""; + this.transform = { + rotate: Math.random() * 30 - 15, + scale: 1 + }; + this.handle = e5(); + this.dragHandle = new LitDraggable(this); + this.onDragEnd = this.onDragEnd.bind(this); + this.onDragStart = this.onDragStart.bind(this); + this.addEventListener(LitDragEnd.eventName, this.onDragEnd); + this.addEventListener(LitDragStart.eventName, this.onDragStart); + } + static get styles() { + return i` + :host { + display: block; + position: absolute; + } + + :host([data-dragging="idle"]) { + cursor: grab; + } + + :host([data-dragging="dragging"]) { + cursor: grabbing; + } + + .word { + font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; + box-shadow: 0 0 0.375rem 0.125rem #aaa; + text-align: center; + user-select: none; + cursor: pointer; + color: #444; + font-size: 0.9375rem; + padding: 0.1875rem 0.25rem 0.25rem 0.25rem; + position: relative; + background: white; + z-index: 100; + transition-property: transform; + transition-duration: 200ms; + transition-timing-function: ease-in-out; //other options are ease + } + + .word.dragging { + font-size: 1.1875rem; + } + `; + } + onDragEnd(ev) { + this.transform = { scale: 1, rotate: Math.random() * 30 - 15 }; + this.handle.value.style.setProperty( + "transform", + `scale(${+this.transform.scale}) rotate(${+this.transform.rotate}deg)` + ); + this.style.setProperty("top", `${+ev.offsetY}px`); + this.style.setProperty("left", `${+ev.offsetX}px`); + } + onDragStart(_ev) { + this.transform = { scale: 1.3, rotate: Math.random() * 30 - 15 }; + this.handle.value.style.setProperty( + "transform", + `scale(${+this.transform.scale}) rotate(${+this.transform.rotate}deg)` + ); + } + render() { + const styles = { + width: `${this.word.length}ch`, + transform: `rotate(${this.transform.rotate}deg)` + }; + return x`
(\n prop: P,\n _obj: unknown\n): P => prop;\n\n/**\n * Converts property values to and from attribute values.\n */\nexport interface ComplexAttributeConverter