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

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()
  enteredString: string = '';

  @state()
  enteredIbanIsValid: boolean = false;

  @property({
    type: String,
  })
  public 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) || '';
  }
}