@creaditor/newsletter-starterkit/dist/7804.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([[7804],{77804:(e,t,i)=>{i.r(t),i.d(t,{TextArea:()=>r});var s=i(56666),n=i(21293),a=i(70143),l=i(27338),o=i(70235);class r extends n.oi{constructor(){super(),(0,s.Z)(this,"inputRef",(0,l.V)()),this.minlength=0,this.maxlength=250,this.autofocus=!1,this.value="",this.autoComplete="off",this.placeholder="",this.fullWidth=!1,this.rows=5}onSubmit(e){e.preventDefault();const t=new UIEvent("submit",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(t)}onFocus(){const e=new UIEvent("focus",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(e)}onBlur(){const e=new UIEvent("blur",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(e)}render(){this.fullWidth&&(this.style.width="100%");const e=o.h.get("lang",this.placeholder)||this.placeholder||"";return n.dy`<form @submit=${this.onSubmit}>
      <textarea
        ${(0,l.i)(this.inputRef)}
        style="${this.inputStyle}"
        .autofocus="${this.autofocus}"
        .placeholder="${e}"
        @input="${this.setValue}"
        @change="${this.setValue}"
        .minlength="${this.minlength}"
        .maxlength="${this.maxlength}"
        .autocomplete="${this.autoComplete}"
        .value="${String(this.value)}"
        .name=${this.name}
        .rows=${this.rows}
        .cols=${this.cols}
      ></textarea
      >${this.maxlength?n.dy`<span class="counter"
            >${this.value.length}/${this.maxlength}</span
          > `:null}
    </form>`}firstUpdated(){setTimeout((()=>{this.autofocus&&this.inputRef.value.focus()}),200)}focus(){super.focus(),this.inputRef.value.focus()}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.setDir()}),50)}setValue(e){if(!this.inputRef.value)return;const t=this.inputRef.value;if(this.max&&t.value.length>this.max)return t.value=this.value,void this.inputRef.value.focus();if(this.value=t.value,this.value){this.setDir();const t=new UIEvent(e.type,{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(t)}}setDir(){const e=this.inputRef.value;e&&(!this.value||(0,a.Z)(this.value)?(e.style.textAlign="right",e.style.direction="rtl"):(e.style.textAlign="left",e.style.direction="ltr"))}patch(e){this.value=e}}(0,s.Z)(r,"styles",n.iv`
    :host {
      display: inline-block;
      --cdtr-input-height: 30px;
      --cdtr-input-padding: 0.105rem 0.45rem;
    }
    .counter {
      font-size: 10px;
    }
    textarea {
      display: inline-block;
      width: 100%;
      padding: var(--cdtr-input-padding);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      margin: 0;
      font-family: var(--font-family);
      border-color: var(--input-border-color);
      outline: var(--input-border-color);
      box-sizing: border-box;
    }
    textarea:hover {
      border-color: black;
    }
    textarea::placeholder {
      font-family: var(--font-family);
    }
    textarea:focus {
      border-color: var(--primary);
    }
  `),(0,s.Z)(r,"properties",{value:{type:String,reflect:!0},autoComplete:{type:String},maxlength:{type:Number},fullWidth:{type:Boolean},minlength:{type:Number},disabled:{type:Boolean},readonly:{type:Boolean},rows:{type:Number},name:{type:String},cols:{type:Number},placeholder:{type:String,reflect:!0},autofocus:{type:Boolean,reflect:!0},inputStyle:{type:String,reflect:!0}}),customElements.define("cdtr-textarea",r)}}]);