146 lines
3.4 KiB
TypeScript
146 lines
3.4 KiB
TypeScript
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`<lele-appui-mainselector></lele-appui-mainselector>`;
|
|
|
|
// 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: Roboto Mono;
|
|
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`
|
|
<style>
|
|
</style>
|
|
<div class="maincontainer">
|
|
<div class="topbar">
|
|
<div class="heading">Properties</div>
|
|
</div>
|
|
<div class="selectionOptions">
|
|
${this.selectionOptions.map((selectionOptionArg) => {
|
|
return html`
|
|
<div
|
|
class="selectionOption ${this.selectedOption === selectionOptionArg
|
|
? 'selectedOption'
|
|
: null}"
|
|
@click="${() => {
|
|
this.selectOption(selectionOptionArg);
|
|
}}"
|
|
>
|
|
${selectionOptionArg.key}
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private selectOption(optionArg: interfaces.ISelectionOption) {
|
|
this.selectedOption = optionArg;
|
|
this.selectedOption.action();
|
|
}
|
|
|
|
firstUpdated() {
|
|
this.selectOption(this.selectionOptions[0]);
|
|
}
|
|
}
|