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(); public render(): TemplateResult { return html` { this.validateIban(eventArg); }} > `; } 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 { 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}`; } }