fix(dees-input-text, dees-input-iban): enhance validation handling and improve demo for input states

ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts

@@ -83,7 +83,16 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
     this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
     const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (deesInputText) {
-      deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+      if (this.enteredIbanIsValid) {
+        deesInputText.validationState = 'valid';
+        deesInputText.validationText = 'IBAN is valid';
+      } else if (this.enteredString.length > 0) {
+        deesInputText.validationState = 'invalid';
+        deesInputText.validationText = 'Please enter a valid IBAN';
+      } else {
+        deesInputText.validationState = undefined;
+        deesInputText.validationText = '';
+      }
     }
   }
 

ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -210,39 +210,7 @@ export const demoFunc = () => html`
       </dees-panel>
     </dees-demowrapper>
     
-    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    <dees-demowrapper>
-      // Demonstrate validation states
-      const requiredInput = elementArg.querySelector('dees-input-text[required]') as DeesInputText;
-      const disabledInput = elementArg.querySelector('dees-input-text[disabled]') as DeesInputText;
-      const errorInput = elementArg.querySelector('dees-input-text[validationState="invalid"]') as DeesInputText;
-      
-      if (requiredInput) {
-        // Show validation on blur for empty required field
-        requiredInput.addEventListener('blur', () => {
-          if (!requiredInput.getValue()) {
-            console.log('Required field is empty!');
-          }
-        });
-      }
-      
-      if (disabledInput) {
-        console.log('Disabled input cannot be edited');
-      }
-      
-      if (errorInput) {
-        console.log('Error input shows validation message:', errorInput.validationText);
-        
-        // Simulate fixing the error
-        errorInput.addEventListener('changeSubject', () => {
-          const value = errorInput.getValue();
-          if (value.includes('@') && value.includes('.')) {
-            errorInput.validationState = 'valid';
-            errorInput.validationText = '';
-            console.log('Email validation passed!');
-          }
-        });
-      }
-    }}>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
         <div class="input-group">
           <dees-input-text
@@ -258,10 +226,14 @@ export const demoFunc = () => html`
           ></dees-input-text>
 
           <dees-input-text
-            .label=${'Field with Error'}
+            .label=${'Email with Validation'}
             .value=${'invalid@'}
-            .validationText=${'Please enter a valid email address'}
+            .validationFunction=${(value: string) => {
-            .validationState=${'invalid'}
+              if (value.includes('@') && value.includes('.')) {
+                return { valid: true, message: 'Email address is valid' };
+              }
+              return { valid: false, message: 'Please enter a valid email address' };
+            }}
           ></dees-input-text>
         </div>
       </dees-panel>

ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -54,8 +54,8 @@ export class DeesInputText extends DeesInputBase {
   })
   accessor validationText: string = '';
 
-  @property({})
+  @property({ attribute: false })
-  accessor validationFunction!: (value: string) => boolean;
+  accessor validationFunction!: (value: string) => { valid: boolean; message?: string };
 
   @property({
     type: Boolean,
@@ -288,12 +288,21 @@ export class DeesInputText extends DeesInputBase {
   }
 
   firstUpdated() {
-    // Input event handling is already done in updateValue method
+    if (this.validationFunction && this.value) {
+      const result = this.validationFunction(this.value);
+      this.validationState = result.valid ? 'valid' : 'invalid';
+      this.validationText = result.message || '';
+    }
   }
 
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
+    if (this.validationFunction) {
+      const result = this.validationFunction(this.value);
+      this.validationState = result.valid ? 'valid' : 'invalid';
+      this.validationText = result.message || '';
+    }
     this.changeSubject.next(this);
   }