1.9.8

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-06-26 - 1.9.8 - fix(deps, windowlayer)
+Update dependency versions and adjust dees-windowlayer CSS to add pointer-events fix
+
+- Bump @design.estate/dees-wcctools from ^1.0.98 to ^1.0.101
+- Bump @tiptap packages from 2.22.3 to 2.23.0
+- Bump lucide from ^0.522.0 to ^0.523.0
+- Bump @git.zone/tsbundle from ^2.4.0 to ^2.5.1 and tswatch from ^2.0.37 to ^2.1.2
+- Add 'pointer-events: none' to dees-windowlayer CSS to improve overlay behavior
+
 ## 2025-06-22 - 1.9.0 - feat(form-inputs)
 Improve form input consistency and auto spacing across inputs and buttons
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "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",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
     "watch": "tswatch element",
     "buildDocs": "tsdoc"
   },
@@ -17,7 +17,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.3",
     "@design.estate/dees-element": "^2.0.45",
-    "@design.estate/dees-wcctools": "^1.0.98",
+    "@design.estate/dees-wcctools": "^1.0.101",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -25,18 +25,18 @@
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tiptap/core": "^2.22.3",
-    "@tiptap/extension-link": "^2.22.3",
-    "@tiptap/extension-text-align": "^2.22.3",
-    "@tiptap/extension-typography": "^2.22.3",
-    "@tiptap/extension-underline": "^2.22.3",
-    "@tiptap/starter-kit": "^2.22.3",
+    "@tiptap/core": "^2.23.0",
+    "@tiptap/extension-link": "^2.23.0",
+    "@tiptap/extension-text-align": "^2.23.0",
+    "@tiptap/extension-typography": "^2.23.0",
+    "@tiptap/extension-underline": "^2.23.0",
+    "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.2.0",
     "@webcontainer/api": "1.2.0",
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.522.0",
+    "lucide": "^0.523.0",
     "monaco-editor": "^0.52.2",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
@@ -44,9 +44,9 @@
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.6.4",
-    "@git.zone/tsbundle": "^2.4.0",
+    "@git.zone/tsbundle": "^2.5.1",
     "@git.zone/tstest": "^2.3.1",
-    "@git.zone/tswatch": "^2.0.37",
+    "@git.zone/tswatch": "^2.1.2",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
     "@types/node": "^22.0.0"

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-input-dropdown.demo.ts

@@ -1,5 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import './dees-form.js';
+import './dees-form-submit.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -14,37 +17,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .demo-section {
-          background: #f8f9fa;
-          border-radius: 8px;
-          padding: 24px;
-          position: relative;
+        dees-panel {
+          margin-bottom: 24px;
         }
         
-        @media (prefers-color-scheme: dark) {
-          .demo-section {
-            background: #1a1a1a;
-          }
-        }
-        
-        .demo-section h3 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #0069f2;
-          font-size: 18px;
-        }
-        
-        .demo-section p {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #666;
-          font-size: 14px;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .demo-section p {
-            color: #999;
-          }
+        dees-panel:last-child {
+          margin-bottom: 0;
         }
         
         .horizontal-group {
@@ -66,10 +44,7 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
-        <h3>Basic Dropdowns</h3>
-        <p>Standard dropdown with search functionality and various options</p>
-        
+      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
         <dees-input-dropdown
           .label=${'Select Country'}
           .options=${[
@@ -94,12 +69,9 @@ export const demoFunc = () => html`
             { option: 'Guest', key: 'guest' }
           ]}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Without Search</h3>
-        <p>Dropdown with search functionality disabled for simpler selection</p>
-        
+      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
         <dees-input-dropdown
           .label=${'Priority Level'}
           .enableSearch=${false}
@@ -110,12 +82,9 @@ export const demoFunc = () => html`
           ]}
           .selectedOption=${{ option: 'Medium', key: 'medium' }}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Horizontal Layout</h3>
-        <p>Multiple dropdowns in a horizontal layout for compact forms</p>
-        
+      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
         <div class="horizontal-group">
           <dees-input-dropdown
             .label=${'Department'}
@@ -150,12 +119,9 @@ export const demoFunc = () => html`
             ]}
           ></dees-input-dropdown>
         </div>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>States</h3>
-        <p>Different states and configurations</p>
-        
+      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
         <dees-input-dropdown
           .label=${'Required Field'}
           .required=${true}
@@ -174,16 +140,13 @@ export const demoFunc = () => html`
           ]}
           .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
       <div class="spacer">
         (Spacer to test dropdown positioning)
       </div>
       
