@design.estate/wcctools 5.1.0 → 6.1.0

package/dist_ts_shell/elements/wcc-preview-frame.js

@@ -0,0 +1,197 @@
+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 plugins from '../plugins.js';
+/** The width of the preview document per viewport; desktop and native fill the frame. */
+const getViewportWidth = (viewportArg) => {
+    switch (viewportArg) {
+        case 'tablet':
+            return `${plugins.deesDomtools.breakpoints.tablet}px`;
+        case 'phablet':
+            return `${plugins.deesDomtools.breakpoints.phablet}px`;
+        case 'phone':
+            return `${plugins.deesDomtools.breakpoints.phone}px`;
+        default:
+            return '100%';
+    }
+};
+/**
+ * Hosts the preview document in an iframe as wide as the selected viewport, so the preview's
+ * width media queries respond to it.
+ */
+let WccPreviewFrame = (() => {
+    let _classDecorators = [customElement('wcc-preview-frame')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _viewport_decorators;
+    let _viewport_initializers = [];
+    let _viewport_extraInitializers = [];
+    let _previewSrc_decorators;
+    let _previewSrc_initializers = [];
+    let _previewSrc_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 = [];
+    var WccPreviewFrame = 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()];
+            _previewSrc_decorators = [property()];
+            _advancedEditorOpen_decorators = [property({ type: Boolean })];
+            _isNative_decorators = [property({ type: Boolean })];
+            _sidebarWidth_decorators = [property({ type: Number })];
+            _isResizing_decorators = [property({ type: Boolean })];
+            __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, _previewSrc_decorators, { kind: "accessor", name: "previewSrc", static: false, private: false, access: { has: obj => "previewSrc" in obj, get: obj => obj.previewSrc, set: (obj, value) => { obj.previewSrc = value; } }, metadata: _metadata }, _previewSrc_initializers, _previewSrc_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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccPreviewFrame = _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, 'desktop');
+        get viewport() { return this.#viewport_accessor_storage; }
+        set viewport(value) { this.#viewport_accessor_storage = value; }
+        #previewSrc_accessor_storage = (__runInitializers(this, _viewport_extraInitializers), __runInitializers(this, _previewSrc_initializers, ''));
+        /** The preview document's address. Set once: changing it navigates the preview. */
+        get previewSrc() { return this.#previewSrc_accessor_storage; }
+        set previewSrc(value) { this.#previewSrc_accessor_storage = value; }
+        #advancedEditorOpen_accessor_storage = (__runInitializers(this, _previewSrc_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; }
+        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-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior: contain;
+      }
+
+      .preview {
+        display: block;
+        box-sizing: border-box;
+        height: 100%;
+        margin: 0 auto;
+        border: 0;
+        background: transparent;
+      }
+    `,
+        ];
+        get iframe() {
+            return this.shadowRoot?.querySelector('iframe') ?? null;
+        }
+        render() {
+            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;
+        }
+
+        .preview {
+          width: ${this.isNative ? '100%' : getViewportWidth(this.viewport)};
+          pointer-events: ${this.isResizing ? 'none' : 'auto'};
+          ${!this.isNative && this.viewport !== 'desktop'
+                ? 'border-right: 1px dotted #444; border-left: 1px dotted #444;'
+                : ''}
+        }
+
+        ${!this.isNative ? `
+          @container wccShell (max-width: 600px) {
+            :host {
+              left: 0;
+              top: 120px;
+              bottom: ${this.advancedEditorOpen ? '460px' : '160px'};
+            }
+          }
+        ` : ''}
+      </style>
+      ${this.previewSrc ? html `
+        <iframe class="preview" title="Preview" src=${this.previewSrc}></iframe>
+      ` : null}
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _isResizing_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return WccPreviewFrame = _classThis;
+})();
+export { WccPreviewFrame };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXByZXZpZXctZnJhbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c19zaGVsbC9lbGVtZW50cy93Y2MtcHJldmlldy1mcmFtZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRS9ILE9BQU8sS0FBSyxPQUFPLE1BQU0sZUFBZSxDQUFDO0FBVXpDLHlGQUF5RjtBQUN6RixNQUFNLGdCQUFnQixHQUFHLENBQUMsV0FBeUIsRUFBVSxFQUFFO0lBQzdELFFBQVEsV0FBVyxFQUFFLENBQUM7UUFDcEIsS0FBSyxRQUFRO1lBQ1gsT0FBTyxHQUFHLE9BQU8sQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLE1BQU0sSUFBSSxDQUFDO1FBQ3hELEtBQUssU0FBUztZQUNaLE9BQU8sR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxPQUFPLElBQUksQ0FBQztRQUN6RCxLQUFLLE9BQU87WUFDVixPQUFPLEdBQUcsT0FBTyxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsS0FBSyxJQUFJLENBQUM7UUFDdkQ7WUFDRSxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDO0FBQ0gsQ0FBQyxDQUFDO0FBRUY7OztHQUdHO0lBRVUsZUFBZTs0QkFEM0IsYUFBYSxDQUFDLG1CQUFtQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7K0JBQW5CLFNBQVEsV0FBVzs7OztvQ0FDN0MsUUFBUSxFQUFFO3NDQUlWLFFBQVEsRUFBRTs4Q0FHVixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7b0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzt3Q0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3NDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFmNUIsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUEyQjtZQUk1QyxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQWM7WUFHakMsMk1BQVMsa0JBQWtCLDZCQUFsQixrQkFBa0IsK0dBQWtCO1lBRzdDLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFBa0I7WUFHbkMseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUFlO1lBR3BDLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBa0I7WUFsQnZDLDZLQTRGQzs7OztRQTFGQyw2RUFBa0MsU0FBUyxFQUFDO1FBQTVDLElBQVMsUUFBUSw4Q0FBMkI7UUFBNUMsSUFBUyxRQUFRLG9EQUEyQjtRQUk1Qyx3SUFBOEIsRUFBRSxHQUFDO1FBRmpDLG1GQUFtRjtRQUVuRixJQUFTLFVBQVUsZ0RBQWM7UUFBakMsSUFBUyxVQUFVLHNEQUFjO1FBR2pDLDBKQUF1QyxLQUFLLEdBQUM7UUFBN0MsSUFBUyxrQkFBa0Isd0RBQWtCO1FBQTdDLElBQVMsa0JBQWtCLDhEQUFrQjtRQUc3Qyw4SUFBNkIsS0FBSyxHQUFDO1FBQW5DLElBQVMsUUFBUSw4Q0FBa0I7UUFBbkMsSUFBUyxRQUFRLG9EQUFrQjtRQUduQyw0SUFBZ0MsR0FBRyxHQUFDO1FBQXBDLElBQVMsWUFBWSxrREFBZTtRQUFwQyxJQUFTLFlBQVksd0RBQWU7UUFHcEMsNElBQStCLEtBQUssR0FBQztRQUFyQyxJQUFTLFVBQVUsZ0RBQWtCO1FBQXJDLElBQVMsVUFBVSxzREFBa0I7UUFFOUIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLENBQUE7Ozs7O3NCQUtlLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O0tBZW5EO1NBQ0YsQ0FBQztRQUVGLElBQVcsTUFBTTtZQUNmLE9BQU8sSUFBSSxDQUFDLFVBQVUsRUFBRSxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksSUFBSSxDQUFDO1FBQzFELENBQUM7UUFFTSxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7OztZQUdILElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDOzs7Ozs7V0FNakIsQ0FBQyxDQUFDLENBQUM7c0JBQ1EsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU87O29CQUU3QyxJQUFJLENBQUMsWUFBWTs7V0FFMUI7d0JBQ2EsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxlQUFlOzs7OzttQkFLL0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDOzRCQUMvQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07WUFDakQsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssU0FBUztnQkFDN0MsQ0FBQyxDQUFDLDhEQUE4RDtnQkFDaEUsQ0FBQyxDQUFDLEVBQ0o7OztVQUdBLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7Ozs7O3dCQUtILElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxPQUFPOzs7U0FHMUQsQ0FBQyxDQUFDLENBQUMsRUFBRTs7UUFFTixJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUE7c0RBQ3dCLElBQUksQ0FBQyxVQUFVO09BQzlELENBQUMsQ0FBQyxDQUFDLElBQUk7S0FDVCxDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBM0ZVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==

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

@@ -0,0 +1,49 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+import type { TWccViewport } from './wcc-preview-frame.js';
+import './wcc-record-button.js';
+import './wcc-recording-panel.js';
+/** An open JSON editor for an Object or Array property. */
+interface IPropertyEditor {
+    id: string;
+    name: string;
+    editorValue: string;
+    editorError: string;
+}
+export declare class WccProperties extends DeesElement {
+    /** The connected preview's bridge; null while the preview loads. */
+    accessor bridge: plugins.interfaces.IWccPreviewBridge | null;
+    /** Changes whenever the preview rendered something new, so the panel reads the properties again. */
+    accessor renderCount: number;
+    /** The element the recorder crops a viewport recording to. */
+    accessor captureTarget: HTMLElement | null;
+    accessor selectedViewport: TWccViewport;
+    accessor selectedTheme: plugins.interfaces.TWccTheme;
+    accessor warning: string;
+    accessor isNative: boolean;
+    accessor sidebarWidth: number;
+    accessor propertyContent: TemplateResult[];
+    accessor editingProperties: IPropertyEditor[];
+    accessor showRecordingPanel: boolean;
+    accessor isRecording: boolean;
+    accessor recordingDuration: number;
+    accessor isHidden: boolean;
+    editorHeight: number;
+    private propertiesGeneration;
+    private hideTimeout;
+    disconnectedCallback(): Promise<void>;
+    render(): TemplateResult;
+    /** Read the rendered element's properties from the preview and build their editors. */
+    createProperties(): Promise<void>;
+    private renderPropertyEditor;
+    selectTheme(themeArg: plugins.interfaces.TWccTheme): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    selectViewport(viewport: TWccViewport): void;
+    private openAdvancedEditor;
+    private handleEditorSave;
+    private handleEditorCancel;
+    private closeAllEditors;
+    private dispatchEditorState;
+    private handleRecordButtonClick;
+}
+export {};