@design.estate/dees-wcctools 1.0.92 → 1.0.93

package/dist_ts_demotools/demotools.d.ts

@@ -1,6 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 export declare class DeesDemoWrapper extends DeesElement {
-    runAfterRender: (element: HTMLElement) => void | Promise<void>;
+    runAfterRender: (children: HTMLCollection) => void | Promise<void>;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     firstUpdated(): Promise<void>;

package/dist_ts_demotools/demotools.js

@@ -25,13 +25,12 @@ let DeesDemoWrapper = class DeesDemoWrapper extends DeesElement {
         await this.updateComplete;
         // Wait a bit for slotted content to render
         await new Promise(resolve => setTimeout(resolve, 50));
-        // Find the first element child (excluding text nodes)
+        // Get all slotted elements
         const slottedElements = this.children;
         if (slottedElements.length > 0 && this.runAfterRender) {
-            const firstElement = slottedElements[0];
-            // Call the runAfterRender function with the element
+            // Call the runAfterRender function with all slotted elements
             try {
-                await this.runAfterRender(firstElement);
+                await this.runAfterRender(slottedElements);
             }
             catch (error) {
                 console.error('Error in runAfterRender:', error);
@@ -47,4 +46,4 @@ DeesDemoWrapper = __decorate([
     customElement('dees-demowrapper')
 ], DeesDemoWrapper);
 export { DeesDemoWrapper };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtb3Rvb2xzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfZGVtb3Rvb2xzL2RlbW90b29scy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLGFBQWEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUc1RyxJQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7YUFJaEMsV0FBTSxHQUFHO1FBQ3JCLEdBQUcsQ0FBQTs7OztLQUlGO0tBQ0YsQUFObUIsQ0FNbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O0tBRVYsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsWUFBWTtRQUN2QixNQUFNLElBQUksQ0FBQyxjQUFjLENBQUM7UUFFMUIsMkNBQTJDO1FBQzNDLE1BQU0sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFdEQsc0RBQXNEO1FBQ3RELE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDdEMsSUFBSSxlQUFlLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdEQsTUFBTSxZQUFZLEdBQUcsZUFBZSxDQUFDLENBQUMsQ0FBZ0IsQ0FBQztZQUV2RCxvREFBb0Q7WUFDcEQsSUFBSSxDQUFDO2dCQUNILE1BQU0sSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLENBQUMsQ0FBQztZQUMxQyxDQUFDO1lBQUMsT0FBTyxLQUFLLEVBQUUsQ0FBQztnQkFDZixPQUFPLENBQUMsS0FBSyxDQUFDLDBCQUEwQixFQUFFLEtBQUssQ0FBQyxDQUFDO1lBQ25ELENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzs7QUFsQ007SUFETixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7O3VEQUN1QztBQUYzRCxlQUFlO0lBRDNCLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQztHQUNyQixlQUFlLENBcUMzQiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtb3Rvb2xzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfZGVtb3Rvb2xzL2RlbW90b29scy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLGFBQWEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUc1RyxJQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7YUFJaEMsV0FBTSxHQUFHO1FBQ3JCLEdBQUcsQ0FBQTs7OztLQUlGO0tBQ0YsQUFObUIsQ0FNbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O0tBRVYsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsWUFBWTtRQUN2QixNQUFNLElBQUksQ0FBQyxjQUFjLENBQUM7UUFFMUIsMkNBQTJDO1FBQzNDLE1BQU0sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFdEQsMkJBQTJCO1FBQzNCLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDdEMsSUFBSSxlQUFlLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdEQsNkRBQTZEO1lBQzdELElBQUksQ0FBQztnQkFDSCxNQUFNLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDLENBQUM7WUFDN0MsQ0FBQztZQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FBQywwQkFBMEIsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUNuRCxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7O0FBaENNO0lBRE4sUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDOzt1REFDMkM7QUFGL0QsZUFBZTtJQUQzQixhQUFhLENBQUMsa0JBQWtCLENBQUM7R0FDckIsZUFBZSxDQW1DM0IifQ==

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.92",
+  "version": "1.0.93",
   "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": {
     ".": "./dist_ts_web/index.js",
-    "./demoTools": "./dist_ts_demotools"
+    "./demotools": "./dist_ts_demotools"
   },
   "type": "module",
   "scripts": {

package/readme.hints.md

@@ -30,22 +30,30 @@ A utility component for wrapping demo elements with post-render functionality.
 
 **Usage:**
 ```typescript
-import { DeesDemoWrapper } from '@design.estate/dees-wcctools/demoTools';
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 // In your demo function:
 demo: () => html`
-  <dees-demowrapper .runAfterRender=${(element) => {
-    // Do something with the rendered element
-    element.setAttribute('data-demo', 'true');
-    console.log('Element rendered:', element);
+  <dees-demowrapper .runAfterRender=${(children: HTMLCollection) => {
+    // Access all slotted elements
+    const firstElement = children[0] as HTMLElement;
+    firstElement.setAttribute('data-demo', 'true');
+    console.log('All slotted elements:', children);
+    
+    // Work with multiple elements
+    Array.from(children).forEach(child => {
+      console.log('Element rendered:', child);
+    });
   }}>
     <my-custom-element></my-custom-element>
+    <div>Additional content</div>
   </dees-demowrapper>
 `
 ```
 
 **Features:**
 - Wraps demo elements without affecting layout (uses `display: contents`)
-- Provides access to the rendered element instance after mounting
+- Provides access to ALL slotted elements via HTMLCollection after mounting
 - Supports async operations in runAfterRender callback
-- Automatically handles timing to ensure element is fully rendered
+- Automatically handles timing to ensure elements are fully rendered
+- Can handle multiple slotted elements, not just the first one

package/readme.md

@@ -178,28 +178,33 @@ public static styles = [
 The demo tools provide enhanced testing capabilities:
 
 ```typescript
-import * as demoTools from '@design.estate/dees-wcctools/demoTools';
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 @customElement('my-component')
 export class MyComponent extends DeesElement {
   public static demo = () => html`
-    <dees-demowrapper .runAfterRender=${async (element: MyComponent) => {
-      // Access the rendered component instance
-      console.log('Component mounted:', element);
+    <dees-demowrapper .runAfterRender=${async (children: HTMLCollection) => {
+      // Access all slotted elements
+      console.log('Slotted elements:', children.length);
+      
+      // Access specific element (e.g., first child)
+      const myComponent = children[0] as MyComponent;
+      console.log('Component mounted:', myComponent);
       
       // Simulate user interactions
-      element.value = 'Test value';
-      await element.updateComplete;
+      myComponent.value = 'Test value';
+      await myComponent.updateComplete;
       
       // Trigger methods
-      element.handleClick();
+      myComponent.handleClick();
       
-      // Assert component state
-      if (element.isValid) {
-        console.log('Component validation passed');
-      }
+      // Work with multiple elements if present
+      Array.from(children).forEach((child, index) => {
+        console.log(`Child ${index}:`, child.tagName);
+      });
     }}>
       <my-component></my-component>
+      <div>Additional content</div>
     </dees-demowrapper>
   `;
 }
@@ -304,10 +309,12 @@ For complex property types, implement custom logic in your demo:
 
 ```typescript
 public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(el) => {
-    // Set up complex property handling
-    el.addEventListener('property-change', (e) => {
-      console.log('Property changed:', e.detail);
+  <dees-demowrapper .runAfterRender=${(children) => {
+    // Set up complex property handling for all children
+    Array.from(children).forEach(child => {
+      child.addEventListener('property-change', (e) => {
+        console.log('Property changed:', e.detail);
+      });
     });
   }}>
     <my-component></my-component>
@@ -346,9 +353,10 @@ Initialize the WCC Tools dashboard.
 ### DeesDemoWrapper
 Component for wrapping demos with post-render logic.
 
-- `runAfterRender`: Function called after the wrapped element renders
-- Receives the first child element as parameter
+- `runAfterRender`: Function called after the wrapped elements render
+- Receives the complete HTMLCollection of all slotted elements
 - Supports async operations
+- Access individual elements via array index or Array.from()
 
 ## Browser Support
 - Chrome/Edge (latest)

package/readme.plan.md

@@ -34,11 +34,11 @@ The properties panel has timing issues detecting rendered elements because:
 ## Created DeesDemoWrapper Component
 - Location: ts_demotools/demotools.ts
 - Allows wrapping demo elements with post-render functionality
-- Provides runAfterRender callback that receives the rendered element
+- Provides runAfterRender callback that receives ALL slotted elements as HTMLCollection
 - Uses display: contents to not affect layout
 - Handles timing automatically with 50ms delay after firstUpdated
 - Supports both sync and async callbacks
-- Exports available at @design.estate/dees-wcctools/demoTools
+- Exports available at @design.estate/dees-wcctools/demotools (lowercase)
 
 # Documentation Update (COMPLETED)
 
@@ -50,4 +50,13 @@ The properties panel has timing issues detecting rendered elements because:
 - Best practices and guidelines
 - API reference
 - Browser support information
-- Complete examples for all major features
+- Complete examples for all major features
+
+# Enhanced DemoWrapper (COMPLETED)
+
+## Modified runAfterRender callback:
+- Now receives HTMLCollection of ALL slotted elements instead of just the first one
+- Allows access to complete slotted DOM structure
+- Updated documentation with correct import path (lowercase 'demotools')
+- Examples show how to work with multiple slotted elements
+- Maintains backward compatibility by accessing elements via index