@aws-amplify/ui-angular 2.3.0 → 2.3.3

package/fesm2015/aws-amplify-ui-angular.js

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, ContentChildren, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { createAuthenticatorMachine, getServiceContextFacade, listenToAuthHub, getSendEventAliases, translate, getActorState, getFormDataFromEvent, getActorContext, AuthChallengeNames, FederatedIdentityProviders, authInputAttributes, countryDialCodes, getAliasInfoFromContext, hasTranslation, setFormOrder } from '@aws-amplify/ui';
+import { createAuthenticatorMachine, getServiceContextFacade, listenToAuthHub, getSendEventAliases, translate, getFormDataFromEvent, getActorContext, AuthChallengeNames, FederatedIdentityProviders, countryDialCodes, getErrors, hasTranslation, defaultFormFieldOptions, getActorState, getSortedFormFields, getDefaultFormFields, applyDefaults, sortFormFields } from '@aws-amplify/ui';
 export { translations } from '@aws-amplify/ui';
 import { Logger } from '@aws-amplify/core';
 import { interpret } from 'xstate';
@@ -56,20 +56,9 @@ const logger$2 = new Logger('state-machine');
  * AuthenticatorService provides access to the authenticator state and context.
  */
 class AuthenticatorService {
-    startMachine({ initialState, loginMechanisms, services, signUpAttributes, socialProviders, formFields, }) {
+    constructor() {
         const machine = createAuthenticatorMachine();
         const authService = interpret(machine).start();
-        authService.send({
-            type: 'INIT',
-            data: {
-                initialState,
-                loginMechanisms,
-                socialProviders,
-                signUpAttributes,
-                services,
-                formFields,
-            },
-        });
         this._machineSubscription = authService.subscribe((state) => {
             this._authState = state;
             this._facade = getServiceContextFacade(state);
@@ -191,6 +180,7 @@ AuthenticatorService.decorators = [
                 providedIn: 'root',
             },] }
 ];
+AuthenticatorService.ctorParameters = () => [];
 
 class AuthenticatorComponent {
     constructor(authenticator, contextService) {
@@ -200,17 +190,31 @@ class AuthenticatorComponent {
         // translated texts
         this.signInTitle = translate('Sign In');
         this.signUpTitle = translate('Create Account');
+        this.hasInitialized = false;
     }
     ngOnInit() {
         const { initialState, loginMechanisms, services, signUpAttributes, socialProviders, formFields, } = this;
-        this.authenticator.startMachine({
-            initialState,
-            loginMechanisms,
-            services,
-            signUpAttributes,
-            socialProviders,
-            formFields,
-        });
+        /**
+         * Subscribes to state machine changes and sends INIT event
+         * once machine reaches 'setup' state.
+         */
+        this.unsubscribeMachine = this.authenticator.subscribe(() => {
+            const { route } = this.authenticator;
+            if (!this.hasInitialized && route === 'setup') {
+                this.authenticator.send({
+                    type: 'INIT',
+                    data: {
+                        initialState,
+                        loginMechanisms,
+                        services,
+                        signUpAttributes,
+                        socialProviders,
+                        formFields,
+                    },
+                });
+                this.hasInitialized = true;
+            }
+        }).unsubscribe;
         /**
          * handling translations after content init, because authenticator and its
          * translations might be initialized before the main app's `ngOnInit` is run.
@@ -224,6 +228,10 @@ class AuthenticatorComponent {
     ngAfterContentInit() {
         this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
     }
+    ngOnDestroy() {
+        if (this.unsubscribeMachine)
+            this.unsubscribeMachine();
+    }
     /**
      * Class Functions
      */
@@ -291,18 +299,6 @@ class ConfirmResetPasswordComponent {
         this.backToSignInText = translate('Back to Sign In');
         this.resendCodeText = translate('Resend Code');
     }
-    ngOnInit() {
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmResetPassword;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-    }
     get context() {
         return this.authenticator.slotContext;
     }
@@ -319,7 +315,7 @@ class ConfirmResetPasswordComponent {
 ConfirmResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-reset-password',
-                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', null)\"\n    ></amplify-form-field>\n    <amplify-form-field\n      name=\"password\"\n      label=\"New password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('password', 'placeholder', null)\"\n      [required]=\"grabField('password', 'required', true)\"\n      [label]=\"grabField('password', 'label', 'New password')\"\n    ></amplify-form-field>\n    <amplify-form-field\n      name=\"confirm_password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirm_password', 'placeholder', null)\"\n      [required]=\"grabField('confirm_password', 'required', true)\"\n      [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n    ></amplify-form-field>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields\n      route=\"confirmResetPassword\"\n    ></amplify-base-form-fields>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
             },] }
 ];
 ConfirmResetPasswordComponent.ctorParameters = () => [
@@ -340,16 +336,6 @@ class ConfirmSignInComponent {
     }
     ngOnInit() {
         this.setHeaderText();
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignIn;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
     }
     get context() {
         return this.authenticator.slotContext;
@@ -382,7 +368,7 @@ class ConfirmSignInComponent {
 ConfirmSignInComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-sign-in',
-                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      label=\"Code *\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', 'Code *')\"\n    ></amplify-form-field>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields route=\"confirmSignIn\"></amplify-base-form-fields>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n"
             },] }
 ];
 ConfirmSignInComponent.ctorParameters = () => [
@@ -405,18 +391,6 @@ class ConfirmSignUpComponent {
         this.defaultMessage = translate('Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.');
         this.minutesMessage = translate('It may take a minute to arrive.');
     }
-    ngOnInit() {
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignUp;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-    }
     get context() {
         return this.authenticator.slotContext;
     }
@@ -449,7 +423,7 @@ class ConfirmSignUpComponent {
 ConfirmSignUpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-sign-up',
-                template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span style=\"margin-bottom: 1rem\">\n        {{ subtitleText }}\n      </span>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        autocomplete=\"one-time-code\"\n        [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n        [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n        [required]=\"grabField('confirmation_code', 'required', true)\"\n        [label]=\"grabField('confirmation_code', 'label', null)\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n"
+                template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span style=\"margin-bottom: 1rem\">\n        {{ subtitleText }}\n      </span>\n      <amplify-base-form-fields\n        route=\"confirmSignUp\"\n      ></amplify-base-form-fields>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n"
             },] }
 ];
 ConfirmSignUpComponent.ctorParameters = () => [
@@ -469,18 +443,6 @@ class ConfirmVerifyUserComponent {
         this.skipText = translate('Skip');
         this.submitText = translate('Submit');
     }
-    ngOnInit() {
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmVerifyUser;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-    }
     get context() {
         return this.authenticator.slotContext;
     }
@@ -497,7 +459,7 @@ class ConfirmVerifyUserComponent {
 ConfirmVerifyUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-verify-user',
-                template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', null)\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields\n      route=\"confirmVerifyUser\"\n    ></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
             },] }
 ];
 ConfirmVerifyUserComponent.ctorParameters = () => [
@@ -585,21 +547,9 @@ class ForceNewPasswordComponent {
         this.changePasswordText = translate('Change Password');
         this.backToSignInText = translate('Back to Sign In');
     }
-    ngOnInit() {
-        this.setFormFields();
-    }
     get context() {
         return this.authenticator.slotContext;
     }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.forceNewPassword;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-    }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
