@creaditor/newsletter-starterkit/dist/6588.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([[6588],{76588:(e,t,i)=>{i.r(t),i.d(t,{Input:()=>r});var n=i(56666),s=i(21293),a=i(70143),o=i(27338);class r extends s.oi{constructor(){super(),(0,n.Z)(this,"inputRef",(0,o.V)()),(0,n.Z)(this,"sliderRef",(0,o.V)()),(0,n.Z)(this,"sliderRefX",(0,o.V)()),this.min=0,this.max=100,this.step=1,this.autofocus=!1,this.type="number",this.value="number"===this.type?"0":"",this.placeholder="",this.onMouseDown=this.onMouseDown.bind(this),this.onChangeValue=this.onChangeValue.bind(this)}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)}getFloatCtrl(e){return parseFloat(e.value)}getIntCtrl(e){return parseInt(e.value)}onMouseDown(e){const t=e.clientX;let i=this.getFloatCtrl(this);isNaN(i)&&(i=0);const n=e=>{var n=Math.ceil(e.clientX-t);this.scaledIntCtrl(i,n)},s=()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",s)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",s)}scaledIntCtrl(e,t){const i=this.max,n=this.min;var s=e+Math.round(Math.sign(t)*Math.pow(Math.abs(t)/10,1.6));if(s<=parseInt(i)&&s>=parseInt(n)){this.value=s;var a=new UIEvent("input",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(a)}}onChangeValue(e){this.value=e.target.value}mouseCtrl(){const e=this.sliderRef.value,t=this.sliderRefX.value;e?.addEventListener("mousedown",this.onMouseDown),t?.addEventListener("mousedown",this.onMouseDown)}render(){return s.dy`<form class="form" @submit=${this.onSubmit}>
      <input
        ${(0,o.i)(this.inputRef)}
        style="${this.inputStyle}"
        .autofocus="${this.autofocus}"
        .placeholder="${this.placeholder}"
        @input="${this.setValue}"
        @change="${this.setValue}"
        .min="${String(this.min)}"
        .type="${this.type}"
        .max="${String(this.max)}"
        .step="${String(this.step)}"
        .value="${String(this.value)}"
      />${"text"===this.type&&this.maxLength?s.dy`<span class="counter"
            >${this.value.length}/${this.maxLength}</span
          > `:null}
      <span
        @input=${this.onChangeValue}
        ${(0,o.i)(this.sliderRef)}
        class="slider"
      ></span>
      <span
        @input=${this.onChangeValue}
        ${(0,o.i)(this.sliderRefX)}
        class="slider-x"
      ></span>
    </form>`}firstUpdated(){this.autofocus&&this.inputRef.value.focus()}focus(){super.focus(),this.inputRef.value.focus()}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.mouseCtrl(),this.setDir()}),50)}disconnectedCallback(){super.disconnectedCallback()}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.setDir(),this.value){const t=new UIEvent(e.type,{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(t)}}setDir(){const e=this.inputRef.value,t=this.value||e?.placeholder;e&&("number"===this.type||"color"===this.type||t&&!(0,a.Z)(t)?(e.style.textAlign="left",e.style.direction="ltr"):(e.style.textAlign="right",e.style.direction="rtl"))}patch(e){this.value=e}}(0,n.Z)(r,"styles",s.iv`
    :host {
      display: inline-block;
      --cdtr-input-height: 30px;
      --cdtr-input-padding: 0.105rem 0.45rem;
    }
    .form {
      position: relative;
    }
    .counter {
      font-size: 10px;
    }
    .slider {
      display: block;
      height: 100%;
      width: 4px;
      position: absolute;
      left: 100%;
      background: transparent;
      top: 0;
      cursor: w-resize;
    }
    .slider-x {
      display: block;
      height: 4px;
      width: 100%;
      position: absolute;
      left: 0;
      background: transparent;
      top: 100%;
      cursor: col-resize;
    }
    input {
      height: var(--cdtr-input-height);
      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;
    }
    input:hover {
      border-color: black;
    }
    input::placeholder {
      font-family: var(--font-family);
    }
    input:focus {
      border-color: var(--primary);
    }
    input[type="number"] {
      padding-right: 0px;
      padding-left: 4px;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }
  `),(0,n.Z)(r,"properties",{value:{type:String,reflect:!0},step:{type:Number,reflect:!0},min:{type:Number,reflect:!0},max:{type:Number,reflect:!0},placeholder:{type:String,reflect:!0},autofocus:{type:Boolean,reflect:!0},inputStyle:{type:String,reflect:!0},maxLength:{type:Number}}),customElements.define("cdtr-number-input",r)}}]);