dees-wcctools/test/elements/test-demoelement.ts
2021-09-27 13:30:02 +02:00

80 lines
1.8 KiB
TypeScript

import {
DeesElement,
customElement,
TemplateResult,
html,
property,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
enum ETestEnum {
'first' = 'first',
'second' = 'second',
'awesome' = 'awesome',
}
@customElement('test-demoelement')
export class TestDemoelement extends DeesElement {
public static demo = () => html`<test-demoelement>This is a slot text</test-demoelement>`;
@property({
type: Boolean,
})
public demoBoolean = false;
@property({
type: String,
})
public demoString = 'default demo string';
@property({
type: Number,
})
public demoNumber = 2;
@property({
type: ETestEnum,
})
public demoENum: ETestEnum = ETestEnum.first;
public render() {
return html`
<style>
.maincontainer, .themeindicator {
display: block;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.maincontainer {
color: #fff;
background: #000;
}
.themeindicator {
color: ${this.goBright ? '#000' : '#fff'};
background: ${this.goBright ? '#fff' : '#000'};
}
${domtools.breakpoints.cssForPhablet(`
.maincontainer, .themeindicator {
border-radius: 50px;
}
`)}
pre b {
color: green;
}
</style>
<div class="maincontainer"><slot>This is a demo element</slot></div>
<div class="themeindicator">
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
<pre>
demoBoolean is <b>${this.demoBoolean}</b>
demoString is <b>"${this.demoString}"</b>
demoNumber is <b>${this.demoNumber}</b>
demoEnum is <b>"${this.demoENum}"</b>
</pre>
</div>
`;
}
}