text: (()=>{"use strict";const n=Symbol("shRoot");class t extends HTMLElement{constructor(){super(),this._bind=!1,this[n]=this.attachShadow({mode:"closed"}),this[n].innerHTML='\n      <style>:host {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: all .15s ease-in-out .1s;\r\n  position: relative;\r\n}\r\n:host([show]) {\r\n  visibility: visible !important;\r\n  opacity: 1 !important;\r\n}\r\n\r\n#backdrop {\r\n  width: 100%;\r\n  height:100vh;\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  background-color: rgba(0,0,0,0.7);\r\n  /* display: flex;\r\n  align-items: center;\r\n  justify-content: center; */\r\n  visibility: hidden;\r\n  opacity: 0;\r\n}\r\n.container {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  width: 700px;\r\n  max-width: 95%;\r\n  box-sizing: border-box;\r\n  box-shadow: 0 0 6px rgba(0,0,0,0.3);\r\n  padding: 1rem;\r\n  border-radius: 5px;\r\n  position: fixed;\r\n  left: 50%;\r\n  top: 50%;\r\n  background-color: var(--white, var(--default-white));\r\n  transform: translate(-50%, -150%);\r\n  transition: all 150ms ease-out;\r\n}\r\n:host([show]) .container {\r\n  transform: translate(-50%, -50%);\r\n  visibility: visible !important;\r\n  opacity: 1 !important;\r\n  transition: \r\n    opacity 150ms ease-out,\r\n    transform 200ms ease-out .1s;\r\n}\r\n\r\n:host([show]) #backdrop {\r\n  visibility: visible !important;\r\n  opacity: 1 !important;\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-bottom: 10px;\r\n}\r\nheader button {\r\n  position: absolute;\r\n  right: 5px;\r\n  top: 5px;\r\n  font-family: sans-serif;\r\n  height: 30px;\r\n  width: 30px;\r\n  background-color: transparent;\r\n  border: none;\r\n  font-size: 2rem;\r\n  cursor: pointer;\r\n  user-select: none;\r\n}</style>\n      <div id="backdrop"></div>\n      <div class="container">\n        <header>\n          <slot name="header"></slot>\n          <button id="closeBtn">&times;</button>\n        </header>\n        <slot></slot>\n      </div>\n    '}connectedCallback(){this._bind=this.hasAttribute("bind"),this[n].getElementById("closeBtn").addEventListener("click",this.close),this[n].getElementById("backdrop").addEventListener("click",this.close)}close=n=>{void 0!==n?n.target===n.currentTarget&&(this._bind?this.removeAttribute("show"):this.dispatchEvent(new Event("close"))):this.removeAttribute("show")};open=()=>{this.setAttribute("show","")}}const r=t,i="25rem",e="80%";class o extends HTMLElement{constructor(){super(),this._backdrop=this.hasAttribute("backdrop"),this._width=this.hasAttribute("width")?this.getAttribute("width"):i,this._maxWidth=this.hasAttribute("width")?"inherit":e,this._shadowRoot=this.attachShadow({mode:"closed"}),this._shadowRoot.innerHTML=`\n      <style>* {\r\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,\r\n    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;\r\n  box-sizing: border-box;\r\n}\r\n#backdrop {\r\n  width: 100%;\r\n  height: 100vh;\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n  visibility: hidden;\r\n  opacity: 0;\r\n}\r\n:host([open]) #backdrop {\r\n  animation-name: fadeIn;\r\n  animation-duration: 0.2s;\r\n  animation-timing-function: ease-in-out;\r\n  animation-fill-mode: forwards;\r\n}\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n}\r\naside {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100vh;\r\n  background: white;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n  z-index: 200;\r\n  transition: width 0.3s ease-in-out;\r\n  /* padding-top: 3rem; */\r\n  transition: transform 0.3s ease-in-out;\r\n}\r\nsection {\r\n  overflow: hidden;\r\n}\r\n:host(:not([open])) aside {\r\n  /* width: 0 !important; */\r\n  transform: translate(-100%, 0);\r\n  transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n:host([dir="rtl"]) aside {\r\n  left: initial;\r\n  right: 0;\r\n}\r\n:host([dir="rtl"]:not([open])) aside {\r\n  transform: translate(100%, 0);\r\n  transition: transform 0.3s ease-in-out;\r\n}\r\n#button {\r\n  display: block;\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 0;\r\n  z-index: 201;\r\n  transform: translate(calc(100% + 10px), 0);\r\n  transition: all 0.2s ease-in-out;\r\n}\r\nbutton {\r\n  outline: none;\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n  box-sizing: border-box;\r\n}\r\n:host([open]) #button {\r\n  right: 10px;\r\n}\r\n:host([dir="rtl"]) #button {\r\n  left: 0;\r\n  right: initial;\r\n  transform: translate(calc(-100% - 10px), 0);\r\n}\r\n:host([open][dir="rtl"]) #button {\r\n  left: 10px;\r\n}\r\n\r\n#burger-icon {\r\n  display: block;\r\n  padding: 0.5rem 0.75rem;\r\n  font-size: 1rem;\r\n  font-weight: bold;\r\n  color: #aaa;\r\n  border: 1px solid #ccc;\r\n  border-radius: 3px;\r\n  background-color: white;\r\n  -webkit-background-clip: padding-box;\r\n  background-clip: padding-box;\r\n  transition: all 0.2s ease-in-out;\r\n}\r\n\r\n#burger-icon:after {\r\n  content: "\\2630";\r\n}\r\n:host([open]) #button {\r\n  transform: translate(0, 0);\r\n}\r\n:host([open]) #burger-icon:after {\r\n  content: "\\2715";\r\n}\r\n\r\n#burger-icon:hover {\r\n  border: 1px solid transparent;\r\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\r\n}\r\n\n        aside {\n          width: ${this._width};\n          max-width: ${this._maxWidth};\n        }\n      </style>\n      ${this.backdrop??'<div id="backdrop" style="visibility: hidden"></div>'}\n      <aside>\n        <span id="button">\n          <slot name="button">\n            <button id="burger-btn">\n              <span id="burger-icon" />\n            </button>\n          </slot>\n        </span>\n\n        <slot />\n      </aside>\n    `}connectedCallback(){this._shadowRoot.getElementById("backdrop").addEventListener("click",this.toggle.bind(this,!1,!0)),this._shadowRoot.getElementById("burger-btn").addEventListener("click",this.toggle.bind(this,void 0,!1))}toggle(n,t,r){if(t&&r.currentTarget!==r.target)return;const i="boolean"==typeof n?n:!this.hasAttribute("open");console.log({shouldShow:i,show:n,hasAttribute:this.hasAttribute("open")}),i?this.setAttribute("open",""):this.removeAttribute("open"),this.dispatchEvent(new Event("change"))}}window.customElements.define("u-modal",r),window.customElements.define("u-side-drawer",o)})();