import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-text': DeesInputText; } } @customElement('dees-input-text') export class DeesInputText extends DeesElement { public static demo = () => html` `; // INSTANCE public changeSubject = new domtools.rxjs.Subject(); @property({ type: String }) public label: string; @property({ type: String }) public key: string; @property({ type: String }) public value: string = ''; @property({ type: Boolean }) public required: boolean = false; @property({ type: Boolean }) public disabled: boolean = false; @property({ type: Boolean, reflect: true, }) public isPasswordBool = false; @property({ type: Boolean, reflect: true, }) public showPasswordBool = false; public render(): TemplateResult { return html `
${this.label ? html`
${this.label}
` : html``} ${this.isPasswordBool ? html`
` : html``}
`; } public async updateValue(eventArg: Event) { const target: any = eventArg.target; this.value = target.value; this.changeSubject.next(this); } public async freeze() { this.disabled = true; } public async unfreeze() { this.disabled = false; } public async togglePasswordView () { const domtools = await this.domtoolsPromise; this.showPasswordBool = !this.showPasswordBool; console.log(`this.showPasswordBool is: ${this.showPasswordBool}`) } }