@creaditor/newsletter-starterkit/dist/5985.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([[5985],{55985:(t,e,r)=>{r.r(e),r.d(e,{BackgroundHandleBar:()=>n});var o=r(56666),i=r(21293);class n extends i.oi{constructor(){super()}onRemove(){const t={detail:this.closest(this.target),bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("remove",t))}onClone(){const t={detail:this.closest(this.target),bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("clone",t))}render(){return i.dy`<cdtr-row
      alignItems="center"
      justify="space-evenly"
      class="wrapper"
    >
      ${this.sectionCounter>1?i.dy` <cdtr-tooltip content="drag_section">
            <paper-button class="section-handle--sortable">
              <!-- TODO: if ok move the svg to component -->
              <svg
                width="30"
                height="30"
                viewBox="0 0 24 27"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  x="0.5"
                  y="7.5"
                  width="23"
                  height="11"
                  rx="0.5"
                  fill="white"
                  stroke="var(--primary)"
                />
                <rect
                  x="2.58691"
                  y="9.1001"
                  width="11.5217"
                  height="3"
                  rx="0.5"
                  fill="var(--primary)"
                  stroke="var(--primary)"
                />
                <rect
                  x="2.58691"
                  y="13.8999"
                  width="11.5217"
                  height="3"
                  rx="0.5"
                  fill="var(--primary)"
                  stroke="var(--primary)"
                />
                <rect
                  x="16.1522"
                  y="16.8999"
                  width="7.8"
                  height="5.26087"
                  rx="0.5"
                  transform="rotate(-90 16.1522 16.8999)"
                  fill="var(--primary)"
                  stroke="var(--primary)"
                />
                <path
                  d="M12.5607 3.61923V5.7955C12.5607 6.01641 12.3816 6.1955 12.1607 6.1955H11.0282C10.8073 6.1955 10.6282 6.01641 10.6282 5.7955V3.61923C10.6282 3.39831 10.4491 3.21923 10.2282 3.21923H9.05457C8.68646 3.21923 8.51378 2.76398 8.78929 2.51985L11.362 0.240229C11.5159 0.103877 11.7481 0.106388 11.899 0.246037L14.3622 2.52566C14.6292 2.77281 14.4544 3.21923 14.0905 3.21923H12.9607C12.7398 3.21923 12.5607 3.39831 12.5607 3.61923Z"
                  fill="black"
                />
                <path
                  d="M10.5509 22.5763V20.4001C10.5509 20.1791 10.73 20.0001 10.9509 20.0001H12.0834C12.3043 20.0001 12.4834 20.1791 12.4834 20.4001V22.5763C12.4834 22.7972 12.6625 22.9763 12.8834 22.9763H14.057C14.4251 22.9763 14.5978 23.4316 14.3223 23.6757L11.7496 25.9553C11.5957 26.0917 11.3635 26.0892 11.2126 25.9495L8.7494 23.6699C8.48234 23.4227 8.65722 22.9763 9.02109 22.9763H10.1509C10.3718 22.9763 10.5509 22.7972 10.5509 22.5763Z"
                  fill="black"
                />
              </svg>
            </paper-button>
          </cdtr-tooltip>`:null}

      <cdtr-tooltip content="settings">
        <paper-button>
          <cdtr-setting-icon></cdtr-setting-icon>
        </paper-button>
      </cdtr-tooltip>
      ${this.sectionCounter>1?i.dy` <cdtr-tooltip content="delete_section">
            <paper-button @click=${this.onRemove}>
              <cdtr-remove-icon
                width=${"20"}
                height=${"20"}
              ></cdtr-remove-icon>
            </paper-button>
          </cdtr-tooltip>`:null}
    </cdtr-row>`}}(0,o.Z)(n,"properties",{target:{type:String},sectionCounter:{type:Number}}),(0,o.Z)(n,"styles",i.iv`
    :host {
      position: absolute;
      top: 0;
      right: 0;
      height: fit-content;
      background: transparent;
      z-index: 20;
      display: flex;
      align-items: center;
      width: 24px;
    }

    .wrapper {
      top: 0;
      right: 0;
      padding: 5px;
      height: 100%;
      width: 25px;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      transform: translate(70%, 0);
      background: #fff;
      border-radius: 0.2rem;
      min-height: 90px;
    }
    paper-button {
      padding: 0.2rem;
      min-width: auto;
      display: block;
      margin: auto;
    }
  `),customElements.define("cdtr-background-handle-bar",n)}}]);