@design.estate/dees-wcctools 1.0.77

package/dist_ts_web/00_commitinfo_data.d.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export declare const commitinfo: {
+    name: string;
+    version: string;
+    description: string;
+};

package/dist_ts_web/00_commitinfo_data.js

@@ -0,0 +1,9 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+    name: '@design.estate/dees-wcctools',
+    version: '1.0.77',
+    description: 'wcc tools for creating element catalogues'
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsOEJBQThCO0lBQ3BDLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSwyQ0FBMkM7Q0FDekQsQ0FBQSJ9

package/dist_ts_web/elements/wcc-dashboard.d.ts

@@ -0,0 +1,33 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import * as plugins from '../wcctools.plugins.js';
+import './wcc-frame.js';
+import './wcc-sidebar.js';
+import './wcc-properties.js';
+import { type TTheme } from './wcc-properties.js';
+import { type TElementType } from './wcc-sidebar.js';
+import { WccFrame } from './wcc-frame.js';
+export declare class WccDashboard extends DeesElement {
+    selectedType: TElementType;
+    selectedItemName: string;
+    selectedItem: (() => TemplateResult) | DeesElement;
+    selectedViewport: plugins.deesDomtools.breakpoints.TViewport;
+    selectedTheme: TTheme;
+    pages: {
+        [key: string]: () => TemplateResult;
+    };
+    elements: {
+        [key: string]: DeesElement;
+    };
+    warning: string;
+    wccFrame: Promise<WccFrame>;
+    constructor(elementsArg?: {
+        [key: string]: DeesElement;
+    }, pagesArg?: {
+        [key: string]: () => TemplateResult;
+    });
+    render(): TemplateResult;
+    setWarning(warningTextArg: string): void;
+    firstUpdated(): Promise<void>;
+    updated(): Promise<void>;
+    buildUrl(): void;
+}

package/dist_ts_web/elements/wcc-dashboard.js

