(window.webpackJsonp=window.webpackJsonp||[]).push([[3,8,9],{21:function(t,n,e){"use strict";e.r(n);var o=e(12),s=e(5),i=e(0),r=e(7),a=e(14);let l,c,u=t=>t;class h extends(Object(s.a)(Object(o.a)(HTMLElement))){static get properties(){return{accessKey:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.d.fromAttribute,toAttributeConverter:i.d.toAttribute},autofocus:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.a.fromAttribute,toAttributeConverter:i.a.toAttribute},disabled:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.a.fromAttribute,toAttributeConverter:i.a.toAttribute},tabIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.b.fromAttribute,toAttributeConverter:i.b.toAttribute},type:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.d.fromAttribute,toAttributeConverter:i.d.toAttribute},value:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.d.fromAttribute,toAttributeConverter:i.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,n,e){super.propertiesChangedCallback&&super.propertiesChangedCallback(t,n,e),this.render()}get styles(){return Object(r.a)(l||(l=u`
      <style>
        :host { outline: none }
      </style>
    `))}get template(){return Object(r.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(r.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 n=t.toLowerCase();if(-1===["button","submit","reset"].indexOf(n))return this._type="submit";this._type=n}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=e(17);let b,f=t=>t;window.customElements.define("slicesui-button",class extends h{get styles(){return Object(a.c)(b||(b=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(d.a)(this)}})},22:function(t,n,e){"use strict";e.r(n),e.d(n,"SlicesUIIcon",(function(){return a}));var o=e(6),s=e(0);let i,r=t=>t;class a extends o.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(o.b)(i||(i=r`
      <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)},31:function(t,n,e){"use strict";e.r(n),e.d(n,"SlicesUICarousel",(function(){return r}));var o=e(6);e(21),e(22);let s,i=t=>t;class r extends o.a{static get properties(){return{_scrollX:{observe:!0,changedHandler:"_scrollXChanged"}}}constructor(){super(),this._scrollX=0}set _scrollX(t){if(t<0)return this["#_scrollX"]=0;const n=this.shadowRoot.querySelector("#scrollContainer"),e=n?n.scrollWidth-this.offsetWidth:999999;if(t>e)return this["#_scrollX"]=e;this["#_scrollX"]=t}get template(){return Object(o.b)(s||(s=i`
      <style>${0}</style>
      <section>
        <slicesui-button
          class="left"
          @click="${0}"
        ><slicesui-icon icon="keyboard_arrow_left"></slicesui-icon></slicesui-button>
        <main>
          <div id="scrollContainer"><slot></slot></div>
        </main>
        <slicesui-button
          class="right"
          @click="${0}"
        ><slicesui-icon icon="keyboard_arrow_right"></slicesui-icon></slicesui-button>
      </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  overflow: hidden;\n}\n:host section {\n  position: relative;\n  height: 100%;\n}\n:host section slicesui-button {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 48px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --slicesui-button-border-color: transparent;\n  --slicesui-button-border-radius: 0;\n}\n:host section slicesui-button.left {\n  left: 0;\n}\n:host section slicesui-button.right {\n  right: 0;\n}\n:host section slicesui-button slicesui-icon {\n  font-size: var(--slices-text-h1--font-size);\n}\n:host section main {\n  height: 100%;\n  white-space: nowrap;\n  text-align: center;\n}\n:host section main > div {\n  white-space: nowrap;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  scroll-behavior: smooth;\n}\n:host section main > div ::slotted(*) {\n  display: inline-flex;\n  min-height: 100%;\n}\n@supports not (scroll-behavior: smooth) {\n  :host section main {\n    transition: 1000ms margin ease;\n  }\n}\n@media (hover: none) and (pointer: coarse) {\n  :host section slicesui-button {\n    display: none;\n  }\n  :host section main > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n/* width */\n/* Track */\n/* Handle */\n  }\n  :host section main > div::-webkit-scrollbar {\n    width: 1px;\n    display: none;\n  }\n  :host section main > div::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  :host section main > div::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n}\n",this._handleClickScrollLeft,this._handleClickScrollRight)}_handleClickScrollLeft(){const t=this.shadowRoot.querySelector("main"),n=this.shadowRoot.querySelector("slicesui-button");t&&(this._scrollX-=this.scrollWidth-2*n.offsetWidth)}_handleClickScrollRight(){const t=this.shadowRoot.querySelector("main"),n=this.shadowRoot.querySelector("slicesui-button");t&&(this._scrollX+=this.scrollWidth-2*n.offsetWidth)}_scrollXChanged(t,n){const e=this.shadowRoot.querySelector("main"),o=this.shadowRoot.querySelector("#scrollContainer");if(!e)return;if(CSS.supports("scroll-behavior:smooth"))return o.scrollTo(this._scrollX,0);e.style.setProperty("margin-left",0-n+"px")}}window.customElements.define("slicesui-carousel",r)}}]);
//# sourceMappingURL=4a3a93fdbd61b0543b7d.js.map