import * as plugins from '../plugins.js'; import * as interfaces from './interfaces/index.js'; import { DeesElement, type TemplateResult, property, customElement, html, css, cssManager, } from '@design.estate/dees-element'; /** * the property selector menu * mainly used to select assets within in an organization */ @customElement('dees-appui-mainselector') export class DeesAppuiMainselector extends DeesElement { public static demo = () => html``; // INSTANCE @property() public selectionOptions: interfaces.ISelectionOption[] = [ { key: 'Overview', action: () => {}, }, { 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: #000000; border-right: 1px solid #222222; } .maincontainer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .topbar { position: absolute; height: 32px; width: 100%; } .topbar .heading { padding-left: 16px; padding-top: 8px; line-height: 24px; font-family: 'Roboto', 'Inter', sans-serif; font-weight: 600; font-size: 14px; } .selectionOptions { position: absolute; top: 32px; padding-top: 8px; left: 0px; width: 100%; font-family: 'Roboto', 'Inter', sans-serif; font-size: 14px; } .selectionOptions .selectionOption { margin-left: 16px; margin-right: 16px; padding-top: 8px; padding-bottom: 8px; border-top: 1px dotted #303030; border-left: 0px solid rgba(0,0,0,0); transition: all 0.1s; } .selectionOptions .selectionOption:hover { border-left: 2px solid #26A69A50; padding-left: 8px; } .selectionOptions .selectionOption:first-child { border-top: 1px solid rgba(0,0,0,0); } .selectionOptions .selectionOption.selectedOption { border-left: 4px solid #26A69A; padding-left: 10px; } ` ]; 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]); } }