@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
72 lines (71 loc) • 3 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[4212],{14212:(t,e,i)=>{i.r(e),i.d(e,{JustifyGroup:()=>o});var c=i(56666),r=i(21293);class o extends r.oi{constructor(){super(),this.onClick=this.onClick.bind(this),this.justify="flex-start"}onClick(t){const e=t.target.closest("[data-justify]");if(e){const t=e.getAttribute("data-justify");this.value=t;const i={detail:t,bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("change",i))}}render(){return r.dy` <cdtr-row justify="center">
<paper-button
class="${"flex-start"===this.value?"selected":null}"
=${this.onClick}
data-justify="flex-start"
>
<cdtr-tooltip delay="100" content="left">
<cdtr-icon color="var(--primary)" icon="justifyLeft"></cdtr-icon>
</cdtr-tooltip>
</paper-button>
<paper-button
class="${"center"===this.value?"selected":null}"
=${this.onClick}
data-justify="center"
>
<cdtr-tooltip delay="100" content="center">
<cdtr-icon color="var(--primary)" icon="justifyCenter"></cdtr-icon>
</cdtr-tooltip>
</paper-button>
<paper-button
class="${"flex-end"===this.value?"selected":null}"
=${this.onClick}
data-justify="flex-end"
>
<cdtr-tooltip delay="100" content="right">
<cdtr-icon color="var(--primary)" icon="justifyRight"></cdtr-icon>
</cdtr-tooltip>
</paper-button>
<!-- //============ -->
<!-- <cdtr-divider></cdtr-divider>
<paper-button
class="${"flex-start"===this.value?"selected":null}"
=${this.onClick}
data-justify="flex-start"
>
<cdtr-tooltip delay="100" content="left">
<cdtr-icon height="33" color="var(--primary)" icon="alignTop"></cdtr-icon>
</cdtr-tooltip>
</paper-button>
<paper-button
class="${"center"===this.value?"selected":null}"
=${this.onClick}
data-justify="center"
>
<cdtr-tooltip delay="100" content="center">
<cdtr-icon height="33" color="var(--primary)" icon="justifyCenter"></cdtr-icon>
</cdtr-tooltip>
</paper-button>
<paper-button
class="${"flex-end"===this.value?"selected":null}"
=${this.onClick}
data-justify="flex-end"
>
<cdtr-tooltip delay="100" content="right">
<cdtr-icon height="33" color="var(--primary)" icon="alignBottom"></cdtr-icon>
</cdtr-tooltip>
</paper-button> -->
</cdtr-row>`}}(0,c.Z)(o,"styles",r.iv`
:host {
direction: ltr;
}
paper-button {
min-width: auto;
}
.keyboard-focus {
outline: 1px solid var(--primary);
}
.selected {
background: #f1f3f5;
}
`),(0,c.Z)(o,"properties",{value:{type:Number},justify:{type:String}}),customElements.define("cdtr-justify-group",o)}}]);