soft-components
Version:
Simple soft flexible set of web components
1 lines • 75.1 kB
JavaScript
import{r as a,h as c,H as s,g as t,c as i}from"./p-27b03407.js";const r=class{constructor(c){a(this,c),this.multiple=!1}componentWillLoad(){this.items=this.el.querySelectorAll(":scope > sc-accordion-item"),this.multiple||(this.activeItem=this.el.querySelector(":scope > sc-accordion-item[active]"),this.activeItem&&this.activeItem.open(),this.closeNonActive())}openHandler(a){a.stopPropagation(),this.multiple||(this.activeItem=a.target,this.closeNonActive())}closeNonActive(){this.items.forEach((a=>{a.isEqualNode(this.activeItem)||a.close()}))}render(){return c(s,null,c("slot",null))}get el(){return t(this)}};r.style=":host{--sc-accordion-animation-duration:var(--sc-animation-duration, 0.2s);--sc-accordion-animation-timing-function:var(\n --sc-animation-timing-function,\n ease-in-out\n );--sc-accordion-item-heading-padding-x:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-heading-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-heading-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-heading-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-padding-x:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-body-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-accordion-item-body-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-accordion-item-body-max-height:100vh;--sc-accordion-item-heading-text-color:var(--sc-text-color, #333333);--sc-accordion-item-heading-bg-color:var(--sc-bg-color, #f1f1f1);--sc-accordion-item-body-bg-color:var(--sc-bg-color, #f1f1f1);--sc-accordion-item-heading-border-bottom:1px solid\n var(--sc-shadow-color, rgba(0, 0, 0, 0.2));--sc-accordion-item-heading-border-bottom:0.0625rem solid\n var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}";const o=(a,c)=>!!a.querySelector(':scope > [slot="'+c+'"'),e=class{constructor(c){a(this,c),this.opened=i(this,"opened",7),this.opening=i(this,"opening",7),this.closed=i(this,"closed",7),this.closing=i(this,"closing",7),this.heading=null,this.headingTag="h3",this.autoHeight=!0,this.active=!1,this.hasHeadingSlot=!0,this.hasArrowSlot=!0}componentWillLoad(){this.hasHeadingSlot=o(this.el,"heading"),this.hasArrowSlot=o(this.el,"arrow")}componentDidLoad(){this.autoHeight&&this.bodyEl.style.setProperty("--sc-accordion-item-body-max-height",this.bodyEl.scrollHeight+2+"px"),this.onTransitionEnd(),this.bodyEl.addEventListener("transitionstart",(()=>{this.onTransitionStart()})),this.bodyEl.addEventListener("transitionend",(()=>{this.onTransitionEnd()}))}onTransitionEnd(){this.active?(this.bodyEl.style.overflow="auto",this.opened.emit()):(this.bodyEl.style.overflow="hidden",this.bodyEl.style.visibility="hidden",this.closed.emit())}onTransitionStart(){this.active?(this.bodyEl.style.visibility="visible",this.opening.emit()):this.closing.emit()}async toggle(){this.active?this.close():this.open()}async close(){this.active=!1}async open(){this.active=!0}render(){const{active:a,autoHeight:t,headingTag:i}=this;return c(s,{class:{active:a,autoHeight:t}},c("button",{class:"heading",role:"button",onClick:()=>this.toggle()},this.hasHeadingSlot?c("slot",{name:"heading"}):c(i,{class:"heading-text"},this.heading),c("span",{class:"arrow"},this.hasArrowSlot?c("slot",{name:"arrow"}):c("svg",{focusable:"false",viewBox:"0 0 24 24","aria-hidden":"true"},c("path",{d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})))),c("div",{class:"body-container",ref:a=>this.bodyEl=a},c("div",{class:"body"},c("slot",null))))}get el(){return t(this)}};e.style=":host{display:block}:host .heading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-radius:var(--sc-border-radius, 1em);border:none;text-align:left;padding:var(--sc-accordion-item-heading-padding-y) var(--sc-accordion-item-heading-padding-x);cursor:pointer;-webkit-transition:border-radius var(--sc-accordion-animation-duration) ease var(--sc-accordion-animation-duration);transition:border-radius var(--sc-accordion-animation-duration) ease var(--sc-accordion-animation-duration);background:var(--sc-accordion-item-heading-bg-color)}:host .heading .heading-text{color:var(--sc-accordion-item-heading-text-color);margin:0;-ms-flex:1;flex:1}:host .heading .arrow{color:var(--sc-text-color);-webkit-transition:-webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:-webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function), -webkit-transform var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function)}:host .heading .arrow svg{width:calc(var(--sc-root-spacing, 8px) * 4);width:calc(var(--sc-root-spacing, 0.5rem) * 4);height:calc(var(--sc-root-spacing, 8px) * 4);height:calc(var(--sc-root-spacing, 0.5rem) * 4)}:host .heading .arrow svg path{fill:currentColor}:host .body-container{overflow:hidden;max-height:0;-webkit-transition:max-height var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);transition:max-height var(--sc-accordion-animation-duration) var(--sc-accordion-animation-timing-function);background:var(--sc-accordion-item-body-bg-color)}:host .body-container .body{border-radius:var(--sc-border-radius, 1em);-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;padding:var(--sc-accordion-item-body-padding-y) var(--sc-accordion-item-body-padding-x)}:host(.autoHeight) .body-container{overflow:hidden}:host(.active) .heading{border-bottom-left-radius:0;border-bottom-right-radius:0;-webkit-transition:border-radius 0s ease;transition:border-radius 0s ease;border-bottom:var(--sc-accordion-item-heading-border-bottom)}:host(.active) .heading .arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.active) .body-container{max-height:var(--sc-accordion-item-body-max-height)}";const h=class{constructor(c){a(this,c),this.focusEvent=i(this,"focusEvent",7),this.blurEvent=i(this,"blurEvent",7),this.clickEvent=i(this,"clickEvent",7),this.disabled=!1,this.block=!1,this.icon=!1,this.bordered=!1,this.type="button",this.iconText=!1,this.active=!1,this.flat=!1,this.circle=!1,this.rayTracing=!1,this.onFocus=()=>{this.focusEvent.emit()},this.onBlur=()=>{this.blurEvent.emit()},this.onClick=()=>{this.clickEvent.emit()}}render(){const{type:a,disabled:t,rel:i,target:r,href:o,icon:e,block:h,bordered:l,iconText:d,flat:n,circle:g}=this,v=void 0===o?"button":"a",b="button"===v?{type:a}:{download:this.download,href:o,rel:i,target:r};return c(s,{"aria-disabled":t?"true":null,role:"button",class:{icon:e,block:h,bordered:l,"icon-text":d,flat:n,circle:g,disabled:t}},this.rayTracing&&c("sc-ray-tracer",{element:this.el}),c(v,Object.assign({},b,{disabled:t,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick}),c("span",{class:"button-inner"},c("slot",{name:"start"}),c("slot",null),c("slot",{name:"end"}))))}get el(){return t(this)}};h.style='sc-button{--sc-button-bg-color:var(--sc-bg-color, #f6f6f8);--sc-button-text-color:var(--sc-text-color, #333333);--sc-button-border-radius:var(--sc-border-radius, 1em);--sc-button-padding-y:calc(var(--sc-root-spacing, 8px) * 2);--sc-button-padding-y:calc(var(--sc-root-spacing, 0.5rem) * 2);--sc-button-padding-x:calc(var(--sc-root-spacing, 8px) * 4);--sc-button-padding-x:calc(var(--sc-root-spacing, 0.5rem) * 4);--sc-button-icon-size:calc(var(--sc-root-spacing, 8px) * 6);--sc-button-icon-size:calc(var(--sc-root-spacing, 0.5rem) * 6);--sc-button-circle-size:calc(var(--sc-root-spacing, 8px) * 6);--sc-button-circle-size:calc(var(--sc-root-spacing, 0.5rem) * 6);--sc-button-bordered-border-radius:var(--sc-button-border-radius);--sc-button-bordered-border-width:2px;--sc-button-bordered-border-width:0.125rem;--sc-button-text-hover-color:var(--sc-secondary-color, #646695);--sc-button-text-active-color:var(--sc-active-color, #c586c0);--sc-button-width:auto;--sc-button-edge-width:4px;--sc-button-edge-width:0.25rem;--sc-button-vertical-align:top;display:inline-block;vertical-align:var(--sc-button-vertical-align)}sc-button[type]{-webkit-appearance:none}sc-button *{-webkit-box-sizing:border-box;box-sizing:border-box}sc-button:not(.flat) a,sc-button:not(.flat) button{-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button a,sc-button button{cursor:pointer;border:none;text-decoration:none;display:block;background-color:var(--sc-button-bg-color);color:var(--sc-button-text-color);border-radius:var(--sc-button-border-radius);position:relative;padding:var(--sc-button-edge-width);font-size:1em;font-family:inherit;width:var(--sc-button-width)}sc-button a .button-inner,sc-button button .button-inner{overflow:hidden;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;display:block;padding:var(--sc-button-padding-y) var(--sc-button-padding-x);border-radius:calc(var(--sc-button-border-radius) - 4px);border-radius:calc(var(--sc-button-border-radius) - 0.25rem);width:var(--sc-button-width)}sc-button a:hover,sc-button a:focus,sc-button button:hover,sc-button button:focus{color:var(--sc-button-text-hover-color)}sc-button a:hover .button-inner,sc-button a:focus .button-inner,sc-button button:hover .button-inner,sc-button button:focus .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button a:active .button-inner,sc-button button:active .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button.block{display:block}sc-button.block a,sc-button.block button{width:100%}sc-button.block a .button-inner,sc-button.block button .button-inner{width:100%;text-align:center;-ms-flex-pack:center;justify-content:center}sc-button.icon a,sc-button.icon button{width:var(--sc-button-icon-size);height:var(--sc-button-icon-size);padding:var(--sc-button-edge-width);font-size:calc(var(--sc-button-icon-size) * 0.4)}sc-button.icon a .button-inner,sc-button.icon button .button-inner{padding:0;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}sc-button.icon-text .button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}sc-button.bordered a,sc-button.bordered button{position:relative;padding:calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) )}sc-button.bordered a::before,sc-button.bordered button::before{content:"";position:absolute;top:calc(var(--sc-button-edge-width) - 1px);top:calc(var(--sc-button-edge-width) - 0.0625rem);left:calc(var(--sc-button-edge-width) - 1px);left:calc(var(--sc-button-edge-width) - 0.0625rem);bottom:calc(var(--sc-button-edge-width) - 1px);bottom:calc(var(--sc-button-edge-width) - 0.0625rem);right:calc(var(--sc-button-edge-width) - 1px);right:calc(var(--sc-button-edge-width) - 0.0625rem);border-radius:var(--sc-button-bordered-border-radius);background-image:-webkit-gradient(linear, left top, right bottom, color-stop(-10%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))), color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)))), -webkit-gradient(linear, left top, right bottom, color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2))), color-stop(70%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))));background-image:linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%)}sc-button.bordered a .button-inner,sc-button.bordered button .button-inner{position:relative;background-color:var(--sc-button-bg-color);border-radius:calc(var(--sc-button-bordered-border-radius) - 1px);border-radius:calc(var(--sc-button-bordered-border-radius) - 0.0625rem)}sc-button.bordered.icon a,sc-button.bordered.icon button{--sc-button-bordered-border-radius:50%;line-height:calc( var(--sc-button-icon-size) - (var(--sc-button-edge-width) * 2) - var(--sc-button-bordered-border-width) - var(--sc-button-bordered-border-width) )}sc-button.circle a,sc-button.circle button{width:var(--sc-button-circle-size);height:var(--sc-button-circle-size);border-radius:50%;padding:var(--sc-button-edge-width)}sc-button.circle a::before,sc-button.circle button::before{border-radius:50%}sc-button.circle a .button-inner,sc-button.circle button .button-inner{padding:0;width:100%;height:100%;display:-ms-flexbox;display:flex;border-radius:50%}sc-button.circle.bordered a,sc-button.circle.bordered button{padding:calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) )}sc-button.active a,sc-button.active button{color:var(--sc-button-text-active-color)}sc-button.active a .button-inner,sc-button.active button .button-inner{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}sc-button.disabled a,sc-button.disabled button{-webkit-box-shadow:none;box-shadow:none;color:#999}sc-button.disabled a:hover .button-inner,sc-button.disabled a:focus .button-inner,sc-button.disabled button:hover .button-inner,sc-button.disabled button:focus .button-inner{-webkit-box-shadow:none;box-shadow:none}';const l=class{constructor(c){a(this,c),this.engraved=!1,this.bordered=!1,this.mediaPosition=null,this.rayTracing=!1}componentWillLoad(){this.hasCustomTitle=o(this.el,"custom-title"),this.hasOverflowMenu=o(this.el,"overflow-menu"),this.hasMedia=o(this.el,"media-content")}render(){const{engraved:a,bordered:t}=this;return c(s,{class:{engraved:a,bordered:t}},this.rayTracing&&c("sc-ray-tracer",{element:this.el}),this.hasMedia&&c("div",{class:"card-media"},c("slot",{name:"media-content"})),c("div",{class:"card-inner"},c("div",{class:"overflow-menu"},c("slot",{name:"overflow-menu"})),this.hasCustomTitle||this.cardTitle||this.cardSubtitle?c("div",{class:"card-title-container"},this.hasCustomTitle?c("slot",{name:"custom-title"}):c("div",null,this.cardTitle&&c("div",{class:"card-title"},this.cardTitle),this.cardSubtitle&&c("div",{class:"card-subtitle"},this.cardSubtitle))):null,c("div",{class:"card-content"},c("slot",null))))}get el(){return t(this)}};l.style=":host{--sc-card-outer-padding-x:calc(var(--sc-root-spacing) * 4);--sc-card-outer-padding-y:calc(var(--sc-root-spacing) * 4);--sc-card-inner-padding-y:calc(var(--sc-root-spacing) * 2);--sc-card-bg-color:var(--sc-bg-color, #f1f1f1);--sc-card-title-font-size:calc(var(--sc-root-spacing) * 3);--sc-card-title-font-weight:700;--sc-card-title-text-color:var(--sc-text-color, #333333);--sc-card-subtitle-font-size:calc(var(--sc-root-spacing) * 2);--sc-card-subtitle-font-weight:400;--sc-card-subtitle-text-color:var(--sc-text-color, #696969);--sc-card-border-width:2px;--sc-card-border-width:0.125rem;--sc-card-media-width:100%;--sc-card-media-height:calc(var(--sc-root-spacing, 8px) * 20);--sc-card-media-height:calc(var(--sc-root-spacing, 0.5rem) * 20);--sc-card-media-height:calc(var(--sc-root-spacing, 8px) * 20);--sc-card-media-object-position:center;display:block;-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));background:var(--sc-card-bg-color);border-radius:var(--sc-border-radius, 1em);overflow:hidden}:host a{display:block;color:currentColor;text-decoration:none;-webkit-transition:-webkit-box-shadow 0.3s ease;transition:-webkit-box-shadow 0.3s ease;transition:box-shadow 0.3s ease;transition:box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}:host a:hover,:host a:focus{border-radius:var(--sc-border-radius, 1em);-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host .card-inner{border-radius:var(--sc-border-radius, 1em);padding:var(--sc-card-outer-padding-y) var(--sc-card-outer-padding-x);overflow:auto}:host .card-inner .card-title-container{padding-bottom:var(--sc-card-inner-padding-y)}:host .card-inner .card-title-container .card-title{font-size:var(--sc-card-title-font-size);font-weight:var(--sc-card-title-font-weight);color:var(--sc-card-title-text-color);line-height:1.5}:host .card-inner .card-title-container .card-subtitle{font-size:var(--sc-card-subtitle-font-size);font-weight:var(--sc-card-subtitle-font-weight);color:var(--sc-card-subtitle-text-color);line-height:1.5}:host .card-media{overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:40%;flex-basis:40%}:host .card-media ::slotted(*){width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--sc-card-media-object-position);object-position:var(--sc-card-media-object-position)}:host([media-position]){display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host([media-position=top]){-ms-flex-direction:column;flex-direction:column}:host([media-position=top]) .card-inner{border-top-left-radius:0;border-top-right-radius:0}:host([media-position=top]) .card-media{width:100%;height:var(--sc-card-media-height)}:host([media-position=bottom]){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host([media-position=bottom]) .card-inner{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([media-position=bottom]) .card-media{width:100%;height:var(--sc-card-media-height)}:host([media-position=left]){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch}:host([media-position=left]) .card-media{width:var(--sc-card-media-width)}:host([media-position=right]){-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-align:stretch;align-items:stretch}:host([media-position=right]) .card-media{width:var(--sc-card-media-width)}:host(.engraved){-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host(.hoverable):hover{-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2))}:host(.bordered){background-image:-webkit-gradient(linear, left top, right bottom, color-stop(-10%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))), color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)))), -webkit-gradient(linear, left top, right bottom, color-stop(55%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2))), color-stop(70%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2)))));background-image:linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%);padding:var(--sc-card-border-width)}:host(.bordered) .card-inner{background-color:var(--sc-card-bg-color)}:host(.ray-tracing){-webkit-transition:-webkit-box-shadow 0.1s ease;transition:-webkit-box-shadow 0.1s ease;transition:box-shadow 0.1s ease;transition:box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease}";var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n=/^\s+|\s+$/g,g=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,b=/^0o[0-7]+$/i,u=parseInt,w="object"==typeof self&&self&&self.Object===Object&&self,x="object"==typeof d&&d&&d.Object===Object&&d||w||Function("return this")(),p=Object.prototype.toString,m=Math.max,y=Math.min,f=function(){return x.Date.now()};function k(a){var c=typeof a;return!!a&&("object"==c||"function"==c)}function z(a){if("number"==typeof a)return a;if(function(a){return"symbol"==typeof a||function(a){return!!a&&"object"==typeof a}(a)&&"[object Symbol]"==p.call(a)}(a))return NaN;if(k(a)){var c="function"==typeof a.valueOf?a.valueOf():a;a=k(c)?c+"":c}if("string"!=typeof a)return 0===a?a:+a;a=a.replace(n,"");var s=v.test(a);return s||b.test(a)?u(a.slice(2),s?2:8):g.test(a)?NaN:+a}var E=function(a,c,s){var t=!0,i=!0;if("function"!=typeof a)throw new TypeError("Expected a function");return k(s)&&(t="leading"in s?!!s.leading:t,i="trailing"in s?!!s.trailing:i),function(a,c,s){var t,i,r,o,e,h,l=0,d=!1,n=!1,g=!0;if("function"!=typeof a)throw new TypeError("Expected a function");function v(c){var s=t,r=i;return t=i=void 0,l=c,o=a.apply(r,s)}function b(a){return l=a,e=setTimeout(w,c),d?v(a):o}function u(a){var s=a-h;return void 0===h||s>=c||s<0||n&&a-l>=r}function w(){var a=f();if(u(a))return x(a);e=setTimeout(w,function(a){var s=c-(a-h);return n?y(s,r-(a-l)):s}(a))}function x(a){return e=void 0,g&&t?v(a):(t=i=void 0,o)}function p(){var a=f(),s=u(a);if(t=arguments,i=this,h=a,s){if(void 0===e)return b(h);if(n)return e=setTimeout(w,c),v(h)}return void 0===e&&(e=setTimeout(w,c)),o}return c=z(c)||0,k(s)&&(d=!!s.leading,r=(n="maxWait"in s)?m(z(s.maxWait)||0,c):r,g="trailing"in s?!!s.trailing:g),p.cancel=function(){void 0!==e&&clearTimeout(e),l=0,t=h=i=e=void 0},p.flush=function(){return void 0===e?o:x(f())},p}(a,c,{leading:t,maxWait:c,trailing:i})};const j=class{constructor(c){a(this,c),this.inputEvent=i(this,"inputEvent",7),this.changeEvent=i(this,"changeEvent",7),this.blurEvent=i(this,"blurEvent",7),this.focusEvent=i(this,"focusEvent",7),this.keyDownEvent=i(this,"keyDownEvent",7),this.value=50,this.size=80,this.step=1,this.error="",this.focused=!1,this.percent=0,this.rotation=0,this.cycles=0,this.reachedMax=!1,this.reachedMin=!1,this.mouseDirectionX=null,this.mouseDirectionY=null,this.mousePrevX=0,this.mousePrevY=0}async setValue(a){const{min:c,max:s,step:t}=this;return!isNaN(c)&&a<=c?(this.reachedMin=!0,void(this.value=c)):!isNaN(s)&&a>=s?(this.reachedMax=!0,void(this.value=s)):void(this.value=Math.ceil(a/t)*t)}setRotationByValue(a){this.rotation=a%this.total/this.total*360}handleScroll(a){a.preventDefault();const c=-a.detail||a.wheelDeltaX,s=-a.detail||a.wheelDeltaY;(c>0||s<0?1:c<0||s>0?-1:0)<0?this.stepUp():this.stepDown()}componentDidLoad(){const a=this.hostEl.getBoundingClientRect(),{min:c,max:s,step:t}=this;this.total=36*t,void 0!==c&&void 0!==s&&(this.total=s-c),this.oneStepDeg=t/this.total*360,this.centerX=Math.floor(a.left)+document.body.scrollLeft+a.width/2,this.centerY=Math.floor(a.top)+document.body.scrollTop+a.height/2,this.setValue(this.value),this.setRotationByValue(this.value),this.hostEl.addEventListener("mousewheel",(a=>this.handleScroll(a))),this.hostEl.addEventListener("touchstart",(a=>this.handleMoveStart(a,"touchmove","touchend"))),this.hostEl.addEventListener("mousedown",(a=>this.handleMoveStart(a,"mousemove","mouseup")))}disconnectedCallback(){this.hostEl.removeEventListener("mousewheel",this.handleScroll.bind(this))}handleMoveStart(a,c,s){const t=E(this.updateOnMove.bind(this),40),i=document.body,{deg:r}=this.getDegFromPointer(a);this.startingDeg=r,this.startingValue=this.value,i.addEventListener(c,t,!1),i.addEventListener(s,(()=>{i.removeEventListener(c,t,!1)}),!1)}getDegFromPointer(a){const c=a.changedTouches?a.changedTouches[0]:a,s=c.pageX,t=c.pageY;s<this.mousePrevX&&(this.mouseDirectionX="left"),s>this.mousePrevX&&(this.mouseDirectionX="right"),t<this.mousePrevY&&(this.mouseDirectionY="up"),t>this.mousePrevY&&(this.mouseDirectionY="down"),this.mousePrevX=s,this.mousePrevY=t;const i=this.centerX-s,r=this.centerY-t;let o=180*Math.atan2(r,i)/Math.PI+90;return o<0&&(o+=360),{deg:o,x:s,y:t,diffX:i,diffY:r}}updateOnMove(a){a.preventDefault();const{deg:c,x:s,y:t,diffX:i,diffY:r}=this.getDegFromPointer(a);this.degDiff=c-this.startingDeg,console.log({x:s,y:t,diffX:i,diffY:r}),this.degDiff>this.oneStepDeg&&(s>this.centerX&&t>this.centerY&&"left"===this.mouseDirectionX&&(console.log(this.mouseDirectionY),console.log("yo")),this.stepUp(this.degDiff)),this.degDiff<-1*this.oneStepDeg&&this.stepDown(this.degDiff)}valueDiff(a){return Math.floor(a/this.oneStepDeg)*this.step}stepUp(a=null){if(this.reachedMax)return;const c=a?this.startingValue+this.valueDiff(a):this.value+this.step;this.setValue(c),this.setRotationByValue(c),this.reachedMin=!1}stepDown(a=null){if(this.reachedMin)return;const c=a?this.startingValue+this.valueDiff(a):this.value-this.step;this.setValue(c),this.setRotationByValue(c),this.reachedMax=!1}render(){const{value:a,size:t,rotation:i,reachedMax:r,reachedMin:o}=this;return c(s,{style:{"--sc-dial-size":t+"px"}},c("div",{class:"dial-circle"},c("div",{class:"pointer",style:{"--sc-dial-angle":i+"deg"}},c("div",{class:"pointer-circle"})),c("div",{class:"temp"},a,c("div",null,"max? ",r?"true":"false"),c("div",null,"min? ",o?"true":"false"))))}get hostEl(){return t(this)}};j.style=":host{--sc-dial-angle:0deg;--sc-dial-size:80px;--sc-dial-size:5rem;display:inline-block;height:var(--sc-dial-size);width:var(--sc-dial-size);-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));border-radius:50%}:host .dial-circle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);position:relative;width:100%;height:100%;cursor:pointer}:host .dial-circle .temp{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) rotate(180deg);transform:translate(-50%, -50%) rotate(180deg)}:host .dial-circle .pointer{position:absolute;border-radius:50%;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(var(--sc-dial-angle));transform:rotate(var(--sc-dial-angle));will-change:transform}:host .dial-circle .pointer-circle{margin:20px;margin:1.25rem;width:30px;width:1.875rem;height:30px;height:1.875rem;border-radius:50%;-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));--sc-shadow-color:rgba(0, 0, 0, 0.5);-webkit-transform:rotate(calc(180deg - var(--sc-dial-angle)));transform:rotate(calc(180deg - var(--sc-dial-angle)))}";const M=class{constructor(c){a(this,c),this.inputEvent=i(this,"inputEvent",7),this.changeEvent=i(this,"changeEvent",7),this.blurEvent=i(this,"blurEvent",7),this.focusEvent=i(this,"focusEvent",7),this.keyDownEvent=i(this,"keyDownEvent",7),this.autocapitalize="off",this.autocomplete="off",this.autocorrect="off",this.autofocus=!1,this.disabled=!1,this.name="",this.readonly=!1,this.required=!1,this.type="text",this.value="",this.ariaLabelledby="",this.engraved=1,this.block=!1,this.error="",this.focused=!1,this.onInput=a=>{const c=a.target;for(var s in c&&(this.value=c.value||""),c.validity)if(c.validity[s]){if("valid"===s){this.error="";break}this.error=(t=this,{badInput:"Bad input.",patternMismatch:"Invalid format.",rangeOverflow:"Value must be smaller than "+t.max,rangeUnderflow:`Value must be greater or equal to ${t.min}.`,stepMismatch:"Please enter a valid number.",tooLong:`Please enter no more than ${t.maxlength} characters.`,tooShort:`Please enter at least ${t.minlength} characters.`,typeMismatch:"Please enter a valid "+t.type,valueMissing:"This field is required."})[s]||"";break}var t;this.inputEvent.emit(a)},this.onBlur=()=>{this.blurEvent.emit(),this.focused=!1},this.onFocus=()=>{this.focusEvent.emit(),this.focused=!0},this.onKeydown=()=>{this.keyDownEvent.emit()},this.onChange=a=>{this.changeEvent.emit(a)}}async setFocus(){this.nativeInput&&this.nativeInput.focus()}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}hasValue(){return this.getValue().length>0}renderInput(){const a=this.getValue();return c("span",null,c("input",{class:"engraved-"+(this.focused?this.engraved+1:this.engraved),ref:a=>this.nativeInput=a,"aria-labelledby":this.ariaLabelledby,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,step:this.step,size:this.size,type:this.type,value:a,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeydown,onChange:this.onChange}),"radio"===this.type?c("span",{class:"after"}):null)}render(){return c(s,{"aria-disabled":this.disabled?"true":null,class:{"has-value":this.hasValue(),"has-error":this.error.length>0,block:this.block}},this.label?c("label",{class:"label"},this.label,this.renderInput()):this.renderInput(),this.error&&this.error.length>0&&c("div",{class:"error-message"},this.error))}};M.style="sc-input{--sc-input-border-radius:var(--sc-border-radius, 1em);--sc-input-padding-y:1em;--sc-input-padding-x:1em;--sc-input-bg-color:var(--sc-bg-color, #f6f6f8);--sc-input-text-color:var(--sc-text-color, #333333);--sc-input-font-size:1em;--sc-input-error-text-color:var(--sc-error-color, #f70d1a);--sc-input-radio-size:32px;--sc-input-radio-size:2rem;--sc-input-active-color:var(--sc-highlight-color, #c586c0);display:inline-block;vertical-align:middle}sc-input input{-webkit-transition:all var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);transition:all var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);outline:none;border:none;border-radius:var(--sc-input-border-radius);padding:var(--sc-input-padding-y) var(--sc-input-padding-x);background-color:var(--sc-input-bg-color);color:var(--sc-input-text-color);font-size:var(--sc-input-font-size);width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}sc-input input ::-moz-placeholder{color:currentColor}sc-input input :-ms-input-placeholder{color:currentColor}sc-input input ::-webkit-input-placeholder{color:currentColor}sc-input input ::-ms-input-placeholder{color:currentColor}sc-input input ::placeholder{color:currentColor}sc-input input:invalid{color:var(--sc-input-error-text-color)}sc-input.has-error input{border:1px solid var(--sc-input-error-text-color);border:0.0625rem solid var(--sc-input-error-text-color)}sc-input.has-error .error-message{padding:4px var(--sc-input-padding-x);padding:0.25rem var(--sc-input-padding-x);color:var(--sc-input-error-text-color)}sc-input.block{display:block;width:100%}sc-input[type=radio]{border-radius:50%;position:relative}sc-input[type=radio] input,sc-input[type=radio] label{cursor:pointer}sc-input[type=radio][disabled] input,sc-input[type=radio][disabled] label{cursor:not-allowed}sc-input[type=radio] .after{--sc-input-radio-active-dot-gap:calc(var(--sc-input-radio-size) * 0.25);--sc-input-radio-active-dot-size:calc(\n var(--sc-input-radio-size) - (var(--sc-input-radio-active-dot-gap) * 2)\n );position:absolute;opacity:0;top:var(--sc-input-radio-active-dot-gap);right:var(--sc-input-radio-active-dot-gap);width:var(--sc-input-radio-active-dot-size);height:var(--sc-input-radio-active-dot-size);background:var(--sc-input-active-color);border-radius:50%;-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-transition:opacity var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);transition:opacity var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);pointer-events:none}sc-input[type=radio] input{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));margin:0;padding:0;width:var(--sc-input-radio-size, 1em);height:var(--sc-input-radio-size, 1em);vertical-align:middle}sc-input[type=radio] input:checked~.after{opacity:1}sc-input[type=range]{-webkit-appearance:none;width:100%;background:transparent;}";const C=class{constructor(c){a(this,c),this.percentage=null,this.indeterminate=!1,this.circular=!1,this.radius=50,this.label="",this.angleGap=0,this.circleEl=null,this.spinnerAnimationId=null}renderCircular(a){var s=2*a*Math.PI;const t=a/10,i=2*(a+t);return c("div",{class:"circular-container",style:{"--sc-progress-circular-size":i+"px","--sc-progress-circular-size-number":""+i,"--sc-progress-stroke-width":t+"px"}},c("svg",{class:"progress-ring"},c("circle",{ref:a=>this.circleEl=a,class:"progress-ring__circle","stroke-width":t,"stroke-linecap":"butt",r:a,cx:i/2,cy:i/2,style:{"--sc-progress-circular-stroke-dasharray":`${s} ${s}`,"--sc-progress-circular-stroke-dashoffset":""+(1-this.percentage/100)*s}})),c("div",{class:"label"},c("slot",{name:"label"}),this.label))}render(){const{percentage:a,indeterminate:t,circular:i,radius:r}=this;return c(s,{class:{indeterminate:t,circular:i},"aria-valuenow":a,"aria-valuemin":"0","aria-valuemax":"100"},i?this.renderCircular(r):c("div",{class:"inner",style:{width:a+"%"}},this.label.length?c("span",{class:"label"},this.label):null))}get hostEl(){return t(this)}};C.style=":host{--sc-progress-width:100%;--sc-progress-height:16px;--sc-progress-height:1rem;--sc-progress-color:var(--sc-active-color, #3ab877);--sc-progress-label-color:currentColor;--sc-progress-border-radius:var(--sc-border-radius, 8px);--sc-progress-border-radius:var(--sc-border-radius, 0.5rem);--sc-progress-padding-x:4px;--sc-progress-padding-x:0.25rem;--sc-progress-padding-y:4px;--sc-progress-padding-y:0.25rem;--sc-progress-animation-duration:2s;--sc-progress-animation-timing-function:ease-in-out;--sc-progress-circular-size:100px;--sc-progress-circular-size:6.25rem;--sc-progress-circular-initial-rotate:90deg;display:block;-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));-webkit-box-shadow:inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shad