1.8.19

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.8.13",
+  "version": "1.8.19",
   "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/elements/dees-button.ts

@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
         ${this.status === 'normal' ? html``: html`
           <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
         `}
-        <div class="textbox">${this.text ? this.text : this.textContent}</div>
+        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
       </div>
     `;
   }
@@ -202,9 +202,6 @@ export class DeesButton extends DeesElement {
   }
 
   public async firstUpdated() {
-    if (!this.textContent) {
-      this.textContent = 'Button';
-      this.performUpdate();
-    }
+    // Don't set default text here as it interferes with slotted content
   }
 }

ts_web/elements/dees-form-submit.demo.ts

@@ -0,0 +1,3 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;

ts_web/elements/dees-form-submit.ts

@@ -1,3 +1,4 @@
+import { demoFunc } from './dees-form-submit.demo.js';
 import {
   customElement,
   html,
@@ -5,10 +6,8 @@ import {
   css,
   cssManager,
   property,
-  type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesForm } from './dees-form.js';
-import './dees-button.js'; // Import to ensure dees-button is registered
+import type { DeesForm } from './dees-form.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,7 +17,7 @@ declare global {
 
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
-  public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
+  public static demo = demoFunc;
 
   @property({
     type: Boolean,
@@ -39,17 +38,17 @@ export class DeesFormSubmit extends DeesElement {
   constructor() {
     super();
   }
-
+  
   public static styles = [cssManager.defaultStyles, css``];
 
   public render() {
     return html`
       <dees-button
-        status=${this.status}
-        @click=${this.submit}
-        .disabled=${this.disabled}
-        .text=${this.text ? this.text : this.textContent}
+        status="${this.status}"
+        @click="${this.submit}"
+        ?disabled="${this.disabled}"
       >
+        ${this.text || html`<slot></slot>`}
       </dees-button>
     `;
   }
@@ -59,13 +58,15 @@ export class DeesFormSubmit extends DeesElement {
       return;
     }
     const parentElement: DeesForm = this.parentElement as DeesForm;
-    parentElement.gatherAndDispatch();
+    if (parentElement && parentElement.gatherAndDispatch) {
+      parentElement.gatherAndDispatch();
+    }
   }
 
   public async focus() {
     const domtools = await this.domtoolsPromise;
     if (!this.disabled) {
-      domtools.convenience.smartdelay.delayFor(0);
+      await domtools.convenience.smartdelay.delayFor(0);
       this.submit();
     }
   }

ts_web/elements/dees-simple-login.ts

@@ -8,16 +8,8 @@ import {
   type TemplateResult,
   cssManager,
   css,
-  unsafeCSS,
-  type CSSResult,
-  state,
 } from '@design.estate/dees-element';
 
-// Import components used in template
-import './dees-form.js';
-import './dees-input-text.js';
-import './dees-form-submit.js';
-
 declare global {
   interface HTMLElementTagNameMap {
     'dees-simple-login': DeesSimpleLogin;
@@ -126,46 +118,19 @@ export class DeesSimpleLogin extends DeesElement {
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.firstUpdated(_changedProperties);
-    const domtools = await this.domtoolsPromise;
-    
-    // Wait a tick to ensure child elements are rendered
-    await this.updateComplete;
     
     const form = this.shadowRoot.querySelector('dees-form') as any;
-    
-    if (!form) {
-      console.error('dees-form element not found in dees-simple-login');
-      return;
+    if (form) {
+      form.addEventListener('formData', (event: CustomEvent) => {
+        this.dispatchEvent(new CustomEvent('login', { 
+          detail: event.detail, 
+          bubbles: true, 
+          composed: true 
+        }));
+      });
     }
-    
-    // Check if the form has the readyDeferred property and wait for it
-    if (form.readyDeferred?.promise) {
-      try {
-        await form.readyDeferred.promise;
-      } catch (error) {
-        console.error('Error waiting for form ready:', error);
-      }
-    }
-    
-    const username = this.shadowRoot.querySelector('dees-input-text[key="username"]');
-    const password = this.shadowRoot.querySelector('dees-input-text[key="password"]');
-    const submit = this.shadowRoot.querySelector('dees-form-submit');
-    
-    // Add form data listener
-    form.addEventListener('formData', (event: CustomEvent) => {
-      this.dispatchEvent(new CustomEvent('login', { 
-        detail: event.detail, 
-        bubbles: true, 
-        composed: true 
-      }));
-    });
   }
 
-  /**
-   * Dispatches a 'login' event when the form is submitted.
-   * Event detail structure: { data: { username: string, password: string } }
-   */
-  
   /**
    * allows switching to slotted content
    */