@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
130 lines (126 loc) • 8.64 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6848],{6848:(t,e,i)=>{i.r(e),i.d(e,{EditorTabItem:()=>c});var n=i(56666),o=i(21293);class c extends o.oi{constructor(){super()}firstUpdated(){super.firstUpdated()}focus(){const t=this.shadowRoot.querySelector("paper-button");t?t.focus():super.focus()}onClickItem(t){this.value=t;const e=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(e)}handleKeyDown(t){if(console.log("Key pressed:",t.key,"on icon:",this.icon),"Enter"===t.key||" "===t.key)return t.preventDefault(),t.stopPropagation(),void this.onClickItem(this.icon);if("ArrowUp"===t.key||"ArrowDown"===t.key||"ArrowLeft"===t.key||"ArrowRight"===t.key){t.preventDefault(),t.stopPropagation(),console.log("Dispatching arrow navigation event for:",t.key,"current icon:",this.icon);const e=new CustomEvent("arrow-navigation",{detail:{key:t.key,currentIcon:this.icon},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}}factory(){let t=this.selected?"fill: var(--primary);":"";switch(this.icon){case"box-shadow":return i.e(5978).then(i.bind(i,25978)),o.dy`<cdtr-box-shadow-icon
iconStyle=${t}
></cdtr-box-shadow-icon>`;case"design":return i.e(2111).then(i.bind(i,72111)),o.dy`<cdtr-design-icon iconStyle=${t}></cdtr-design-icon>`;case"text":case"typography":return i.e(6577).then(i.bind(i,46577)),o.dy`<cdtr-text-icon iconStyle=${t}></cdtr-text-icon>`;case"animations":return i.e(7576).then(i.bind(i,27576)),o.dy`<cdtr-animation-icon
iconStyle=${t}
></cdtr-animation-icon>`;case"settings":return i.e(6524).then(i.bind(i,54050)),o.dy`<cdtr-setting-icon
iconStyle=${t}
></cdtr-setting-icon>`;case"link":return i.e(6826).then(i.bind(i,36826)),o.dy`<cdtr-link-icon iconStyle=${t}></cdtr-link-icon>`;case"spacing":return i.e(3614).then(i.bind(i,73614)),o.dy`<cdtr-spacing-icon
iconStyle=${t}
></cdtr-spacing-icon>`;case"background":case"image":return i.e(3453).then(i.bind(i,13453)),o.dy`<cdtr-background-icon
iconStyle=${t}
></cdtr-background-icon>`;case"video":return i.e(9394).then(i.bind(i,19394)),o.dy`<cdtr-video-icon iconStyle=${t}></cdtr-video-icon>`;case"list-check":return i.e(1582).then(i.bind(i,61582)),o.dy`<cdtr-list-check-icon
iconStyle=${t}
></cdtr-list-check-icon>`;case"time":return i.e(335).then(i.bind(i,20335)),o.dy`<cdtr-time-icon iconStyle=${t}></cdtr-time-icon>`;case"icons":return o.dy`<cdtr-icon icon="emoji"></cdtr-icon>`;case"list-settings":return i.e(8885).then(i.bind(i,98885)),o.dy`<cdtr-list-settings-icon
iconStyle=${t}
></cdtr-list-settings-icon>`;case"automations":return i.e(9928).then(i.bind(i,69928)),o.dy`<cdtr-automation-icon
iconStyle=${t}
></cdtr-automation-icon>`;case"ai":return o.dy`<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="20"
zoomAndPan="magnify"
viewBox="0 0 20.25 20.999999"
height="28"
preserveAspectRatio="xMidYMid meet"
version="1.0"
>
<defs>
<clippath id="84a0f9f97b">
<path
d="M 0 0.375 L 19.527344 0.375 L 19.527344 19.902344 L 0 19.902344 Z M 0 0.375 "
clip-rule="nonzero"
></path>
</clippath>
</defs>
<g clip-path="url(#84a0f9f97b)">
<path
fill="#9747ff"
d="M 12.316406 0.679688 C 12.160156 0.382812 11.734375 0.382812 11.574219 0.679688 L 11.132812 1.507812 C 11.09375 1.582031 11.035156 1.640625 10.960938 1.679688 L 10.128906 2.117188 C 9.828125 2.277344 9.828125 2.699219 10.128906 2.855469 L 10.960938 3.296875 C 11.035156 3.335938 11.09375 3.394531 11.132812 3.46875 L 11.574219 4.296875 C 11.734375 4.59375 12.160156 4.59375 12.316406 4.296875 L 12.757812 3.46875 C 12.800781 3.394531 12.859375 3.335938 12.933594 3.296875 L 13.765625 2.855469 C 14.0625 2.699219 14.0625 2.277344 13.765625 2.117188 L 12.933594 1.679688 C 12.859375 1.640625 12.800781 1.582031 12.757812 1.507812 Z M 15.167969 16.96875 L 16.875 17.617188 L 16.226562 15.917969 Z M 16.882812 13.496094 L 5.136719 1.816406 C 4.15625 0.839844 2.558594 0.839844 1.574219 1.816406 L 0.984375 2.40625 C 0 3.382812 0 4.96875 0.984375 5.949219 L 12.730469 17.625 C 12.929688 17.824219 13.273438 18.039062 13.542969 18.140625 L 17.152344 19.507812 C 18.167969 19.890625 19.164062 18.902344 18.777344 17.890625 L 17.402344 14.300781 C 17.300781 14.035156 17.085938 13.695312 16.882812 13.496094 Z M 15.316406 14.296875 L 5.730469 4.769531 L 3.953125 6.535156 L 13.535156 16.066406 Z M 3.949219 3 L 4.542969 3.585938 L 2.765625 5.355469 L 2.171875 4.765625 C 1.84375 4.441406 1.84375 3.910156 2.171875 3.585938 L 2.761719 3 C 3.089844 2.671875 3.621094 2.671875 3.949219 3 Z M 4.550781 12.996094 C 4.390625 12.699219 3.964844 12.699219 3.808594 12.996094 L 3 14.503906 C 2.960938 14.578125 2.902344 14.640625 2.828125 14.679688 L 1.308594 15.480469 C 1.011719 15.636719 1.011719 16.058594 1.308594 16.214844 L 2.828125 17.015625 C 2.902344 17.054688 2.960938 17.117188 3 17.191406 L 3.808594 18.699219 C 3.964844 18.996094 4.390625 18.996094 4.550781 18.699219 L 5.355469 17.191406 C 5.394531 17.117188 5.453125 17.054688 5.527344 17.015625 L 7.046875 16.214844 C 7.34375 16.058594 7.34375 15.636719 7.046875 15.480469 L 5.527344 14.679688 C 5.453125 14.640625 5.394531 14.578125 5.355469 14.503906 Z M 17.355469 5.480469 C 17.199219 5.183594 16.773438 5.183594 16.613281 5.480469 L 16.027344 6.582031 C 15.988281 6.65625 15.929688 6.714844 15.855469 6.753906 L 14.746094 7.335938 C 14.449219 7.496094 14.449219 7.917969 14.746094 8.074219 L 15.855469 8.660156 C 15.929688 8.699219 15.988281 8.757812 16.027344 8.832031 L 16.613281 9.933594 C 16.773438 10.230469 17.199219 10.230469 17.355469 9.933594 L 17.945312 8.832031 C 17.984375 8.757812 18.042969 8.699219 18.117188 8.660156 L 19.226562 8.074219 C 19.523438 7.917969 19.523438 7.496094 19.226562 7.335938 L 18.117188 6.753906 C 18.042969 6.714844 17.984375 6.65625 17.945312 6.582031 Z M 17.355469 5.480469 "
fill-opacity="1"
fill-rule="evenodd"
></path>
</g>
</svg>`;default:return null}}render(){return o.dy`
<paper-button
data-icon="${this.icon}"
tabindex="0"
=${t=>this.handleKeyDown(t)}
=${()=>this.onClickItem(this.icon)}
style="outline: none;"
><cdtr-row style="position:relative;min-height:40px;" justify="center">
<cdtr-col sm="12">
<div
class="${this.selected?"tab-item selected":"tab-item"}"
></div>
<cdtr-row justify="center"
><span style="transform:translateY(50%)" class="factory-item"
>${this.factory()}</span
>
</cdtr-row>
</cdtr-col>
<cdtr-col style="margin-top: 7px;" sm="12">
<cdtr-title
style="${this.selected?"color:var(--primary)":""}"
><lang-text
style="font-size:10px;"
class="label-item"
text="${this.icon}"
></lang-text
></cdtr-title>
</cdtr-col> </cdtr-row
></paper-button>
`}}(0,n.Z)(c,"styles",o.iv`
:host {
display: flex;
margin-bottom: 10px;
}
paper-button {
min-width: 0;
margin: 0;
width: 100%;
padding: 0;
height: 50px;
}
.factory-item {
transition: transform 0.5s ease-in-out;
}
.tab-item {
padding: 5px 0;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.1;
width: 100%;
height: 40px;
transform: translate(-50%, -50%);
}
.tab-selected:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
transform: translateX(-1px);
height: 100%;
background: #fff;
opacity: 1;
z-index: 1;
}
.label-item {
transform: translateY(-50%);
}
.tab-item:hover {
background: #9a9a9a;
}
.selected {
background: var(--primary) !important;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
cdtr-title {
text-align: center;
display: block;
margin: auto;
width: 100%;
}
`),(0,n.Z)(c,"properties",{icon:{},labelMode:{},selected:{}}),customElements.define("cdtr-editor-tab-item",c)}}]);