@@ -0,0 +1,187 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { DeesElement, property, html, customElement, queryAsync, render, domtools } from '@design.estate/dees-element';
+import * as plugins from '../wcctools.plugins.js';
+// wcc tools
+import './wcc-frame.js';
+import './wcc-sidebar.js';
+import './wcc-properties.js';
+import {} from './wcc-properties.js';
+import {} from './wcc-sidebar.js';
+import { breakpoints } from '@design.estate/dees-domtools';
+import { WccFrame } from './wcc-frame.js';
+export let WccDashboard = class WccDashboard extends DeesElement {
+    constructor(elementsArg, pagesArg) {
+        super();
+        this.selectedViewport = 'desktop';
+        this.selectedTheme = 'dark';
+        this.pages = {};
+        this.elements = {};
+        this.warning = null;
+        if (elementsArg) {
+            this.elements = elementsArg;
+            console.log('got elements:');
+            console.log(this.elements);
+        }
+        if (pagesArg) {
+            this.pages = pagesArg;
+        }
+    }
+    render() {
+        return html `
+      <style>
+        :host {
+          font-family: 'Roboto', sans-serif;
+          background: #fcfcfc;
+          display: block;
+          box-sizing: border-box;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <wcc-sidebar
+        .dashboardRef=${this}
+        .selectedItem=${this.selectedItem}
+        @selectedType=${(eventArg) => {
+            this.selectedType = eventArg.detail;
+        }}
+        @selectedItemName=${(eventArg) => {
+            this.selectedItemName = eventArg.detail;
+        }}
+        @selectedItem=${(eventArg) => {
+            this.selectedItem = eventArg.detail;
+        }}
+      ></wcc-sidebar>
+      <wcc-properties
+        .dashboardRef=${this}
+        .warning="${this.warning}"
+        .selectedItem=${this.selectedItem}
+        .selectedViewport=${this.selectedViewport}
+        .selectedTheme=${this.selectedTheme}
+        @selectedViewport=${(eventArg) => {
+            this.selectedViewport = eventArg.detail;
+            this.scheduleUpdate();
+        }}
+        @selectedTheme=${(eventArg) => {
+            this.selectedTheme = eventArg.detail;
+        }}
+      ></wcc-properties>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
+      </wcc-frame>
+    `;
+    }
+    setWarning(warningTextArg) {
+        if (this.warning !== warningTextArg) {
+            console.log(warningTextArg);
+            this.warning = warningTextArg;
+            setTimeout(() => {
+                this.scheduleUpdate();
+            }, 0);
+        }
+    }
+    async firstUpdated() {
+        this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+        this.domtools.router.on('/wcctools-route/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
+            this.selectedType = routeInfo.params.itemType;
+            this.selectedItemName = routeInfo.params.itemName;
+            this.selectedViewport = routeInfo.params.viewport;
+            this.selectedTheme = routeInfo.params.theme;
+            if (routeInfo.params.itemType === 'element') {
+                this.selectedItem = this.elements[routeInfo.params.itemName];
+            }
+            else if (routeInfo.params.itemType === 'page') {
+                this.selectedItem = this.pages[routeInfo.params.itemName];
+            }
+            const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
+            this.selectedTheme === 'bright'
+                ? domtoolsInstance.themeManager.goBright()
+                : domtoolsInstance.themeManager.goDark();
+        });
+    }
+    async updated() {
+        this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+        await this.domtools.router._handleRouteState();
+        const storeElement = this.selectedItem;
+        const wccFrame = this.shadowRoot.querySelector('wcc-frame');
+        if (this.selectedType === 'page' && this.selectedItem) {
+            if (typeof this.selectedItem === 'function') {
+                console.log('slotting page.');
+                const viewport = await wccFrame.getViewportElement();
+                render(this.selectedItem(), viewport);
+                console.log('rendered page.');
+            }
+            else {
+                console.error('The selected item looks strange:');
+                console.log(this.selectedItem);
+            }
+        }
+        else if (this.selectedType === 'element' && this.selectedItem) {
+            console.log('slotting element.');
+            const anonItem = 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);
+            const viewport = await wccFrame.getViewportElement();
+            render(anonItem.demo(), viewport);
+            ;
+        }
+    }
+    buildUrl() {
+        this.domtools.router.pushUrl(`/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`);
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccDashboard.prototype, "selectedType", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccDashboard.prototype, "selectedItemName", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], WccDashboard.prototype, "selectedItem", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccDashboard.prototype, "selectedViewport", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccDashboard.prototype, "selectedTheme", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], WccDashboard.prototype, "pages", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], WccDashboard.prototype, "elements", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccDashboard.prototype, "warning", void 0);
+__decorate([
+    queryAsync('wcc-frame'),
+    __metadata("design:type", Promise)
+], WccDashboard.prototype, "wccFrame", void 0);
+WccDashboard = __decorate([
+    customElement('wcc-dashboard'),
+    __metadata("design:paramtypes", [Object, Object])
+], WccDashboard);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLWRhc2hib2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy93Y2MtZGFzaGJvYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxhQUFhLEVBQXVCLFVBQVUsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFNUksT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUVsRCxZQUFZO0FBQ1osT0FBTyxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLGtCQUFrQixDQUFDO0FBQzFCLE9BQU8scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxFQUFlLE1BQU0scUJBQXFCLENBQUM7QUFDbEQsT0FBTyxFQUFxQixNQUFNLGtCQUFrQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFHbkMsV0FBTSxZQUFZLEdBQWxCLE1BQU0sWUFBYSxTQUFRLFdBQVc7SUE2QjNDLFlBQ0UsV0FBNEMsRUFDNUMsUUFBa0Q7UUFFbEQsS0FBSyxFQUFFLENBQUM7UUFyQkgscUJBQWdCLEdBQStDLFNBQVMsQ0FBQztRQUd6RSxrQkFBYSxHQUFXLE1BQU0sQ0FBQztRQUcvQixVQUFLLEdBQTRDLEVBQUUsQ0FBQztRQUdwRCxhQUFRLEdBQW1DLEVBQUUsQ0FBQztRQUc5QyxZQUFPLEdBQVcsSUFBSSxDQUFDO1FBVTVCLElBQUksV0FBVyxFQUFFO1lBQ2YsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLENBQUM7WUFDNUIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxlQUFlLENBQUMsQ0FBQztZQUM3QixPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUM1QjtRQUVE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

package/dist_ts_web/elements/wcc-frame.d.ts

@@ -0,0 +1,13 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'wcc-frame': WccFrame;
+    }
+}
+export declare class WccFrame extends DeesElement {
+    viewport: string;
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+    getDisplayedInstance(): Promise<void>;
+    getViewportElement(): Promise<HTMLElement>;
+}

