@design.estate/wcctools 5.1.0

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

@@ -0,0 +1,22 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+/** What the frame shows when there is no demo to render. */
+export interface IWccEmptyState {
+    title: string;
+    detail: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wcc-frame': WccFrame;
+    }
+}
+export declare class WccFrame extends DeesElement {
+    accessor viewport: string;
+    accessor advancedEditorOpen: boolean;
+    accessor isNative: boolean;
+    accessor sidebarWidth: number;
+    accessor isResizing: boolean;
+    accessor emptyState: IWccEmptyState | null;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    getViewportElement(): Promise<HTMLElement>;
+}

package/dist_ts_web/elements/wcc-frame.js

@@ -0,0 +1,256 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, property, html, customElement, css, cssManager } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+let WccFrame = (() => {
+    let _classDecorators = [customElement('wcc-frame')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _viewport_decorators;
+    let _viewport_initializers = [];
+    let _viewport_extraInitializers = [];
+    let _advancedEditorOpen_decorators;
+    let _advancedEditorOpen_initializers = [];
+    let _advancedEditorOpen_extraInitializers = [];
+    let _isNative_decorators;
+    let _isNative_initializers = [];
+    let _isNative_extraInitializers = [];
+    let _sidebarWidth_decorators;
+    let _sidebarWidth_initializers = [];
+    let _sidebarWidth_extraInitializers = [];
+    let _isResizing_decorators;
+    let _isResizing_initializers = [];
+    let _isResizing_extraInitializers = [];
+    let _emptyState_decorators;
+    let _emptyState_initializers = [];
+    let _emptyState_extraInitializers = [];
+    var WccFrame = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _viewport_decorators = [property()];
+            _advancedEditorOpen_decorators = [property({ type: Boolean })];
+            _isNative_decorators = [property({ type: Boolean })];
+            _sidebarWidth_decorators = [property({ type: Number })];
+            _isResizing_decorators = [property({ type: Boolean })];
+            _emptyState_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _viewport_decorators, { kind: "accessor", name: "viewport", static: false, private: false, access: { has: obj => "viewport" in obj, get: obj => obj.viewport, set: (obj, value) => { obj.viewport = value; } }, metadata: _metadata }, _viewport_initializers, _viewport_extraInitializers);
+            __esDecorate(this, null, _advancedEditorOpen_decorators, { kind: "accessor", name: "advancedEditorOpen", static: false, private: false, access: { has: obj => "advancedEditorOpen" in obj, get: obj => obj.advancedEditorOpen, set: (obj, value) => { obj.advancedEditorOpen = value; } }, metadata: _metadata }, _advancedEditorOpen_initializers, _advancedEditorOpen_extraInitializers);
+            __esDecorate(this, null, _isNative_decorators, { kind: "accessor", name: "isNative", static: false, private: false, access: { has: obj => "isNative" in obj, get: obj => obj.isNative, set: (obj, value) => { obj.isNative = value; } }, metadata: _metadata }, _isNative_initializers, _isNative_extraInitializers);
+            __esDecorate(this, null, _sidebarWidth_decorators, { kind: "accessor", name: "sidebarWidth", static: false, private: false, access: { has: obj => "sidebarWidth" in obj, get: obj => obj.sidebarWidth, set: (obj, value) => { obj.sidebarWidth = value; } }, metadata: _metadata }, _sidebarWidth_initializers, _sidebarWidth_extraInitializers);
+            __esDecorate(this, null, _isResizing_decorators, { kind: "accessor", name: "isResizing", static: false, private: false, access: { has: obj => "isResizing" in obj, get: obj => obj.isResizing, set: (obj, value) => { obj.isResizing = value; } }, metadata: _metadata }, _isResizing_initializers, _isResizing_extraInitializers);
+            __esDecorate(this, null, _emptyState_decorators, { kind: "accessor", name: "emptyState", static: false, private: false, access: { has: obj => "emptyState" in obj, get: obj => obj.emptyState, set: (obj, value) => { obj.emptyState = value; } }, metadata: _metadata }, _emptyState_initializers, _emptyState_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccFrame = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #viewport_accessor_storage = __runInitializers(this, _viewport_initializers, void 0);
+        get viewport() { return this.#viewport_accessor_storage; }
+        set viewport(value) { this.#viewport_accessor_storage = value; }
+        #advancedEditorOpen_accessor_storage = (__runInitializers(this, _viewport_extraInitializers), __runInitializers(this, _advancedEditorOpen_initializers, false));
+        get advancedEditorOpen() { return this.#advancedEditorOpen_accessor_storage; }
+        set advancedEditorOpen(value) { this.#advancedEditorOpen_accessor_storage = value; }
+        #isNative_accessor_storage = (__runInitializers(this, _advancedEditorOpen_extraInitializers), __runInitializers(this, _isNative_initializers, false));
+        get isNative() { return this.#isNative_accessor_storage; }
+        set isNative(value) { this.#isNative_accessor_storage = value; }
+        #sidebarWidth_accessor_storage = (__runInitializers(this, _isNative_extraInitializers), __runInitializers(this, _sidebarWidth_initializers, 200));
+        get sidebarWidth() { return this.#sidebarWidth_accessor_storage; }
+        set sidebarWidth(value) { this.#sidebarWidth_accessor_storage = value; }
+        #isResizing_accessor_storage = (__runInitializers(this, _sidebarWidth_extraInitializers), __runInitializers(this, _isResizing_initializers, false));
+        get isResizing() { return this.#isResizing_accessor_storage; }
+        set isResizing(value) { this.#isResizing_accessor_storage = value; }
+        #emptyState_accessor_storage = (__runInitializers(this, _isResizing_extraInitializers), __runInitializers(this, _emptyState_initializers, null));
+        get emptyState() { return this.#emptyState_accessor_storage; }
+        set emptyState(value) { this.#emptyState_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        border: 10px solid rgba(255, 174, 175, 1);
+        box-sizing: border-box;
+        position: absolute;
+        background: ${cssManager.bdTheme('#333', '#000')};
+        right: 0px;
+        overflow-y: auto;
+        overflow-x: auto;
+        overscroll-behavior: contain;
+      }
+
+      .viewport {
+        box-sizing: border-box;
+        container-type: inline-size;
+        container-name: wccToolsViewport;
+        position: relative;
+        min-height: 100%;
+      }
+
+      .empty-state {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        pointer-events: none;
+      }
+
+      .empty-state-card {
+        pointer-events: auto;
+        max-width: 420px;
+        padding: 20px 24px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: rgba(10, 10, 10, 0.88);
+        backdrop-filter: blur(8px);
+        color: #e5e5e5;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        text-align: center;
+      }
+
+      .empty-state-title {
+        margin: 0 0 6px;
+        font-size: 15px;
+        font-weight: 600;
+        overflow-wrap: anywhere;
+      }
+
+      .empty-state-detail {
+        margin: 0;
+        font-size: 13px;
+        line-height: 1.5;
+        color: #a3a3a3;
+        overflow-wrap: anywhere;
+      }
+    `,
+        ];
+        render() {
+            const viewportWidth = (() => {
+                switch (this.viewport) {
+                    case 'tablet':
+                        return `${domtools.breakpoints.tablet}px`;
+                    case 'phablet':
+                        return `${domtools.breakpoints.phablet}px`;
+                    case 'phone':
+                        return `${domtools.breakpoints.phone}px`;
+                    default:
+                        return '100%';
+                }
+            })();
+            return html `
+      <style>
+        :host {
+          ${this.isNative ? `
+            border: 0px solid rgba(255, 174, 175, 0) !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
+            bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
+            border: 10px solid rgba(255, 174, 175, 1);
+            left: ${this.sidebarWidth}px;
+            top: 0;
+          `}
+          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
+          padding: 0;
+        }
+
+        .viewport {
+          width: ${this.isNative ? '100%' : viewportWidth};
+          margin: 0 auto;
+          ${!this.isNative && 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;
+            `}
+        }
+
+        ${!this.isNative ? `
+          @container wccDashboard (max-width: 600px) {
+            :host {
+              left: 0;
+              top: 120px;
+              bottom: ${this.advancedEditorOpen ? '460px' : '160px'};
+            }
+          }
+        ` : ''}
+      </style>
+      <div class="viewport">
+        
+      </div>
+      ${this.emptyState ? html `
+        <div class="empty-state">
+          <div class="empty-state-card" role="status">
+            <h2 class="empty-state-title">${this.emptyState.title}</h2>
+            <p class="empty-state-detail">${this.emptyState.detail}</p>
+          </div>
+        </div>
+      ` : null}
+    `;
+        }
+        async getViewportElement() {
+            return this.shadowRoot.querySelector('.viewport');
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _emptyState_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return WccFrame = _classThis;
+})();
+export { WccFrame };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLWZyYW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3djYy1mcmFtZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRS9ILE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7SUFlNUMsUUFBUTs0QkFEcEIsYUFBYSxDQUFDLFdBQVcsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQUFuQixTQUFRLFdBQVc7Ozs7b0NBQ3RDLFFBQVEsRUFBRTs4Q0FHVixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7b0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzt3Q0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3NDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7c0NBRzNCLFFBQVEsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQztZQWQvQiw2S0FBUyxRQUFRLDZCQUFSLFFBQVEsMkZBQVM7WUFHMUIsMk1BQVMsa0JBQWtCLDZCQUFsQixrQkFBa0IsK0dBQWtCO1lBRzdDLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFBa0I7WUFHbkMseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUFlO1lBR3BDLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBa0I7WUFHckMsbUxBQVMsVUFBVSw2QkFBVixVQUFVLCtGQUErQjtZQWpCcEQsNktBMktDOzs7O1FBektDLHFGQUEwQjtRQUExQixJQUFTLFFBQVEsOENBQVM7UUFBMUIs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

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

@@ -0,0 +1,43 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+import { type TTemplateFactory } from './wcctools.helpers.js';
+import './wcc-record-button.js';
+import './wcc-recording-panel.js';
+export type { TPropertyType } from './wcctools.helpers.js';
+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 {
+    accessor dashboardRef: WccDashboard;
+    accessor selectedItem: TTemplateFactory | DeesElement;
+    accessor selectedViewport: TEnvironment;
+    accessor selectedTheme: TTheme;
+    accessor warning: string;
+    accessor isNative: boolean;
+    accessor sidebarWidth: number;
+    accessor propertyContent: TemplateResult[];
+    accessor editingProperties: Array<{
+        id: string;
+        name: string;
+        value: any;
+        element: HTMLElement;
+        editorValue: string;
+        editorError: string;
+    }>;
+    accessor showRecordingPanel: boolean;
+    accessor isRecording: boolean;
+    accessor recordingDuration: number;
+    accessor isHidden: boolean;
+    editorHeight: number;
+    render(): TemplateResult;
+    createProperties(): Promise<any>;
+    selectTheme(themeArg: TTheme): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    selectViewport(viewport: TEnvironment): void;
+    private openAdvancedEditor;
+    private handleEditorSave;
+    private handleEditorCancel;
+    private closeAllEditors;
+    private toggleNative;
+    private handleRecordButtonClick;
+}