fix(core): update

ts_web/elements/dees-form.ts

@@ -1,4 +1,10 @@
-import { customElement, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
+import {
+  customElement,
+  html,
+  type TemplateResult,
+  DeesElement,
+  type CSSResult,
+} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
 import { DeesInputCheckbox } from './dees-input-checkbox.js';
@@ -7,17 +13,26 @@ 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';
+import { demoFunc } from './dees-form.demo.js';
+import { DeesInputIban } from './dees-input-iban.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputIban,
   DeesInputText,
   DeesInputQuantitySelector,
   DeesInputRadio,
   DeesTable,
 ];
 
-export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio | DeesTable<any>;
+export type TFormInputElement =
+  | DeesInputCheckbox
+  | DeesInputIban
+  | DeesInputText
+  | DeesInputQuantitySelector
+  | DeesInputRadio
+  | DeesTable<any>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,23 +42,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"
-      @formData=${async (eventArg) => {
-        const form: DeesForm = eventArg.currentTarget;
-        form.setStatus('pending', 'authenticating...');
-        await domtools.plugins.smartdelay.delayFor(1000);
-        form.setStatus('success', 'authenticated!');
-      }}
-    >
-      <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 .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
-      <dees-form-submit>Submit</dees-form-submit>
-    </dees-form>
-  `;
+  public static demo = demoFunc;
 
   public name: string = 'myform';
   public changeSubject = new domtools.rxjs.Subject();
@@ -77,14 +76,14 @@ export class DeesForm extends DeesElement {
   }
 
   public getFormElements(): Array<TFormInputElement> {
-    return (Array.from(this.children)).filter(child => 
+    return Array.from(this.children).filter((child) =>
       FORM_INPUT_TYPES.includes(child.constructor as any)
     ) as unknown as TFormInputElement[];
   }
 
   public getSubmitButton(): DeesFormSubmit | undefined {
-    return Array.from(this.children).find(child => 
-      child instanceof DeesFormSubmit
+    return Array.from(this.children).find(
+      (child) => child instanceof DeesFormSubmit
     ) as DeesFormSubmit;
   }
 
@@ -104,7 +103,7 @@ export class DeesForm extends DeesElement {
 
   public async collectFormData() {
     const children = this.getFormElements();
-    const valueObject: { [key: string]: string | number | boolean | any [] } = {};
+    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.`);