package/dist_ts_web/elements/wcc-frame.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { DeesElement, property, html, customElement, css, cssManager } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let WccFrame = class WccFrame extends DeesElement {
+    static { this.styles = [
+        css `
+      :host {
+        border: 10px solid #ffaeaf;
+        position: absolute;
+        background: ${cssManager.bdTheme('#333', '#000')};
+        left: 200px;
+        right: 0px;
+        top: 0px;
+        bottom: 100px;
+        overflow-y: auto;
+        overflow-x: auto;
+      }
+
+      .viewport {
+        container-type: inline-size;
+        container-name: wccToolsViewport;
+        position: relative;
+        min-height: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <style>
+        :host {
+          ${(() => {
+            switch (this.viewport) {
+                case 'desktop':
+                    return `
+                  padding: 0px 0px;
+                `;
+                case 'tablet':
+                    return `
+                  padding: 0px ${(document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2}px;
+                `;
+                case 'phablet':
+                    return `
+                  padding: 0px ${(document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2}px;
+                `;
+                case 'phone':
+                    return `
+                  padding: 0px ${(document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2}px;
+                `;
+            }
+        })()}
+        }
+
+        .viewport {
+          ${this.viewport !== 'desktop'
+            ? html ` border-right: 1px dotted #444; border-left: 1px dotted #444; `
+            : html ``}
+          background:
+          ${this.goBright ? `
+              radial-gradient(#CCCCCC 3px, transparent 4px),
+              radial-gradient(#CCCCCC 3px, transparent 4px),
+              linear-gradient(#eeeeee 4px, transparent 0),
+              linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
+              linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
+              #eeeeee;
+              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
+              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+            ` : `
+              radial-gradient(#444444 3px, transparent 4px),
+              radial-gradient(#444444 3px, transparent 4px),
+              linear-gradient(#222222 4px, transparent 0),
+              linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
+              linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
+              #222222;
+              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
+              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+            `}
+        }
+      </style>
+      <div class="viewport">
+        
+      </div>
+    `;
+    }
+    async getDisplayedInstance() {
+        await this.updateComplete;
+        const slottedContent = this.children;
+        console.log(slottedContent);
+    }
+    async getViewportElement() {
+        return this.shadowRoot.querySelector('.viewport');
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], WccFrame.prototype, "viewport", void 0);
+WccFrame = __decorate([
+    customElement('wcc-frame')
+], WccFrame);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLWZyYW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3djYy1mcmFtZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFL0gsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxXQUFNLFFBQVEsR0FBZCxNQUFNLFFBQVMsU0FBUSxXQUFXO2FBSXpCLFdBQU0sR0FBRztRQUNyQixHQUFHLENBQUE7Ozs7c0JBSWUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7S0FlbkQ7S0FDRixBQXJCbUIsQ0FxQm5CO0lBRU0sTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFBOzs7WUFHSCxDQUFDLEdBQUcsRUFBRTtZQUNSLFFBQVEsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDckIsS0FBSyxTQUFTO29CQUNaLE9BQU87O2lCQUVKLENBQUM7Z0JBQ04sS0FBSyxRQUFRO29CQUNYLE9BQU87aUNBRUQsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxHQUFHLEdBQUcsUUFBUSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUNwRTtpQkFDRCxDQUFDO2dCQUNOLEtBQUssU0FBUztvQkFDWixPQUFPO2lDQUVELENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsR0FBRyxHQUFHLFFBQVEsQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FDckU7aUJBQ0QsQ0FBQztnQkFDTixLQUFLLE9BQU87b0JBQ1YsT0FBTztpQ0FFRCxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsR0FBRyxRQUFRLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQ25FO2lCQUNELENBQUM7YUFDUDtRQUNELENBQUMsQ0FBQyxFQUFFOzs7O1lBSUYsSUFBSSxDQUFDLFFBQVEsS0FBSyxTQUFTO1lBQzNCLENBQUMsQ0FBQyxJQUFJLENBQUEsZ0VBQWdFO1lBQ3RFLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFDUjs7WUFHRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQzs7Ozs7Ozs7O2FBU2YsQ0FBQyxDQUFDLENBQUM7Ozs7Ozs7OzthQVVOOzs7Ozs7S0FNTCxDQUFDO0lBQ0osQ0FBQztJQUVNLEtBQUssQ0FBQyxvQkFBb0I7UUFDL0IsTUFBTSxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQzFCLE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDckMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRU0sS0FBSyxDQUFDLGtCQUFrQjtRQUM3QixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBZ0IsQ0FBQztJQUNuRSxDQUFDOztBQXBHTTtJQUROLFFBQVEsRUFBRTs7MENBQ2E7QUFGYixRQUFRO0lBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7R0FDZCxRQUFRLENBdUdwQiJ9

package/dist_ts_web/elements/wcc-properties.d.ts

@@ -0,0 +1,19 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
+export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+export type TTheme = 'bright' | 'dark';
+export declare const setEnvironment: (envArg: any) => void;
+export declare class WccProperties extends DeesElement {
+    dashboardRef: WccDashboard;
+    selectedItem: (() => TemplateResult) | DeesElement;
+    selectedViewport: TEnvironment;
+    selectedTheme: TTheme;
+    warning: string;
+    propertyContent: TemplateResult[];
+    render(): TemplateResult;
+    createProperties(): Promise<any>;
+    selectTheme(themeArg: TTheme): void;
+    scheduleUpdate(): Promise<void>;
+    selectViewport(viewport: TEnvironment): void;
+}