99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
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.plugins.smartrx.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}`;
|
|
}
|
|
}
|