@creaditor/newsletter-starterkit/dist/2543.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([[2543],{62543:(t,e,i)=>{i.r(e),i.d(e,{ListPicker:()=>a});var l=i(56666),s=i(21293),r=(i(70235),i(27338));class a extends s.oi{constructor(){super(),(0,l.Z)(this,"inputRef",(0,r.V)()),(0,l.Z)(this,"modalRef",(0,r.V)()),this.level=0,this.storage={},this.filtered=[],this.dispatch=this.dispatch.bind(this)}disconnectedCallback(){super.disconnectedCallback()}connectedCallback(){super.connectedCallback(),this.storage[0]||(this.storage={0:[...this.list]}),this.createdEvent=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0})}findSelected(){if(this.selected){const t=(e,i)=>{for(const l of e){if(l.value===this.selected)return this.level=i,this.storage[i]=[...e],!0;if(l.children&&t(l.children,i+1))return!0}return!1};t(this.storage[0],0)}}onSearch(t){const e=t.target.value;if(""===e)return void(this.filtered=[]);const i=function(t){let l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,s=[];for(const r of t){if(r.label.toLowerCase().includes(e.toLowerCase())){let t=s.find((t=>t.parentLabel===l));t||(t={parentLabel:l,items:[]},s.push(t)),t.items.push(r)}r.children&&(s=s.concat(i(r.children,r.label)))}return s};this.filtered=i(this.storage[0])}close(){this.opened=!1,this.modalRef.value?.close()}dispatch(t){this.value=t,this.dispatchEvent(this.createdEvent),this.inputRef&&this.inputRef.value&&(this.inputRef.value.value=""),this.close(),this.filtered=[]}updated(t){t.has("selected")&&this.findSelected()}render(){const t=s.dy`${(t=>this.filtered&&this.filtered.length>0?this.filtered.map((t=>{let{items:e,parentLabel:i}=t;return s.dy`<h3
              style="font-size:16px;text-align:var(--text-align-locale)"
            >
              ${i}
            </h3>
            ${e.map((t=>s.dy` <cdtr-dropdown-item
                class="${t.value===this.selected?"selected":""}"
                @click=${()=>this.dispatch(t.value)}
                .value="${t.value}"
                ><cdtr-row class="animate">
                  ${t.value===this.selected?" ✓ ":""}${" "}
                  <lang-text text="${t.label}"></lang-text>
                </cdtr-row>
              </cdtr-dropdown-item>`))}
            <cdtr-divider></cdtr-divider>`})):t.map((t=>t.children&&t.children.length>0?s.dy`
            <cdtr-dropdown-item
              class="slideFromLeft"
              @click=${()=>{this.level++,this.storage[this.level]=[...t.children],this.list=t.children}}
              .notClickable=${!0}
            >
              <cdtr-row
                class="animate"
                alignItems="center"
                justify="space-between"
                style="min-width:0;padding:2px;width:100%;display:flex;align-items:center;justify-content:space-between;"
              >
                <lang-text text="${t.label}"></lang-text>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  width="20"
                  fill="currentColor"
                >
                  <path
                    fill="#000"
                    d="M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z"
                  ></path>
                </svg>
              </cdtr-row>
            </cdtr-dropdown-item>
          `:s.dy`<cdtr-dropdown-item
            class="slideFromLeft ${t.value===this.selected?"selected":""}"
            @click=${()=>this.dispatch(t.value)}
            .value="${t.value}"
            ><cdtr-row class="animate">
              ${t.value===this.selected?" ✓ ":""}${" "}
              <lang-text text="${t.label}"></lang-text>
            </cdtr-row>
          </cdtr-dropdown-item>`)))(this.filtered.length>0?this.filtered:this.storage[this.level])}`,e=s.dy`<cdtr-row
        slot="header"
        class="header"
        justify="flex-start"
      >
        ${this.level>0?s.dy` <paper-button
              @click=${t=>{this.level--,this.level<0?(this.level=0,this.list=this.storage[this.level],this.close()):this.list=this.storage[this.level]}}
            >
              <cdtr-arrow-icon></cdtr-arrow-icon>
              <cdtr-title>
                <lang-text
                  style="font-weight:700;"
                  text="${this.level>0?"go_back":"close"}"
                ></lang-text>
              </cdtr-title>
            </paper-button>`:""}
        ${0===this.level?s.dy`<cdtr-col sm="12"
                ><h3
                  style="padding:0 3px;text-align:var(--text-align-locale);font-size:20px !important;"
                >
                  <lang-text text="${this.heading}"></lang-text>
                </h3>
              </cdtr-col>`:""}
        ${this.hasSearch&&s.dy`<cdtr-input
          ${(0,r.i)(this.inputRef)}
          placeholder="search"
          @input=${this.onSearch}
          style="width:100%"
        ></cdtr-input>`}
      </cdtr-row>
      <div style="direction:var(--direction);" slot="content">${t}</div>`;return this.hasModal?s.dy` <cdtr-draggable-box
      ${(0,r.i)(this.modalRef)}
      style="direction:var(--direction);"
      .height=${this.height||300}
      .left=${this.left}
      .top=${this.top}
      .opened=${this.opened}
    >
      <cdtr-dropdown-button
        style="min-width:0;width:100%;display:block;"
        slot="trigger"
        ><lang-text text="${this.title}"></lang-text
      ></cdtr-dropdown-button>
      ${e}
    </cdtr-draggable-box>`:e}}(0,l.Z)(a,"styles",s.iv`
    .selected {
      background: #f1f1f1 !important;
      border-radius: 5px;
      display: block;
    }
    .slideFromLeft {
      animation: slideFromLeft 0.2s ease-in-out;
      display: block;
    }
    @keyframes slideFromLeft {
      from {
        transform: translateX(-10%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
      }
    }
  `),(0,l.Z)(a,"properties",{value:{type:String,reflect:!1},title:{type:String,reflect:!1},heading:{type:String},list:{type:Array},level:{type:Number},left:{type:String},top:{type:String},opened:{type:Boolean},hasModal:{type:Boolean},hasSearch:{type:Boolean},selected:{type:String},height:{type:Number},filtered:{type:Array}}),customElements.define("cdtr-list-picker",a)}}]);