fix(core): update

html/index.ts

@@ -1,6 +1,6 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';

package.json

@@ -22,20 +22,20 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@push.rocks/smartpromise": "^4.0.0",
+    "@push.rocks/smartpromise": "^4.0.3",
-    "@push.rocks/smartstring": "^4.0.5",
+    "@push.rocks/smartstring": "^4.0.8",
     "@tsclass/tsclass": "^4.0.42",
     "highlight.js": "11.8.0",
-    "pdfjs-dist": "^2.15.349"
+    "pdfjs-dist": "^2.16.105"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.66",
     "@gitzone/tsbundle": "^2.0.8",
     "@gitzone/tstest": "^1.0.77",
     "@gitzone/tswatch": "^2.0.7",
-    "@push.rocks/projectinfo": "^5.0.1",
+    "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.0.12",
+    "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.4.8"
+    "@types/node": "^20.5.1"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.173',
+  version: '1.0.174',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-form.ts

@@ -7,9 +7,15 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
 
-export type TFormElement = Array<
+// Unified set for form input types
-  DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
+const FORM_INPUT_TYPES = [
->;
+  DeesInputCheckbox,
+  DeesInputText,
+  DeesInputQuantitySelector,
+  DeesInputRadio
+];
+
+export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,6 +25,7 @@ declare global {
 
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
+
   public static demo = () => html`
     <dees-form
       style="display: block; margin:auto; max-width: 500px; padding: 20px"
@@ -31,11 +38,7 @@ export class DeesForm extends DeesElement {
     >
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
-      <dees-input-checkbox
+      <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
-        .required="${true}"
-        key="hello3"
-        label="another text"
-      ></dees-input-checkbox>
       <dees-form-submit>Submit</dees-form-submit>
     </dees-form>
   `;
@@ -55,51 +58,37 @@ export class DeesForm extends DeesElement {
   }
 
   public async firstUpdated() {
-    const formChildren = this.getFormChildren();
+    const formChildren = this.getFormElements();
-    this.checkRequiredStatus();
+    this.updateRequiredStatus();
+
     for (const child of formChildren) {
-      child.changeSubject.subscribe(async (elementArg: TFormElement) => {
+      child.changeSubject.subscribe(async () => {
-        const valueObject = await this.gatherData();
+        const valueObject = await this.collectFormData();
         this.changeSubject.next(valueObject);
         console.log(valueObject);
-        this.checkRequiredStatus();
+        this.updateRequiredStatus();
       });
     }
-    await this.instrumentBehaviours();
+    await this.addBehaviours();
   }
 
-  public getFormChildren() {
+  public getFormElements(): Array<TFormInputElement> {
-    const children: Array<DeesElement> = this.children as any;
+    return (Array.from(this.children)).filter(child => 
-    const formChildren: TFormElement = [];
+      FORM_INPUT_TYPES.includes(child.constructor as any)
-
+    ) as unknown as TFormInputElement[];
-    for (const child of children) {
-      if (
-        child instanceof DeesInputCheckbox ||
-        child instanceof DeesInputText ||
-        child instanceof DeesInputQuantitySelector
-      ) {
-        formChildren.push(child);
-      }
-    }
-    return formChildren;
   }
 
-  public getSubmitButton() {
+  public getSubmitButton(): DeesFormSubmit | undefined {
-    const children: Array<DeesElement> = this.children as any;
+    return Array.from(this.children).find(child => 
-    let submitButton: DeesFormSubmit;
+      child instanceof DeesFormSubmit
-    for (const childArg of children) {
+    ) as DeesFormSubmit;
-      if (childArg instanceof DeesFormSubmit) {
-        submitButton = childArg;
-      }
-    }
-    return submitButton;
   }
 
-  public async checkRequiredStatus() {
+  public async updateRequiredStatus() {
     console.log('checking the required status.');
 
     let requiredOK = true;
-    for (const childArg of this.getFormChildren()) {
+    for (const childArg of this.getFormElements()) {
       if (childArg.required && !childArg.value) {
         requiredOK = false;
       }
@@ -109,8 +98,8 @@ export class DeesForm extends DeesElement {
     }
   }
 
-  public async gatherData() {
+  public async collectFormData() {
-    const children = this.getFormChildren();
+    const children = this.getFormElements();
     const valueObject: { [key: string]: string | number | boolean } = {};
     for (const child of children) {
       valueObject[child.key] = child.value;
@@ -119,7 +108,7 @@ export class DeesForm extends DeesElement {
   }
 
   public async gatherAndDispatch() {
-    const valueObject = await this.gatherData();
+    const valueObject = await this.collectFormData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
         data: valueObject,
@@ -135,7 +124,7 @@ export class DeesForm extends DeesElement {
     visualStateArg: 'normal' | 'pending' | 'error' | 'success',
     textStateArg: string
   ) {
-    const inputChildren = this.getFormChildren();
+    const inputChildren = this.getFormElements();
     const submitButton = this.getSubmitButton();
 
     switch (visualStateArg) {
@@ -172,20 +161,22 @@ export class DeesForm extends DeesElement {
     submitButton.text = textStateArg;
   }
 
-  public async instrumentBehaviours() {
+  public async addBehaviours() {
-    const children = this.getFormChildren();
+    // Use event delegation
-    for (const child of children) {
+    this.addEventListener('keydown', (event: KeyboardEvent) => {
-      child.addEventListener('keydown', (eventArg) => {
+      const target = event.target as DeesElement;
-        if (eventArg.key === 'Enter') {
+      if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
-          const currentIndex = children.indexOf(child);
+
+      if (event.key === 'Enter') {
+        const children = this.getFormElements();
+        const currentIndex = children.indexOf(target as any);
         if (currentIndex < children.length - 1) {
           children[currentIndex + 1].focus();
         } else {
-            children[currentIndex].blur();
+          target.blur();
-            this.getSubmitButton().focus();
+          this.getSubmitButton()?.focus();
         }
       }
     });
   }
-  }
 }

ts_web/elements/dees-input-checkbox.ts

@@ -144,7 +144,7 @@ export class DeesInputCheckbox extends DeesElement {
         }
       </style>
       <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
+        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
           ${this.value
             ? html`
                 <span class="checkmark">
@@ -172,4 +172,11 @@ export class DeesInputCheckbox extends DeesElement {
     );
     this.changeSubject.next(this);
   }
+
+  public focus(): void {
+    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    if (checkboxDiv) {
+      (checkboxDiv as any).focus();
+    }
+  }
 }

ts_web/elements/dees-input-fileupload.ts

@@ -155,8 +155,11 @@ export class DeesInputFileupload extends DeesElement {
   public async openFileSelector() {
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
     inputFile.click();
+    this.state = 'idle';
+    this.buttonText = 'Upload more files...';
   }
   
+
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
@@ -164,6 +167,20 @@ export class DeesInputFileupload extends DeesElement {
   }
 
   public firstUpdated() {
+    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
+    inputFile.addEventListener('change', (event: Event) => {
+      const target = event.target as HTMLInputElement;
+      for (const file of Array.from(target.files)) {
+        this.value.push(file);
+      }
+      this.requestUpdate();
+      console.log(`Got ${this.value.length} files!`);
+      // Reset the input value to allow selecting the same file again if needed
+      target.value = '';
+    });
+
+
+    // lets handle drag and drop
     const dropArea = this.shadowRoot.querySelector('.uploadButton');
     const handlerFunction = (eventArg: DragEvent) => {
       eventArg.preventDefault();

ts_web/elements/dees-simple-login.ts

@@ -0,0 +1,74 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+  type CSSResult,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-simple-login': DeesSimpleLogin;
+  }
+}
+
+@customElement('dees-simple-login')
+export class DeesSimpleLogin extends DeesElement {
+  // STATIC
+  public static demo = () => html` <dees-simple-login></dees-simple-login> `;
+
+  // INSTANCE
+
+  @property()
+  public title = 'Dees Simple Login';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+      .loginContainer {
+        display: flex;
+        justify-content: center; /* aligns horizontally */
+        align-items: center; /* aligns vertically */
+        height: 100%;
+      }
+      .login {
+        min-width: 320px;
+        min-height: 100px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        border-radius: 3px;
+        padding: 24px;
+      }
+
+      .header {
+        text-align: center;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="loginContainer">
+        <div class="login">
+          <dees-form>
+            <div class="header">Login to ${this.title}</div>
+            <dees-input-text label="username"></dees-input-text>
+            <dees-input-text label="password" isPasswordBool></dees-input-text>
+            <dees-form-submit>login</dees-form-submit>
+          </dees-form>
+        </div>
+      </div>
+      <slot></slot>
+    `;
+  }
+}

ts_web/elements/helperclasses/formcontroller.ts

@@ -0,0 +1,3 @@
+export class FormController {
+  
+}

ts_web/elements/index.ts

@@ -4,8 +4,8 @@ export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';
 export * from './dees-dataview-statusobject.js';
-export * from './dees-form.js';
 export * from './dees-form-submit.js';
+export * from './dees-form.js';
 export * from './dees-icon.js';
 export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';
@@ -15,6 +15,7 @@ export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-pdf.js';
+export * from './dees-simple-login.js';
 export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-stepper.js';

tsconfig.json

@@ -6,5 +6,8 @@
     "module": "ES2022",
     "moduleResolution": "nodenext",
     "esModuleInterop": true
-  }
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }