@creaditor/newsletter-starterkit/dist/6308.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([[6308],{36308:(t,e,i)=>{i.r(e),i.d(e,{AlignGroup:()=>s});var l=i(56666),r=i(21293);class s extends r.oi{constructor(){super(),this.onClick=this.onClick.bind(this),this.justify="center"}onClick(t){const e=t.target.closest("[data-align]");if(e){const t={detail:e.getAttribute("data-align"),bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("change",t))}}render(){return r.dy` <cdtr-row justify="${this.justify}">
      <paper-button
        class="${"flex-start"===this.value?"selected":null}"
        @click=${this.onClick}
        data-align="flex-start"
      >
        <cdtr-tooltip delay="100" content="top">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="20"
            viewBox="0 0 28 20"
            fill="none"
          >
            <rect width="27" height="2" rx="1" fill="#C4C4C4" />
            <rect x="6" y="4" width="15" height="4" rx="2" fill="black" />
          </svg>
        </cdtr-tooltip>
      </paper-button>
      <paper-button
        class="${"center"===this.value?"selected":null}"
        @click=${this.onClick}
        data-align="center"
      >
        <cdtr-tooltip delay="100" content="center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="27"
            height="21"
            viewBox="0 0 27 21"
            fill="none"
          >
            <rect
              x="27"
              y="21"
              width="27"
              height="2"
              rx="1"
              transform="rotate(-180 27 21)"
              fill="#C4C4C4"
            />
            <rect
              x="27"
              y="2"
              width="27"
              height="2"
              rx="1"
              transform="rotate(-180 27 2)"
              fill="#C4C4C4"
            />
            <rect x="6.5" y="8.5" width="15" height="4" rx="2" fill="black" />
          </svg>
        </cdtr-tooltip>
      </paper-button>
      <paper-button
        class="${"flex-end"===this.value?"selected":null}"
        @click=${this.onClick}
        data-align="flex-end"
      >
        <cdtr-tooltip delay="100" content="bottom">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="20"
            viewBox="0 0 28 20"
            fill="none"
          >
            <rect
              x="28"
              y="20"
              width="27"
              height="2"
              rx="1"
              transform="rotate(-180 28 20)"
              fill="#C4C4C4"
            />
            <rect
              x="22"
              y="16"
              width="15"
              height="4"
              rx="2"
              transform="rotate(-180 22 16)"
              fill="black"
            />
          </svg>
        </cdtr-tooltip>
      </paper-button>
    </cdtr-row>`}}(0,l.Z)(s,"styles",r.iv`
    :host {
      direction: ltr;
    }
    paper-button {
      min-width: auto;
    }
    rect[fill="black"] {
      fill: var(--primary);
    }
    .selected {
      background: #f1f3f5;
    }
  `),(0,l.Z)(s,"properties",{value:{type:Number},justify:{type:String}}),customElements.define("cdtr-align-items-group",s)}}]);