const colorGrid=document.createElement("template");colorGrid.innerHTML='\n<style>\n    *{\n        padding:0;\n        margin:0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }\n    :host{\n        display: flex;\n    }\n    .color-tile-container{\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n    }\n    .color-tile{\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        height: 2.5rem;\n        width: 2.5rem;\n        border-radius: 0.3rem;\n        align-items: center;\n        justify-content: center;\n    }\n    .color-tile input[type="radio"]{\n        display: none;\n    }\n    .checkmark{\n        display: flex;\n        position: absolute;\n        top: 0;\n        right: 0;\n        align-items: center;\n        justify-content: center;\n        padding: 0.3rem;\n        border-radius: 0.3rem;\n        background-color: rgba(var(--background-color, (255,255,255)), 0.8);\n        animation: checkmark 0.1s ease;\n    }\n    .icon{\n        height: 1rem;\n        width: 1rem;\n        fill: rgba(var(--text-color, (17,17,17)), 1);\n    }\n    @keyframes checkmark{\n        from{\n            transform: scale(0);\n        }\n        to{\n            transform: scale(1);\n        }\n    }\n\n</style>\n<div class="color-tile-container">\n</div>',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                <input type="radio" name="${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            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>\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)}});