@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
46 lines • 3.15 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6993],{26993:(t,e,n)=>{n.r(e),n.d(e,{FontFamilyEditor:()=>a});var i=n(56666),s=n(21293),o=(n(45607),n(43824)),r=n(70235);class a extends s.oi{constructor(){super(),(0,i.Z)(this,"onchangeFontFamily",(t=>{const e=t.target.value,n=this.fontFamilies.find((t=>t.name===e));if(!n)return void console.error("cant set font family, font family not founded..");(0,o.TL)(n),this.value=n.cssRule,this.name=e;const i=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(i)})),(0,i.Z)(this,"onFilteredFonts",(t=>{const e=t.target.value;this.filteredFonts=this.fontFamilies.filter((t=>t.name.toLowerCase().includes(e.toLowerCase())))})),this.filteredFonts=[],this.fontFamilies=[]}connectedCallback(){super.connectedCallback();const t=r.h.get("config","editor","configure","editorProps","fonts");Array.isArray(t)&&(this.filteredFonts=this.fontFamilies=t),t.forEach((t=>{!function(t){if(document.getElementById(t.id))return;const e=document.createElement("link");e.href=t.url,e.id=t.id,e.setAttribute("data-name",t.name),e.rel="stylesheet",e.type="text/css",document.head.appendChild(e)}(t)}))}disconnectedCallback(){super.disconnectedCallback()}render(){const t=this.fontFamilies.find((t=>-1!==t.cssRule.indexOf(this.value)||-1!==t.cssRule.indexOf(this.name)));t&&(this.name=t.name);const e=s.dy`<cdtr-dropdown
style="width:100%"
.value="${this.name}"
=${this.onchangeFontFamily}
>
<cdtr-dropdown-button
minWidth=${100}
class="dropdown-button"
slot="trigger"
><lang-text text="${this.name}"></lang-text>
</cdtr-dropdown-button>
<div slot="content">
<cdtr-input
.placeholder="${r.h.get("lang","search")}.."
=${this.onFilteredFonts}
type="search"
></cdtr-input>
${this.filteredFonts.map((t=>s.dy`<cdtr-dropdown-item
.focused=${t.name===this.name}
.selected=${t.name===this.name}
value="${t.name}"
><span
style="font-family:${t.cssRule};"
text="${t.name}"
data-foo="${t.cssRule}"
>${t.name}</span>
</cdtr-dropdown-item>`))}
</div>
</cdtr-dropdown>`,n=s.dy`
<cdtr-editor-container>
<cdtr-row alignItems="center" justify="space-between">
<cdtr-title pb="0" style="display:block" class="align-lang"
><lang-text text="fontFamily"></lang-text
></cdtr-title>
<cdtr-col sm="12">
<cdtr-row alignItems="center" justify="flex-end">
${e}
</cdtr-row>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
`;return this.light?e:n}}(0,i.Z)(a,"properties",{value:{type:String},name:{type:String},fontFamilies:{type:Array},filteredFonts:{type:Array},isOpen:{type:Boolean},light:{type:Boolean}}),(0,i.Z)(a,"styles",s.iv`
.dropdown-button {
min-width: 100px;
}
`),customElements.define("cdtr-font-family-editor",a)}}]);