v3.1.2

changelog.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2025-12-21 - 3.1.2 - fix(wcc-properties)
+Use LitElement.updated to recreate properties only when selectedItem changes and handle errors; remove custom scheduleUpdate implementation
+
+- Replaced public async scheduleUpdate() with protected updated(changedProperties) lifecycle method
+- Call super.updated(...) and only recreate properties when selectedItem changed to avoid unnecessary work
+- Preserve error handling and clear propertyContent on failure
+- Removed explicit super.scheduleUpdate() call to rely on LitElement's update lifecycle
+
+## 2025-12-21 - 3.1.1 - fix(wcc-properties)
+Improve wcc-properties CSS to prevent grid overflow, properly size and center icon glyphs, and adjust right-side offset
+
+- Use minmax(0, 1fr) for grid-template-columns (selectorButtons1/2/4/5) to avoid flexbox overflow and ensure consistent column sizing
+- Add min-width/min-height and inline-flex centering to .material-symbols-outlined to stabilize icon sizing and vertical/horizontal alignment
+- Increase right calc offset from 520px to 600px to accommodate wider content/controls
+- Changes applied in ts_web/elements/wcc-properties.ts
+
+## 2025-12-19 - 3.1.0 - feat(wcc-properties)
+add Share selector with inline Record button and adjust properties panel grid layout
+
+- Increase rightmost column width from 70px to 100px in properties grid
+- Introduce .shareSelector and .selectorButtons1 CSS classes and markup
+- Replace <wcc-record-button> with inline Record button that toggles icon based on isRecording
+- Add Share panel heading and integrate record control into selector area
+
 ## 2025-12-19 - 3.0.0 - 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.0.0",
+  "version": "3.1.2",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.0.0',
+  version: '3.1.2',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-properties.ts

@@ -100,7 +100,7 @@ export class WccProperties extends DeesElement {
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 350px 70px;
+          grid-template-columns: 1fr 150px 350px 100px;
           height: 100%;
         }
         .properties {
@@ -197,7 +197,8 @@ export class WccProperties extends DeesElement {
         }
 
         .viewportSelector,
-        .themeSelector {
+        .themeSelector,
+        .shareSelector {
           user-select: none;
           background: transparent;
           display: flex;
@@ -206,17 +207,22 @@ export class WccProperties extends DeesElement {
         }
         .selectorButtons2 {
           display: grid;
-          grid-template-columns: 1fr 1fr;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
           flex: 1;
         }
         .selectorButtons4 {
           display: grid;
-          grid-template-columns: repeat(4, 1fr);
+          grid-template-columns: repeat(4, minmax(0, 1fr));
           flex: 1;
         }
         .selectorButtons5 {
           display: grid;
-          grid-template-columns: repeat(5, 1fr);
+          grid-template-columns: repeat(5, minmax(0, 1fr));
+          flex: 1;
+        }
+        .selectorButtons1 {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
           flex: 1;
         }
         .button {
@@ -253,6 +259,11 @@ export class WccProperties extends DeesElement {
         .button .material-symbols-outlined {
           font-size: 18px;
           font-variation-settings: 'FILL' 0, 'wght' 300;
+          min-width: 18px;
+          min-height: 18px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
         }
         
         .button.selected .material-symbols-outlined {
@@ -295,7 +306,7 @@ export class WccProperties extends DeesElement {
           top: 0.5rem;
           bottom: 0.5rem;
           left: 0.5rem;
-          right: calc(520px + 0.5rem);
+          right: calc(600px + 0.5rem);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -671,12 +682,17 @@ export class WccProperties extends DeesElement {
               </div>
             </div>
           </div>
-          <!-- Recording Button -->
-          <wcc-record-button
-            .state=${this.isRecording ? 'recording' : 'idle'}
-            .duration=${this.recordingDuration}
-            @record-click=${() => this.handleRecordButtonClick()}
-          ></wcc-record-button>
+          <div class="shareSelector">
+            <div class="panelheading">Share</div>
+            <div class="selectorButtons1">
+              <div
+                class="button ${this.isRecording ? 'selected' : ''}"
+                @click=${() => this.handleRecordButtonClick()}
+              >
+                Record<i class="material-symbols-outlined">${this.isRecording ? 'stop_circle' : 'videocam'}</i>
+              </div>
+            </div>
+          </div>
         </div>
         ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
       </div>
@@ -909,16 +925,16 @@ export class WccProperties extends DeesElement {
     this.dashboardRef.buildUrl();
   }
 
-  public async scheduleUpdate() {
-    try {
-      await this.createProperties();
-    } catch (error) {
-      console.error('Error creating properties:', error);
-      // Clear property content on error to show clean state
-      this.propertyContent = [];
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Only recreate properties when selectedItem changes
+    if (changedProperties.has('selectedItem')) {
+      this.createProperties().catch(error => {
+        console.error('Error creating properties:', error);
+        this.propertyContent = [];
+      });
     }
-    // Always call super.scheduleUpdate to ensure component updates
-    super.scheduleUpdate();
   }
 
   public selectViewport(viewport: TEnvironment) {