@design.estate/wcctools 5.1.0 → 6.1.0

package/ts_web/elements/wcc-frame.ts

@@ -1,189 +0,0 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
-
-/** 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;
-  }
-}
-
-@customElement('wcc-frame')
-export class WccFrame extends DeesElement {
-  @property()
-  accessor viewport: string;
-
-  @property({ type: Boolean })
-  accessor advancedEditorOpen: boolean = false;
-
-  @property({ type: Boolean })
-  accessor isNative: boolean = false;
-
-  @property({ type: Number })
-  accessor sidebarWidth: number = 200;
-
-  @property({ type: Boolean })
-  accessor isResizing: boolean = false;
-
-  @property({ attribute: false })
-  accessor emptyState: IWccEmptyState | null = null;
-
-  public 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;
-      }
-    `,
-  ]
-
-  public render(): TemplateResult {
-    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}
-    `;
-  }
-
-  public async getViewportElement(): Promise<HTMLElement> {
-    return this.shadowRoot.querySelector('.viewport') as HTMLElement;
-  }
-}