(window.webpackJsonp=window.webpackJsonp||[]).push([[2,8,9],{21:function(t,e,n){"use strict";n.r(e);var i=n(12),s=n(5),r=n(0),o=n(7),a=n(14);let l,c,u=t=>t;class h extends(Object(s.a)(Object(i.a)(HTMLElement))){static get properties(){return{accessKey:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.d.fromAttribute,toAttributeConverter:r.d.toAttribute},autofocus:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.a.fromAttribute,toAttributeConverter:r.a.toAttribute},disabled:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.a.fromAttribute,toAttributeConverter:r.a.toAttribute},tabIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.b.fromAttribute,toAttributeConverter:r.b.toAttribute},type:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.d.fromAttribute,toAttributeConverter:r.d.toAttribute},value:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.d.fromAttribute,toAttributeConverter:r.d.toAttribute}}}constructor(){super();const t=document.createElement("button");this.accessKey=t.accessKey,this.autofocus=t.autofocus,this.disabled=t.disabled,this.tabIndex=t.tabIndex,this.type=t.type,this.value=t.value,this.attachShadow({mode:"open",delegatesFocus:this.__delegatesFocus}),this.render(),this.__delegatesFocus||this.addEventListener("focus",()=>this.$element.focus())}propertiesChangedCallback(t,e,n){super.propertiesChangedCallback&&super.propertiesChangedCallback(t,e,n),this.render()}get styles(){return Object(o.a)(l||(l=u`
      <style>
        :host { outline: none }
      </style>
    `))}get template(){return Object(o.a)(c||(c=u`
      ${0}
      <button
        .accessKey="${0}"
        ?autofocus="${0}"
        ?disabled="${0}"
        .tabIndex="${0}"
        .type="${0}"
        .value="${0}"
      ><slot></slot></button>
    `),this.styles,this.accessKey,this.autofocus,this.disabled,this.tabIndex,this.type,this.value)}render(){window.requestAnimationFrame(()=>{Object(o.b)(this.template,this.shadowRoot,{eventContext:this,scopeName:this.localName})})}get accessKey(){return this._accessKey}set accessKey(t){this._accessKey=t}get tabIndex(){return!0===this.disabled?-1:this._tabIndex}set tabIndex(t){this._tabIndex=parseInt(t)}get type(){return this._type||"submit"}set type(t){const e=t.toLowerCase();if(-1===["button","submit","reset"].indexOf(e))return this._type="submit";this._type=e}get validationMessage(){return this.$element.validationMessage()}get validity(){return this.$element.validity()}get willValidate(){return this.$element.willValidate()}checkValidity(){return this.$element.checkValidity()}reportValidity(){return this.$element.reportValidity()}setCustomValidity(t){this.$element.setCustomValidity(t)}get $element(){return this.shadowRoot.querySelector("button")}get __delegatesFocus(){const t=document.createElement("div");return t.attachShadow({mode:"open",delegatesFocus:!0}),t.shadowRoot.delegatesFocus||!1}}var d=n(17);let b,m=t=>t;window.customElements.define("slicesui-button",class extends h{get styles(){return Object(a.c)(b||(b=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  height: calc(var(--erem) * 2);\n  height: max(calc(var(--erem) * 2), 44px);\n  font-size: 0;\n}\n:host input,\n:host select,\n:host button {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  font-family: var(--slices-text-b1--font-family, var(--slices-text-b--font-family, var(--slices-text--font-family)));\n  font-size: var(--slices-text-b1--font-size);\n  font-weight: var(--slices-text-b1--font-weight, var(--slices-text-b--font-weight, 400));\n  line-height: var(--slices-text-b1--line-height, var(--slices-text-b--line-height, 1.4));\n  font-family: var(--slices-text-h--font-family);\n  padding: var(--slicesui-input-padding, 0 var(--erem));\n}\n:host input[type="checkbox"],\n:host select[type="checkbox"],\n:host button[type="checkbox"],\n:host input[type="radio"],\n:host select[type="radio"],\n:host button[type="radio"] {\n  width: calc(var(--erem) * 2);\n  width: max(calc(var(--erem) * 2), 44px);\n}\n:host([small]) {\n  height: calc(var(--erem) * 1.25);\n  height: max(calc(var(--erem) * 1.25), 32px);\n}\n:host([small]) input,\n:host([small]) select,\n:host([small]) button {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  font-family: var(--slices-text-s1--font-family, var(--slices-text-s--font-family, var(--slices-text--font-family)));\n  font-size: var(--slices-text-s1--font-size);\n  font-weight: var(--slices-text-s1--font-weight, var(--slices-text-s--font-weight, 400));\n  line-height: var(--slices-text-s1--line-height, var(--slices-text-s--line-height, 1.2));\n  padding: var(--slicesui-input-padding, 0 calc(var(--erem) / 2));\n}\n:host([small]) input[type="checkbox"],\n:host([small]) select[type="checkbox"],\n:host([small]) button[type="checkbox"],\n:host([small]) input[type="radio"],\n:host([small]) select[type="radio"],\n:host([small]) button[type="radio"] {\n  width: calc(var(--erem) * 1.25);\n  width: max(calc(var(--erem) * 1.25), 32px);\n}\n:host {\n  user-select: none;\n  -webkit-user-select: none;\n  display: inline-flex;\n  align-items: stretch;\n}\n:host button {\n  line-height: 1.2;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: var(--slicesui-button-justify-content, center);\n  border-width: var(--slicesui-button-border-width, 2px);\n  border-style: solid;\n  border-color: var(--slicesui-button-border-color, transparent);\n  background: var(--slicesui-button-background, #515ce7);\n  color: var(--slicesui-button-color, #fff);\n  border-radius: var(--slicesui-button-border-radius, 32px);\n  white-space: nowrap;\n}\n:host button:hover:not([disabled]) {\n  background: var(--slicesui-button-background--hover, var(--slicesui-button-background, #626ce9));\n  color: var(--slicesui-button-color--hover, var(--slicesui-button-color, #fff));\n  border-color: var(--slicesui-button-border-color--hover, var(--slicesui-button-border-color, transparent));\n}\n:host button:active:not([disabled]) {\n  background: var(--slicesui-button-background, #515ce7);\n  color: var(--slicesui-button-color, #fff);\n}\n:host button:not([disabled]) {\n  cursor: pointer;\n}\n:host button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n:host ::slotted(*) {\n  pointer-events: none;\n}\n:host ::slotted(span) {\n  padding-right: calc(var(--erem) * 0.25);\n}\n:host([icon]) {\n  width: max(calc(var(--erem) * 2), 44px);\n}\n:host([icon]) button {\n  padding: 0;\n}\n:host([text]) {\n  height: auto;\n}\n:host([text]) button {\n  background: transparent;\n  color: var(--slicesui-button-color, #000);\n  padding: 0;\n  border-top: 0;\n  border-left: 0;\n  border-right: 0;\n  border-bottom-color: var(--slicesui-button-border-color, #000);\n  border-radius: 0;\n}\n:host([text]) button:hover:not([disabled]),\n:host([text]) button:active:not([disabled]) {\n  background: transparent;\n  color: var(--slicesui-button-color, #000);\n}\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.6;\n}\n:host([small][text]) button {\n  border-bottom-width: 1px;\n}\n:host([icon][small]) {\n  width: max(calc(var(--erem) * 1.25), 32px);\n}\n:host([notify]) button {\n  position: relative;\n}\n:host([notify]) button:after {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  content: \'\';\n  animation: notify 2000ms infinite;\n  border-radius: inherit;\n}\n@-moz-keyframes notify {\n  0% {\n    opacity: 1;\n    background: #fff;\n    transform: scale(0);\n  }\n  50% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n}\n@-webkit-keyframes notify {\n  0% {\n    opacity: 1;\n    background: #fff;\n    transform: scale(0);\n  }\n  50% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n}\n@-o-keyframes notify {\n  0% {\n    opacity: 1;\n    background: #fff;\n    transform: scale(0);\n  }\n  50% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n}\n@keyframes notify {\n  0% {\n    opacity: 1;\n    background: #fff;\n    transform: scale(0);\n  }\n  50% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    background: #fff;\n    transform: scale(1.1);\n  }\n}\n')}constructor(){super(),Object(d.a)(this)}})},22:function(t,e,n){"use strict";n.r(e),n.d(e,"SlicesUIIcon",(function(){return a}));var i=n(6),s=n(0);let r,o=t=>t;class a extends i.a{static get properties(){return{icon:{observe:!0,DOM:!0,fromAttributeConverter:s.d.fromAttribute},loaded:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute}}}static get propertiesChangedHandlers(){return{render:["icon","loaded"]}}constructor(){super(),this._loadFont().then(()=>window.requestAnimationFrame(()=>this.loaded=!0))}async _loadFont(){if(document.querySelector(".slices-material-fonts"))return;const t=document.createElement("style");t.classList.add("slices-material-fonts"),t.innerHTML="\n      @font-face {\n        font-family: 'Material Icons';\n        src: url('https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2');\n      }\n    ",document.head.appendChild(t)}get template(){return Object(i.b)(r||(r=o`
      <style>${0}</style>
      ${0}
    `),"\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  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  display: inline;\n  font-family: 'Material Icons', sans-serif;\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  display: none;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n  vertical-align: middle;\n  font-feature-settings: 'liga';\n}\n:host([loaded]) {\n  display: inline-block;\n}\n:host([spin]) {\n  animation-name: spin;\n  animation-duration: 1000ms;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n@-moz-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n@-webkit-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n@-o-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n",this.icon)}}window.customElements.define("slicesui-icon",a)},28:function(t,e,n){"use strict";n.r(e),n.d(e,"SlicesUIAVControls",(function(){return p}));var i=n(6),s=n(0);n(21),n(22);var r=n(12),o=n(7),a=n(14);let l,c,u=t=>t;class h extends(Object(r.a)(HTMLElement)){static get properties(){return{accept:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},accessKey:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},alt:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},autocomplete:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},autofocus:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},capture:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},checked:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},dirname:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},disabled:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},height:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},inputmode:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},max:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},maxlength:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},name:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},min:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},minlength:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},multiple:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},pattern:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},placeholder:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},readonly:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},required:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},size:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},src:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},step:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},width:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},tabIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.b.fromAttribute,toAttributeConverter:s.b.toAttribute},type:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},value:{observe:!0,DOM:!0,fromAttributeConverter:s.d.fromAttribute,toAttributeConverter:s.d.toAttribute},__elementFocused:{observe:!0}}}constructor(){super();const t=document.createElement("input");this.accept=t.accept,this.accessKey=t.accessKey,this.alt=t.alt,this.autocomplete=t.autocomplete,this.autofocus=t.autofocus,this.capture=t.capture,this.checked=t.checked,this.dirname=t.dirname,this.disabled=t.disabled,this.height=t.height,this.inputmode=t.inputmode,this.max=t.max,this.maxlength=t.maxlength,this.min=t.min,this.minlength=t.minlength,this.multiple=t.multiple,this.name=t.name,this.pattern=t.pattern,this.placeholder=t.placeholder,this.readonly=t.readonly,this.required=t.required,this.size=t.size,this.src=t.src,this.step=t.step,this.tabIndex=t.tabIndex,this.width=t.width,this.type=t.type,this.value=t.value,this.__elementFocused=!1,this.attachShadow({mode:"open",delegatesFocus:this.__delegatesFocus}),this.render(),this.__delegatesFocus||this.addEventListener("focus",()=>this.$element.focus())}propertyChangedCallback(t,e,n){super.propertyChangedCallback(t,e,n),this.render()}get styles(){return Object(o.a)(l||(l=u`
      <style>
        :host { outline: none }

        input:invalid {
          border: 1px solid red;
        }
      </style>
    `))}get template(){return Object(o.a)(c||(c=u`
      ${0}
      <input
      .accept="${0}"
      .accessKey="${0}"
      .alt="${0}"
      ?autocomplete="${0}"
      ?autofocus="${0}"
      .capture="${0}"
      ?checked="${0}"
      .dirname="${0}"
      ?disabled="${0}"
      .height="${0}"
      .inputmode="${0}"
      .max="${0}"
      .maxlength="${0}"
      .min="${0}"
      .minlength="${0}"
      ?multiple="${0}"
      .name="${0}"
      .placeholder="${0}"
      ?readonly="${0}"
      ?required="${0}"
      .size="${0}"
      .src="${0}"
      .step="${0}"
      .tabIndex="${0}"
      .width="${0}"
      .type="${0}"
      .value="${0}"
      @focus="${0}"
      @blur="${0}"
      @input="${0}"
      @change="${0}"
      >
    `),this.styles,this.accept,this.accessKey,this.alt,this.autocomplete,this.autofocus,this.capture,this.checked,this.dirname,this.disabled,this.height,this.inputmode,this.max,this.maxlength,this.min,this.minlength,this.multiple,this.name,this.placeholder,this.readonly,this.required,this.size,this.src,this.step,this.tabIndex,this.width,this.type,this.value,()=>this.__elementFocused=!0,()=>this.__elementFocused=!1,this.__handleInput,this.__handleChange)}render(){!0!==this.__elementFocused&&window.requestAnimationFrame(()=>{Object(o.b)(this.template,this.shadowRoot,{eventContext:this,scopeName:this.localName})})}get accessKey(){return this._accessKey}set accessKey(t){this._accessKey=t}get list(){return this.$element.list}get tabIndex(){return!0===this.disabled?-1:this._tabIndex}set tabIndex(t){this._tabIndex=parseInt(t)}get validationMessage(){return this.$element.validationMessage}get validity(){return this.$element.validity}get willValidate(){return this.$element.willValidate}checkValidity(){return this.$element.checkValidity()}reportValidity(){return this.$element.reportValidity()}select(){return this.$element.select()}setCustomValidity(t){this.$element.setCustomValidity(t)}setRangeText(){this.$element.setRangeText(...arguments)}setSelectionRange(){this.$element.setSelectionRange(...arguments)}stepDown(){this.$element.stepDown(),this.value=this.$element.value}stepUp(){this.$element.stepUp(),this.value=this.$element.value}get $element(){return this.shadowRoot&&this.shadowRoot.querySelector("input")||{}}get __delegatesFocus(){const t=document.createElement("div");return t.attachShadow({mode:"open",delegatesFocus:!0}),t.shadowRoot.delegatesFocus||!1}__handleInput(t){this.value=t.target.value,this.checked=t.target.checked}__handleChange(t){this.value=t.target.value,this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}}var d=n(17);let b,m=t=>t;window.customElements.define("slicesui-slider",class extends h{get styles(){return Object(a.c)(b||(b=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  height: calc(var(--erem) * 2);\n  height: max(calc(var(--erem) * 2), 44px);\n  font-size: 0;\n}\n:host input,\n:host select,\n:host button {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  font-family: var(--slices-text-b1--font-family, var(--slices-text-b--font-family, var(--slices-text--font-family)));\n  font-size: var(--slices-text-b1--font-size);\n  font-weight: var(--slices-text-b1--font-weight, var(--slices-text-b--font-weight, 400));\n  line-height: var(--slices-text-b1--line-height, var(--slices-text-b--line-height, 1.4));\n  font-family: var(--slices-text-h--font-family);\n  padding: var(--slicesui-input-padding, 0 var(--erem));\n}\n:host input[type="checkbox"],\n:host select[type="checkbox"],\n:host button[type="checkbox"],\n:host input[type="radio"],\n:host select[type="radio"],\n:host button[type="radio"] {\n  width: calc(var(--erem) * 2);\n  width: max(calc(var(--erem) * 2), 44px);\n}\n:host([small]) {\n  height: calc(var(--erem) * 1.25);\n  height: max(calc(var(--erem) * 1.25), 32px);\n}\n:host([small]) input,\n:host([small]) select,\n:host([small]) button {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  font-family: var(--slices-text-s1--font-family, var(--slices-text-s--font-family, var(--slices-text--font-family)));\n  font-size: var(--slices-text-s1--font-size);\n  font-weight: var(--slices-text-s1--font-weight, var(--slices-text-s--font-weight, 400));\n  line-height: var(--slices-text-s1--line-height, var(--slices-text-s--line-height, 1.2));\n  padding: var(--slicesui-input-padding, 0 calc(var(--erem) / 2));\n}\n:host([small]) input[type="checkbox"],\n:host([small]) select[type="checkbox"],\n:host([small]) button[type="checkbox"],\n:host([small]) input[type="radio"],\n:host([small]) select[type="radio"],\n:host([small]) button[type="radio"] {\n  width: calc(var(--erem) * 1.25);\n  width: max(calc(var(--erem) * 1.25), 32px);\n}\n:host {\n  user-select: none;\n  -webkit-user-select: none;\n  display: inline-block;\n  background: transparent;\n  position: relative;\n}\n:host:after {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  width: 100%;\n  height: var(--slicesui-slider-track-height, 2px);\n  content: \'\';\n  background: var(--slicesui-slider-track-background, #000);\n  border-radius: var(--slicesui-slider-track-border-radius, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n:host input {\n  -webkit-appearance: none;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  position: relative;\n  border-radius: var(--slicesui-slider-track-border-radius, 0);\n  margin: 0;\n}\n:host input:not([disabled]) {\n  cursor: pointer;\n}\n:host input:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n:host input[type="range"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n:host input[type="range"]::-ms-track {\n  width: 100%;\n  cursor: pointer;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\n:host input[type="range"]::-webkit-slider-thumb {\n  height: var(--slicesui-slider-thumb-size, 20px);\n  width: var(--slicesui-slider-thumb-size, 20px);\n  background: var(--slicesui-slider-thumb-background, #fff);\n  border: var(--slicesui-slider-thumb-border-width, 2px) solid var(--slicesui-slider-thumb-border-color, #000);\n  box-shadow: var(--slicesui-slider-thumb-box-shadow);\n  border-radius: 50%;\n  position: relative;\n  box-sizing: border-box;\n  z-index: 1;\n  top: 50%;\n  transform: translateY(-50%);\n}\n:host input[type="range"]::-moz-"range"-thumb {\n  height: var(--slicesui-slider-thumb-size, 20px);\n  width: var(--slicesui-slider-thumb-size, 20px);\n  background: var(--slicesui-slider-thumb-background, #fff);\n  border: var(--slicesui-slider-thumb-border-width, 2px) solid var(--slicesui-slider-thumb-border-color, #000);\n  box-shadow: var(--slicesui-slider-thumb-box-shadow);\n  border-radius: 50%;\n  position: relative;\n  box-sizing: border-box;\n  z-index: 1;\n}\n:host input[type="range"]::-ms-thumb {\n  height: var(--slicesui-slider-thumb-size, 20px);\n  width: var(--slicesui-slider-thumb-size, 20px);\n  background: var(--slicesui-slider-thumb-background, #fff);\n  border: var(--slicesui-slider-thumb-border-width, 2px) solid var(--slicesui-slider-thumb-border-color, #000);\n  box-shadow: var(--slicesui-slider-thumb-box-shadow);\n  border-radius: 50%;\n  position: relative;\n  box-sizing: border-box;\n  z-index: 1;\n}\n:host input[type="range"]::-webkit-slider-runnable-track {\n  height: 100%;\n  width: 100%;\n  background: transparent;\n}\n:host input[type="range"]::-moz-"range"-track {\n  height: 100%;\n  width: 100%;\n  background: transparent;\n}\n:host input[type="range"]::-ms-track {\n  height: 100%;\n  width: 100%;\n  background: transparent;\n}\n:host ::slotted(slicesui-icon) {\n  padding-left: 8px;\n}\n')}constructor(){super(),Object(d.a)(this)}get type(){return"range"}get value(){return this["#value"]}set value(t){this["#value"]=parseFloat(t||this.min||0)}});let f,v=t=>t;class p extends i.a{static get properties(){return{paused:{observe:!0,DOM:!0,fromAttributeConverter:s.a.fromAttribute,changedHandler:"_pausedChanged"},loading:{observe:!0,DOM:!0,fromAttributeConverter:s.a.fromAttribute},duration:{observe:!0,DOM:!0,fromAttributeConverter:s.b.fromAttribute},currentTime:{observe:!0,DOM:!0,fromAttributeConverter:s.b.fromAttribute},active:{observe:!0,reflect:!0,DOM:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute},mouseActive:{observe:!0,reflect:!0,attributeName:"mouse-active",toAttributeConverter:s.a.toAttribute},navButtonsHidden:{observe:!0,DOM:!0,attributeName:"nav-buttons-hidden",fromAttributeConverter:s.a.fromAttribute},scrubTime:{observe:!0},_scrubbing:{observe:!0}}}static get propertiesChangedHandlers(){return{render:["paused","duration","currentTime","loading","active","mouseActive","navButtonsHidden","_scrubbing"]}}constructor(){super(),this.paused=!1,this.duration=0,this.currentTime=0,this.active=!1,this.mouseActive=!1,this.navButtonsHidden=!1}get template(){return Object(i.b)(f||(f=v`
      <style>${0}</style>
      <section @mousemove="${0}">

        <main @click="${0}">

          <slicesui-button
            icon
            ?disabled="${0}"
            @click="${0}"
            ?hidden="${0}"
          >
            <slicesui-icon icon="arrow_back"></slicesui-icon>
          </slicesui-button>

          <div>
          
            <slicesui-button
              icon
              ?disabled="${0}"
              @click="${0}"
            >
              <slicesui-icon icon="replay_10"></slicesui-icon>
            </slicesui-button>

            <slicesui-button
              icon
              ?disabled="${0}"
              @click="${0}"
            >
            <slicesui-icon icon="${0}"></slicesui-icon>
            </slicesui-button>

            <slicesui-button
              icon
              ?disabled="${0}"
              @click="${0}"
            >
              <slicesui-icon icon="forward_10"></slicesui-icon>
            </slicesui-button>

          </div>

            <slicesui-button
              icon
              ?disabled="${0}"
              @click="${0}"
              ?hidden="${0}"
            >
            <slicesui-icon icon="arrow_forward"></slicesui-icon>
          </slicesui-button>

        </main>

        <footer>
          <span>${0}</span>
          <slicesui-slider
            value="${0}"
            max="${0}"
            step="0.1"
            @mousedown="${0}"
            @mouseup="${0}"
            @touchstart="${0}"
            @touchend="${0}"
            @input="${0}"
            @change="${0}"
          ></slicesui-slider>
          <span>${0}</span>
        </footer>

      </section>
    `),'\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}\n:host section {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: rgba(0,0,0,0.5);\n  transition: all 500ms ease;\n  opacity: 0;\n  padding: var(--slicesui-av-controls--padding, 24px);\n  --slicesui-button-background: transparent;\n  --slicesui-slider-thumb-size: 12px;\n  --slicesui-slider-thumb-border-width: 0;\n  --slicesui-slider-track-background: #fff;\n}\n:host section slicesui-button,\n:host section slicesui-slider {\n  pointer-events: var(--pointer-events, none);\n}\n:host section main {\n  flex: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n:host section main > slicesui-button {\n  flex: none;\n  --slicesui-button-color: var(--slicesui-av-controls-nav-button--color);\n  --slicesui-button-border-color: var(--slicesui-av-controls-nav-button--color);\n  --slicesui-button-border-radius: 50%;\n}\n:host section main slicesui-icon[icon="donut_large"] {\n  transform-origin: 50%;\n  animation: spin 500ms infinite;\n}\n:host section main div {\n  flex: 1;\n  justify-content: center;\n  display: flex;\n}\n:host section main div > * {\n  margin: 0 12px;\n  position: relative;\n  --slices-text-b1--font-size: var(--slices-text-h2--font-size);\n}\n:host section main div > *:nth-child(2) {\n  --slices-text-b1--font-size: var(--slices-text-h0--font-size);\n  transform-origin: center;\n}\n:host section footer {\n  flex: none;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  padding: 0;\n}\n:host section footer slicesui-slider {\n  flex: 1;\n  width: calc(100% - var(--erem) * 4);\n  margin: 0 16px;\n}\n:host section footer span {\n  flex: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n  font-family: var(--slices-text-s1--font-family, var(--slices-text-s--font-family, var(--slices-text--font-family)));\n  font-size: var(--slices-text-s1--font-size);\n  font-weight: var(--slices-text-s1--font-weight, var(--slices-text-s--font-weight, 400));\n  line-height: var(--slices-text-s1--line-height, var(--slices-text-s--line-height, 1.2));\n  color: #fff;\n  margin: 0 8px;\n  user-select: none;\n}\n:host([active]) section,\n:host([mouse-active]) section,\n:host(:focus-within) section {\n  opacity: 1;\n  --pointer-events: all;\n}\n:host([active]) section slicesui-button,\n:host([mouse-active]) section slicesui-button,\n:host(:focus-within) section slicesui-button {\n  pointer-events: all;\n}\n@-moz-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(180deg);\n  }\n}\n@-webkit-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(180deg);\n  }\n}\n@-o-keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(180deg);\n  }\n}\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(180deg);\n  }\n}\n',this._resetTimer,this._handleClick,!(this.active||this.mouseActive),this._handleClickPrevious,this.navButtonsHidden,!(this.active||this.mouseActive),this._handleSkipBack,!(this.active||this.mouseActive)||this.loading,this._handleTogglePause,this.loading?"donut_large":this.paused?"play_arrow":"pause",!(this.active||this.mouseActive),this._handleSkipForward,!(this.active||this.mouseActive),this._handleClickNext,this.navButtonsHidden,this._parseTime(this._scrubbing?this.scrubTime:this.currentTime),this._scrubbing?this.scrubTime:this.currentTime,this.duration,this._handleSliderMouseDown,this._handleSliderMouseUp,this._handleSliderMouseDown,this._handleSliderMouseUp,this._handleSliderInput,this._handleSliderChange,this._parseTime(this.duration))}_handleSliderMouseDown(t){this._resetTimer(),this._scrubbing=!0,this.scrubTime=t.target.value}_handleSliderMouseUp(){this._resetTimer(),this.currentTime=this.scrubTime,window.requestAnimationFrame(()=>this._scrubbing=!1)}_handleSliderInput(t){this._resetTimer(),this.scrubTime=t.target.value}_handleSliderChange(){this._resetTimer(),this.dispatchEvent(new CustomEvent("scrub",{detail:{value:this.scrubTime}}))}_pausedChanged(){this.dispatchEvent(new CustomEvent("toggle"))}_activeChanged(){this.dispatchEvent(new CustomEvent("active-changed"))}_handleSkipBack(){this._resetTimer(),this.dispatchEvent(new CustomEvent("skip-back"))}_handleSkipForward(){this.dispatchEvent(new CustomEvent("skip-forward"))}_handleTogglePause(){this._resetTimer(),this.paused=!this.paused}_handleClick(t){t.target===this.shadowRoot.querySelector("main")&&(this.mouseActive=!1,this.active=!this.active)}_handleClickPrevious(){this.dispatchEvent(new CustomEvent("reset"))}_handleClickNext(){this.dispatchEvent(new CustomEvent("continue"))}_resetTimer(){this.mouseActive=!0,window.clearTimeout(this._activeTimeout),this._activeTimeout=window.setTimeout(()=>{this.mouseActive=!1,this.active=!1},1200)}_parseTime(t){let e=parseInt(t,10),n=Math.floor(e/3600),i=Math.floor((e-3600*n)/60),s=e-3600*n-60*i;return n<10&&(n="0"+n),i<10&&(i="0"+i),s<10&&(s="0"+s),i+":"+s}}window.customElements.define("slicesui-av-controls",p)}}]);
//# sourceMappingURL=84a1f4f8ee530e1f695d.js.map