import * as interfaces from './interfaces/index.js'; import { DeesElement, TemplateResult, property, customElement, html, css, cssManager, } 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 static styles = [ cssManager.defaultStyles, css` :host { color: #fff; display: block; width: 100%; height: 100%; position: relative; background: #222222; } .maincontainer { position: absolute; height: 100%; right: 0px; top: 0px; width: 100%; } .topbar { position: absolute; width: 100%; height: 112px; background: #101010; user-select: none; } .topbar .heading { padding: 24px 40px 24px 40px; font-family: Roboto Mono; font-size: 24px; } .topbar .tabsContainer { display: grid; margin-left: 40px; } .topbar .tabsContainer .tab { color: #a0a0a0; white-space: nowrap; margin-right: 16px; cursor: pointer; transition: color 0.1s; } .topbar .tabsContainer .tab:hover { color: #ffffff; } .topbar .tabsContainer .tab.selectedTab { color: #e0e0e0; } .topbar .tabIndicator { position: absolute; left: 40px; bottom: 0px; height: 4px; width: 40px; background: #484848; transition: all 0.1s; } .mainicon { } `, ]; public render(): TemplateResult { return html`
lossless.com
${this.tabs.map((tabArg) => { return html`
${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]); } }