add fullscreen mode

ts_web/elements/wcc-properties.ts

@@ -31,6 +31,9 @@ export class WccProperties extends DeesElement {
   @property()
   public warning: string = null;
 
+  @property()
+  public isFullscreen: boolean = false;
+
   @state()
   propertyContent: TemplateResult[] = [];
 
@@ -80,6 +83,7 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
+          display: ${this.isFullscreen ? 'none' : 'block'};
         }
         .grid {
           display: grid;
@@ -644,7 +648,11 @@ export class WccProperties 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 ? html`<div class="warning">${this.warning}</div>` : null}
       </div>
@@ -977,4 +985,12 @@ export class WccProperties extends DeesElement {
       })
     );
   }
+
+  private toggleFullscreen() {
+    this.dispatchEvent(
+      new CustomEvent('toggleFullscreen', {
+        bubbles: true
+      })
+    );
+  }
 }