import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; import * as plugins from '../wcctools.plugins'; import { WccDefaultElement } from './wcc-defaultelement'; // wcc tools import './wcc-frame'; import './wcc-sidebar'; import './wcc-properties'; @customElement('wcc-dashboard') export class WccDashboard extends LitElement { @property() public selectedItem: TemplateResult | LitElement; @property() public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop'; @property() public pages: { [key: string]: TemplateResult } = {}; @property() public elements: { [key: string]: LitElement } = {}; @property() public warning: string = null; constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) { super(); if (elementsArg) { this.elements = elementsArg; } if (pagesArg) { this.pages = pagesArg; } } public render(): TemplateResult { return html` { this.selectedItem = eventArg.detail; }}> {this.selectedViewport = eventArg.detail; this.updateSlot();}}> ${(() => { if (this.selectedItem instanceof TemplateResult) { return this.selectedItem; } else if (this.selectedItem) { console.log(this.selectedItem); const anonItem: any = this.selectedItem; if (!anonItem.demo) { this.setWarning(`component ${anonItem.name} does not expose a demo property.`); return; } if (!(typeof anonItem.demo === 'function')) { this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`); return; } this.setWarning(null); return html`${anonItem.demo()}`; } else { this.updateSlot(); } })()} `; } private currentlyUpdating: boolean = false; public async updateSlot() { if (this.currentlyUpdating) { return; } this.currentlyUpdating = true; !this.selectedItem ? this.selectedItem = WccDefaultElement as any : null; const localSelectedItem = this.selectedItem; this.selectedItem = null; console.log('updateSlot'); const domtools = await plugins.deesDomtools.DomTools.setupDomTools(); domtools.setVirtualViewport(this.selectedViewport); await super.performUpdate(); this.selectedItem = localSelectedItem; await super.performUpdate(); this.currentlyUpdating = false; } public setWarning(warningTextArg: string) { if (this.warning !== warningTextArg) { console.log(warningTextArg); this.warning = warningTextArg; setTimeout(() => { super.performUpdate(); }, 0); } } }