(window.webpackJsonp=window.webpackJsonp||[]).push([[5,8,12],{21:function(t,e,n){"use strict";n.r(e);var o=n(12),s=n(5),r=n(0),i=n(7),a=n(14);let l,c,u=t=>t;class b extends(Object(s.a)(Object(o.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(i.a)(l||(l=u`
      <style>
        :host { outline: none }
      </style>
    `))}get template(){return Object(i.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(i.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 h=n(17);let d,f=t=>t;window.customElements.define("slicesui-button",class extends b{get styles(){return Object(a.c)(d||(d=f`<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(h.a)(this)}})},24:function(t,e,n){"use strict";n.r(e);var o=n(12),s=n(5),r=n(0),i=n(7),a=n(14);let l,c,u=t=>t;class b extends(Object(s.a)(Object(o.a)(HTMLElement))){static get properties(){return{max:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.b.fromAttribute,toAttributeConverter:r.b.toAttribute},value:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.b.fromAttribute,toAttributeConverter:r.b.toAttribute}}}constructor(){super();const t=document.createElement("progress");this.max=t.max,this.value=t.value,this.attachShadow({mode:"open"}),this.render()}propertiesChangedCallback(t,e,n){super.propertiesChangedCallback&&super.propertiesChangedCallback(t,e,n),this.render()}get styles(){return Object(i.a)(l||(l=u`
      <style></style>
    `))}get template(){return Object(i.a)(c||(c=u`
      ${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(t){this._max=Number(t)}get value(){return this._value}set value(t){this._value=Number(t)}get position(){return this.$element.position}get $element(){return this.shadowRoot.querySelector("progress")}}var h=n(16);let d,f,p,v,m=t=>t;function g(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function y(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?g(Object(n),!0).forEach((function(e){x(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function x(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class w extends(Object(h.a)(b)){static get properties(){return y(y({},super.properties),{solid:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:r.a.fromAttribute,toAttributeConverter:r.a.toAttribute}})}get styles(){return Object(a.c)(d||(d=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)(f||(f=m`
      ${0}
      <div id="progress-bar">
        ${0}
      </div>
    `),super.template,this.solid?Object(a.c)(p||(p=m``)):Array(this.max).fill(null).map((t,e)=>Object(a.c)(v||(v=m`<span ?data-active="${0}"></span>`),this.value>e)))}constructor(){super(),this.solid=!1}propertiesChangedCallback(t,e,n){super.propertiesChangedCallback(t,e,n),this.updateStyles("--progress-width",this.value/this.max)}}window.customElements.define("slicesui-progress",w)},33:function(t,e,n){"use strict";n.r(e);var o=n(6);n(21),n(24);var s=n(0);let r,i,a=t=>t;class l extends o.a{static get properties(){return{options:{observe:!0,DOM:!0,fromAttributeConverter:s.c.fromAttribute},voted:{observe:!0,DOM:!0,fromAttributeConverter:s.a.fromAttribute,toAttributeConverter:s.a.toAttribute,reflect:!0,changedHandler:"_votedChanged"},vote:{observe:!0,DOM:!0,fromAttributeConverter:s.d.fromAttribute},votes:{observe:!0,DOM:!0,fromAttributeConverter:s.c.fromAttribute},votesAsPercentage:{observe:!0,DOM:!0,attributeName:"votes-as-percentage",fromAttributeConverter:s.a.fromAttribute}}}static get propertiesChangedHandlers(){return{render:["options","vote","votes","voted","votesAsPercentage"]}}constructor(){super(),this.voted=!1,this.options={},this.votes={},this.votesAsPercentage=!1}get totalVotes(){return Object.keys(this.options).reduce((t,e)=>t+(this.votes[e]||0),0)}get template(){return Object(o.b)(r||(r=a`
      <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  display: block;\n}\n:host > div {\n  display: block;\n  margin: 0 0 12px 0;\n  position: relative;\n  user-select: none;\n  transition: 0.4s margin-bottom ease;\n}\n:host h6 {\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}\n:host([voted]) div {\n  margin-bottom: 3px;\n}\n:host([voted]) .answer {\n  transform: none;\n  opacity: 1;\n}\n:host([voted]) slicesui-button {\n  pointer-events: none;\n  transform: translateY(-20px);\n  opacity: 0;\n}\n.answer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: 0.4s all ease;\n  pointer-events: none;\n  transform: translateY(20px);\n  width: 100%;\n}\nslicesui-button {\n  transition: 0.5s all ease;\n}\nslicesui-progress {\n  transition: 1s transform ease;\n  transition-delay: 0.2s;\n  transform-origin: 0 0;\n  background-color: transparent;\n  --slicesui-progress-color: var(--slicesui-poll-progress-fill-color, var(--highlight-color));\n  --slicesui-progress-border-radius: var(--slicesui-poll-progress-border-radius, 8px);\n  width: 100%;\n  height: 4px;\n  margin-top: 8px;\n  background-color: rgba(255,255,255,0.1);\n}\n",Object.keys(this.options||{}).map((t,e)=>Object(o.b)(i||(i=a`
        <div>

        <slicesui-button
          .media="${0}"
          data-key="${0}"
          active
          @click="${0}"
        >${0}</slicesui-button>

        <section class="answer">
          <h6>${0} (${0})</h6>
          <slicesui-progress
            value="${0}"
            max="${0}"
            solid
          ></slicesui-progress>
        </section>

        </div>
      `),this.media,t,this._handleAnswerClick,String.fromCharCode(65+e)+". "+this.options[t],String.fromCharCode(65+e)+". "+this.options[t],this._parseVoteCount(this.votes[t]),this.votes[t]||0,this.totalVotes||0)))}_handleAnswerClick(t){const e=t.target.dataset.key;this.votes[t.target.dataset.key]+=1,this.vote=e,this.voted=!0}_parseVoteCount(t){const e=t||0;return!1===this.votesAsPercentage?e:(100*(e/this.totalVotes||0)).toFixed(0)+"%"}_votedChanged(){this.voted&&this.dispatchEvent(new CustomEvent("vote",{detail:{value:this.vote}}))}}window.customElements.define("slicesui-poll",l)}}]);
//# sourceMappingURL=904668674264c4017934.js.map