@creaditor/newsletter-starterkit/dist/4807.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([[4807],{54807:(t,e,o)=>{o.r(e),o.d(e,{BackgroundEditorPlugin:()=>r});var d=o(56666),n=o(21293);class r extends n.oi{constructor(){super(),this.backgroundAttachment="local",this.backgroundPosition="center",this.attachmentList=[{value:"local",label:"Local"},{value:"fixed",label:"Fixed"},{value:"scroll",label:"Scroll"}];this.positionList=[{value:"center",label:"Center"},{value:"top",label:"Top"},{value:"bottom",label:"Bottom"},{value:"left",label:"left"}],this.repeatList=[{value:"repeat",label:"Repeat"},{value:"repeat-x",label:"Repeat-X"},{value:"repeat-y",label:"Repeat-Y"},{value:"no-repeat",label:"No-Repeat"}],this.sizeList=[{value:"auto",label:"Auto"},{value:"cover",label:"Cover"},{value:"contain",label:"Contain"}]}onChangePosition(t){const e=t.target.value;this.backgroundPosition=e;const o={detail:{key:"backgroundPosition",value:e},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("change",o))}onChangeSize(t){const e=t.target.value;this.backgroundSize=e;const o={detail:{key:"backgroundSize",value:e},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("change",o))}onChangeType(t){const e=t.target.value;this.backgroundAttachment=e;const o={detail:{key:"backgroundAttachment",value:e},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("change",o))}onChangerReapet(t){const e=t.target.value;this.backgroundRepeat=e;const o={detail:{key:"backgroundRepeat",value:e},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("change",o))}render(){return n.dy` <cdtr-divider></cdtr-divider>
      <cdtr-row mt="1" alignItems="center">
        <cdtr-col>
          <cdtr-title><lang-text text="type"></lang-text></cdtr-title>
        </cdtr-col>
        <cdtr-col>
          <cdtr-row justify="flex-end">
            <cdtr-dropdown @change=${this.onChangeType}>
              <cdtr-dropdown-button
                minWidth=${100}
                class=" dropdown-button"
                slot="trigger"
                ><lang-text text="${this.backgroundAttachment}"></lang-text>
              </cdtr-dropdown-button>
              <div slot="content">
                ${this.attachmentList.map((t=>n.dy`<cdtr-dropdown-item
                    .focused=${t.value===this.backgroundAttachment}
                    .selected=${t.value===this.backgroundAttachment}
                    value="${t.value}"
                    ><lang-text text="${t.label}"></lang-text>
                  </cdtr-dropdown-item>`))}
              </div>
            </cdtr-dropdown>
          </cdtr-row>
        </cdtr-col>
      </cdtr-row>
      <cdtr-row mt="1" alignItems="center">
        <cdtr-col>
          <cdtr-title><lang-text text="position"></lang-text></cdtr-title>
        </cdtr-col>
        <cdtr-col>
          <cdtr-row justify="flex-end">
            <cdtr-dropdown @change=${this.onChangePosition}>
              <cdtr-dropdown-button
                minWidth=${100}
                class=" dropdown-button"
                slot="trigger"
                ><lang-text text="${this.backgroundPosition}"></lang-text>
              </cdtr-dropdown-button>
              <div slot="content">
                ${this.positionList.map((t=>n.dy`<cdtr-dropdown-item
                    .focused=${t.value===this.backgroundPosition}
                    .selected=${t.value===this.backgroundPosition}
                    value="${t.value}"
                    ><lang-text text="${t.value}"></lang-text>
                  </cdtr-dropdown-item>`))}
              </div>
            </cdtr-dropdown>
          </cdtr-row>
        </cdtr-col>
      </cdtr-row>
      <cdtr-row mt="1" alignItems="center">
        <cdtr-col>
          <cdtr-title><lang-text text="repeat"></lang-text></cdtr-title>
        </cdtr-col>
        <cdtr-col>
          <cdtr-row justify="flex-end">
            <cdtr-dropdown @change=${this.onChangerReapet}>
              <cdtr-dropdown-button
                minWidth=${100}
                class=" dropdown-button"
                slot="trigger"
                ><lang-text text="${this.backgroundRepeat}"></lang-text>
              </cdtr-dropdown-button>
              <div slot="content">
                ${this.repeatList.map((t=>n.dy`<cdtr-dropdown-item
                    .focused=${t.value===this.backgroundRepeat}
                    .selected=${t.value===this.backgroundRepeat}
                    value="${t.value}"
                    ><lang-text text="${t.label}"></lang-text>
                  </cdtr-dropdown-item>`))}
              </div>
            </cdtr-dropdown>
          </cdtr-row>
        </cdtr-col>
      </cdtr-row>
      <cdtr-row mt="1" alignItems="center">
        <cdtr-col>
          <cdtr-title><lang-text text="size"></lang-text></cdtr-title>
        </cdtr-col>
        <cdtr-col>
          <cdtr-row justify="flex-end">
            <cdtr-dropdown @change=${this.onChangeSize}>
              <cdtr-dropdown-button
                minWidth=${100}
                class="dropdown-button"
                slot="trigger"
                ><lang-text text="${this.backgroundSize}"></lang-text>
              </cdtr-dropdown-button>
              <div slot="content">
                ${this.sizeList.map((t=>n.dy`<cdtr-dropdown-item
                    .focused=${t.value===this.backgroundSize}
                    .selected=${t.value===this.backgroundSize}
                    value="${t.value}"
                    ><lang-text text="${t.label}"></lang-text>
                  </cdtr-dropdown-item>`))}
              </div>
            </cdtr-dropdown>
          </cdtr-row>
        </cdtr-col>
      </cdtr-row>`}}(0,d.Z)(r,"properties",{backgroundAttachment:{type:String},backgroundPosition:{type:String},backgroundRepeat:{type:String},backgroundSize:{type:String}}),(0,d.Z)(r,"styles",n.iv`
    .dropdown-button {
      min-width: 100px;
    }
  `),customElements.get("background-editor-plugin")||customElements.define("background-editor-plugin",r)}}]);