-      <div class="demo-section">
-        <h3>Bottom Positioning</h3>
-        <p>Dropdown that opens upward when near bottom of viewport</p>
-        
+      <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
         <dees-input-dropdown
           .label=${'Opens Upward'}
           .options=${[
@@ -194,7 +157,65 @@ export const demoFunc = () => html`
             { option: 'Fifth Option', key: 'fifth' }
           ]}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
+
+      <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
+        <dees-input-dropdown
+          .label=${'Select Product'}
+          .options=${[
+            { option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
+            { option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
+            { option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
+          ]}
+          @change=${(e: CustomEvent) => {
+            const output = document.querySelector('#selection-output');
+            if (output && e.detail.value) {
+              output.innerHTML = `
+                <strong>Selected:</strong> ${e.detail.value.option}<br>
+                <strong>Key:</strong> ${e.detail.value.key}<br>
+                <strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
+                <strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
+              `;
+            }
+          }}
+        ></dees-input-dropdown>
+        
+        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;">
+          <em>Select a product to see details...</em>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
+        <dees-form>
+          <dees-input-dropdown
+            .label=${'Project Type'}
+            .key=${'projectType'}
+            .required=${true}
+            .options=${[
+              { option: 'Web Application', key: 'web' },
+              { option: 'Mobile Application', key: 'mobile' },
+              { option: 'Desktop Application', key: 'desktop' },
+              { option: 'API Service', key: 'api' }
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-dropdown
+            .label=${'Development Framework'}
+            .key=${'framework'}
+            .required=${true}
+            .options=${[
+              { option: 'React', key: 'react', payload: { type: 'web' } },
+              { option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
+              { option: 'Angular', key: 'angular', payload: { type: 'web' } },
+              { option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
+              { option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
+              { option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
+        </dees-form>
+      </dees-panel>
     </div>
   </dees-demowrapper>
 `

ts_web/elements/dees-input-dropdown.ts

@@ -294,6 +294,12 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       console.log(elevatedDropdown.selectedOption);
       console.log(elevatedDropdown.highlightedIndex);
       this.windowOverlay.appendChild(elevatedDropdown);
+      
+      // Prevent clicks on the dropdown from closing it
+      elevatedDropdown.addEventListener('click', (e: Event) => {
+        e.stopPropagation();
+      });
+      
       await domtoolsInstance.convenience.smartdelay.delayFor(0);
       elevatedDropdown.toggleSelectionBox();
       const destroyOverlay = async () => {

ts_web/elements/dees-windowlayer.ts

@@ -79,6 +79,11 @@ export class DeesWindowLayer extends DeesElement {
           justify-content: center;
           align-items: center;
           z-index: ${this.contentZIndex};
+          pointer-events: none;
+        }
+        
+        .slotContent > * {
+          pointer-events: auto;
         }
         
         .visible {
@@ -87,9 +92,9 @@ export class DeesWindowLayer extends DeesElement {
           pointer-events: all;
         }
       </style>
-      <div class="windowOverlay ${this.visible ? 'visible' : null}">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
       </div>
-      <div @click=${this.dispatchClicked} class="slotContent">
+      <div class="slotContent">
         <slot></slot>
       </div>
     `;

ts_web/elements/wysiwyg/dees-formatting-menu.ts

@@ -7,7 +7,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { WysiwygFormatting } from './wysiwyg.formatting.js';
 
@@ -35,6 +35,9 @@ export class DeesFormattingMenu extends DeesElement {
   @state()
   private position: { x: number; y: number } = { x: 0, y: 0 };
 
+  @state()
+  private menuZIndex: number = 1000;
+
   private callback: ((command: string) => void | Promise<void>) | null = null;
 
   public static styles = [
@@ -42,7 +45,6 @@ export class DeesFormattingMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: ${zIndexLayers.wysiwygMenus};
         pointer-events: none;
       }
 
@@ -119,6 +121,9 @@ export class DeesFormattingMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
+    // Apply z-index to host element
+    this.style.zIndex = this.menuZIndex.toString();
+
     return html`
       <div 
         class="formatting-menu" 
@@ -153,6 +158,11 @@ export class DeesFormattingMenu extends DeesElement {
     console.log('FormattingMenu.show called:', { position, visible: this.visible });
     this.position = position;
     this.callback = callback;
+    
+    // Get z-index from registry
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    
     this.visible = true;
     console.log('FormattingMenu.show - visible set to:', this.visible);
   }
@@ -160,6 +170,9 @@ export class DeesFormattingMenu extends DeesElement {
   public hide(): void {
     this.visible = false;
     this.callback = null;
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
   }
 
   public updatePosition(position: { x: number; y: number }): void {

ts_web/elements/wysiwyg/dees-slash-menu.ts

@@ -8,7 +8,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -43,6 +43,9 @@ export class DeesSlashMenu extends DeesElement {
   @state()
   private selectedIndex: number = 0;
 
+  @state()
+  private menuZIndex: number = 1000;
+
   private callback: ((type: string) => void) | null = null;
 
   public static styles = [
@@ -50,7 +53,6 @@ export class DeesSlashMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: ${zIndexLayers.wysiwygMenus};
         pointer-events: none;
       }
 
@@ -119,6 +121,9 @@ export class DeesSlashMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
+    // Apply z-index to host element
+    this.style.zIndex = this.menuZIndex.toString();
+
     const menuItems = this.getFilteredMenuItems();
 
     return html`
@@ -162,6 +167,11 @@ export class DeesSlashMenu extends DeesElement {
     this.callback = callback;
     this.filter = '';
     this.selectedIndex = 0;
+    
+    // Get z-index from registry
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    
     this.visible = true;
   }
 
@@ -170,6 +180,9 @@ export class DeesSlashMenu extends DeesElement {
     this.callback = null;
     this.filter = '';
     this.selectedIndex = 0;
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
   }
 
   public updateFilter(filter: string): void {

ts_web/pages/zindex-showcase.ts

@@ -9,6 +9,7 @@ import '../elements/dees-panel.js';
 import '../elements/dees-input-text.js';
 import '../elements/dees-input-radiogroup.js';
 import '../elements/dees-input-tags.js';
+import '../elements/dees-input-wysiwyg.js';
 import '../elements/dees-appui-profiledropdown.js';
 
 export const showcasePage = () => html`
@@ -412,8 +413,8 @@ export const showcasePage = () => html`
               <span class="layer-value">z-index: 2999-3000</span>
             </div>
             <div class="layer context">
-              <span class="layer-name">Context Menus & WYSIWYG</span>
-              <span class="layer-value">z-index: 4000-4500</span>
+              <span class="layer-name">Context Menus</span>
+              <span class="layer-value">z-index: 4000</span>
             </div>
             <div class="layer toast">
               <span class="layer-name">Toast Notifications</span>
@@ -650,6 +651,40 @@ export const showcasePage = () => html`
             }}>Show Multiple Toasts</dees-button>
           </div>
 
+          <div class="demo-card">
+            <h4>Modal with WYSIWYG Editor</h4>
+            <dees-button @click=${async () => {
+              await DeesModal.createAndShow({
+                heading: 'WYSIWYG Editor Test',
+                width: 'large',
+                content: html`
+                  <p>Test the WYSIWYG editor slash commands and formatting menus in a modal:</p>
+                  <dees-form>
+                    <dees-input-wysiwyg
+                      .label=${'Document Content'}
+                      .placeholder=${'Type "/" to see slash commands or select text to format...'}
+                      .outputFormat=${'html'}
+                      .description=${'The slash menu and formatting menu should appear above this modal'}
+                    ></dees-input-wysiwyg>
+                  </dees-form>
+                  <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
+                    <strong>Tips:</strong><br>
+                    • Type "/" to open the slash command menu<br>
+                    • Select text to see the formatting toolbar<br>
+                    • Both menus should appear above this modal
+                  </p>
+                `,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Save', action: async (modal) => {
+                    DeesToast.createAndShow({ message: 'Document saved!', type: 'success' });
+                    modal.destroy();
+                  }}
+                ]
+              });
+            }}>Test WYSIWYG in Modal</dees-button>
+          </div>
+          
           <div class="demo-card">
             <h4>Modal with Tags Input</h4>
             <dees-button @click=${async () => {
@@ -739,6 +774,7 @@ export const showcasePage = () => html`
           <li>Unregister on cleanup: <code>zIndexRegistry.unregister(element)</code></li>
           <li>Elements created later automatically appear on top</li>
           <li>Test overlay interactions, especially dropdowns in modals</li>
+          <li>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
         </ul>
 
         <h4>Import Example:</h4>