@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
113 lines (112 loc) • 3.81 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6052],{86052:(e,t,i)=>{i.r(t),i.d(t,{Checkbox:()=>o});var n=i(56666),r=i(21293),s=i(9571);class o extends r.oi{constructor(){super(),this.checked=!0,this.controlled=!0,this.inputId=(0,s.Z)(),this.event=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0})}onToggle(){this.controlled||(this.checked=!this.checked),this.dispatchEvent(this.event)}toggle(){this.checked=!this.checked,this.dispatchEvent(this.event)}render(){return r.dy`<span
=${this.onToggle}
tabindex="0"
class="root ${this.checked?"checked":""}"
>
${this.checked?r.dy` <div class="svg-wrapper">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
></path>
</svg>
</div>`:r.dy`<div class="svg-wrapper">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
></path>
</svg>
</div>`}
<label for="${this.inputId}"><slot></slot></label>
<input
.checked="${this.checked}"
id="${this.inputId}"
type="checkbox"
aria-label="Checkbox"
/>
</span>`}setValue(e){this.value=e.target.value}patch(e){this.value=e}}(0,n.Z)(o,"styles",r.iv`
:host {
direction: var(--direction-locale);
}
.root {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background: transparent;
outline: 0px;
border: 0px;
margin: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
text-decoration: none;
padding: 0;
border-radius: 50%;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
max-width: intrinsic;
max-width: -moz-max-content;
max-width: -webkit-max-content !important;
}
.root.checked {
color: var(--primary);
}
.svg-wrapper {
position: relative;
z-index: 1;
display:flex;
align-items:center;
justify-content:center;
}
.root:focus .svg-wrapper:after,
.root:hover .svg-wrapper:after {
content: "";
position: absolute;
width: 2rem;
height: 2rem;
border-radius: 100%;
background: #0d6efd1a;
left: 50%;
top: 41%;
transform: translate(-50%, -50%);
z-index: -1;
}
input {
cursor: inherit;
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
z-index: 1;
}
svg {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.5rem;
}
label {
margin-right: 7px;
margin-left: 7px;
}
`),(0,n.Z)(o,"properties",{checked:{type:Boolean,reflect:!0},controlled:{type:Boolean,reflect:!0}}),customElements.define("cdtr-checkbox",o)}}]);