@@ -1178,7 +1178,7 @@
let tempData
async function routeTo(targetPage, options = {}) {
- const { firstLoad, hashChange, smartContractUnavailable = false } = options
+ const { firstLoad, hashChange, smartContractsUnavailable = false } = options
let pageId
let params = {}
let searchParams
@@ -1475,100 +1475,129 @@
}
break
}
- const animOptions = {
- duration: 100,
- fill: 'forwards',
- }
let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
- if (currentActiveElement) {
- if (getRef('main_navbar').classList.contains('hidden')) {
- getRef('main_navbar').classList.remove('hide-away')
- getRef('main_navbar').classList.remove('hidden')
- getRef('main_navbar').animate([
- {
- transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
- opacity: 0,
- },
- {
- transform: `none`,
- opacity: 1,
- },
- ], {
- duration: 100,
- fill: 'forwards',
- easing: 'ease'
- })
- }
- getRef('main_header').classList.remove('hidden')
- const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
- const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
- const isOnTop = previousActiveElementIndex < currentActiveElementIndex
- const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
- let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
- if (!previousIndicator) {
- previousIndicator = currentIndicator.cloneNode(true)
- previousActiveElement = currentActiveElement
- previousActiveElement.append(previousIndicator)
- } else if (currentActiveElementIndex !== previousActiveElementIndex) {
- const indicatorDimensions = previousIndicator.getBoundingClientRect()
- const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
- let moveBy
- if (isMobileView) {
- moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+ if (document.startViewTransition) {
+ document.startViewTransition(() => {
+ if (previousActiveElement) {
+ previousActiveElement.classList.remove('nav-item--active');
+ previousActiveElement.querySelector('.nav-item__indicator')?.remove()
+ }
+ if (currentActiveElement) {
+ if (getRef('main_navbar').classList.contains('hidden')) {
+ getRef('main_navbar').classList.remove('hide-away')
+ getRef('main_navbar').classList.remove('hidden')
+ }
+ getRef('main_header').classList.remove('hidden')
+ currentActiveElement.classList.add('nav-item--active')
+ currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
} else {
- moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
+ if (!getRef('main_navbar').classList.contains('hidden')) {
+ getRef('main_navbar').classList.add('hide-away')
+ getRef('main_navbar').classList.add('hidden')
+ getRef('main_header').classList.add('hidden')
+ }
}
- indicatorObserver.observe(previousIndicator)
- previousIndicator.animate([
- {
- transform: 'none',
- opacity: 1,
- },
- {
- transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
- opacity: 0,
- },
- ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
- previousIndicator.remove()
+ if (pagesData.lastPage !== pageId) {
+ document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+ getRef(pageId).classList.remove('hidden')
+ pagesData.lastPage = pageId
}
- tempData = {
- currentActiveElement,
- currentIndicator,
- isOnTop,
- animOptions,
- moveBy
- }
- }
- previousActiveElement.classList.remove('nav-item--active');
- currentActiveElement.classList.add('nav-item--active')
+ })
} else {
- if (!getRef('main_navbar').classList.contains('hidden')) {
- getRef('main_navbar').classList.add('hide-away')
- getRef('main_navbar').animate([
- {
- transform: `none`,
- opacity: 1,
- },
- {
- transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
- opacity: 0,
- },
- ], {
- duration: 200,
- fill: 'forwards',
- easing: 'ease'
- }).onfinish = () => {
- getRef('main_navbar').classList.add('hidden')
- }
- getRef('main_header').classList.add('hidden')
+ const animOptions = {
+ duration: 100,
+ fill: 'forwards',
+ }
+ if (currentActiveElement) {
+ if (getRef('main_navbar').classList.contains('hidden')) {
+ getRef('main_navbar').classList.remove('hide-away')
+ getRef('main_navbar').classList.remove('hidden')
+ getRef('main_navbar').animate([
+ {
+ transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+ opacity: 0,
+ },
+ {
+ transform: `none`,
+ opacity: 1,
+ },
+ ], {
+ duration: 100,
+ fill: 'forwards',
+ easing: 'ease'
+ })
+ }
+ getRef('main_header').classList.remove('hidden')
+ const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
+ const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
+ const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+ const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+ let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+ if (!previousIndicator) {
+ previousIndicator = currentIndicator.cloneNode(true)
+ previousActiveElement = currentActiveElement
+ previousActiveElement.append(previousIndicator)
+ } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+ const indicatorDimensions = previousIndicator.getBoundingClientRect()
+ const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+ let moveBy
+ if (isMobileView) {
+ moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+ } else {
+ moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
+ }
+ indicatorObserver.observe(previousIndicator)
+ previousIndicator.animate([
+ {
+ transform: 'none',
+ opacity: 1,
+ },
+ {
+ transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+ opacity: 0,
+ },
+ ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+ previousIndicator.remove()
+ }
+ tempData = {
+ currentActiveElement,
+ currentIndicator,
+ isOnTop,
+ animOptions,
+ moveBy
+ }
+ }
+ previousActiveElement.classList.remove('nav-item--active');
+ currentActiveElement.classList.add('nav-item--active')
+ } else {
+ if (!getRef('main_navbar').classList.contains('hidden')) {
+ getRef('main_navbar').classList.add('hide-away')
+ getRef('main_navbar').animate([
+ {
+ transform: `none`,
+ opacity: 1,
+ },
+ {
+ transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+ opacity: 0,
+ },
+ ], {
+ duration: 200,
+ fill: 'forwards',
+ easing: 'ease'
+ }).onfinish = () => {
+ getRef('main_navbar').classList.add('hidden')
+ }
+ getRef('main_header').classList.add('hidden')
+ }
+ }
+ if (pagesData.lastPage !== pageId) {
+ document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+ getRef(pageId).classList.remove('hidden')
+ getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
+ pagesData.lastPage = pageId
}
- }
- if (pagesData.lastPage !== pageId) {
- document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
- getRef(pageId).classList.remove('hidden')
- getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
- pagesData.lastPage = pageId
}
document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = floCrypto.validateFloID)
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
diff --git a/scripts/components.js b/scripts/components.js
index 1f1e510..2435669 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -9,5 +9,5 @@ class Stack { constructor() { this.items = [] } push(t) { this.items.push(t) } p
const smSelect = document.createElement("template"); smSelect.innerHTML = '
', customElements.define("sm-select", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSelect.content.cloneNode(!0)), this.focusIn = this.focusIn.bind(this), this.reset = this.reset.bind(this), this.open = this.open.bind(this), this.collapse = this.collapse.bind(this), this.toggle = this.toggle.bind(this), this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this), this.handleOptionSelection = this.handleOptionSelection.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.handleClickOutside = this.handleClickOutside.bind(this), this.selectOption = this.selectOption.bind(this), this.debounce = this.debounce.bind(this), this.elementsChanged = this.elementsChanged.bind(this), this.availableOptions = [], this.previousOption, this.isOpen = !1, this.label = "", this.defaultSelected = "", this.isUnderViewport = !1, this.animationOptions = { duration: 300, fill: "forwards", easing: "ease" }, this.optionList = this.shadowRoot.querySelector(".options"), this.selection = this.shadowRoot.querySelector(".selection"), this.selectedOptionText = this.shadowRoot.querySelector(".selected-option-text") } static get observedAttributes() { return ["disabled", "label", "readonly"] } get value() { return this.getAttribute("value") } set value(t) { const e = this.availableOptions.find(e => e.getAttribute("value") === t); e ? (this.setAttribute("value", t), this.selectOption(e)) : console.warn(`There is no option with ${t} as value`) } debounce(t, e) { let n = null; return (...i) => { window.clearTimeout(n), n = window.setTimeout(() => { t.apply(null, i) }, e) } } reset(t = !0) { if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { const e = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.value = e.getAttribute("value"), t && this.fireEvent() } } selectOption(t) { this.previousOption !== t && (this.querySelectorAll("[selected]").forEach(t => t.removeAttribute("selected")), this.selectedOptionText.textContent = `${this.label}${t.textContent}`, t.setAttribute("selected", ""), this.previousOption = t) } focusIn() { this.selection.focus() } open() { this.availableOptions.forEach(t => t.setAttribute("tabindex", 0)), this.optionList.classList.remove("hidden"), this.isUnderViewport = this.getBoundingClientRect().bottom + this.optionList.getBoundingClientRect().height > window.innerHeight, this.isUnderViewport ? this.setAttribute("isUnder", "") : this.removeAttribute("isUnder"), this.optionList.animate([{ transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }, { transform: "translateY(0)", opacity: 1 }], this.animationOptions), this.setAttribute("open", ""), this.style.zIndex = 1e3, (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), document.addEventListener("mousedown", this.handleClickOutside), this.isOpen = !0 } collapse() { this.removeAttribute("open"), this.optionList.animate([{ transform: "translateY(0)", opacity: 1 }, { transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }], this.animationOptions).onfinish = (() => { this.availableOptions.forEach(t => t.removeAttribute("tabindex")), document.removeEventListener("mousedown", this.handleClickOutside), this.optionList.classList.add("hidden"), this.isOpen = !1, this.style.zIndex = "auto" }) } toggle() { this.isOpen || this.hasAttribute("disabled") ? this.collapse() : this.open() } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.value } })) } handleOptionsNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), document.activeElement.previousElementSibling ? document.activeElement.previousElementSibling.focus() : this.availableOptions[this.availableOptions.length - 1].focus()) : "ArrowDown" === t.key && (t.preventDefault(), document.activeElement.nextElementSibling ? document.activeElement.nextElementSibling.focus() : this.availableOptions[0].focus()) } handleOptionSelection(t) { this.previousOption !== document.activeElement && (this.value = document.activeElement.getAttribute("value"), this.fireEvent()) } handleClick(t) { t.target === this ? this.toggle() : (this.handleOptionSelection(), this.collapse()) } handleKeydown(t) { t.target === this ? this.isOpen && "ArrowDown" === t.key ? (t.preventDefault(), (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), this.handleOptionSelection(t)) : " " === t.key && (t.preventDefault(), this.toggle()) : (this.handleOptionsNavigation(t), this.handleOptionSelection(t), ["Enter", " ", "Escape", "Tab"].includes(t.key) && (t.preventDefault(), this.collapse(), this.focusIn())) } handleClickOutside(t) { this.isOpen && !this.contains(t.target) && this.collapse() } elementsChanged() { this.availableOptions = [...this.querySelectorAll("sm-option")], this.reset(!1), this.defaultSelected = this.value } connectedCallback() { this.setAttribute("role", "listbox"), this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)); const t = this.debounce(this.elementsChanged, 100); this.shadowRoot.querySelector("slot").addEventListener("slotchange", t), this.mutationObserver = new MutationObserver(e => { let n = !1; if (e.forEach(e => { switch (e.type) { case "childList": t(); break; case "attributes": n = !0 } }), n) { const t = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.selectedOptionText.textContent = `${this.label}${t.textContent}`, this.setAttribute("value", t.getAttribute("value")) } }), this.mutationObserver.observe(this, { subtree: !0, childList: !0, attributeFilter: ["selected"] }), new IntersectionObserver((t, e) => { t.forEach(t => { if (t.isIntersecting) { const t = this.selection.getBoundingClientRect().left; t < window.innerWidth / 2 ? this.setAttribute("align-select", "left") : this.setAttribute("align-select", "right") } }) }).observe(this) } disconnectedCallback() { this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown) } attributeChangedCallback(t) { "disabled" === t || "readonly" === t ? this.hasAttribute("disabled") || this.hasAttribute("readonly") ? (this.selection.removeAttribute("tabindex"), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown)) : (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)) : "label" === t && (this.label = this.hasAttribute("label") ? `${this.getAttribute("label")} ` : "") } }); const smOption = document.createElement("template"); smOption.innerHTML = '
', customElements.define("sm-option", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smOption.content.cloneNode(!0)) } connectedCallback() { this.setAttribute("role", "option") } });
const spinner = document.createElement("template"); spinner.innerHTML = '
'; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
const smTextarea = document.createElement("template"); smTextarea.innerHTML = '
', customElements.define("sm-textarea", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smTextarea.content.cloneNode(!0)), this.textarea = this.shadowRoot.querySelector("textarea"), this.textareaBox = this.shadowRoot.querySelector(".textarea"), this.placeholder = this.shadowRoot.querySelector(".placeholder"), this.reflectedAttributes = ["disabled", "required", "readonly", "rows", "minlength", "maxlength"], this.reset = this.reset.bind(this), this.focusIn = this.focusIn.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this) } static get observedAttributes() { return ["disabled", "value", "placeholder", "required", "readonly", "rows", "minlength", "maxlength"] } get value() { return this.textarea.value } set value(e) { this.setAttribute("value", e), this.fireEvent() } get disabled() { return this.hasAttribute("disabled") } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get isValid() { return this.textarea.checkValidity() } reset() { this.setAttribute("value", "") } focusIn() { this.textarea.focus() } fireEvent() { let e = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(e) } checkInput() { this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder") && ("" !== this.textarea.value ? this.placeholder.classList.add("hide") : this.placeholder.classList.remove("hide")) } connectedCallback() { this.textarea.addEventListener("input", e => { this.textareaBox.dataset.value = this.textarea.value, this.checkInput() }) } attributeChangedCallback(e, t, n) { this.reflectedAttributes.includes(e) ? this.hasAttribute(e) ? this.textarea.setAttribute(e, this.getAttribute(e) ? this.getAttribute(e) : "") : this.textContent.removeAttribute(e) : "placeholder" === e ? this.placeholder.textContent = this.getAttribute("placeholder") : "value" === e && (this.textarea.value = n, this.textareaBox.dataset.value = n, this.checkInput()) } });
-const themeToggle = document.createElement("template"); themeToggle.innerHTML = '
'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = '
'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { if (!document.startViewTransition) return this.toggleAttribute("checked"), void this.fireEvent(); document.startViewTransition(() => { this.toggleAttribute("checked"), this.fireEvent() }) } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
const colorGrid = document.createElement("template"); colorGrid.innerHTML = '\n\n
\n
', customElements.define("color-grid", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(colorGrid.content.cloneNode(!0)), this.colorArray = [], this.container = this.shadowRoot.querySelector(".color-tile-container"), this.handleChange = this.handleChange.bind(this), this.setCheckMark = this.setCheckMark.bind(this) } set colors(e) { this.colorArray = e, this.renderTiles() } set selectedColor(e) { if (this.colorArray.includes(e) && this.container.querySelector(`[data-color="${e}"]`)) { const n = this.container.querySelector(`[data-color="${e}"]`); n && (n.querySelector("input").checked = !0, this.setCheckMark(n)) } } randString(e) { let n = "", t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (let r = 0; r < e; r++)n += t.charAt(Math.floor(Math.random() * t.length)); return n } renderTiles() { this.container.innerHTML = ""; const e = document.createDocumentFragment(), n = this.randString(6); this.colorArray.forEach(t => { const r = document.createElement("label"); r.classList.add("color-tile"), r.setAttribute("data-color", t), t.includes("--") ? r.setAttribute("style", `background-color: var(${t})`) : r.setAttribute("style", `background-color: ${t}`), r.innerHTML = `\n
\n `, e.append(r) }), this.container.append(e) } setCheckMark(e) { e.parentNode.querySelectorAll(".checkmark").forEach(e => e.remove()); const n = document.createElement("div"); n.classList.add("checkmark"), n.innerHTML = '\n
\n ', e.append(n) } handleChange(e) { const n = e.target.closest(".color-tile"); this.setCheckMark(n); const t = n.dataset.color, r = new CustomEvent("colorselected", { bubbles: !0, composed: !0, detail: { value: t } }); this.dispatchEvent(r) } connectedCallback() { this.container.addEventListener("change", this.handleChange) } disconnectedCallback() { this.container.removeEventListener("change", this.handleChange) } });
\ No newline at end of file