const smCheckbox=document.createElement("template");smCheckbox.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: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color);\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<label class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
const smCopy=document.createElement("template");smCopy.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: -webkit-box;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n}\n.copy{\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius, 0.3rem);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
const smForm=document.createElement("template");smForm.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        display: flex;\n        width: 100%;\n    }\n    form{\n        display: grid;\n        gap: var(--gap, 1.5rem);\n        width: 100%;\n    }\n    </style>\n\t<form part="form" onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\n',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this._checkValidity=this._checkValidity.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this),this.elementsChanged=this.elementsChanged.bind(this)}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{t.apply(null,s)},e)}}_checkValidity(){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&"SM-TEXTAREA"!==t.target.tagName&&(this.allRequiredValid?(this.submitButton&&"SM-BUTTON"===this.submitButton.tagName&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))):this.requiredElements.find(t=>!t.isValid).vibrate())}reset(){this.formElements.forEach(t=>t.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});
const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\n}\n:host{\n    display: flex;\n    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color, (17,17,17)), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding, 0.6rem 0.8rem);\n    border-radius: var(--border-radius);\n    transition: opacity 0.3s, box-shadow 0.2s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    font-size: inherit;\n    opacity: .7;\n    font-weight: 400;\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: flex;\n    position: relative;\n            align-items: center;\n            flex: 1;\n}    \ninput{\n    font-size: inherit;\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color, (17,17,17)), 1);\n    width: 100%;\n}\n:host([animate]) .input:focus-within .container input,\n.animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n    :host([animate]) .input:focus-within .label,\n    .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color,teal)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n    background: rgba(var(--background-color, (255,255,255)), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color,teal)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 0;\n    color: rgba(var(--text-color, (17,17,17)), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color, (17,17,17)), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                        ${this._errorText}\n                        `),t&&e}}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
const fileInput=document.createElement("template");fileInput.innerHTML='\n  \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n            display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weight);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n            margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n            gap: 0.5rem;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n        .file-size{\n            font-size: 0.8rem;\n            font-weight: 400;\n            color: rgba(var(--text-color), 0.8);\n        }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n  \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n  \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWrapper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n            <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});