import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; import { WccDashboard } from './wcc-dashboard'; export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'; export type TTheme = 'bright' | 'dark'; let environment: TEnvironment = 'native'; export const setEnvironment = (envArg) => { environment = envArg; }; @customElement('wcc-properties') export class WccProperties extends LitElement { @property() dashboardRef: WccDashboard; @property() public selectedItem: TemplateResult | LitElement; @property() public selectedViewport: TEnvironment = 'native'; @property() public selectedTheme: TTheme = 'dark'; @property() public warning: string = null; public render(): TemplateResult { return html`
Properties
${(() => { if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) { const anonItem: any = this.selectedItem; const classProperties: Map = anonItem._classProperties; const returnArray: TemplateResult[] = []; for (const key of classProperties.keys()) { returnArray.push( html`
${key} / ${classProperties.get(key).type.name}
` ); } return returnArray; } })()}
Theme
{ this.selectTheme('dark'); }} > Dark
nights_stay
{ this.selectTheme('bright'); }} > Bright
flare
Viewport
{ this.selectViewport('phone'); }} > Phone
smartphone
{ this.selectViewport('phablet'); }} > Phablet
smartphone
{ this.selectViewport('tablet'); }} > Tablet
tablet
{ this.selectViewport('native'); }} > Desktop
desktop_windows
Docs
${this.warning ? html`
${this.warning}
` : null} `; } public selectTheme(themeArg: TTheme) { this.selectedTheme = themeArg; this.dispatchEvent( new CustomEvent('selectedTheme', { detail: themeArg, }) ); console.log(this.dashboardRef.selectedType); this.dashboardRef.buildUrl(); } public selectViewport(viewport: TEnvironment) { this.selectedViewport = viewport; setEnvironment(viewport); this.dispatchEvent( new CustomEvent('selectedViewport', { detail: viewport, }) ); this.dashboardRef.buildUrl(); } }