Password

<tx-password placeholder="Password" ariaLabel="Password" [(ngModel)]="value" />

<tx-password [toggleMask]="true" placeholder="Password" ariaLabel="Password" />

<tx-password  [feedback]="true"  [toggleMask]="true"  autocomplete="new-password"  placeholder="New password"  ariaLabel="New password"  (strengthChange)="strength.set($event)"/><p class="hint">Strength: {{ strength() ?? '—' }}</p>

<tx-password    [feedback]="true"    placeholder="Passphrase"    ariaLabel="Passphrase"    autocomplete="new-password"    mediumRegex="^.{12,}$"    strongRegex="^(?=.*\\s).{20,}$"    promptLabel="Use a few words"    weakLabel="Too short — 12+ characters"    mediumLabel="Good — add more words"    strongLabel="Great passphrase"  />

<tx-password  [feedback]="true"  [toggleMask]="true"  autocomplete="new-password"  placeholder="New password"  ariaLabel="New password">  <ng-template txPasswordContent let-value="value">    <ul class="rules">      @for (rule of rules; track rule.text) {        <li [class.done]="rule.test(value)">          <tx-icon [name]="rule.test(value) ? 'check' : 'minus'" />          {{ rule.text }}        </li>      }    </ul>  </ng-template></tx-password>

<tx-password    [showClear]="true"    [toggleMask]="true"    ariaLabel="Password"    [(ngModel)]="value"  />

<tx-float-label variant="in">  <tx-password inputId="password-float" [toggleMask]="true" />  <label for="password-float">Password</label></tx-float-label>

<div class="list">  <tx-password size="small" [toggleMask]="true" placeholder="Small" ariaLabel="Small" />  <tx-password [toggleMask]="true" placeholder="Medium" ariaLabel="Medium" />  <tx-password size="large" [toggleMask]="true" placeholder="Large" ariaLabel="Large" />  <tx-password variant="filled" [toggleMask]="true" placeholder="Filled" ariaLabel="Filled" /></div>

<div class="list">  <tx-password    [disabled]="true"    [toggleMask]="true"    ariaLabel="Disabled"    [ngModel]="'hunter22'"  />  <tx-password    [readonly]="true"    [toggleMask]="true"    ariaLabel="Read only"    [ngModel]="'hunter22'"  />  <tx-password [invalid]="true" placeholder="Invalid" ariaLabel="Invalid" /></div>

<form class="form" [formGroup]="form" (ngSubmit)="form.markAllAsTouched()">  <tx-field label="Password" [required]="true">    <tx-password      formControlName="password"      [feedback]="true"      [toggleMask]="true"      autocomplete="new-password"      [fluid]="true"    />  </tx-field>  <tx-field    label="Repeat password"    [required]="true"    [messages]="{ mismatch: 'The passwords do not match' }"  >    <tx-password      formControlName="repeat"      [toggleMask]="true"      autocomplete="new-password"      [fluid]="true"    />  </tx-field>  <button txButton type="submit">Create account</button></form>

<tx-password    [feedback]="true"    placeholder="Focus and type"    ariaLabel="Password"    autocomplete="new-password"    [dt]="tokens"  />