import * as interfaces from './interfaces/index.js'; import { DeesElement, TemplateResult, property, customElement, html, css, cssManager, } from '@designestate/dees-element'; @customElement('lele-appui-mainselector') export class DeapMainselector extends DeesElement { public static demo = () => html``; // INSTANCE @property() public selectionOptions: interfaces.ISelectionOption[] = [ { key: 'option 1', action: () => {}, }, { key: 'option 2', action: () => {} }, { key: 'option 3', action: () => {} }, { key: 'option 4', action: () => {} }, ]; @property() public selectedOption: interfaces.ISelectionOption = null; public static styles = [ cssManager.defaultStyles, css` :host { color: #fff; position: relative; display: block; width: 100%; max-width: 300px; height: 100%; background: #3c3c3c; } .maincontainer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .topbar { position: absolute; height: 80px; width: 100%; background: #333333; } .topbar .heading { padding-left: 20px; line-height: 80px; font-family: Inter; font-weight: 600; font-size: 16px; } .selectionOptions { position: absolute; top: 80px; left: 0px; width: 100%; font-family: Roboto Mono; font-size: 16px; } .selectionOptions .selectionOption { margin-left: 16px; margin-right: 16px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #707070; border-left: 0px solid rgba(0,0,0,0); cursor: pointer; transition: all 0.1s; } .selectionOptions .selectionOption:hover { border-left: 2px solid #26A69A50; padding-left: 8px; } .selectionOptions .selectionOption.selectedOption { border-left: 4px solid #26A69A; padding-left: 10px; } .selectionOptions .selectionOption:first-child { margin-top: 16px; } .selectionOptions .selectionOption:last-child { margin-bottom: 16px; border-bottom: 1px solid #707070; } ` ]; public render(): TemplateResult { return html`
Properties
${this.selectionOptions.map((selectionOptionArg) => { return html`
${selectionOptionArg.key}
`; })}
`; } private selectOption(optionArg: interfaces.ISelectionOption) { this.selectedOption = optionArg; this.selectedOption.action(); } firstUpdated() { this.selectOption(this.selectionOptions[0]); } }