feat: show password toggle

Author: ChristianHoffmannS2

packages/ui-library/src/components/text-input/index.ts

@@ -1,16 +1,17 @@
 import { LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
 import { form } from '../../foundation/semantic-tokens/form.css';
 import { InputTypes, FormSizesType } from '../../globals/types';
 import { BlrFormLabel } from '../form-label';
 import { BlrFormHint } from '../form-hint';
 import { IconType } from '@boiler/icons';
+import { iconButton } from '../../foundation/component-tokens/action.css';
 
 @customElement('blr-text-input')
 export class BlrTextInput extends LitElement {
-  static styles = [styleCustom, form];
+  static styles = [styleCustom, form, iconButton];
 
   @property() textInputId!: string;
   @property() type: InputTypes = 'text';
@@ -30,17 +31,21 @@ export class BlrTextInput extends LitElement {
   @property() hint?: string;
   @property() hintIcon?: IconType;
 
+  @state() protected currentType: InputTypes = this.type;
+
   toggleInputType() {
-    this.type = this.type === 'password' ? 'text' : 'password';
+    this.currentType = this.currentType === 'password' ? 'text' : 'password';
   }
 
   render() {
+    const wasInitialPasswordField = Boolean(this.type === 'password');
+
     const classes = classMap({
       [`${this.size}`]: this.size || 'md',
       [`disabled`]: this.disabled || false,
     });
 
-    const inputclasses = classMap({
+    const inputClasses = classMap({
       [`error`]: this.hasError || false,
       [`error-input`]: this.hasError || false,
       [`${this.size}`]: this.size || 'md',
@@ -50,9 +55,9 @@ export class BlrTextInput extends LitElement {
       <div class="blr-input ${classes}">
         ${BlrFormLabel({ labelText: this.label })}
         <input
-          class="blr-form-element ${inputclasses}"
+          class="blr-form-element ${inputClasses}"
           id=${this.textInputId}
-          type="${this.type}"
+          type="${this.currentType}"
           value="${this.value}"
           placeholder="${this.placeholder}"
           ?disabled="${this.disabled}"
@@ -64,12 +69,17 @@ export class BlrTextInput extends LitElement {
           pattern="${this.pattern}"
           hasError="${this.hasError}"
         />
-        <blr-icon
-          class="blr-input-icon ${inputclasses}"
-          @click=${this.toggleInputType}
-          name="${this.type.includes('password') ? 'blrEyeSm' : this.hasError ? 'blrFlagSm' : this.hintIcon}"
-          aria-hidden
-        ></blr-icon>
+
+        ${wasInitialPasswordField
+          ? html`<blr-icon
+              class="blr-input-icon"
+              @click=${this.toggleInputType}
+              icon="${this.currentType.includes('password') ? 'blrCloseSm' : 'blrEyeSm'}"
+              size="md"
+              name="${this.currentType.includes('password') ? 'blrEyeSm' : this.hasError ? 'blrFlagSm' : this.hintIcon}"
+              aria-hidden
+            ></blr-icon>`
+          : html``}
         ${BlrFormHint({
           message: this.hasError ? this.errorMessage : this.hint,
           variant: this.hasError ? 'error' : 'hint',