@design.estate/dees-wcctools 1.0.94 → 1.0.95

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: (children: HTMLCollection) => void | Promise<void>;
+    runAfterRender: (wrapperElement: DeesDemoWrapper) => void | Promise<void>;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     firstUpdated(): Promise<void>;

package/dist_ts_demotools/demotools.js

@@ -25,12 +25,13 @@ let DeesDemoWrapper = class DeesDemoWrapper extends DeesElement {
         await this.updateComplete;
         // Wait a bit for slotted content to render
         await new Promise(resolve => setTimeout(resolve, 50));
-        // Get all slotted elements
-        const slottedElements = this.children;
-        if (slottedElements.length > 0 && this.runAfterRender) {
-            // Call the runAfterRender function with all slotted elements
+        // Check if there are slotted elements and runAfterRender is defined
+        if (this.children.length > 0 && this.runAfterRender) {
+            // Call the runAfterRender function with the wrapper element itself
+            // Note: querySelector/querySelectorAll will work on slotted content
+            // because slotted elements remain in the light DOM as children
             try {
-                await this.runAfterRender(slottedElements);
+                await this.runAfterRender(this);
             }
             catch (error) {
                 console.error('Error in runAfterRender:', error);
@@ -46,4 +47,4 @@ DeesDemoWrapper = __decorate([
     customElement('dees-demowrapper')
 ], DeesDemoWrapper);
 export { DeesDemoWrapper };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtb3Rvb2xzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfZGVtb3Rvb2xzL2RlbW90b29scy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLGFBQWEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUc1RyxJQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7YUFJaEMsV0FBTSxHQUFHO1FBQ3JCLEdBQUcsQ0FBQTs7OztLQUlGO0tBQ0YsQUFObUIsQ0FNbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O0tBRVYsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsWUFBWTtRQUN2QixNQUFNLElBQUksQ0FBQyxjQUFjLENBQUM7UUFFMUIsMkNBQTJDO1FBQzNDLE1BQU0sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFdEQsMkJBQTJCO1FBQzNCLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDdEMsSUFBSSxlQUFlLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdEQsNkRBQTZEO1lBQzdELElBQUksQ0FBQztnQkFDSCxNQUFNLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDLENBQUM7WUFDN0MsQ0FBQztZQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FBQywwQkFBMEIsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUNuRCxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7O0FBaENNO0lBRE4sUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDOzt1REFDMkM7QUFGL0QsZUFBZTtJQUQzQixhQUFhLENBQUMsa0JBQWtCLENBQUM7R0FDckIsZUFBZSxDQW1DM0IifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtb3Rvb2xzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfZGVtb3Rvb2xzL2RlbW90b29scy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLGFBQWEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUc1RyxJQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7YUFJaEMsV0FBTSxHQUFHO1FBQ3JCLEdBQUcsQ0FBQTs7OztLQUlGO0tBQ0YsQUFObUIsQ0FNbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O0tBRVYsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsWUFBWTtRQUN2QixNQUFNLElBQUksQ0FBQyxjQUFjLENBQUM7UUFFMUIsMkNBQTJDO1FBQzNDLE1BQU0sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFdEQsb0VBQW9FO1FBQ3BFLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNwRCxtRUFBbUU7WUFDbkUsb0VBQW9FO1lBQ3BFLCtEQUErRDtZQUMvRCxJQUFJLENBQUM7Z0JBQ0gsTUFBTSxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2xDLENBQUM7WUFBQyxPQUFPLEtBQUssRUFBRSxDQUFDO2dCQUNmLE9BQU8sQ0FBQyxLQUFLLENBQUMsMEJBQTBCLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFDbkQsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDOztBQWpDTTtJQUROLFFBQVEsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQzs7dURBQ2tEO0FBRnRFLGVBQWU7SUFEM0IsYUFBYSxDQUFDLGtCQUFrQixDQUFDO0dBQ3JCLGVBQWUsQ0FvQzNCIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.94",
+  "version": "1.0.95",
   "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": {
@@ -8,12 +8,6 @@
     "./demotools": "./dist_ts_demotools"
   },
   "type": "module",
-  "scripts": {
-    "test": "(npm run build)",
-    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
-    "watch": "tswatch element",
-    "buildDocs": "tsdoc"
-  },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
@@ -57,5 +51,10 @@
     "element testing",
     "page development"
   ],
-  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
-}
+  "scripts": {
+    "test": "(npm run build)",
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
+  }
+}

package/readme.hints.md

@@ -34,16 +34,22 @@ import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 // In your demo function:
 demo: () => html`
-  <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);
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector for specific elements
+    const myElement = wrapper.querySelector('my-custom-element');
+    myElement?.setAttribute('data-demo', 'true');
     
-    // Work with multiple elements
-    Array.from(children).forEach(child => {
-      console.log('Element rendered:', child);
+    // Access all children
+    console.log('All children:', wrapper.children);
+    
+    // Use querySelectorAll for multiple elements
+    wrapper.querySelectorAll('div').forEach(div => {
+      console.log('Found div:', div);
     });
+    
+    // Full DOM API available
+    const firstChild = wrapper.firstElementChild;
+    const hasClass = wrapper.querySelector('.my-class');
   }}>
     <my-custom-element></my-custom-element>
     <div>Additional content</div>
@@ -53,7 +59,8 @@ demo: () => html`
 
 **Features:**
 - Wraps demo elements without affecting layout (uses `display: contents`)
-- Provides access to ALL slotted elements via HTMLCollection after mounting
+- Provides the wrapper element itself with full DOM API access
+- Use querySelector/querySelectorAll for powerful element selection
+- Access children via wrapper.children property
 - Supports async operations in runAfterRender callback
-- Automatically handles timing to ensure elements are fully rendered
-- Can handle multiple slotted elements, not just the first one
+- Automatically handles timing to ensure elements are fully rendered

package/readme.md

@@ -183,23 +183,24 @@ 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 (children: HTMLCollection) => {
-      // Access all slotted elements
-      console.log('Slotted elements:', children.length);
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      // Use querySelector to find specific elements
+      const myComponent = wrapper.querySelector('my-component') as MyComponent;
+      console.log('Component found:', myComponent);
       
-      // Access specific element (e.g., first child)
-      const myComponent = children[0] as MyComponent;
-      console.log('Component mounted:', myComponent);
+      // Access all children via wrapper.children
+      console.log('Total children:', wrapper.children.length);
+      
+      // Use querySelectorAll for multiple elements
+      const allDivs = wrapper.querySelectorAll('div');
+      console.log('Found divs:', allDivs.length);
       
       // Simulate user interactions
       myComponent.value = 'Test value';
       await myComponent.updateComplete;
       
-      // Trigger methods
-      myComponent.handleClick();
-      
-      // Work with multiple elements if present
-      Array.from(children).forEach((child, index) => {
+      // Work with all children
+      Array.from(wrapper.children).forEach((child, index) => {
         console.log(`Child ${index}:`, child.tagName);
       });
     }}>
@@ -309,12 +310,18 @@ For complex property types, implement custom logic in your demo:
 
 ```typescript
 public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(children) => {
-    // Set up complex property handling for all children
-    Array.from(children).forEach(child => {
-      child.addEventListener('property-change', (e) => {
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector to target specific elements
+    const component = wrapper.querySelector('my-component');
+    if (component) {
+      component.addEventListener('property-change', (e) => {
         console.log('Property changed:', e.detail);
       });
+    }
+    
+    // Or handle all elements of a type
+    wrapper.querySelectorAll('my-component').forEach(el => {
+      el.addEventListener('click', () => console.log('Clicked!'));
     });
   }}>
     <my-component></my-component>
@@ -354,9 +361,10 @@ Initialize the WCC Tools dashboard.
 Component for wrapping demos with post-render logic.
 
 - `runAfterRender`: Function called after the wrapped elements render
-- Receives the complete HTMLCollection of all slotted elements
+- Receives the wrapper element itself, providing full DOM API access
+- Use `wrapper.querySelector()` and `wrapper.querySelectorAll()` for element selection
+- Access children via `wrapper.children` property
 - Supports async operations
-- Access individual elements via array index or Array.from()
 
 ## Browser Support
 - Chrome/Edge (latest)

package/readme.plan.md

@@ -55,8 +55,10 @@ The properties panel has timing issues detecting rendered elements because:
 # 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
+- Now receives the wrapper element itself instead of just children
+- Provides full DOM API access (querySelector, querySelectorAll, etc.)
+- querySelector works on slotted content (light DOM children)
+- Access children via wrapper.children property
 - 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
+- Examples show how to use querySelector for powerful element selection
+- Added clarifying comment about querySelector working on slotted content