import { DeesElement, customElement, TemplateResult, html, property, css, cssManager, } 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`This is a slot text`; @property() public notTyped = 'hello'; @property({ type: String, }) public typedAndNotInitizalized: string; @property() public notTypedAndNotInitizalized: string; @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; 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`
This is a demo element
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
          demoBoolean is ${this.demoBoolean}
          demoString is "${this.demoString}"
          demoNumber is ${this.demoNumber}
          demoEnum is "${this.demoENum}"
        
`; } }