v3.50.2

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-04-02 - 3.50.2 - fix(chart,dashboardgrid demos)
+use dees-button text property consistently in demo interactions and update dataset button highlighting reliably
+
+- Replaces textContent reads with the component text property when wiring demo button handlers.
+- Updates the chart area demo to refresh dataset button highlight states directly on click without redundant listener replacement logic.
+- Uses the button text property when toggling dashboard edit mode labels.
+
+## 2026-04-02 - 3.50.1 - fix(appdash)
+use banner height CSS variable for terminal layout and expose terminal resize handling
+
+- Removes manual terminal top offset updates in the app dashboard and relies on the shared --banner-area-height CSS variable instead.
+- Drops fixed max-width and max-height calculations so the terminal can size more reliably within its container.
+- Makes the workspace terminal resize handler public to support external resize coordination.
+
 ## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
 add global message banners with actions and dismissal support
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.50.0",
+  "version": "3.50.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.50.0',
+  version: '3.50.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -468,16 +468,16 @@ export class DeesChartArea extends DeesElement {
     if (!this.chart) {
       return;
     }
-    
+
     try {
       // Store the new data first
       this.internalChartData = newSeries;
-      
+
       // Handle rolling window if enabled
       if (this.rollingWindow > 0 && this.realtimeMode) {
         const now = Date.now();
         const cutoffTime = now - this.rollingWindow;
-        
+
         // Filter data to only include points within the rolling window
         const filteredSeries = newSeries.map(series => ({
           name: series.name,
@@ -488,25 +488,41 @@ export class DeesChartArea extends DeesElement {
             return false;
           })
         }));
-        
+
         // Only update if we have data
         if (filteredSeries.some(s => s.data.length > 0)) {
-          // Handle y-axis scaling first
+          // Build a single options update with series, x-axis window, and y-axis
+          const isDark = !this.goBright;
+          const options: ApexCharts.ApexOptions = {
+            series: filteredSeries,
+            xaxis: {
+              min: cutoffTime,
+              max: now,
+              labels: {
+                format: 'HH:mm:ss',
+                datetimeUTC: false,
+                style: {
+                  colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+                  fontSize: '12px',
+                  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                  fontWeight: '400',
+                },
+              },
+              tickAmount: 6,
+            },
+          };
+
+          // Handle y-axis scaling
           if (this.yAxisScaling === 'dynamic') {
             const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y));
             if (allValues.length > 0) {
               const maxValue = Math.max(...allValues);
               const dynamicMax = Math.ceil(maxValue * 1.1);
-              await this.chart.updateOptions({
-                yaxis: {
-                  min: 0,
-                  max: dynamicMax
-                }
-              }, false, false);
+              options.yaxis = { min: 0, max: dynamicMax };
             }
           }
-          
-          await this.chart.updateSeries(filteredSeries, false);
+
+          await this.chart.updateOptions(options, false, false);
         }
       } else {
         await this.chart.updateSeries(newSeries, animate);

ts_web/elements/00group-chart/dees-chart-area/demo.ts

@@ -310,30 +310,11 @@ export const demoFunc = () => {
         connectionsLastUpdate = 0;
       };
 
-      // Wire up button click handlers
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.addEventListener('click', () => switchDataset('system'));
-        } else if (text === 'Network Traffic') {
-          button.addEventListener('click', () => switchDataset('network'));
-        } else if (text === 'Sales Data') {
-          button.addEventListener('click', () => switchDataset('sales'));
-        } else if (text === 'Start Live') {
-          button.addEventListener('click', () => startRealtime());
-        } else if (text === 'Stop Live') {
-          button.addEventListener('click', () => stopRealtime());
-        } else if (text === 'Spike Values') {
-          button.addEventListener('click', () => randomizeData());
-        }
-      });
-      
       // Update button states based on current dataset
       const updateButtonStates = () => {
-        const buttons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
-          const text = button.textContent?.trim();
+        const allButtons = elementArg.querySelectorAll('dees-button');
+        allButtons.forEach((button: any) => {
+          const text = button.text?.trim();
           if (text === 'System Usage') {
             button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
           } else if (text === 'Network Traffic') {
@@ -343,41 +324,38 @@ export const demoFunc = () => {
           }
         });
       };
-      
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => { switchDataset('system'); updateButtonStates(); });
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => { switchDataset('network'); updateButtonStates(); });
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => { switchDataset('sales'); updateButtonStates(); });
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+
       // Configure main chart with rolling window
       chartElement.rollingWindow = TIME_WINDOW;
       chartElement.realtimeMode = false; // Will be enabled when starting live updates
       chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
       chartElement.yAxisMax = 100;
       chartElement.autoScrollInterval = 1000; // Auto-scroll every second
