[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/password-settings.component.html

@@ -7,7 +7,7 @@
       <bit-card>
         <bit-form-field disableMargin>
           <bit-label>{{ "length" | i18n }}</bit-label>
-          <input bitInput formControlName="length" type="number" />
+          <input bitInput formControlName="length" type="number" (change)="save('length')" />
           <bit-hint>{{ lengthBoundariesHint$ | async }}</bit-hint>
         </bit-form-field>
       </bit-card>
@@ -21,7 +21,12 @@
             attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
             title="{{ 'uppercaseDescription' | i18n }}"
           >
-            <input bitCheckbox type="checkbox" formControlName="uppercase" />
+            <input
+              bitCheckbox
+              type="checkbox"
+              formControlName="uppercase"
+              (change)="save('uppercase')"
+            />
             <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
@@ -29,7 +34,12 @@
             attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
             title="{{ 'lowercaseDescription' | i18n }}"
           >
-            <input bitCheckbox type="checkbox" formControlName="lowercase" />
+            <input
+              bitCheckbox
+              type="checkbox"
+              formControlName="lowercase"
+              (change)="save('lowercase')"
+            />
             <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
@@ -37,7 +47,7 @@
             attr.aria-description="{{ 'numbersDescription' | i18n }}"
             title="{{ 'numbersDescription' | i18n }}"
           >
-            <input bitCheckbox type="checkbox" formControlName="number" />
+            <input bitCheckbox type="checkbox" formControlName="number" (change)="save('number')" />
             <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
@@ -45,22 +55,42 @@
             attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
             title="{{ 'specialCharactersDescription' | i18n }}"
           >
-            <input bitCheckbox type="checkbox" formControlName="special" />
+            <input
+              bitCheckbox
+              type="checkbox"
+              formControlName="special"
+              (change)="save('special')"
+            />
             <bit-label>{{ "specialCharactersLabel" | i18n }}</bit-label>
           </bit-form-control>
         </div>
         <div class="tw-flex">
           <bit-form-field class="tw-w-full tw-basis-1/2 tw-mr-4">
             <bit-label>{{ "minNumbers" | i18n }}</bit-label>
-            <input bitInput type="number" formControlName="minNumber" />
+            <input
+              bitInput
+              type="number"
+              formControlName="minNumber"
+              (change)="save('minNumbers')"
+            />
           </bit-form-field>
           <bit-form-field class="tw-w-full tw-basis-1/2">
             <bit-label>{{ "minSpecial" | i18n }}</bit-label>
-            <input bitInput type="number" formControlName="minSpecial" />
+            <input
+              bitInput
+              type="number"
+              formControlName="minSpecial"
+              (change)="save('minSpecial')"
+            />
           </bit-form-field>
         </div>
         <bit-form-control [disableMargin]="!policyInEffect">
-          <input bitCheckbox type="checkbox" formControlName="avoidAmbiguous" />
+          <input
+            bitCheckbox
+            type="checkbox"
+            formControlName="avoidAmbiguous"
+            (change)="save('avoidAmbiguous')"
+          />
           <bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
         </bit-form-control>
         <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>