dees-wcctools/test/elements/test-demoelement.ts

113 lines
2.2 KiB
TypeScript
Raw Normal View History

2021-04-01 19:09:57 +00:00
import {
DeesElement,
customElement,
TemplateResult,
html,
property,
2021-11-26 16:47:08 +00:00
css,
cssManager,
2021-04-01 19:09:57 +00:00
} from '@designestate/dees-element';
2020-11-26 02:28:17 +00:00
import * as domtools from '@designestate/dees-domtools';
2021-04-01 19:09:57 +00:00
enum ETestEnum {
'first' = 'first',
'second' = 'second',
'awesome' = 'awesome',
}
2020-11-26 02:28:17 +00:00
@customElement('test-demoelement')
2020-11-27 16:40:38 +00:00
export class TestDemoelement extends DeesElement {
2021-09-27 11:30:02 +00:00
public static demo = () => html`<test-demoelement>This is a slot text</test-demoelement>`;
2020-11-26 02:28:17 +00:00
2021-11-26 17:27:29 +00:00
@property()
public notTyped = 'hello';
@property({
type: String,
})
public typedAndNotInitizalized: string;
@property()
public notTypedAndNotInitizalized: string;
2021-04-01 19:09:57 +00:00
@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;
2021-11-26 16:47:08 +00:00
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')};
}
2022-03-02 19:01:14 +00:00
2022-03-04 09:24:03 +00:00
@container wccToolsViewport size(min-width: 1px) {
2022-03-02 19:01:14 +00:00
.maincontainer,
.themeindicator {
border-radius: 50px;
}
}
2021-11-26 16:47:08 +00:00
${domtools.breakpoints.cssForPhablet(css`
.maincontainer,
2020-11-27 16:40:38 +00:00
.themeindicator {
2021-11-26 16:47:08 +00:00
border-radius: 50px;
2021-04-01 19:09:57 +00:00
}
2021-11-26 16:47:08 +00:00
`)}
2022-03-24 15:14:12 +00:00
2021-11-26 16:47:08 +00:00
pre b {
color: green;
}
`,
];
public render() {
return html`
<style></style>
2020-11-27 16:40:38 +00:00
<div class="maincontainer"><slot>This is a demo element</slot></div>
<div class="themeindicator">
2021-04-01 19:09:57 +00:00
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
<pre>
2021-04-01 19:11:23 +00:00
demoBoolean is <b>${this.demoBoolean}</b>
2021-04-01 19:09:57 +00:00
demoString is <b>"${this.demoString}"</b>
2021-04-01 19:11:23 +00:00
demoNumber is <b>${this.demoNumber}</b>
2021-04-01 19:09:57 +00:00
demoEnum is <b>"${this.demoENum}"</b>
2021-11-26 16:47:08 +00:00
</pre
>
2020-11-27 16:40:38 +00:00
</div>
2020-11-26 02:28:17 +00:00
`;
}
2020-11-26 02:50:50 +00:00
}