(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{24:function(e,t,r){"use strict";r.r(t);var n=r(12),s=r(5),o=r(0),i=r(7),a=r(14);let l,c,p=e=>e;class u extends(Object(s.a)(Object(n.a)(HTMLElement))){static get properties(){return{max:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute},value:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute}}}constructor(){super();const e=document.createElement("progress");this.max=e.max,this.value=e.value,this.attachShadow({mode:"open"}),this.render()}propertiesChangedCallback(e,t,r){super.propertiesChangedCallback&&super.propertiesChangedCallback(e,t,r),this.render()}get styles(){return Object(i.a)(l||(l=p`
      <style></style>
    `))}get template(){return Object(i.a)(c||(c=p`
      ${0}
      <progress
        .max="${0}"
        .value="${0}"
      ></progress>
    `),this.styles,this.max,this.value)}render(){window.requestAnimationFrame(()=>{Object(i.b)(this.template,this.shadowRoot,{eventContext:this,scopeName:this.localName})})}get max(){return this._max}set max(e){this._max=Number(e)}get value(){return this._value}set value(e){this._value=Number(e)}get position(){return this.$element.position}get $element(){return this.shadowRoot.querySelector("progress")}}var b=r(16);let h,d,f,g,m=e=>e;function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?v(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):v(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class y extends(Object(b.a)(u)){static get properties(){return O(O({},super.properties),{solid:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute}})}get styles(){return Object(a.c)(h||(h=m`<style>${0}</style>`),"\n:host,\n:host *,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\na {\n  color: inherit;\n}\n:host(:not(.focus-visible)),\n:host(.focus-visible),\n:host(:not(.focus-visible)) input,\n:host(:not(.focus-visible)) button,\n:host(:not(.focus-visible)) select {\n  outline: none;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: block;\n  height: 4px;\n  width: 100%;\n}\nprogress {\n  display: none;\n}\n#progress-bar {\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  overflow: hidden;\n  display: flex;\n  padding: 0;\n  box-sizing: border-box;\n  position: relative;\n  border-radius: var(--slicesui-progress-border-radius, 4px);\n}\nspan {\n  flex: 1;\n  height: 100%;\n  margin: 0 2px;\n  border-radius: var(--slicesui-progress-border-radius, 4px);\n  overflow: hidden;\n  position: relative;\n}\nspan:first-child {\n  margin-left: 0;\n}\nspan:last-child {\n  margin-right: 0;\n}\n:host([solid]) #progress-bar:after {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: var(--slicesui-progress-color, #000);\n  content: '';\n  transform: scaleX(var(--progress-width));\n  transform-origin: 0 0;\n  transition: 0.5s transform ease;\n}\nspan:before,\nspan:after {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  content: '';\n  position: absolute;\n}\nspan:before {\n  background-color: #fff;\n  opacity: 0.35;\n}\nspan:after {\n  background-color: var(--slicesui-progress-color, #000);\n  opacity: 1;\n  transition: 0.5s transform ease-in-out;\n  transform-origin: 0 0;\n  transform: scaleX(0);\n}\nspan[data-active]:after {\n  transform: scaleX(1);\n}\n")}get template(){return Object(a.c)(d||(d=m`
      ${0}
      <div id="progress-bar">
        ${0}
      </div>
    `),super.template,this.solid?Object(a.c)(f||(f=m``)):Array(this.max).fill(null).map((e,t)=>Object(a.c)(g||(g=m`<span ?data-active="${0}"></span>`),this.value>t)))}constructor(){super(),this.solid=!1}propertiesChangedCallback(e,t,r){super.propertiesChangedCallback(e,t,r),this.updateStyles("--progress-width",this.value/this.max)}}window.customElements.define("slicesui-progress",y)}}]);
//# sourceMappingURL=e0377482a1689a219275.js.map