[PM-13876] replace angular validation with html constraints validation (#11816)

* rough-in passphrase validation failure handling

* trigger valid change from settings

* fix `max` constraint enforcement

* add taps for generator validation monitoring/debugging

* HTML constraints validation rises like a phoenix

* remove min/max boundaries to fix chrome display issue

* bind settings components as view children of options components

* remove defunct `okSettings$`

* extend validationless generator to passwords

* extend validationless generator to catchall emails

* extend validationless generator to forwarder emails

* extend validationless generator to subaddress emails

* extend validationless generator to usernames

* fix observable cycle

* disable generate button when no algorithm is selected

* prevent duplicate algorithm emissions

* add constraints that assign email address defaults

libs/tools/generator/components/src/passphrase-settings.component.html

@@ -7,7 +7,13 @@
       <bit-card>
         <bit-form-field disableMargin>
           <bit-label>{{ "numWords" | i18n }}</bit-label>
-          <input bitInput formControlName="numWords" id="num-words" type="number" />
+          <input
+            bitInput
+            formControlName="numWords"
+            id="num-words"
+            type="number"
+            (change)="save('numWords')"
+          />
           <bit-hint>{{ numWordsBoundariesHint$ | async }}</bit-hint>
         </bit-form-field>
       </bit-card>
@@ -16,14 +22,33 @@
       <bit-card>
         <bit-form-field>
           <bit-label>{{ "wordSeparator" | i18n }}</bit-label>
-          <input bitInput formControlName="wordSeparator" id="word-separator" type="text" />
+          <input
+            bitInput
+            formControlName="wordSeparator"
+            id="word-separator"
+            type="text"
+            [maxlength]="wordSeparatorMaxLength"
+            (change)="save('wordSeparator')"
+          />
         </bit-form-field>
         <bit-form-control>
-          <input bitCheckbox formControlName="capitalize" id="capitalize" type="checkbox" />
+          <input
+            bitCheckbox
+            formControlName="capitalize"
+            id="capitalize"
+            type="checkbox"
+            (change)="save('capitalize')"
+          />
           <bit-label>{{ "capitalize" | i18n }}</bit-label>
         </bit-form-control>
         <bit-form-control [disableMargin]="!policyInEffect">
-          <input bitCheckbox formControlName="includeNumber" id="include-number" type="checkbox" />
+          <input
+            bitCheckbox
+            formControlName="includeNumber"
+            id="include-number"
+            type="checkbox"
+            (change)="save('includeNumber')"
+          />
           <bit-label>{{ "includeNumber" | i18n }}</bit-label>
         </bit-form-control>
         <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>