import * as interfaces from './interfaces';
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('deap-maincontent')
export class DeapMaincontent extends DeesElement {
public static demo = () => html``;
// INSTANCE
@property()
public tabs: interfaces.ITab[] = [
{key: 'option 1', action: () => {}},
{key: 'a very long option', action: () => {}},
{key: 'reminder: set your tabs', action: () => {}},
{key: 'option 4', action: () => {}}
];
@property()
public selectedTab = null;
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
lossless.com
${this.tabs.map(tabArg => {
return html`
{this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">${tabArg.key}
`;
})}
`;
}
/**
* updates the indicator
*/
private updateTabIndicator() {
let selectedTab = this.selectedTab;
const tabIndex = this.tabs.indexOf(selectedTab);
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';
}
private updateTab(tabArg: interfaces.ITab) {
this.selectedTab = tabArg;
this.updateTabIndicator();
this.selectedTab.action();
}
firstUpdated() {
this.updateTab(this.tabs[0]);
}
}