import { customElement, DeesElement, type TemplateResult, property, html, cssManager, css, type CSSResult, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/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.plugins.smartrx.rxjs.Subject(); @property({ type: String, }) public label: string; @property({ type: String, reflect: true, }) public key: string; @property({ type: String, reflect: true, }) 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; @property({ type: Boolean, reflect: true, }) public validationState: 'valid' | 'warn' | 'invalid'; @property({ reflect: true, }) public validationText: string = ''; @property({}) validationFunction: (value: string) => boolean; public static styles = [ cssManager.defaultStyles, css` * { box-sizing: border-box; } :host { position: relative; display: grid; margin: 8px 0px; margin-bottom: 24px; z-index: auto; } .maincontainer { color: ${cssManager.bdTheme('#333', '#ccc')}; } .label { font-size: 14px; margin-bottom: 4px; } input { margin-top: 5px; background: ${cssManager.bdTheme('#fafafa', '#222')}; border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')}; border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')}; border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')}; border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')}; padding-left: 10px; padding-right: 10px; border-radius: 2px; width: 100%; line-height: 36px; transition: all 0.2s; outline: none; font-size: 16px; position: relative; z-index: 2; // see template for more } input:disabled { background: ${cssManager.bdTheme('#ffffff00', '#11111100')}; border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')}; color: #9b9b9e; cursor: default; } input:focus { outline: none; border-bottom: 1px solid #e4002b; } .showPassword { position: absolute; bottom: 7px; right: 10px; border: 1px dashed #444; border-radius: 7px; padding: 4px 0px; width: 40px; z-index: 3; } .showPassword:hover { background: ${cssManager.bdTheme('#00000010', '#ffffff10')}; } .validationContainer { text-align: center; padding: 6px 2px 2px 2px; margin-top: -4px; font-size: 12px; color: #fff; background: #e4002b; position: relative; z-index: 1; border-radius: 3px; transition: all 0.2s; } `, ]; public render(): TemplateResult { return html`
${this.label ? html`
${this.label}
` : html``}
${this.validationText}
${this.isPasswordBool ? html`
` : html``}
`; } firstUpdated() { const input = this.shadowRoot.querySelector('input'); input.addEventListener('input', (eventArg: InputEvent) => { }); } 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}`); } public async focus() { const textInput = this.shadowRoot.querySelector('input'); textInput.focus(); } public async blur() { const textInput = this.shadowRoot.querySelector('input'); textInput.blur(); } }