@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
65 lines (63 loc) • 3.65 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6737],{36737:(t,e,r)=>{r.r(e),r.d(e,{BorderEditor:()=>n});var o=r(56666),d=r(21293),i=r(70235);r(45607);class n extends d.oi{constructor(t){super(),this.theme=i.h.get("theme"),this.borderStyle="solid",this.borderTypes=[{name:"none",value:"none"},{name:"solid",value:"solid"},{name:"dashed",value:"dashed"},{name:"dotted",value:"dotted"},{name:"outset",value:"outset"},{name:"groove",value:"groove"},{name:"double",value:"double"},{name:"ridge",value:"ridge"}],this.cmds={onChangeSize:t=>{const e=t.target.value;this.borderWidth=e+"px",this.key="borderWidth",this.dispacher()},onChangeborderStyle:t=>{this.borderStyle=t,this.key="borderStyle",this.dispacher()},onChangeColor(t){const e=t.target.value;this.color=e,this.borderColor=e,this.key="color",this.dispacher()}}}dispacher(){const t=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(t)}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}render(){return d.dy`
<h4>
<lang-text text="border_editor"></lang-text>
</h4>
<cdtr-editor-container>
<cdtr-colorpicker-editor
=${this.cmds.onChangeColor}
.value=${this.color||this.borderColor}
text="color"
></cdtr-colorpicker-editor>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row>
<cdtr-title><lang-text text="size"></lang-text></cdtr-title>
</cdtr-row>
<cdtr-range-input
.value="${parseInt(this.borderWidth)||0}"
=${this.cmds.onChangeSize}
unitColor=${this.theme.primary}
unit="px"
max="20"
min="1"
></cdtr-range-input>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row alignItems="center" jusitfyContent="space-between">
<cdtr-col>
<cdtr-title><lang-text text="type"></lang-text></cdtr-title>
<cdtr-col>
<cdtr-row>
<cdtr-dropdown
=${t=>this.cmds.onChangeborderStyle(t.target.value)}
>
<cdtr-dropdown-button
minWidth=${100}
class=" dropdown-button"
slot="trigger"
><lang-text text="${this.borderStyle}"></lang-text>
</cdtr-dropdown-button>
<div slot="content">
${this.borderTypes.map((t=>d.dy`<cdtr-dropdown-item
.focused=${t.value===this.borderStyle}
.selected=${t.value===this.borderStyle}
value="${t.value}"
><lang-text text="${t.value}"></lang-text>
</cdtr-dropdown-item>`))}
</div>
</cdtr-dropdown>
</cdtr-row>
</cdtr-col>
</cdtr-col>
<cdtr-col sm="3">
<hr
style="border-top-color:${this.color};width:60%;margin:10px;margin-top:27px;border-top-width:${this.borderTopWidth}px;border-top-style:${this.borderStyle};"
/>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
`}}(0,o.Z)(n,"styles",d.iv`
:host {
direction: var(--direction-locale);
}
`),(0,o.Z)(n,"properties",{type:{type:String},color:{type:String},borderColor:{type:String},borderStyle:{type:String},borderWidth:{type:Number}}),customElements.define("cdtr-border-editor",n)}}]);