feat(structure): adjust

ts_web/elements/dees-input-iban/dees-input-iban.demo.ts

@@ -0,0 +1,80 @@
+import { html, css } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        
+        .payment-group {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
+        <dees-input-iban 
+          .label=${'Bank Account IBAN'} 
+          .description=${'Enter your International Bank Account Number'}
+        ></dees-input-iban>
+        
+        <dees-input-iban 
+          .label=${'Verified IBAN'} 
+          .description=${'This IBAN has been verified'}
+          .value=${'DE89370400440532013000'}
+        ></dees-input-iban>
+      </dees-panel>
+      
+      <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
+        <div class="payment-group">
+          <dees-input-text 
+            .label=${'Account Holder'} 
+            .layoutMode=${'horizontal'}
+            .value=${'John Doe'}
+          ></dees-input-text>
+          
+          <dees-input-iban 
+            .label=${'IBAN'} 
+            .layoutMode=${'horizontal'}
+            .value=${'GB82WEST12345698765432'}
+          ></dees-input-iban>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
+        <dees-input-iban 
+          .label=${'Payment Account'} 
+          .description=${'Required for processing payments'}
+          .required=${true}
+        ></dees-input-iban>
+        
+        <dees-input-iban 
+          .label=${'Locked IBAN'} 
+          .description=${'This IBAN cannot be changed'}
+          .value=${'FR1420041010050500013M02606'}
+          .disabled=${true}
+        ></dees-input-iban>
+      </dees-panel>
+      
+      <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
+        <dees-form>
+          <dees-input-text .label=${'Recipient Name'} .required=${true}></dees-input-text>
+          <dees-input-iban .label=${'Recipient IBAN'} .required=${true}></dees-input-iban>
+          <dees-input-text .label=${'Transfer Reference'} .description=${'Optional reference for the transfer'}></dees-input-text>
+          <dees-input-text .label=${'Amount'} .inputType=${'number'} .required=${true}></dees-input-text>
+        </dees-form>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,92 @@
+import {
+  customElement,
+  type TemplateResult,
+  state,
+  html,
+  property,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
+import * as ibantools from 'ibantools';
+import { demoFunc } from './dees-input-iban.demo.js';
+
+@customElement('dees-input-iban')
+export class DeesInputIban extends DeesInputBase<DeesInputIban> {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @state()
+  accessor enteredString: string = '';
+
+  @state()
+  accessor enteredIbanIsValid: boolean = false;
+
+  @property({
+    type: String,
+  })
+  accessor value = '';
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      /* IBAN input specific styles can go here */
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <dees-label .label=${this.label || 'IBAN'} .description=${this.description}></dees-label>
+        <dees-input-text
+          .value=${this.value}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .placeholder=${'DE89 3704 0044 0532 0130 00'}
+          @input=${(eventArg: InputEvent) => {
+            this.validateIban(eventArg);
+          }}
+        ></dees-input-text>
+      </div>
+    `;
+  }
+
+  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    if (deesInputText && deesInputText.changeSubject) {
+      deesInputText.changeSubject.subscribe(() => {
+        this.changeSubject.next(this);
+      });
+    }
+  }
+
+  public async validateIban(eventArg: InputEvent): Promise<void> {
+    const inputElement: HTMLInputElement = eventArg.target as HTMLInputElement;
+    let enteredString = inputElement?.value;
+    enteredString = enteredString || '';
+    if (this.enteredString !== enteredString) {
+      this.enteredString = ibantools.friendlyFormatIBAN(enteredString) || '';
+      if (inputElement) {
+        inputElement.value = this.enteredString;
+        this.value = this.enteredString;
+        this.changeSubject.next(this);
+      }
+    }
+    this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
+    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    this.enteredString = ibantools.friendlyFormatIBAN(value) || '';
+  }
+}