@@ -613,7 +563,7 @@ class ForceNewPasswordComponent {
 ForceNewPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-force-new-password',
-                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('password', 'placeholder', null)\"\n      [required]=\"grabField('password', 'required', true)\"\n      [label]=\"grabField('password', 'label', null)\"\n      name=\"password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n    ></amplify-form-field>\n\n    <amplify-form-field\n      name=\"confirm_password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirm_password', 'placeholder', null)\"\n      [required]=\"grabField('confirm_password', 'required', true)\"\n      [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n    ></amplify-form-field>\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
             },] }
 ];
 ForceNewPasswordComponent.ctorParameters = () => [
@@ -625,106 +575,41 @@ ForceNewPasswordComponent.propDecorators = {
 };
 
 class ForceNewPasswordFormFieldsComponent {
-    constructor(authenticator) {
-        this.authenticator = authenticator;
-    }
-    ngOnInit() {
-        const state = this.authenticator.authState;
-        const actorContext = getActorContext(state);
-        const { requiredAttributes } = actorContext;
-        this.fieldNames = requiredAttributes.filter((fieldName) => {
-            const hasDefaultField = !!authInputAttributes[fieldName];
-            if (!hasDefaultField) {
-                console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize Authenticator.SignUp.FormFields to add your own.`);
-            }
-            return hasDefaultField;
-        });
-    }
 }
 ForceNewPasswordFormFieldsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-force-new-password-form-fields',
-                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <ng-container *ngFor=\"let field of fieldNames\">\n    <amplify-form-field\n      [name]=\"field\"\n      [labelHidden]=\"false\"\n    ></amplify-form-field>\n  </ng-container>\n</div>\n"
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"forceNewPassword\"></amplify-base-form-fields>\n</div>\n"
             },] }
 ];
-ForceNewPasswordFormFieldsComponent.ctorParameters = () => [
-    { type: AuthenticatorService }
-];
-
-const getAttributeMap = () => authInputAttributes;
 
-/**
- * Input interface opinionated for authenticator usage.
- *
- * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
- * contains authenticator opinionated logic and 2) amplify-text-field primitive
- * that does not make any auth-related inference.
- */
 class FormFieldComponent {
     constructor(authenticator) {
         this.authenticator = authenticator;
-        this.required = true;
-        this.placeholder = '';
-        this.label = '';
-        this.initialValue = '';
-        this.disabled = false;
-        this.autocomplete = '';
-        this.labelHidden = true;
         this.countryDialCodesValue = countryDialCodes;
     }
-    ngOnInit() {
-        var _a;
-        // TODO: consider better default handling mechanisms across frameworks
-        if (this.isPhoneField()) {
-            const state = this.authenticator.authState;
-            const { country_code } = getActorContext(state);
-            this.defaultCountryCodeValue = (_a = this.defaultCountryCode) !== null && _a !== void 0 ? _a : country_code;
-        }
-    }
-    get attributeMap() {
-        return getAttributeMap();
-    }
-    get error() {
-        const formContext = getActorContext(this.authenticator.authState);
-        const { validationError } = formContext;
-        return translate(validationError[this.name]);
+    get errors() {
+        const { validationErrors } = this.authenticator;
+        return getErrors(validationErrors[this.name]);
     }
     onBlur($event) {
         let { name } = $event.target;
         this.authenticator.updateBlur({ name });
     }
-    inferLabel() {
-        var _a;
-        const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
-        return translate(label);
-    }
-    inferPlaceholder() {
-        var _a;
-        const placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-            this.inferLabel();
-        return translate(placeholder);
-    }
-    // infers what the `type` of underlying input element should be.
-    inferType() {
-        var _a, _b, _c;
-        return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
-    }
-    inferAutocomplete() {
-        var _a;
-        return this.autocomplete || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.autocomplete);
-    }
-    // TODO(enhancement): use enum to differentiate special field types
     isPasswordField() {
-        return this.inferType() === 'password';
+        return this.formField.type === 'password';
     }
     isPhoneField() {
-        return this.inferType() === 'tel';
+        return this.formField.type === 'tel';
+    }
+    translate(phrase) {
+        return translate(phrase);
     }
 }
 FormFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-form-field',
-                template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [defaultCountryCode]=\"defaultCountryCodeValue\"\n    [dialCodeList]=\"dialCodeList\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+                template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [defaultCountryCode]=\"formField.dialCode\"\n    [dialCodeList]=\"formField.dialCodeList\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    type=\"tel\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [type]=\"formField.type\"\n  ></amplify-text-field>\n  <div data-amplify-sign-up-errors *ngIf=\"errors?.length > 0\">\n    <div\n      class=\"amplify-text\"\n      data-variation=\"error\"\n      *ngFor=\"let error of errors\"\n    >\n      {{ translate(error) }}\n    </div>\n  </div>\n</div>\n"
             },] }
 ];
 FormFieldComponent.ctorParameters = () => [
@@ -732,16 +617,7 @@ FormFieldComponent.ctorParameters = () => [
 ];
 FormFieldComponent.propDecorators = {
     name: [{ type: Input }],
-    type: [{ type: Input }],
-    required: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    label: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    disabled: [{ type: Input }],
-    autocomplete: [{ type: Input }],
-    labelHidden: [{ type: Input }],
-    defaultCountryCode: [{ type: Input }],
-    dialCodeList: [{ type: Input }]
+    formField: [{ type: Input }]
 };
 
 class ResetPasswordComponent {
@@ -752,22 +628,6 @@ class ResetPasswordComponent {
         // translated texts
         this.sendCodeText = translate('Send Code');
         this.backToSignInText = translate('Back to Sign In');
-        this.labelText = translate('Username');
-    }
-    ngOnInit() {
-        const { authState } = this.authenticator;
-        const { label } = getAliasInfoFromContext(authState.context);
-        this.labelText = `Enter your ${label.toLowerCase()}`;
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.resetPassword;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
     }
     get context() {
         return this.authenticator.slotContext;
@@ -785,7 +645,7 @@ class ResetPasswordComponent {
 ResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-reset-password',
-                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-form-field\n      name=\"username\"\n      type=\"username\"\n      autocomplete=\"username\"\n      [labelHidden]=\"grabField('username', 'labelHidden', true)\"\n      [required]=\"grabField('username', 'required', true)\"\n      [label]=\"grabField('username', 'label', labelText)\"\n      [placeholder]=\"grabField('username', 'placeholder', labelText)\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields route=\"resetPassword\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
             },] }
 ];
 ResetPasswordComponent.ctorParameters = () => [
@@ -811,16 +671,6 @@ class SetupTotpComponent {
     }
     ngOnInit() {
         this.generateQRCode();
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.setupTOTP;
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
     }
     get context() {
         return this.authenticator.slotContext;
@@ -862,7 +712,7 @@ class SetupTotpComponent {
 SetupTotpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-setup-totp',
-                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', 'Code *')\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n"
+                template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-base-form-fields route=\"setupTOTP\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n"
             },] }
 ];
 SetupTotpComponent.ctorParameters = () => [
@@ -883,24 +733,6 @@ class SignInComponent {
             : translate('Forgot your password? ');
         this.signInButtonText = translate('Sign in');
     }
-    ngOnInit() {
-        this.setFormFields();
-    }
-    setFormFields() {
-        var _a, _b, _c, _d;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.signIn;
-        this.userOverrides = (_c = this.formOverrides) === null || _c === void 0 ? void 0 : _c['username'];
-        this.passwordOR = (_d = this.formOverrides) === null || _d === void 0 ? void 0 : _d['password'];
-    }
-    labelHidden(name, defaultV = true) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.labelHidden) !== null && _c !== void 0 ? _c : defaultV;
-    }
-    required(name, defaultV = true) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.required) !== null && _c !== void 0 ? _c : defaultV;
-    }
     get context() {
         return this.authenticator.slotContext;
     }
@@ -917,7 +749,7 @@ class SignInComponent {
 SignInComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-sign-in',
-                template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-user-name-alias\n      [labelHidden]=\"labelHidden('username')\"\n      [placeholder]=\"userOverrides?.placeholder\"\n      [required]=\"required('username')\"\n      [label]=\"userOverrides?.label\"\n      [dialCode]=\"userOverrides?.dialCode\"\n      [dialCodeList]=\"userOverrides?.dialCodeList\"\n    ></amplify-user-name-alias>\n    <amplify-form-field\n      [labelHidden]=\"labelHidden('password')\"\n      [placeholder]=\"passwordOR?.placeholder\"\n      [required]=\"required('password')\"\n      [label]=\"passwordOR?.label\"\n      data-amplify-password\n      name=\"password\"\n      type=\"password\"\n      autocomplete=\"current-password\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button\n      amplify-button\n      fontWeight=\"normal\"\n      size=\"small\"\n      variation=\"link\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\"\n    >\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n",
+                template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\">\n    <legend class=\"amplify-visually-hidden\">Sign in</legend>\n    <amplify-base-form-fields route=\"signIn\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button amplify-button fontWeight=\"normal\" size=\"small\" variation=\"link\" fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\">\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -963,98 +795,15 @@ SignUpComponent.propDecorators = {
 };
 
 class SignUpFormFieldsComponent {
-    constructor(authenticator) {
-        this.authenticator = authenticator;
-        this.primaryAlias = '';
-        this.secondaryAliases = [];
-        this.translate = translate;
-    }
-    ngOnInit() {
-        const context = this.authenticator.context;
-        const { loginMechanisms, signUpAttributes } = context.config;
-        this.fieldNames = Array.from(new Set([...loginMechanisms, ...signUpAttributes]));
-        this.fieldNames = this.fieldNames.filter((fieldName) => {
-            const hasDefaultField = !!authInputAttributes[fieldName];
-            if (!hasDefaultField) {
-                console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize Authenticator.SignUp.FormFields to add your own.`);
-            }
-            return hasDefaultField;
-        });
-        // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
-        this.loginMechanism = this.fieldNames.shift();
-        const common = [
-            this.loginMechanism,
-            'password',
-            'confirm_password',
-        ];
-        this.fieldNamesCombined = [...common, ...this.fieldNames];
-        this.setFormFields();
-    }
-    get errors() {
-        const formContext = getActorContext(this.authenticator.authState);
-        const { validationError } = formContext;
-        return validationError['password'];
-    }
-    setFormFields() {
-        var _a, _b, _c;
-        const _state = this.authenticator.authState;
-        this.formOverrides = (_b = (_a = getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.signUp;
-        this.userOverrides = (_c = this.formOverrides) === null || _c === void 0 ? void 0 : _c[this.loginMechanism];
-        this.order = setFormOrder(this.formOverrides, this.fieldNamesCombined);
-    }
-    grabField(name, field, defaultV) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-    }
 }
 SignUpFormFieldsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-sign-up-form-fields',
-                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <ng-container *ngFor=\"let field of order\">\n    <ng-container [ngSwitch]=\"field\">\n      <amplify-user-name-alias\n        *ngSwitchCase=\"loginMechanism\"\n        [name]=\"loginMechanism\"\n        [labelHidden]=\"grabField(loginMechanism, 'labelHidden', true)\"\n        [placeholder]=\"userOverrides?.placeholder\"\n        [required]=\"grabField(loginMechanism, 'required', true)\"\n        [label]=\"userOverrides?.label\"\n        [dialCode]=\"userOverrides?.dialCode\"\n        [dialCodeList]=\"userOverrides?.dialCodeList\"\n      ></amplify-user-name-alias>\n      <ng-container *ngSwitchCase=\"'password'\">\n        <amplify-form-field\n          [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n          [placeholder]=\"grabField('password', 'placeholder', null)\"\n          [required]=\"grabField('password', 'required', true)\"\n          [label]=\"grabField('password', 'label', null)\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n        ></amplify-form-field>\n        <div data-amplify-sign-up-errors *ngIf=\"errors\">\n          <!-- TODO: add amplify-alert reusable component -->\n          <div\n            class=\"amplify-text\"\n            data-variation=\"error\"\n            *ngFor=\"let error of errors\"\n          >\n            {{ translate(error) }}\n          </div>\n        </div>\n      </ng-container>\n      <amplify-form-field\n        *ngSwitchCase=\"'confirm_password'\"\n        [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n        [placeholder]=\"\n          grabField('confirm_password', 'placeholder', 'Confirm Password')\n        \"\n        [required]=\"grabField('confirm_password', 'required', true)\"\n        [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n        name=\"confirm_password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        *ngSwitchDefault\n        [name]=\"field\"\n        [labelHidden]=\"grabField(field, 'labelHidden', false)\"\n        [placeholder]=\"grabField(field, 'placeholder', null)\"\n        [required]=\"grabField(field, 'required', true)\"\n        [label]=\"grabField(field, 'label', null)\"\n        [defaultCountryCode]=\"grabField(field, 'dialCode', null)\"\n        [dialCodeList]=\"grabField(field, 'dialCodeList', null)\"\n      ></amplify-form-field>\n    </ng-container>\n  </ng-container>\n</div>\n"
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"signUp\"></amplify-base-form-fields>\n</div>\n"
             },] }
 ];
