@design.estate/dees-wcctools 1.1.0 → 1.1.1

package/dist_bundle/bundle.js

@@ -42886,14 +42886,25 @@ var WccFrame = class extends DeesElement {
   constructor() {
     super(...arguments);
     this.advancedEditorOpen = false;
+    this.isFullscreen = false;
   }
   render() {
     return x`
       <style>
         :host {
-          bottom: ${this.advancedEditorOpen ? "400px" : "100px"};
-          transition: bottom 0.3s ease;
-          ${(() => {
+          ${this.isFullscreen ? `
+            border: none !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
+            bottom: ${this.advancedEditorOpen ? "400px" : "100px"};
+            border: 10px solid #ffaeaf;
+            left: 200px;
+          `}
+          transition: all 0.3s ease;
+          ${this.isFullscreen ? "padding: 0px;" : (() => {
       switch (this.viewport) {
         case "desktop":
           return `
@@ -42916,7 +42927,7 @@ var WccFrame = class extends DeesElement {
         }
 
         .viewport {
-          ${this.viewport !== "desktop" ? x` border-right: 1px dotted #444; border-left: 1px dotted #444; ` : x``}
+          ${!this.isFullscreen && this.viewport !== "desktop" ? x` border-right: 1px dotted #444; border-left: 1px dotted #444; ` : x``}
           background:
           ${this.goBright ? `
               radial-gradient(#CCCCCC 3px, transparent 4px),
@@ -42981,12 +42992,19 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean })
 ], WccFrame.prototype, "advancedEditorOpen", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], WccFrame.prototype, "isFullscreen", 2);
 WccFrame = __decorateClass([
   t4("wcc-frame")
 ], WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
 var WccSidebar = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.isFullscreen = false;
+  }
   render() {
     return x`
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
@@ -43008,7 +43026,7 @@ var WccSidebar = class extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: block;
+          display: ${this.isFullscreen ? "none" : "block"};
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
@@ -43203,6 +43221,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], WccSidebar.prototype, "dashboardRef", 2);
+__decorateClass([
+  n4()
+], WccSidebar.prototype, "isFullscreen", 2);
 WccSidebar = __decorateClass([
   t4("wcc-sidebar")
 ], WccSidebar);
@@ -43218,6 +43239,7 @@ var WccProperties = class extends DeesElement {
     this.selectedViewport = "native";
     this.selectedTheme = "dark";
     this.warning = null;
+    this.isFullscreen = false;
     this.propertyContent = [];
     this.editingProperties = [];
     this.editorHeight = 300;
@@ -43256,6 +43278,7 @@ var WccProperties = class extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
+          display: ${this.isFullscreen ? "none" : "block"};
         }
         .grid {
           display: grid;
@@ -43817,7 +43840,11 @@ var WccProperties = class extends DeesElement {
               </div>
             </div>
           </div>
-          <div class="docs">Docs</div>
+          <div class="docs" @click=${() => this.toggleFullscreen()}>
+            <i class="material-symbols-outlined" style="font-size: 20px;">
+              ${this.isFullscreen ? "fullscreen_exit" : "fullscreen"}
+            </i>
+          </div>
         </div>
         ${this.warning ? x`<div class="warning">${this.warning}</div>` : null}
       </div>
@@ -44099,6 +44126,13 @@ var WccProperties = class extends DeesElement {
       })
     );
   }
+  toggleFullscreen() {
+    this.dispatchEvent(
+      new CustomEvent("toggleFullscreen", {
+        bubbles: true
+      })
+    );
+  }
 };
 __decorateClass([
   n4({
@@ -44117,6 +44151,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], WccProperties.prototype, "warning", 2);
+__decorateClass([
+  n4()
+], WccProperties.prototype, "isFullscreen", 2);
 __decorateClass([
   r5()
 ], WccProperties.prototype, "propertyContent", 2);
@@ -44133,6 +44170,7 @@ var WccDashboard2 = class extends DeesElement {
     super();
     this.selectedViewport = "desktop";
     this.selectedTheme = "dark";
+    this.isFullscreen = false;
     this.pages = {};
     this.elements = {};
     this.warning = null;
@@ -44164,6 +44202,7 @@ var WccDashboard2 = class extends DeesElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .isFullscreen=${this.isFullscreen}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
     }}
@@ -44180,6 +44219,7 @@ var WccDashboard2 = class extends DeesElement {
         .selectedItem=${this.selectedItem}
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
+        .isFullscreen=${this.isFullscreen}
         @selectedViewport=${(eventArg) => {
       this.selectedViewport = eventArg.detail;
       this.scheduleUpdate();
@@ -44193,9 +44233,12 @@ var WccDashboard2 = class extends DeesElement {
         frame.advancedEditorOpen = eventArg.detail.isOpen;
         frame.requestUpdate();
       }
+    }}
+        @toggleFullscreen=${() => {
+      this.toggleFullscreen();
     }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isFullscreen=${this.isFullscreen}>
       </wcc-frame>
     `;
   }
@@ -44208,8 +44251,16 @@ var WccDashboard2 = class extends DeesElement {
       }, 0);
     }
   }
+  toggleFullscreen() {
+    this.isFullscreen = !this.isFullscreen;
+  }
   async firstUpdated() {
     this.domtools = await dist_ts_exports27.DomTools.setupDomTools();
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this.isFullscreen) {
+        this.isFullscreen = false;
+      }
+    });
     setTimeout(() => {
       this.setupScrollListeners();
     }, 500);
@@ -44362,6 +44413,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], WccDashboard2.prototype, "selectedTheme", 2);
+__decorateClass([
+  n4()
+], WccDashboard2.prototype, "isFullscreen", 2);
 __decorateClass([
   n4()
 ], WccDashboard2.prototype, "pages", 2);