fix(core): update

ts_web/elements/dees-input-iban.ts

@@ -0,0 +1,98 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  state,
+  html,
+  domtools,
+  property,
+} from '@design.estate/dees-element';
+
+import * as ibantools from 'ibantools';
+import { demoFunc } from './dees-input-iban.demo.js';
+
+@customElement('dees-input-iban')
+export class DeesInputIban extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @state()
+  enteredString: string = '';
+
+  @state()
+  enteredIbanIsValid: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required = false;
+
+  @property({
+    type: String,
+  })
+  public label = '';
+
+  @property({
+    type: String,
+  })
+  public key = '';
+
+  @property({
+    type: String,
+  })
+  public value = '';
+
+  public changeSubject = new domtools.rxjs.Subject<DeesInputIban>();
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        input[type='text'] {
+          line-height: 20px;
+          padding: 5px;
+          width: 250px;
+        }
+      </style>
+      <dees-input-text
+        .label=${'IBAN'}
+        .value=${this.value}
+        @input=${(eventArg: InputEvent) => {
+          this.validateIban(eventArg);
+        }}
+      ></dees-input-text>
+    `;
+  }
+
+  public async firstUpdated() {
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
+    deesInputText.disabled = this.disabled;
+    deesInputText.required = this.required;
+    deesInputText.changeSubject.subscribe(valueArg => {
+      this.value = valueArg.value;
+      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}`;
+  }
+}