RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fe7d07973f
standard-ui/components/components.min.js
sairaj mote e1a46a20ca components update
2022-01-06 16:06:41 +05:30

4 lines
123 KiB
JavaScript
Raw Blame History

const smButton=document.createElement("template");smButton.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 width: auto;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: inherit; \n color: var(--accent-color);\n}\n:host([disabled]){\n pointer-events: none;\n cursor: not-allowed;\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host([disabled]) .button{\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.6;\n color: rgba(var(--text-color), 1);\n background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover,\n :host(:focus-within:not([disabled])) .button{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']:not([disabled])) .button:hover,\n :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n}\n</style>\n<div part=\"button\" class=\"button\">\n <slot></slot> \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});const smCarousel=document.createElement("template");smCarousel.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: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --arrow-left: 1rem;\n --arrow-right: 1rem;\n --arrow-top: auto;\n --arrow-bottom: auto;\n --nav-icon-fill: rgba(var(--background-color), 1);\n --nav-background-color: rgba(var(--text-color), 1);\n --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n --indicator-top: auto;\n --indicator-bottom: -1.5rem;\n --indicator-height: 0.2rem;\n --indicator-width: 0.4rem;\n --indicator-border-radius: 0.4rem;\n --indicators-gap: 0.5rem;\n --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n cursor: pointer;\n min-width: 0;\n top: var(--arrow-top);\n bottom: var(--arrow-bottom);\n border: none;\n background: var(--nav-background-color);\n -webkit-box-shadow: var(--nav-box-shadow);\n box-shadow: var(--nav-box-shadow); \n -webkit-tap-highlight-color: transparent;\n transition: transform 0.3s, opacity 0.3s;\n z-index: 1;\n border-radius: 3rem;\n padding: 0.5rem;\n}\nbutton:focus{\n outline: none;\n}\nbutton:focus-visible{\n outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n transform: scale(0.9);\n}\n.carousel__button--left{\n left: var(--arrow-left);\n}\n.carousel__button--right{\n right: var(--arrow-right);\n}\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n fill: var(--nav-icon-fill);\n}\n.hide{\n display: none !important;\n}\n:host([indicator]) .carousel-container{\n margin-bottom: 2rem;\n}\n.carousel-container{\n position: relative;\n display: grid;\n width: 100%;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.carousel{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n max-width: 100%;\n width: 100%;\n overflow: auto hidden;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n}\n.indicators{\n display: -ms-grid;\n display: grid;\n grid-auto-flow: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: absolute;\n padding: 0.5rem 0;\n top: var(--indicator-top);\n bottom: var(--indicator-bottom);\n gap: var(--indicators-gap);\n width: 100%;\n}\n.indicator{\n position: relative;\n height: var(--indicator-height);\n width: var(--indicator-width);\n background: rgba(var(--text-color), 0.3);\n border-radius: var(--indicator-border-radius);\n -webkit-transition: 0.2s;\n -o-transition: 0.2s;\n transition: 0.2s;\n cursor: pointer;\n}\n.indicator.active{\n -webkit-transform: scale(1.5);\n -ms-transform: scale(1.5);\n transform: scale(1.5);\n background: var(--active-indicator-color);\n}\nslot::slotted(*){\n scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n scroll-snap-align: end;\n}\n@media (hover: hover){\n .carousel{\n overflow: hidden;\n }\n .carousel__button{\n opacity: 0.8;\n }\n :host(:hover) .carousel__button{\n opacity: 1;\n }\n .left,.right{\n display: none;\n }\n .indicators{\n transition: gap 0.3s;\n }\n .indicators:hover{\n gap: calc(var(--indicators-gap) * 2);\n }\n .indicators:hover .indicator{\n transform: scale(2);\n }\n}\n@media (hover: none){\n ::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n ::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n .carousel{\n overflow: auto none;\n }\n .carousel__button{\n display: none;\n }\n .left,.right{\n display: block;\n }\n}\n</style>\n<div class="carousel-container">\n <button class="carousel__button carousel__button--left hide">\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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n </button>\n <div part="carousel" class="carousel">\n <slot></slot>\n </div>\n <button class="carousel__button carousel__button--right hide">\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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n </button>\n <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let e=document.createElement("div");return e.classList.add("indicator"),e.dataset.rank=t,e}handleIndicatorClick(t){if(t.target.closest(".indicator")){const e=parseInt(t.target.closest(".indicator").dataset.rank);this.activeSlideNum!==e&&this.showSlide(e)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",e=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>n.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),s.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),s.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((e,n)=>{t.append(this.createIndicator(n)),e.dataset.rank=n}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const e={threshold:.9,root:this},n=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const e=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[e].classList.add("active"),this.activeSlideNum=e):this.indicators[e].classList.remove("active")}})},e),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},e),s=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},e),o=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});o.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,e,n){e!==n&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});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(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}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(t){"Space"===t.code&&(t.preventDefault(),this.click())}handleClick(t){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(t,e,n){e!==n&&("checked"===t?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===t&&(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 --button-border-radius: 0.3rem;\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);\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(t){this.setAttribute("value",t)}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(t=>this.fireEvent()).catch(t=>console.error(t))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,e,n){"value"===t&&(this.copyContent.textContent=n)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});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.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],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"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}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.filesPreviewWraper.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.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(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)}});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 n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},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 hamburgerMenu=document.createElement("template");hamburgerMenu.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 width: 100%;\n height: 100%;\n overflow-y: auto;\n scrollbar-width: thin;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0 0 3rem 0;\n --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n position: fixed;\n}\n.side-nav{\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.hide{\n display: none !important;\n}\n@media screen and (max-width: 640px){\n :host{\n position: fixed;\n z-index: 10;\n }\n .side-nav{\n height: 100%;\n overflow-y: auto; \n width: calc(100% - 4rem);\n transition: transform 0.3s;\n background-color: rgba(var(--background-color), 1);\n box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n z-index: 1;\n }\n .side-nav:not(.reveal){\n transform: translateX(-100%);\n }\n .reveal{\n transform: none;\n }\n .backdrop{\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--backdrop-color);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n}\n@media screen and (min-width: 640px){\n .backdrop{\n pointer-events: none;\n }\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n ::-webkit-scrollbar-thumb{\n border-radius: 1rem;\n background: rgba(var(--text-color), 0.3);\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const t=new ResizeObserver(t=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});t.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu)
;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: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --success-color: #00C853;\n --danger-color: red;\n --width: 100%;\n --icon-gap: 0.5rem;\n --border-radius: 0.3rem;\n --padding: 0.7rem 1rem;\n --background: rgba(var(--text-color), 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), 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: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n cursor: text;\n min-width: 0;\n text-align: left;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n gap: var(--icon-gap);\n padding: var(--padding);\n border-radius: var(--border-radius);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\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) 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;\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: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n} \ninput{\n font-size: inherit;\n border: none;\n background: transparent;\n outline: none;\n color: rgba(var(--text-color), 1);\n width: 100%;\n}\n:host(:not([variant="outlined"])) .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(:not([variant="outlined"])) .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)\n}\n:host([variant="outlined"]) .input {\n box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;\n background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n width: max-content;\n margin-left: -0.5rem;\n padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n transform: translate(0.1rem, -1.5rem) scale(0.8);\n opacity: 1;\n background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n color: var(--accent-color)\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), 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), 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.hideRequired=!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.isRequired&&!this.hideRequired&&(this.feedbackText.textContent="*required"))),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.hideRequired?this.feedbackText.textContent="":this.feedbackText.textContent="*required",this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"hiderequired"===t?this.hideRequired=this.hasAttribute("hiderequired"):"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 smMenu=document.createElement("template");smMenu.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\n}\n.menu{\n display: -ms-grid;\n display: grid;\n place-items: center;\n height: 2rem;\n width: 2rem;\n outline: none;\n}\n.icon {\n position: absolute;\n fill: rgba(var(--text-color), 0.7);\n height: 2.4rem;\n width: 2.4rem;\n padding: 0.5rem;\n border-radius: 2rem;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n} \n.select{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n left: 0;\n}\n:host([align-options="right"]) .options{\n right: 0;\n}\n.options{\n top: 100%;\n padding: 0.3rem;\n overflow: hidden auto;\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: -webkit-max-content;\n min-width: -moz-max-content;\n min-width: max-content;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n background: var(--background, rgba(var(--background-color), 1));\n border-radius: var(--border-radius, 0.5rem);\n z-index: 1;\n -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n bottom: auto;\n}\n.hide{\n display: none;\n}\n@media screen and (max-width: 640px){\n .options{\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n border-radius: 0.5rem 0.5rem 0 0;\n }\n}\n@media (hover: hover){\n .menu:hover .icon{\n background: rgba(var(--text-color), 0.1); \n }\n}\n</style>\n<div class="select">\n <div class="menu" tabindex="0">\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 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n </div>\n <div class="options hide">\n <slot></slot> \n </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(t){this.setAttribute("value",t)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(t){t.target===this?"ArrowDown"===t.code?(t.preventDefault(),this.availableOptions[0].focus()):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.toggle()):"ArrowUp"===t.code?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.code?(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),t.target.click())}handleClickOutside(t){this.contains(t.target)||2===t.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const t=this.shadowRoot.querySelector(".options slot");t.addEventListener("slotchange",t=>{this.availableOptions=t.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickOutside)}});const menuOption=document.createElement("template");menuOption.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: -ms-flexbox;\n display: flex;\n}\n.option{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 100%;\n padding: var(--padding, 0.6rem 1rem);\n cursor: pointer;\n overflow-wrap: break-word;\n white-space: nowrap;\n outline: none;\n user-select: none;\n border-radius: 0.3rem;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:focus){\n outline: none;\n background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n .option{\n transition: background-color 0.2s;\n }\n .option:hover{\n background: rgba(var(--text-color), 0.1);\n }\n}\n</style>\n<div class="option">\n <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.click())})}});const smNotifications=document.createElement("template");smNotifications.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: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --icon-height: 1.5rem;\n --icon-width: 1.5rem;\n }\n .hide{\n opacity: 0 !important;\n pointer-events: none !important;\n }\n .notification-panel{\n display: grid;\n width: 100%;\n gap: 0.5rem;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 100;\n max-height: 100%;\n padding: 1rem;\n overflow: hidden auto;\n -ms-scroll-chaining: none;\n overscroll-behavior: contain;\n }\n .notification-panel:empty{\n display:none;\n }\n .notification{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n border-radius: 0.3rem;\n background: rgba(var(--background-color), 1);\n overflow: hidden;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n padding: 1rem;\n align-items: center;\n }\n .icon-container:not(:empty){\n margin-right: 0.5rem;\n height: var(--icon-height);\n width: var(--icon-width);\n }\n h4:first-letter,\n p:first-letter{\n text-transform: uppercase;\n }\n h4{\n font-weight: 400;\n }\n p{\n line-height: 1.6;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n color: rgba(var(--text-color), 0.9);\n overflow-wrap: break-word;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n }\n .notification:last-of-type{\n margin-bottom: 0;\n }\n .icon {\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 0.7);\n }\n .icon--success {\n fill: var(--green);\n }\n .icon--failure,\n .icon--error {\n fill: var(--danger-color);\n }\n .close{\n height: 2rem;\n width: 2rem;\n border: none;\n cursor: pointer;\n margin-left: 1rem;\n border-radius: 50%;\n padding: 0.3rem;\n transition: background-color 0.3s, transform 0.3s;\n background-color: transparent;\n }\n .close:active{\n transform: scale(0.9);\n }\n @media screen and (min-width: 640px){\n .notification-panel{\n max-width: 28rem;\n width: max-content;\n }\n .notification{\n width: auto;\n border: solid 1px rgba(var(--text-color), 0.2);\n }\n }\n @media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n .close:hover{\n background-color: rgba(var(--text-color), 0.1);\n }\n }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(t){let e="";const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<t;i++)e+=n.charAt(Math.floor(Math.random()*n.length));return e}createNotification(t,e={}){const{pinned:n=!1,icon:i=""}=e,s=document.createElement("div");s.id=this.randString(8),s.classList.add("notification");let o="";return o+=`\n <div class="icon-container">${i}</div>\n <p>${t}</p>\n `,n&&(s.classList.add("pinned"),o+='\n <button class="close">\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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n </button>\n '),s.innerHTML=o,s}push(t,e={}){const n=this.createNotification(t,e);return this.notificationPanel.append(n),n.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),n.id}removeNotification(t){t.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(t=>{this.removeNotification(t)})}connectedCallback(){this.notificationPanel.addEventListener("click",t=>{t.target.closest(".close")&&this.removeNotification(t.target.closest(".notification"))});const t=new MutationObserver(t=>{t.forEach(t=>{"childList"===t.type&&t.addedNodes.length&&!t.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(t.addedNodes[0])},5e3)})});t.observe(this.notificationPanel,{childList:!0})}});class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.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 position: fixed;\n display: -ms-grid;\n display: grid;\n z-index: 10;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --width: 100%;\n --height: auto;\n --min-width: auto;\n --min-height: auto;\n --backdrop-background: rgba(0, 0, 0, 0.6);\n --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n display: -ms-grid;\n display: grid;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n place-items: center;\n z-index: 10;\n touch-action: none;\n}\n:host(.stacked) .popup{\n -webkit-transform: scale(0.9) translateY(-2rem) !important;\n transform: scale(0.9) translateY(-2rem) !important;\n}\n.background{\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n background: var(--backdrop-background);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n}\n.popup{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n position: relative;\n -ms-flex-item-align: end;\n align-self: flex-end;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n width: var(--width);\n min-width: var(--min-width);\n height: var(--height);\n min-height: var(--min-height);\n max-height: 90vh;\n border-radius: var(--border-radius);\n background: rgba(var(--background-color), 1);\n -webkit-box-shadow: 0 -1rem 2rem #00000020;\n box-shadow: 0 -1rem 2rem #00000020;\n}\n.container-header{\n display: -webkit-box;\n display: flex;\n width: 100%;\n touch-action: none;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.popup-top{\n display: -webkit-box;\n display: flex;\n width: 100%;\n}\n.popup-body{\n display: -webkit-box;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n padding: var(--body-padding, 1.5rem);\n overflow-y: auto;\n}\n.hide{\n display:none;\n}\n@media screen and (min-width: 640px){\n :host{\n --border-radius: 0.5rem;\n }\n .popup{\n -ms-flex-item-align: center;\n -ms-grid-row-align: center;\n align-self: center;\n border-radius: var(--border-radius);\n height: var(--height);\n -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n box-shadow: 0 3rem 2rem -0.5rem #00000040;\n }\n}\n@media screen and (max-width: 640px){\n .popup-top{\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n }\n .handle{\n height: 0.3rem;\n width: 2rem;\n background: rgba(var(--text-color), .4);\n border-radius: 1rem;\n margin: 0.5rem 0;\n }\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<div class="popup-container hide" role="dialog">\n <div part="background" class="background"></div>\n <div part="popup" class="popup">\n <div part="popup-header" class="popup-top">\n <div class="handle"></div>\n <slot name="header"></slot>\n </div>\n <div part="popup-body" class="popup-body">\n <slot></slot>\n </div>\n </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.pinned=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".background"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="auto",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.popup,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(!this.isOpen){const t={duration:300,easing:"ease"};popupStack&&(popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:"translateY(-1.5rem) scale(0.9)"}],t)),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],t),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this}})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const n=this.autoFocus||this.focusable[0];n.tagName.includes("SM-")?n.focusIn():n.focus(),this.hasAttribute("open")||this.setAttribute("open","")}}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.popup,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.popup.style="",this.removeAttribute("open"),void 0!==popupStack?(popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{
transform:"translateY(-1.5rem) scale(0.9)"},{transform:"none"}],t):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1})}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame(()=>{this.popup.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.code){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.setStateOpen():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()}),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.addEventListener("keydown",this.detectFocus),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.detectFocus),resizeObserver.unobserve(),this.mutationObserver.disconnect(),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0})}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});const smRadio=document.createElement("template");smRadio.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 --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --gap: 0.5rem;\n --height: 1.4rem;\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .hide{\n display: none !important;\n }\n .radio{\n display: flex;\n cursor: pointer;\n }\n .radio__button{\n position: relative;\n height: var(--height);\n width: var(--height);\n overflow: visible;\n padding: 0.1rem;\n }\n .outer-disc{\n fill: none;\n stroke-width: 3;\n stroke: rgba(var(--text-color), 0.7);\n }\n .inner-disc{\n fill: var(--accent-color);\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: center;\n }\n :host([checked]) .outer-disc{\n stroke: var(--accent-color);\n }\n :host([checked]) .inner-disc{\n transform: scale(1);\n }\n\n @media (any-hover: hover){\n }\n</style>\n<div class="radio">\n <slot name="left"></slot>\n <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<t;i++)e+=n.charAt(Math.floor(Math.random()*n.length));return e}connectedCallback(){this.uniqueId=this.randString(8),this.options={bubbles:!0,composed:!0,detail:{uid:this.uniqueId,value:this.value}},this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,n){e!==n&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n *{\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\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 }\n label{\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 width: 100%;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n }\n .switch {\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 width: 2.4rem;\n flex-shrink: 0;\n margin-left: auto;\n padding: 0.2rem;\n cursor: pointer;\n border-radius: 2rem;\n }\n \n input {\n display: none;\n }\n \n .track {\n position: absolute;\n left: 0;\n right: 0;\n height: 1.4rem;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n background: rgba(var(--text-color), 0.4);\n -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n border-radius: 1rem;\n }\n \n label:active .thumb::after,\n label:focus-within .thumb::after{\n opacity: 1;\n }\n \n .thumb::after{\n content: \'\';\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n height: 2.6rem;\n width: 2.6rem;\n background: rgba(var(--text-color), 0.2);\n border-radius: 2rem;\n opacity: 0;\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n \n .thumb {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: 1rem;\n width: 1rem;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 1rem;\n -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n box-shadow: 0 0.1rem 0.4rem #00000060;\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;\n border: solid 0.3rem white;\n }\n \n input:checked ~ .thumb {\n -webkit-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n \n input:checked ~ .track {\n background: var(--accent-color);\n }\n</style>\n<label tabindex="0">\n <slot name="left"></slot>\n <div part="switch" class="switch">\n <input type="checkbox">\n <div class="track"></div>\n <div class="thumb"></div>\n </div>\n <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",t=>{"Space"!==t.code||this.isDisabled||(t.preventDefault(),this.input.click())}),this.input.addEventListener("click",t=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(t,e,n){e!==n&&("disabled"===t?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===t&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});const smSelect=document.createElement("template");smSelect.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: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --max-height: auto;\n --min-width: 100%;\n}\n:host([disabled]) .select{\n opacity: 0.6;\n cursor: not-allowed;\n}\n.select{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n.icon {\n height: 1.2rem;\n width: 1.2rem;\n margin-left: 0.5rem;\n fill: rgba(var(--text-color), 0.7);\n} \n.selected-option-text{\n font-size: inherit;\n overflow: hidden;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n}\n.selection{\n border-radius: 0.3rem;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: 1fr auto;\n grid-template-columns: 1fr auto;\n grid-template-areas: \'heading heading\' \'. .\';\n padding: 0.4rem 0.8rem;\n background: rgba(var(--text-color), 0.06);\n border: solid 1px rgba(var(--text-color), 0.2);\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n outline: none;\n z-index: 2;\n}\n.selection:focus{\n -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n box-shadow: 0 0 0 0.1rem var(--accent-color) \n}\n:host([align-select="left"]) .options{\n left: 0;\n}\n:host([align-select="right"]) .options{\n right: 0;\n}\n.options{\n top: 100%;\n padding: var(--options-padding, 0.3rem);\n margin-top: 0.2rem; \n overflow: hidden auto;\n position: absolute;\n grid-area: options;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: var(--min-width);\n max-height: var(--max-height);\n background: rgba(var(--background-color), 1);\n border: solid 1px rgba(var(--text-color), 0.2);\n border-radius: var(--border-radius, 0.5rem);\n z-index: 1;\n -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n}\n.rotate{\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg)\n}\n.hide{\n display: none;\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<div class="select">\n <div class="selection">\n <div class="selected-option-text"></div>\n <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>\n </div>\n <div part="options" class="options hide">\n <slot></slot> \n </div>\n</div>',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.availableOptions,this.previousOption,this.isOpen=!1,this.label="",this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){this.setAttribute("value",t)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions[0];this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption=e,t&&this.fireEvent()}}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}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.code?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.code&&(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.selectedOptionText.textContent=`${this.label}${document.activeElement.textContent}`,this.fireEvent(),this.previousOption&&this.previousOption.classList.remove("check-selected"),document.activeElement.classList.add("check-selected"),this.previousOption=document.activeElement)}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.code?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.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: -ms-flexbox;\n display: flex;\n}\n.option{\n display: grid;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-width: max-content;\n width: 100%;\n gap: 0.5rem;\n grid-template-columns: max-content minmax(0, 1fr);\n padding: var(--padding, 0.6rem 1rem);\n cursor: pointer;\n white-space: nowrap;\n outline: none;\n user-select: none;\n border-radius: var(--border-radius, 0.3rem);\n}\n:host(:focus){\n outline: none;\n background: rgba(var(--text-color), 0.1);\n}\n.icon {\n opacity: 0;\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 0.8);\n}\n:host(:focus) .option .icon{\n opacity: 0.4\n}\n:host(.check-selected) .icon{\n opacity: 1\n}\n@media (hover: hover){\n .option:hover{\n background: rgba(var(--text-color), 0.1);\n }\n :host(:not(.check-selected):hover) .icon{\n opacity: 0.4\n }\n}\n</style>\n<div class="option">\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="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>\n <slot></slot> \n</div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}});const spinner=document.createElement("template");spinner.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 --accent-color: #4d2588;\n --height: 1.6rem;\n --width: 1.6rem;\n}\n.loader {\n height: var(--height);\n width: var(--weight);\n stroke-width: 8;\n overflow: visible;\n stroke: var(--accent-color);\n fill: none;\n stroke-dashoffset: 180;\n stroke-dasharray: 180;\n animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n 50% {\n stroke-dashoffset: 0;\n }\n 100%{\n stroke-dashoffset: -180;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);const stripSelect=document.createElement("template");stripSelect.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 --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n padding: 1rem 0;\n }\n .hide{\n display: none !important;\n }\n input[type="radio"]{\n display: none;\n }\n .scrolling-container{\n position: relative;\n display: flex;\n align-items: center;\n }\n .strip-select{\n position: relative;\n }\n :host([multiline]) .strip-select{\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap, 0.5rem);\n overflow: auto hidden;\n }\n :host(:not([multiline])) .strip-select{\n display: grid;\n grid-auto-flow: column;\n gap: var(--gap, 0.5rem);\n max-width: 100%; \n align-items: center;\n overflow: auto hidden;\n }\n .nav-button{\n display: flex;\n top: 50%;\n z-index: 2;\n border: none;\n padding: 0.3rem;\n cursor: pointer;\n position: absolute;\n align-items: center;\n background: rgba(var(--background-color), 1);\n transform: translateY(-50%);\n }\n .nav-button--right{\n right: 0;\n }\n .cover{\n position: absolute;\n z-index: 1;\n width: 5rem;\n height: 100%;\n pointer-events: none;\n }\n .nav-button--right::before{\n background-color: red;\n }\n .icon{\n height: 1.5rem;\n width: 1.5rem;\n fill: rgba(var(--text-color), .8);\n }\n @media (hover: none){\n ::-webkit-scrollbar {\n height: 0;\n }\n .nav-button{\n display: none;\n }\n .strip-select{\n overflow: auto hidden;\n }\n .cover{\n width: 2rem;\n }\n .cover--left{\n background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent);\n }\n .cover--right{\n right: 0;\n background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1));\n }\n }\n @media (hover: hover){\n ::-webkit-scrollbar-track {\n background-color: transparent !important;\n }\n ::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n .strip-select{\n overflow: hidden;\n }\n .cover--left{\n background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);\n }\n .cover--right{\n right: 0;\n background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);\n }\n }\n</style>\n<section class="scrolling-container">\n <div class="cover cover--left hide"></div>\n <button class="nav-button nav-button--left hide">\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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n </button>\n <section class="strip-select">\n <slot></slot>\n </section>\n <button class="nav-button nav-button--right hide">\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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n </button>\n <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",o=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(a.observe(t.assignedElements()[0]),r.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),s.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),a.disconnect(),r.disconnect()))});const o=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});o.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.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 --background-color: inherit;\n }\n .strip-option{\n display: flex;\n flex-shrink: 0;\n cursor: pointer;\n white-space: nowrap;\n padding: var(--padding, 0.4rem 0.6rem);\n transition: background 0.3s;\n border-radius: var(--border-radius, 2rem);\n -webkit-tap-highlight-color: transparent;\n }\n :host([active]) .strip-option{\n color: var(--active-option-color, inherit);\n background-color: var(--active-background-color, rgba(var(--text-color), 0.06));\n }\n :host(:focus-within){\n outline: none;\n }\n :host(:focus-within) .strip-option{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n }\n :host(:hover:not([active])) .strip-option{\n background-color: rgba(var(--text-color), 0.06);\n }\n</style>\n<label class="strip-option">\n <slot></slot>\n</label>\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});const smTabHeader=document.createElement("template")
;smTabHeader.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: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --gap: 1rem;\n --justify-content: flex-start;\n --tab-indicator-border-radius: 0.3rem;\n }\n .tabs{\n position: relative;\n display: -ms-grid;\n display: grid;\n width: 100%;\n }\n .tab-header{\n display: -ms-grid;\n display: grid;\n grid-auto-flow: column;\n justify-content: var(--justify-content);\n gap: var(--gap);\n position: relative;\n overflow: auto hidden;\n max-width: 100%;\n scrollbar-width: 0;\n }\n .indicator{\n position: absolute;\n left: 0;\n bottom: 0;\n height: 0.15rem;\n border-radius: 1rem 1rem 0 0; \n background: var(--accent-color);\n -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n transition: width 0.3s, -webkit-transform 0.3s;\n -o-transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n pointer-events: none;\n }\n :host([variant="tab"]) .indicator{\n height: 100%;\n border-radius: var(--tab-indicator-border-radius);\n }\n :host([variant="tab"]) .tab-header{\n border-bottom: none; \n }\n .hide-completely{\n display: none;\n }\n :host([variant="tab"]) .tab-header{\n gap: 0.2rem;\n display: -ms-inline-grid;\n display: inline-grid;\n justify-self: flex-start;\n border-radius: 0.3rem;\n }\n :host([variant="tab"]) slot::slotted(.active){\n color: rgba(var(--background-color), 1);\n }\n slot::slotted(.active){\n color: var(--accent-color);\n opacity: 1;\n }\n @media (any-hover: none){\n .tab-header::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n .tab-header::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n } \n @media (any-hover: hover){\n .tab-header{\n overflow: hidden;\n }\n } \n</style>\n<div part="tab-container" class="tabs">\n <div part="tab-header" class="tab-header">\n <slot></slot>\n <div part="indicator" class="indicator"></div>\n </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this),this.moveIndiactor=this.moveIndiactor.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),this.tabHeader.scrollTo({behavior:"smooth",left:t.getBoundingClientRect().left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,e)=>{t.dataset.index=e})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.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 position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n z-index: 1;\n --padding: 0.8rem 1rem;\n }\n .tab{\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n white-space: nowrap;\n padding: var(--padding);\n font-weight: 500;\n word-spacing: 0.1rem;\n text-align: center;\n -webkit-transition: color 0.3s;\n -o-transition: color 0.3s;\n transition: color 0.3s;\n text-transform: capitalize;\n height: 100%;\n }\n @media (hover: hover){\n :host(.active) .tab{\n opacity: 1;\n }\n .tab{\n opacity: 0.7\n }\n .tab:hover{\n opacity: 1\n }\n }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.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 width: 100%;\n}\n.panel-container{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n scroll-snap-type: x mandatory;\n content-visibility: auto;\n}\n::slotted(*){\n min-width: 100%;\n scroll-snap-align: center;\n}\n@media (any-hover: none) {\n .panel-container{\n overflow-x: auto;\n scrollbar-width: none;\n }\n .container {\n overflow-y: scroll;\n }\n ::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n</style>\n<div part="panel-container" class="panel-container">\n <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.allPanels=t.target.assignedElements(),this.allPanels.forEach((t,n)=>{t.dataset.index=n,e.observe(t)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const e=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});const tagsInput=document.createElement("template");tagsInput.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n\t--accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n }\n.hide{\n display: none !important;\n}\n.tags-wrapper{\n position: relative;\n display: flex;\n cursor: text;\n flex-wrap: wrap;\n justify-items: flex-start;\n align-items: center;\n padding: 0.5rem 0.5rem 0 0.5rem;\n border-radius: var(--border-radius);\n background: var(--background);\n }\n .tags-wrapper:focus-within{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n }\n \n .tag {\n cursor: pointer;\n user-select: none;\n align-items: center;\n display: inline-flex;\n border-radius: 0.3rem;\n padding: 0.3rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: rgba(var(--text-color), 0.06);\n }\n \n .icon {\n height: 1.2rem;\n width: 1.2rem;\n margin-left: 0.3rem;\n fill: rgba(var(--text-color), 0.8);\n }\n \n input,\n input:focus {\n outline: none;\n border: none;\n }\n \n input {\n display: inline-flex;\n width: auto;\n color: inherit;\n max-width: inherit;\n font-size: inherit;\n font-family: inherit;\n padding: 0.4rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: transparent;\n }\n .placeholder{\n position: absolute;\n padding: 0 0.5rem;\n top: 50%;\n font-weight: 500;\n transform: translateY(-50%);\n color: rgba(var(--text-color), 0.6);\n }\n </style>\n <div class="tags-wrapper">\n <input type="text" size="3"/>\n <p class="placeholder"></p>\n </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}get isValid(){return this.tags.size}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n <span class="tag-text">${e}</span>\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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n::-moz-focus-inner{\n border: none;\n}\n.hide{\n opacity: 0 !important;\n}\n:host{\n display: grid;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.06);\n --padding: initial;\n --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n background: rgba(var(--background-color), 1);\n}\n.textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n padding: 0.7rem 1rem;\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n overflow: hidden;\n}\n.textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n}\n.readonly{\n pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n position: absolute;\n margin: 0.7rem 1rem;\n opacity: .7;\n font-weight: inherit;\n font-size: inherit;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n}\n:host([disabled]) .textarea{\n cursor: not-allowed;\n opacity: 0.6;\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n</label>\n',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(t){this.setAttribute("value",t),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}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",t=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(t,e,n){this.reflectedAttributes.includes(t)?this.hasAttribute(t)?this.textarea.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.textContent.removeAttribute(t):"placeholder"===t?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===t&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});const textField=document.createElement("template");textField.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n }\n .text-field{\n display: flex;\n align-items: center;\n }\n .text{\n transition: background-color 0.3s;\n border-bottom: 0.15rem solid transparent;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n .text:focus{\n outline: none;\n border-bottom: 0.15rem solid var(--accent-color);\n }\n .text:focus-visible{\n outline: none;\n background: solid rgba(var(--text-color), 0.06);\n }\n .editable{\n border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n }\n .edit-button{\n display: grid;\n position: relative;\n margin-left: 0.5rem;\n background-color: transparent;\n border: none;\n }\n :host([disabled]) .edit-button{\n display: none;\n }\n .icon{\n grid-area: 1/-1;\n cursor: pointer;\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 1);\n }\n .hide{\n visibility: hidden;\n }\n</style>\n<div class="text-field">\n <div class="text" part="text"></div>\n <button class="edit-button">\n <svg class="icon" title="edit" 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="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>\n <svg class="icon hide" title="Save" 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 </button>\n</div>\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.toggleEditable=this.toggleEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled","value"]}get value(){return this.text}set value(t){this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.children[0].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[0].classList.add("hide")}),setTimeout(()=>{this.editButton.children[1].classList.remove("hide"),this.editButton.children[1].animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){if(!this.isTextEditable)return;this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable");const t=this.textContainer.textContent.trim();this.text!==t&&""!==t?(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)):this.value=this.text,this.editButton.children[1].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[1].classList.add("hide")}),setTimeout(()=>{this.editButton.children[0].classList.remove("hide"),this.editButton.children[0].animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1}toggleEditable(){this.isTextEditable?this.setNonEditable():this.setEditable()}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disabled")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(t,e,n){"disabled"===t?this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)):"value"===t&&(this.text=n,this.textContainer.textContent=n)}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}});const themeToggle=document.createElement("template");themeToggle.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n cursor: pointer;\n --height: 2.5rem;\n --width: 2.5rem;\n }\n .theme-toggle {\n display: flex;\n position: relative;\n width: 1.4rem;\n height: 1.4rem;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n .theme-toggle::after{\n content: \'\';\n position: absolute;\n height: var(--height);\n width: var(--width);\n top: 50%;\n left: 50%;\n opacity: 0;\n border-radius: 50%;\n pointer-events: none;\n transition: transform 0.3s, opacity 0.3s;\n transform: translate(-50%, -50%) scale(1.2);\n background-color: rgba(var(--text-color), 0.12);\n }\n :host(:focus-within) .theme-toggle{\n outline: none;\n }\n :host(:focus-within) .theme-toggle::after{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n .icon {\n position: absolute;\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 1);\n transition: transform 0.3s, opacity 0.1s;\n }\n \n .theme-switcher__checkbox {\n display: none;\n }\n :host([checked]) .moon-icon {\n transform: translateY(50%);\n opacity: 0;\n }\n :host(:not([checked])) .sun-icon {\n transform: translateY(50%);\n opacity: 0;\n }\n </style>\n <label class="theme-toggle" title="Change theme" tabindex="0">\n <slot name="light-mode-icon">\n <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>\n </slot>\n <slot name="dark-mode-icon">\n <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>\n </slot>\n </label>\n';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(t){"Space"===t.code&&this.toggleState()}handleThemeChange(t){t.detail.theme!==this.hasTheme&&("dark"===t.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(t,e,n){"checked"===t&&(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);
Reference in New Issue View Git Blame Copy Permalink