-      
+
       // Set initial time window
       setTimeout(() => {
         chartElement.updateTimeWindow();
       }, 100);
       
-      // Update button states when dataset changes
-      const originalSwitchDataset = switchDataset;
-      const switchDatasetWithButtonUpdate = (name: string) => {
-        originalSwitchDataset(name);
-        updateButtonStates();
-      };
-      
-      // Replace switchDataset with the one that updates buttons
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.removeEventListener('click', () => switchDataset('system'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
-        } else if (text === 'Network Traffic') {
-          button.removeEventListener('click', () => switchDataset('network'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
-        } else if (text === 'Sales Data') {
-          button.removeEventListener('click', () => switchDataset('sales'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
-        }
-      });
-      
       // Initialize connections chart with data
       if (connectionsChartElement) {
         const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -174,7 +174,7 @@ export const demoFunc = () => {
       // Wire up button click handlers
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
         switch (text) {
           case 'Add Structured Log':
             button.addEventListener('click', () => generateRandomLog());

ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -103,7 +103,7 @@ export const demoFunc = () => {
 
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
 
         switch (text) {
           case 'Toggle Animation':
@@ -147,7 +147,7 @@ export const demoFunc = () => {
           case 'Toggle Edit Mode':
             button.addEventListener('click', () => {
               grid.editable = !grid.editable;
-              button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+              (button as any).text = grid.editable ? 'Lock Grid' : 'Unlock Grid';
             });
             break;
           case 'Reset Layout':

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -644,11 +644,6 @@ export class DeesSimpleAppDash extends DeesElement {
       const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
       const height = bannerArea ? bannerArea.offsetHeight : 0;
       maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
-
-      // Keep terminal in sync with banner height
-      if (this.currentTerminal) {
-        this.currentTerminal.style.top = `${height}px`;
-      }
     });
   }
 
@@ -710,11 +705,9 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.setupCommand = this.terminalSetupCommand;
     this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
-    const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
-    const bannerHeight = bannerArea ? bannerArea.offsetHeight : 0;
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '10';
-    terminal.style.top = `${bannerHeight}px`;
+    terminal.style.top = 'var(--banner-area-height, 0px)';
     terminal.style.left = '240px';
     terminal.style.right = '0px';
     terminal.style.bottom = '24px';
@@ -722,8 +715,6 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
     terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
-    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px - 240px)`;
-    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px - ${bannerHeight}px)`;
     
     // Add close button to terminal
     terminal.addEventListener('close', () => this.closeTerminal());

ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts

@@ -106,11 +106,11 @@ export class DeesWorkspaceTerminal extends DeesElement {
     css`
       :host {
         background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        position: absolute;
-        height: 100%;
-        width: 100%;
         display: flex;
         flex-direction: row;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
       }
 
       * {
@@ -596,7 +596,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
     tab.terminal.focus();
   }
 
-  private handleResize(): void {
+  public handleResize(): void {
     if (this.activeTabId) {
       const tab = this.tabManager.getTab(this.activeTabId);
       if (tab) {