@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
63 lines (62 loc) • 4.05 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7837],{37837:(t,e,o)=>{o.r(e),o.d(e,{EditorTabs:()=>a});var n=o(56666),i=o(21293),s=o(45607);o.e(6848).then(o.bind(o,6848));class a extends i.oi{constructor(){super(),this.onConnected=this.onConnected.bind(this),this.onArrowNavigation=this.onArrowNavigation.bind(this),this.tabs=[],this.labelMode}onClickItem(t){let{target:e}=t;const o=this.value=e.value,n=[...this.tabs],i=n.findIndex((t=>t.text===o));-1!==i&&(n.forEach((t=>{t.selected=!1})),n[i].selected=!0),this.tabs=n;const s=new UIEvent("tabChanged",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(s)}firstUpdated(){super.firstUpdated(),this.labelMode=0}onConnected(t){let{name:e}=t;this.onClickItem({target:{value:e}})}onArrowNavigation(t){console.log("Arrow navigation event received:",t.detail);const{key:e,currentIcon:o}=t.detail,n=this.tabs.findIndex((t=>t.text===o));if(console.log("Current index:",n,"Total tabs:",this.tabs.length),-1===n)return void console.log("Current icon not found in tabs");let i=n;switch(e){case"ArrowUp":case"ArrowLeft":i=n>0?n-1:this.tabs.length-1;break;case"ArrowDown":case"ArrowRight":i=n<this.tabs.length-1?n+1:0;break;default:return}console.log("Next index:",i);const s=this.tabs[i];s&&(console.log("Switching to tab:",s.text),this.onClickItem({target:{value:s.text}}),this.updateComplete.then((()=>{const t=this.shadowRoot.querySelector(`cdtr-editor-tab-item[icon="${s.text}"]`);t?(console.log("Focusing next tab element"),t.focus()):console.log("Next tab element not found")})))}connectedCallback(){super.connectedCallback(),s.Z.on("editor-tabs",this.onConnected),console.log("EditorTabs connected")}disconnectedCallback(){super.disconnectedCallback(),s.Z.off("editor-tabs",this.onConnected)}renderContent(){switch(this.value){case"animations":return o.e(6178).then(o.bind(o,96178)),i.dy`<cdtr-animations-editor>
<cdtr-block-loader></cdtr-block-loader
></cdtr-animations-editor>`;case"settings":case"setting":return o.e(9530).then(o.bind(o,79530)),i.dy`<cdtr-setting-editor>
<cdtr-block-loader></cdtr-block-loader
></cdtr-setting-editor>`;default:return i.dy`<slot name="content"></slot>`}}render(){return i.dy`<cdtr-row class="main">
<div
=${()=>this.labelMode=1}
=${()=>this.labelMode=0}
class="icon-tabs"
style="${1===this.labelMode?"box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;":""}"
-navigation=${this.onArrowNavigation}
>
<cdtr-row alignItems="center" justify="center" spacing="10px">
${this.tabs.map((t=>i.dy`<cdtr-editor-tab-item
tabindex="0"
=${this.onClickItem}
.labelMode=${this.labelMode}
icon=${t.text}
text=${t.text}
.selected=${t.selected}
></cdtr-editor-tab-item>`))}
</cdtr-row>
</div>
<cdtr-col class="content"> ${this.renderContent()} </cdtr-col>
</cdtr-row>`}}(0,n.Z)(a,"styles",i.iv`
:host {
height: 100%;
display: block;
direction: var(--direction-locale);
position: absolute;
width: 100%;
overflow: hidden;
}
cdtr-editor-tab-item:focus {
background: #e1e1e1;
outline: none;
}
cdtr-editor-tab-item {
width: 100%;
}
.icon-tabs {
padding-top: 20px;
background: #fff;
width: 48px;
height: 100%;
min-height: 400px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
transition: all 0.3s ease-in-out;
}
.main {
height: 100%;
direction: rtl;
}
.content {
overflow-y: auto;
overflow-x: hidden;
max-height: 80vh;
min-height: 80%;
padding-top: 9px;
}
`),(0,n.Z)(a,"properties",{tabs:{type:Array},labelMode:{type:Number},value:{type:String}}),customElements.define("cdtr-editor-tabs",a)}}]);