BREAKING CHANGE(ts_web): Replace fullscreen boolean with native viewport mode across components, add native viewport selector and toggle, and update dev deps and npmextra config

ts_web/elements/wcc-properties.ts

@@ -35,7 +35,7 @@ export class WccProperties extends DeesElement {
   accessor warning: string = null;
 
   @property()
-  accessor isFullscreen: boolean = false;
+  accessor isNative: boolean = false;
 
   @state()
   accessor propertyContent: TemplateResult[] = [];
@@ -96,11 +96,11 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
-          display: ${this.isFullscreen ? 'none' : 'block'};
+          display: ${this.isNative ? 'none' : 'block'};
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 300px 70px 70px;
+          grid-template-columns: 1fr 150px 350px 70px;
           height: 100%;
         }
         .properties {
@@ -214,6 +214,11 @@ export class WccProperties extends DeesElement {
           grid-template-columns: repeat(4, 1fr);
           flex: 1;
         }
+        .selectorButtons5 {
+          display: grid;
+          grid-template-columns: repeat(5, 1fr);
+          flex: 1;
+        }
         .button {
           display: flex;
           flex-direction: column;
@@ -623,7 +628,7 @@ export class WccProperties extends DeesElement {
           </div>
           <div class="viewportSelector">
             <div class="panelheading">Viewport</div>
-            <div class="selectorButtons4">
+            <div class="selectorButtons5">
               <div
                 class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
                 @click=${() => {
@@ -649,23 +654,23 @@ export class WccProperties extends DeesElement {
                 Tablet<i class="material-symbols-outlined">tablet</i>
               </div>
               <div
-                class="button ${this.selectedViewport === 'desktop' ||
-                this.selectedViewport === 'native'
-                  ? 'selected'
-                  : null}"
+                class="button ${this.selectedViewport === 'desktop' ? 'selected' : null}"
                 @click=${() => {
-                  this.selectViewport('native');
+                  this.selectViewport('desktop');
                 }}
               >
                 Desktop<i class="material-symbols-outlined">desktop_windows</i>
               </div>
+              <div
+                class="button ${this.selectedViewport === 'native' ? 'selected' : null}"
+                @click=${() => {
+                  this.selectViewport('native');
+                }}
+              >
+                Native<i class="material-symbols-outlined">fullscreen</i>
+              </div>
             </div>
           </div>
-          <div class="docs" @click=${() => this.toggleFullscreen()}>
-            <i class="material-symbols-outlined" style="font-size: 20px;">
-              ${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
-            </i>
-          </div>
           <!-- Recording Button -->
           <wcc-record-button
             .state=${this.isRecording ? 'recording' : 'idle'}
@@ -1016,9 +1021,9 @@ export class WccProperties extends DeesElement {
     );
   }
 
-  private toggleFullscreen() {
+  private toggleNative() {
     this.dispatchEvent(
-      new CustomEvent('toggleFullscreen', {
+      new CustomEvent('toggleNative', {
         bubbles: true
       })
     );