-SignUpFormFieldsComponent.ctorParameters = () => [
-    { type: AuthenticatorService }
-];
 
-class UserNameAliasComponent {
-    constructor(authenticator) {
-        this.authenticator = authenticator;
-        this.name = 'username';
-        this.disabled = false;
-        this.initialValue = '';
-        this.required = true;
-    }
-    ngOnInit() {
-        var _a, _b, _c;
-        const context = this.authenticator.context;
-        const { label: lbl, type } = getAliasInfoFromContext(context);
-        this.labelValue = (_a = this.label) !== null && _a !== void 0 ? _a : lbl;
-        this.type = type;
-        this.placeholderValue = (_b = this.placeholder) !== null && _b !== void 0 ? _b : lbl;
-        this.requiredValue = (_c = this.required) !== null && _c !== void 0 ? _c : true;
-    }
-}
-UserNameAliasComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-user-name-alias',
-                template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [labelHidden]=\"labelHidden\"\n  [label]=\"labelValue\"\n  [placeholder]=\"placeholderValue\"\n  [required]=\"requiredValue\"\n  [defaultCountryCode]=\"dialCode\"\n  [dialCodeList]=\"dialCodeList\"\n  [type]=\"type\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
-            },] }
-];
-UserNameAliasComponent.ctorParameters = () => [
-    { type: AuthenticatorService }
-];
-UserNameAliasComponent.propDecorators = {
-    name: [{ type: Input }],
-    disabled: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    required: [{ type: Input }],
-    labelHidden: [{ type: Input }],
-    label: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    dialCode: [{ type: Input }],
-    dialCodeList: [{ type: Input }]
-};
+const getAttributeMap = () => defaultFormFieldOptions;
 
 class VerifyUserComponent {
     constructor(authenticator) {
@@ -1105,6 +854,57 @@ VerifyUserComponent.propDecorators = {
     headerText: [{ type: Input }]
 };
 
+/**
+ * Sorts the given formFields, then renders them in order.
+ */
+class BaseFormFieldsComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.display = 'contents';
+        this.formFields = [];
+    }
+    ngOnInit() {
+        const state = this.authenticator.authState;
+        this.formFields = getSortedFormFields(this.route, state);
+        if (this.route === 'confirmSignUp') {
+            this.handleConfirmSignUp();
+        }
+    }
+    handleConfirmSignUp() {
+        /**
+         * @todo(breaking): Angular `confirmSignUp` has different placholder here from other frameworks.
+         *
+         * Translating here in a backwards-compatible manner, but should be resolved in next major version.
+         */
+        var _a;
+        const state = this.authenticator.authState;
+        // backwards compatible placeholder text
+        const placeholder = !hasTranslation('Confirmation Code')
+            ? translate('Enter your code') // prioritize new placeholder
+            : translate('Confirmation Code'); // legacy placeholder
+        let defaultFormFields = getDefaultFormFields(this.route, state);
+        if (defaultFormFields.confirmation_code.placeholder) {
+            defaultFormFields.confirmation_code.placeholder = placeholder;
+        }
+        const customFormFields = ((_a = getActorContext(state).formFields) === null || _a === void 0 ? void 0 : _a.confirmSignUp) || {};
+        const newFormFields = applyDefaults(defaultFormFields, customFormFields);
+        this.formFields = sortFormFields(newFormFields);
+    }
+}
+BaseFormFieldsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-base-form-fields',
+                template: "<ng-container *ngFor=\"let formField of formFields\">\n  <amplify-form-field\n    [name]=\"formField[0]\"\n    [formField]=\"formField[1]\"\n  ></amplify-form-field>\n</ng-container>\n"
+            },] }
+];
+BaseFormFieldsComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+BaseFormFieldsComponent.propDecorators = {
+    route: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
+};
+
 class ButtonComponent {
     constructor() {
         this.type = 'button';
@@ -1420,6 +1220,7 @@ AmplifyAuthenticatorModule.decorators = [
                     AmplifySlotComponent,
                     AmplifySlotDirective,
                     AuthenticatorComponent,
+                    BaseFormFieldsComponent,
                     ButtonComponent,
                     CheckboxComponent,
                     ConfirmResetPasswordComponent,
@@ -1443,7 +1244,6 @@ AmplifyAuthenticatorModule.decorators = [
                     TabItemComponent,
                     TabsComponent,
                     TextFieldComponent,
-                    UserNameAliasComponent,
                     VerifyUserComponent,
                 ],
                 imports: [CommonModule],
@@ -1466,5 +1266,5 @@ AmplifyAuthenticatorModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AmplifyAuthenticatorModule, AmplifySlotDirective, AuthenticatorComponent, AuthenticatorService, ButtonComponent, CheckboxComponent, ConfirmResetPasswordComponent, ConfirmSignInComponent, ConfirmSignUpComponent, ConfirmVerifyUserComponent, CustomComponentsService, ErrorComponent, FederatedSignInButtonComponent, FederatedSignInComponent, ForceNewPasswordComponent, ForceNewPasswordFormFieldsComponent, FormFieldComponent, PasswordFieldComponent, PhoneNumberFieldComponent, ResetPasswordComponent, SelectComponent, SetupTotpComponent, SignInComponent, SignUpComponent, SignUpFormFieldsComponent, TabItemComponent, TabsComponent, TextFieldComponent, UserNameAliasComponent, VerifyUserComponent, getAttributeMap, AmplifySlotComponent as ɵa, AuthenticatorComponent as ɵb, VerifyUserComponent as ɵba, ButtonComponent as ɵc, CheckboxComponent as ɵd, ConfirmResetPasswordComponent as ɵe, ConfirmSignInComponent as ɵf, ConfirmSignUpComponent as ɵg, ConfirmVerifyUserComponent as ɵh, ErrorComponent as ɵi, FederatedSignInButtonComponent as ɵj, FederatedSignInComponent as ɵk, ForceNewPasswordComponent as ɵl, ForceNewPasswordFormFieldsComponent as ɵm, FormFieldComponent as ɵn, PasswordFieldComponent as ɵo, PhoneNumberFieldComponent as ɵp, ResetPasswordComponent as ɵq, SelectComponent as ɵr, SetupTotpComponent as ɵs, SignInComponent as ɵt, SignUpComponent as ɵu, SignUpFormFieldsComponent as ɵv, TabItemComponent as ɵw, TabsComponent as ɵx, TextFieldComponent as ɵy, UserNameAliasComponent as ɵz };
+export { AmplifyAuthenticatorModule, AmplifySlotDirective, AuthenticatorComponent, AuthenticatorService, BaseFormFieldsComponent, ButtonComponent, CheckboxComponent, ConfirmResetPasswordComponent, ConfirmSignInComponent, ConfirmSignUpComponent, ConfirmVerifyUserComponent, CustomComponentsService, ErrorComponent, FederatedSignInButtonComponent, FederatedSignInComponent, ForceNewPasswordComponent, ForceNewPasswordFormFieldsComponent, FormFieldComponent, PasswordFieldComponent, PhoneNumberFieldComponent, ResetPasswordComponent, SelectComponent, SetupTotpComponent, SignInComponent, SignUpComponent, SignUpFormFieldsComponent, TabItemComponent, TabsComponent, TextFieldComponent, VerifyUserComponent, getAttributeMap, AmplifySlotComponent as ɵa, AuthenticatorComponent as ɵb, VerifyUserComponent as ɵba, BaseFormFieldsComponent as ɵc, ButtonComponent as ɵd, CheckboxComponent as ɵe, ConfirmResetPasswordComponent as ɵf, ConfirmSignInComponent as ɵg, ConfirmSignUpComponent as ɵh, ConfirmVerifyUserComponent as ɵi, ErrorComponent as ɵj, FederatedSignInButtonComponent as ɵk, FederatedSignInComponent as ɵl, ForceNewPasswordComponent as ɵm, ForceNewPasswordFormFieldsComponent as ɵn, FormFieldComponent as ɵo, PasswordFieldComponent as ɵp, PhoneNumberFieldComponent as ɵq, ResetPasswordComponent as ɵr, SelectComponent as ɵs, SetupTotpComponent as ɵt, SignInComponent as ɵu, SignUpComponent as ɵv, SignUpFormFieldsComponent as ɵw, TabItemComponent as ɵx, TabsComponent as ɵy, TextFieldComponent as ɵz };
 //# sourceMappingURL=aws-amplify-ui-angular.js.map