1.0.223

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.221",
+  "version": "1.0.223",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-form.ts

@@ -6,16 +6,18 @@ import { DeesInputText } from './dees-input-text.js';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
+import { DeesTable } from './dees-table.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
   DeesInputText,
   DeesInputQuantitySelector,
-  DeesInputRadio
+  DeesInputRadio,
+  DeesTable,
 ];
 
-export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
+export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio | DeesTable<any>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -102,7 +104,7 @@ export class DeesForm extends DeesElement {
 
   public async collectFormData() {
     const children = this.getFormElements();
-    const valueObject: { [key: string]: string | number | boolean } = {};
+    const valueObject: { [key: string]: string | number | boolean | any [] } = {};
     for (const child of children) {
       if (!child.key) {
         console.log(`form element with label "${child.label}" has no key. skipping.`);

ts_web/elements/dees-input-text.ts

@@ -16,7 +16,6 @@ export class DeesInputText extends DeesElement {
 
   // INSTANCE
   public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
-  public valueChangeSubject = new domtools.rxjs.Subject<string>();
 
   @property({
     type: String
@@ -143,7 +142,6 @@ export class DeesInputText extends DeesElement {
     const target: any = eventArg.target;
     this.value = target.value;
     this.changeSubject.next(this);
-    this.valueChangeSubject.next(this.value);
   }
 
   public async freeze() {

ts_web/elements/dees-table.ts

@@ -88,6 +88,34 @@ export class DeesTable<T> extends DeesElement {
   })
   public data: T[] = [];
 
+  // dees-form compatibility -----------------------------------------
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  get value() {
+    return this.data;
+  }
+  set value(valueArg) {}
+  public changeSubject = new domtools.rxjs.Subject<DeesTable<T>>();
+  // end dees-form compatibility -----------------------------------------
+
   @property({
     type: String,
     reflect: true,
@@ -335,7 +363,7 @@ export class DeesTable<T> extends DeesElement {
         <!-- the heading part -->
         <div class="header">
           <div class="headingContainer">
-            <div class="heading heading1">${this.heading1}</div>
+            <div class="heading heading1">${this.label || this.heading1}</div>
             <div class="heading heading2">${this.heading2}</div>
           </div>
           <div class="headerActions">
@@ -621,6 +649,7 @@ export class DeesTable<T> extends DeesElement {
       }
       if (saveArg) {
         itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        this.changeSubject.next(this);
       }
       input.remove();
       target.style.color = originalColor;