@creaditor/newsletter-starterkit/dist/4648.creaditor.bundle.js

Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters

"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[4648],{24648:(e,t,i)=>{i.r(t),i.d(t,{Drawer:()=>a});var o=i(56666),s=i(21293),n=i(49120);class a extends s.oi{constructor(){super(),this.clone,this.backdropColor="transparent",this.width="600px",this.obKeyDown=this.obKeyDown.bind(this),this.closeEvent=new UIEvent("close",{view:window,bubbles:!0,cancelable:!0}),this.openEvent=new UIEvent("open",{view:window,bubbles:!0,cancelable:!0}),this.close=this.onClose}onClickOutside(e){let{target:t}=e;t.closest(".drawer")||t.closest("cdtr-drawer")||this.onClose()}onClose(){const e=this.shadowRoot.querySelector(".drawer");e&&e.classList.add("slide-out"),setTimeout((()=>{this.dispatchEvent(this.closeEvent),e&&e.classList.remove("slide-out"),this.opened=!1,this.requestUpdate()}),200)}obKeyDown(e){"Escape"===e.key?this.onClose():"m"===e.key&&e.ctrlKey&&this.dispatchEvent(this.openEvent)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.obKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.obKeyDown)}render(){return this.style.zIndex=(0,n.Z)(),this.opened?s.dy`<div 
          @dragover=${e=>{e.preventDefault(),this.onClose()}}
          @mousedown=${this.onClickOutside}
          .style="background:${this.backdropColor};z-index:${(0,n.Z)()};${this.backdropStyle};"
          class="backdrop ${this.dim?"dim":"no-dim"}"
        >
          <div
            @dragover=${e=>{e.preventDefault(),e.stopPropagation()}}
            style="width:${this.width};z-index:${(0,n.Z)()+1}"
            class="drawer" role="navigation"
          >
            <div class="header">
              <paper-button
                @click=${this.onClose}
                style="padding:6px;z-index:3;position:absolute;left:0;min-width:20px;"
              >
                <cdtr-close-icon class="close-icon" icon="close">
                </cdtr-close-icon>
              </paper-button>
              <h1 class="header-text">
                <lang-text text="${this.headerText}"></lang-text>
              </h1>
            </div>
            <div class="body">
              <slot></slot>
            </div>
          </div>
        </div>`:null}}(0,o.Z)(a,"styles",s.iv`
    .backdrop {
      width: 100vw;
      height: 100vh;
      background: transparent;
      position: fixed;
      left: 0;
      top: 0;
    }
    .dim {
      display: none !important;
    }
    .header-text {
      margin: 12px;
      font-size: 18px;
      font-family: Arial;
      text-align: right;
      display: block;
      width: 95%;
      position: absolute;
      top: 0;
      left: 0;
      direction: var(--direction-locale);
    }
    .drawer {
      width: ${500}px;
      height: 100vh;
      background: #fff;
      position: absolute;
      right: 0;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      -webkit-animation: slide-in 0.5s forwards;
      -webkit-animation-delay: 2s;
      animation: slide-in 0.5s forwards;
    }
    .slide-out {
      -webkit-animation: slide-out 0.5s forwards;
      -webkit-animation-delay: 2s;
      animation: slide-out 0.5s forwards;
    }
    .header {
      min-height: 40px;
      margin: 1px;
      width: 100%;
      padding: 4.4px 0;
      box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }
    .body {
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    .close-button {
      cursor: pointer;
    }
    .close-button:hover {
      -webkit-animation: rotate 0.5s forwards;
      -webkit-animation-delay: 2s;
      animation: rotate 0.5s forwards;
    }
    @keyframes rotate {
      100% {
        transform: rotate(180deg);
      }
    }
    @-webkit-keyframes slide-in {
      100% {
        transform: rotate(180deg);
      }
    }
    @keyframes slide-in {
      0% {
        opacity: 0;
        right: -${500}px;
      }
      100% {
        right: 0;
      }
    }
    @-webkit-keyframes slide-out {
      100% {
        transform: rotate(180deg);
      }
    }
    @keyframes slide-out {
      0% {
        opacity: 1;
        right: 0;
      }
      100% {
        right: -${500}px;
      }
    }
  `),(0,o.Z)(a,"properties",{portal:{type:Object},opened:{type:Boolean,reflect:!0},backdropColor:{type:String},width:{type:String},headerText:{type:String},backdropStyle:{},dim:{type:Boolean,reflect:!0}}),customElements.define("cdtr-drawer",a)}}]);