117 lines
2.4 KiB
TypeScript
117 lines
2.4 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as domtools from '@design.estate/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 demo 1</test-demoelement>`,
|
|
() => html`<test-demoelement>This is demo 2</test-demoelement>`,
|
|
() => html`<test-demoelement>This is demo 2</test-demoelement>`,
|
|
]
|
|
|
|
@property()
|
|
accessor notTyped = 'hello';
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
accessor typedAndNotInitizalized: string;
|
|
|
|
@property()
|
|
accessor notTypedAndNotInitizalized: string;
|
|
|
|
@property({
|
|
type: Boolean,
|
|
})
|
|
accessor demoBoolean = false;
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
accessor demoString = 'default demo string';
|
|
|
|
@property({
|
|
type: Number,
|
|
})
|
|
accessor demoNumber = 2;
|
|
|
|
@property({
|
|
type: ETestEnum,
|
|
})
|
|
accessor demoENum: ETestEnum = ETestEnum.first;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
css`
|
|
.maincontainer,
|
|
.themeindicator {
|
|
display: block;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.maincontainer {
|
|
color: #fff;
|
|
background: #000;
|
|
}
|
|
.themeindicator {
|
|
color: ${cssManager.bdTheme('#000', '#fff')};
|
|
background: ${cssManager.bdTheme('#fff', '#000')};
|
|
}
|
|
|
|
@container wccToolsViewport size(min-width: 1px) {
|
|
.maincontainer,
|
|
.themeindicator {
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
|
|
${domtools.breakpoints.cssForPhablet(css`
|
|
.maincontainer,
|
|
.themeindicator {
|
|
border-radius: 50px;
|
|
}
|
|
`)}
|
|
|
|
pre b {
|
|
color: green;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<style></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>
|
|
`;
|
|
}
|
|
}
|