PasswordGenerator

<div class="row">  <tx-password    #field    ariaLabel="New password"    autocomplete="new-password"    [toggleMask]="true"    [feedback]="true"    [formControl]="password"  />  <button    txButton    icon="refresh"    severity="secondary"    [outlined]="true"    [txPasswordGenerate]="field"  >    Generate  </button></div>

<div class="row">  <tx-icon-field class="token">    <input      txInput      readonly      aria-label="API token"      placeholder="No token yet"      [formControl]="token"    />    <tx-input-copy />  </tx-icon-field>  <button    txButton    icon="key"    [txPasswordGenerate]="token"    [length]="32"    [symbols]="false"    [excludeSimilar]="true"  >    New token  </button></div>

<div class="panel">  <div class="length">    <span>Length {{ length }}</span>    <tx-slider ariaLabel="Length" [min]="8" [max]="48" [(ngModel)]="length" />  </div>  <div class="sets">    <tx-checkbox label="a–z" [(ngModel)]="lowercase" />    <tx-checkbox label="A–Z" [(ngModel)]="uppercase" />    <tx-checkbox label="0–9" [(ngModel)]="digits" />    <tx-checkbox label="!@#" [(ngModel)]="symbols" />    <tx-checkbox label="No look-alikes" [(ngModel)]="excludeSimilar" />  </div>  <button    txButton    icon="refresh"    [txPasswordGenerate]="null"    [length]="length"    [lowercase]="lowercase"    [uppercase]="uppercase"    [digits]="digits"    [symbols]="symbols"    [excludeSimilar]="excludeSimilar"    [disabled]="!lowercase && !uppercase && !digits && !symbols"    (generated)="result.set($event)"  >    Generate  </button>  <code class="result">{{ result() || '—' }}</code></div>

<div class="row">  <button txButton severity="secondary" (click)="invite()">Create invite code</button>  <code>{{ code() || '—' }}</code></div>