diff --git a/web/src/components/ak-secret-text-input.ts b/web/src/components/ak-secret-text-input.ts index 3f7806deaac5..91f03d76111b 100644 --- a/web/src/components/ak-secret-text-input.ts +++ b/web/src/components/ak-secret-text-input.ts @@ -10,7 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js"; @customElement("ak-secret-text-input") export class AkSecretTextInput extends HorizontalLightComponent { - @property({ type: String, reflect: true }) + @property({ type: String }) public value = ""; @property({ type: Boolean, reflect: true }) @@ -19,10 +19,20 @@ export class AkSecretTextInput extends HorizontalLightComponent { @property({ type: String }) public placeholder = ""; + @property({ type: Number, attribute: "maxlength" }) + public maxLength?: number; + + @property({ type: Number, attribute: "minlength" }) + public minLength?: number; + #onReveal() { this.revealed = true; } + #inputListener = (ev: InputEvent) => { + this.value = (ev.target as HTMLInputElement).value; + }; + #renderSecretInput() { return html`
this.#onReveal()}> { data-form-ignore="true" value="**************" /> - +

${msg("Click to change value")}

`; } protected renderVisibleInput() { const code = this.inputHint === "code"; - const setValue = (ev: InputEvent) => { - this.value = (ev.target as HTMLInputElement).value; - }; const classes = { "pf-c-form-control": true, "pf-m-monospace": code, @@ -49,9 +62,12 @@ export class AkSecretTextInput extends HorizontalLightComponent { return html`