@creaditor/newsletter-starterkit/dist/9476.creaditor.bundle.js

Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters

/*! For license information please see 9476.creaditor.bundle.js.LICENSE.txt */
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[9476],{99476:(e,t,i)=>{i.r(t),i.d(t,{Resizeable:()=>h});var n=i(56666),o=i(21293),r=i(27338);i(3959),i(58860);class h extends o.oi{constructor(){super(),(0,n.Z)(this,"handleRef",(0,r.V)()),this.isDragging=!1,this.height=200,this.resize=this.resize.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onResizeEvent=new UIEvent("resize",{view:window,bubbles:!0,cancelable:!0}),this.finishedEvent=new UIEvent("finished",{view:window,bubbles:!0,cancelable:!0})}resize(e){this.removeRange();const t=this.m_pos-e.y;this.m_pos=e.y;let s=this.getBoundingClientRect().height-t;this.handleRef.value.getBoundingClientRect();s<=0&&(s=0),this.height=s+"px",this.dispatchEvent(this.onResizeEvent)}removeRange(){const e=window.getSelection();if(e.rangeCount>1)for(let t=1;t<s.rangeCount;t++)e.removeRange(e.getRangeAt(t))}onMouseUp(){this.isDragging=!1,document.removeEventListener("mousemove",this.resize,!1),document.removeEventListener("mouseup",this.onMouseUp,!1),this.dispatchEvent(this.finishedEvent)}onMouseDown(e){const t=this.handleRef.value;this.parentRect=this.parentElement.getBoundingClientRect();const s=t.getBoundingClientRect();e.y>s.top&&e.y<s.bottom&&(this.isDragging=!0,this.handle=t,this.m_pos=e.y,document.addEventListener("mousemove",this.resize,!1),document.addEventListener("mouseup",this.onMouseUp,!1))}onMouseMove(e){const t=e.clientY;t<this.offsetTop&&this.off}disconnectedCallback(){document.removeEventListener("mousedown",this.onMouseDown)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{const e=this.parentElement.getBoundingClientRect(),t=this.getBoundingClientRect(),s=e.bottom;s-(t.top+t.height)>0&&(this.height=parseInt(s-t.top)+"px",this.style.height=this.height),document.addEventListener("mousedown",this.onMouseDown)}),200)}render(){return o.dy`<slot></slot>
      <div ${(0,r.i)(this.handleRef)} class="bottom-resize"></div>
      ${this.isDragging?o.dy`<div class="wrapper">
              <div style="height:${this.height}" class="center-line"></div>
            </div>
            <div class="inspect">${this.height}</div>`:null} `}}(0,n.Z)(h,"properties",{height:{type:Number,reflect:!0},delta:{type:Number,reflect:!0},isDragging:{type:Boolean,reflect:!0}}),(0,n.Z)(h,"styles",o.iv`
    :host {
      min-height: 3px;
      display: inline-block;
      width: 100%;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .bottom-resize {
      position: absolute;
      top: 100%;
      width: 100%;
      height: 4px;
      transform: translateY(-50%);
      cursor: ns-resize;
      z-index: 5;
    }
    :host:hover .bottom-resize {
      display: block !important;
    }
    .inspect {
      position: absolute;
      top: 98%;
      left: 55%;
      transform: translateY(-100%);
      color: #fff;
      background: #000000cf;
      padding: 7px;
      border-radius: 0.3rem;
      font-family: Arial;
      font-size: 12px;
    }
    .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .center-line {
      position: absolute;
      left: 50%;
      border-left: 1px dashed;
    }
    .wrapper:before {
      content: "";
      position: absolute;
      left: 50%;
      top: -1%;
      transform: translateX(-50%);
      width: 100%;
      height: 2px;
      border-bottom: 1px dashed;
    }
    .wrapper:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      width: 100%;
      height: 2px;
      border-bottom: 1px dashed;
    }
  `),customElements.define("cdtr-resizeable",h)},3959:(e,t,s)=>{s.d(t,{V:()=>h});var i=s(33692),n=s(50875);const o="important",r=" !"+o,h=(0,n.XM)(class extends n.Xe{constructor(e){if(super(e),e.type!==n.pX.ATTRIBUTE||"style"!==e.name||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce(((t,s)=>{const i=e[s];return null==i?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`}),"")}update(e,[t]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)null==t[e]&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const i=t[e];if(null!=i){this.ft.add(e);const t="string"==typeof i&&i.endsWith(r);e.includes("-")||t?s.setProperty(e,t?i.slice(0,-11):i,t?o:""):s[e]=i}}return i.Jb}})}}]);