(window.webpackJsonp=window.webpackJsonp||[]).push([[4,8,9],{21:function(t,e,n){"use strict";n.r(e);var i=n(12),s=n(5),o=n(0),r=n(7),a=n(14);let l,c,d=t=>t;class u extends(Object(s.a)(Object(i.a)(HTMLElement))){static get properties(){return{accessKey:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.d.fromAttribute,toAttributeConverter:o.d.toAttribute},autofocus:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},disabled:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},tabIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute},type:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.d.fromAttribute,toAttributeConverter:o.d.toAttribute},value:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.d.fromAttribute,toAttributeConverter:o.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(r.a)(l||(l=d`
      <style>
        :host { outline: none }
      </style>
    `))}get template(){return Object(r.a)(c||(c=d`
      ${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 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 b,f=t=>t;window.customElements.define("slicesui-button",class extends u{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(h.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 o,r=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)(o||(o=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)},29:function(t,e,n){"use strict";n.r(e),n.d(e,"SlicesUIFormattingBar",(function(){return w}));var i=n(6),s=n(12),o=n(0),r=n(7),a=n(14);let l,c,d=t=>t;class u extends(Object(s.a)(HTMLElement)){static get properties(){return{accessKey:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.d.fromAttribute,toAttributeConverter:o.d.toAttribute},autofocus:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},disabled:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},length:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute},multiple:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},name:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.d.fromAttribute,toAttributeConverter:o.d.toAttribute},required:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},selectedIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute},tabIndex:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute},size:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.b.fromAttribute,toAttributeConverter:o.b.toAttribute}}}constructor(){super();const t=document.createElement("select");this.accessKey=t.accessKey,this.autofocus=t.autofocus,this.disabled=t.disabled,this.length=t.length,this.multiple=t.multiple,this.name=t.name,this.selectedIndex=t.selectedIndex,this.size=t.size,this.tabIndex=t.tabIndex,this.required=t.required,this.attachShadow({mode:"open",delegatesFocus:this.__delegatesFocus}),this.render(),this.__delegatesFocus||this.addEventListener("focus",()=>this.$element.focus()),this.__initMutationObserver()}propertyChangedCallback(t,e,n){super.propertyChangedCallback(t,e,n),this.render()}get styles(){return Object(r.a)(l||(l=d`
      <style>
        :host { outline: none; }
        ::slotted(option) { display: none; }
      </style>
    `))}get template(){return Object(r.a)(c||(c=d`
      ${0}
      <select
        .accessKey="${0}"
        ?autofocus="${0}"
        ?disabled="${0}"
        .length="${0}"
        ?multiple="${0}"
        .name="${0}"
        .selectedIndex="${0}"
        .size="${0}"
        .tabIndex="${0}"
        ?required="${0}"
        @input="${0}"
        @change="${0}"
      ></select>
      <slot @slotchange="${0}"></slot>
    `),this.styles,this.accessKey,this.autofocus,this.disabled,this.length,this.multiple,this.name,this.selectedIndex,this.size,this.tabIndex,this.required,this.__handleInput,this.__handleChange,this.__handleSlotChange)}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 labels(){return this.$element.labels}get options(){return this.$element.options}get selectedOptions(){return this.$element.selectedOptions}get tabIndex(){return!0===this.disabled?-1:this._tabIndex}set tabIndex(t){this._tabIndex=parseInt(t)}get type(){return this.$element.type}get value(){return this.$element.value}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("select")}get __delegatesFocus(){const t=document.createElement("div");return t.attachShadow({mode:"open",delegatesFocus:!0}),t.shadowRoot.delegatesFocus||!1}__handleSlotChange(){this.$element&&(this.$element.innerHTML=this.innerHTML,this.$element.selectedIndex=this.selectedIndex)}__initMutationObserver(){new MutationObserver(this.__handleSlotChange.bind(this)).observe(this,{attributes:!0,childList:!0,subtree:!0})}__handleInput(t){this.selectedIndex=t.target.selectedIndex}__handleChange(t){this.selectedIndex=t.target.selectedIndex,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}}var h=n(17);n(22);let b,f,m=t=>t;function g(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function p(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){v(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 v(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}window.customElements.define("slicesui-select",class extends u{static get properties(){return p(p({},super.properties),{autoselect:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:o.a.fromAttribute,toAttributeConverter:o.a.toAttribute},placeholder:{observe:!0,DOM:!0,fromAttributeConverter:o.d.fromAttribute}})}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  background: transparent;\n  text-align: start;\n  display: inline-flex;\n  align-items: stretch;\n  font-size: 0;\n}\n:host ::slotted(option),\n:host ::slotted(optgroup) {\n  display: none;\n}\n:host div {\n  position: relative;\n  line-height: 1.2;\n  width: 100%;\n  min-height: 100%;\n  display: flex;\n  align-items: center;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--slicesui-select-border-color, #000);\n  border-radius: var(--slicesui-select-border-radius, 32px);\n  margin: 0 -2px;\n}\n:host div:after {\n  position: absolute;\n  color: #999;\n  left: 0;\n  width: 100%;\n  padding: var(--slicesui-input-padding, 0 24px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n}\n:host div slicesui-icon {\n  position: absolute;\n  right: 8px;\n  font-size: var(--slices-text-b1--font-size);\n  pointer-events: none;\n}\n:host div[data-selectedindex="-1"]:after {\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  content: attr(data-placeholder);\n}\n:host select {\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  -webkit-appearance: none;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--slicesui-select-color, #000);\n  text-align: inherit;\n  text-transform: inherit;\n  margin: 0 -2px;\n  border-radius: inherit;\n}\n:host select[type="number"] {\n  -moz-appearance: textfield;\n}\n:host select:focus {\n  background: var(--slicesui-select-background--focus, var(--slicesui-select-background, #fff));\n  color: var(--slicesui-select-color--focus, var(--slicesui-select-color, #000));\n}\n:host select:invalid {\n  border-bottom-color: #ff5952;\n}\n:host select:not([disabled]) {\n  cursor: pointer;\n}\n:host select:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n:host([small]) div[data-selectedindex="-1"]:after {\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 12px);\n}\n')}get template(){return Object(a.c)(f||(f=m`
      <div
        data-placeholder="${0}"
        data-selectedindex="${0}"
        @click="${0}"
      >${0} <slicesui-icon icon="keyboard_arrow_down"></slicesui-icon></div>
    `),this.placeholder,this.selectedIndex,()=>this.$element.click(),super.template)}constructor(){super(),this.autoselect=!1,this.placeholder="",Object(h.a)(this),this.addEventListener("focus",this._handleFocus.bind(this))}_handleFocus(){this.autoselect&&window.setTimeout(()=>{this.$element.select()},40)}});n(21);let y,x=t=>t;class w extends i.a{static get properties(){return{_range:{observe:!0,changedHandler:"_rangeChanged"}}}static get propertiesChangedHandlers(){return{render:["_range"]}}constructor(){super(),window.addEventListener("selection-change",this._handleShadowSelectionChange.bind(this))}get template(){return Object(i.b)(y||(y=x`
      <style>${0}</style>
      <section>
        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Bold"
        >
          <slicesui-icon icon="format_bold"></slicesui-icon>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Italic"
        >
          <slicesui-icon icon="format_italic"></slicesui-icon>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Underline"
        >
          <slicesui-icon icon="format_underline"></slicesui-icon>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Strikethrough"
        >
          <slicesui-icon icon="format_strikethrough"></slicesui-icon>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Heading 1"
        >
          <div>h1</div>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Heading 2"
        >
          <div>h2</div>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Heading 3"
        >
          <div>h3</div>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Quote"
        >
        <slicesui-icon icon="format_quote"></slicesui-icon>
        </slicesui-button>

        <slicesui-button
          icon
          @click="${0}"
          ?data-enabled="${0}"
          title="Toggle Link"
        >
          <slicesui-icon icon="link"></slicesui-icon>
        </slicesui-button>  

        <slicesui-button
          icon
          @click="${0}"
          title="Remove All Formatting"
        >
          <slicesui-icon icon="format_clear"></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}\n:host section {\n  background: #000;\n  display: var(--formatting-bar-display, none);\n  position: fixed;\n  top: var(--formatting-bar-y);\n  left: var(--formatting-bar-x);\n  transform: translateY(-105%);\n  --slicesui-button-background: transparent;\n  --slicesui-button-background--hover: #191919;\n  --slicesui-button-border-radius: 0;\n  --slicesui-button-color: #fff;\n  border-radius: 24px;\n  overflow: hidden;\n}\n:host section div {\n  font-variant: small-caps;\n}\n:host section slicesui-button {\n  --slicesui-button-color: #fff;\n  --slicesui-button-padding: 0;\n  --slices-text-b--font-weight: 700;\n}\n:host section slicesui-button[data-enabled] {\n  --slicesui-button-color: #515ce7;\n}\n:host section slicesui-button span {\n  font-weight: 700;\n}\n",()=>document.execCommand("Bold"),this.selectedTagNames.has("B")||this.selectedTagNames.has("STRONG"),()=>document.execCommand("Italic"),this.selectedTagNames.has("I")||this.selectedTagNames.has("EM"),()=>document.execCommand("Underline"),this.selectedTagNames.has("U"),()=>document.execCommand("Strikethrough"),this.selectedTagNames.has("STRIKE"),()=>this._insertHTML("H1"),this.selectedTagNames.has("H1"),()=>this._insertHTML("H2"),this.selectedTagNames.has("H2"),()=>this._insertHTML("H3"),this.selectedTagNames.has("H3"),()=>this._insertHTML("Blockquote"),this.selectedTagNames.has("Blockquote"),this._insertLink,this.selectedTagNames.has("A"),()=>document.execCommand("RemoveFormat"))}_handleShadowSelectionChange(t){this._range=t.detail.range,this.render(),this._rangeChanged()}_rangeChanged(){if(!this._range||0===this._range.toString().length)return this.updateStyles("--formatting-bar-display","none");const t=this._range.getBoundingClientRect();this.updateStyles("--formatting-bar-x",t.x+"px"),this.updateStyles("--formatting-bar-y",t.y+"px"),this.updateStyles("--formatting-bar-display","flex")}_insertHTML(t){const e=this.getSelectedNodeByTagName(t);if(!e)return document.execCommand("formatBlock",null,t);let n=document.createRange();n.selectNode(e),window.getSelection().removeAllRanges(),window.getSelection().addRange(n),window.requestAnimationFrame(()=>document.execCommand("formatBlock",null,"div"))}_insertLink(){const t=this.getSelectedNodeByTagName("A"),e=window.prompt("Please type in a link",t?t.href:"https://");if(null!==e)return""===e?document.execCommand("unlink",!1):void document.execCommand("createLink",!1,e)}_getParentNodeTree(t){const e=new Set;for(;t&&!(t&&t.hasAttribute&&t.hasAttribute("contenteditable"));)e.add(t),t=t.parentElement;return e}get selectedNodes(){if(!this._range)return new Set;return new Set([...this._getParentNodeTree(this._range.startContainer),...this._getParentNodeTree(this._range.commonAncestorContainer),...this._getParentNodeTree(this._range.endContainer)])}get selectedTagNames(){const t=this.selectedNodes,e=new Set;return t.forEach(t=>{t.tagName&&e.add(t.tagName)}),e}getSelectedNodeByTagName(t){let e;return this.selectedNodes.forEach(n=>{n.tagName===t&&(e=n)}),e}}window.customElements.define("slicesui-formatting-bar",w)}}]);
//# sourceMappingURL=22eb0233c1f8d0075e8c.js.map