@aws-amplify/ui-angular 2.1.3 → 2.2.0

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, getFormDataFromEvent, getActorContext, AuthChallengeNames, FederatedIdentityProviders, authInputAttributes, countryDialCodes, getAliasInfoFromContext, hasTranslation, getActorState } from '@aws-amplify/ui';
+import { createAuthenticatorMachine, getServiceContextFacade, listenToAuthHub, getSendEventAliases, translate, getActorState, getFormDataFromEvent, getActorContext, AuthChallengeNames, FederatedIdentityProviders, authInputAttributes, countryDialCodes, getAliasInfoFromContext, hasTranslation, setFormOrder } from '@aws-amplify/ui';
 export { translations } from '@aws-amplify/ui';
 import { Logger } from '@aws-amplify/core';
 import { interpret } from 'xstate';
@@ -56,7 +56,7 @@ const logger$2 = new Logger('state-machine');
  * AuthenticatorService provides access to the authenticator state and context.
  */
 class AuthenticatorService {
-    startMachine({ initialState, loginMechanisms, services, signUpAttributes, socialProviders, }) {
+    startMachine({ initialState, loginMechanisms, services, signUpAttributes, socialProviders, formFields, }) {
         const machine = createAuthenticatorMachine();
         const authService = interpret(machine).start();
         authService.send({
@@ -67,6 +67,7 @@ class AuthenticatorService {
                 socialProviders,
                 signUpAttributes,
                 services,
+                formFields,
             },
         });
         this._machineSubscription = authService.subscribe((state) => {
@@ -201,13 +202,14 @@ class AuthenticatorComponent {
         this.signUpTitle = translate('Create Account');
     }
     ngOnInit() {
-        const { initialState, loginMechanisms, services, signUpAttributes, socialProviders, } = this;
+        const { initialState, loginMechanisms, services, signUpAttributes, socialProviders, formFields, } = this;
         this.authenticator.startMachine({
             initialState,
             loginMechanisms,
             services,
             signUpAttributes,
             socialProviders,
+            formFields,
         });
         /**
          * handling translations after content init, because authenticator and its
@@ -268,6 +270,7 @@ AuthenticatorComponent.ctorParameters = () => [
     { type: CustomComponentsService }
 ];
 AuthenticatorComponent.propDecorators = {
+    formFields: [{ type: Input }],
     initialState: [{ type: Input }],
     loginMechanisms: [{ type: Input }],
     services: [{ type: Input }],
@@ -288,6 +291,18 @@ 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;
     }
@@ -304,7 +319,7 @@ class ConfirmResetPasswordComponent {
 ConfirmResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-reset-password',
-                template: "<div data-amplify-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]=\"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        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-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</div>\n"
+                template: "<div data-amplify-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]=\"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        type=\"number\"\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</div>\n"
             },] }
 ];
 ConfirmResetPasswordComponent.ctorParameters = () => [
@@ -325,6 +340,16 @@ 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;
@@ -357,7 +382,7 @@ class ConfirmSignInComponent {
 ConfirmSignInComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-sign-in',
-                template: "<div data-amplify-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]=\"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        type=\"text\"\n        autocomplete=\"one-time-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</div>\n"
+                template: "<div data-amplify-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]=\"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        type=\"text\"\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</div>\n"
             },] }
 ];
 ConfirmSignInComponent.ctorParameters = () => [
@@ -380,6 +405,18 @@ 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;
     }
@@ -412,7 +449,7 @@ class ConfirmSignUpComponent {
 ConfirmSignUpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-sign-up',
-                template: "<div data-amplify-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      ></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</div>\n"
+                template: "<div data-amplify-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</div>\n"
             },] }
 ];
 ConfirmSignUpComponent.ctorParameters = () => [
@@ -432,6 +469,18 @@ 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;
     }
@@ -448,7 +497,7 @@ class ConfirmVerifyUserComponent {
 ConfirmVerifyUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-confirm-verify-user',
-                template: "<div data-amplify-container>\n  <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        type=\"number\"\n        autocomplete=\"one-time-code\"\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</div>\n"
+                template: "<div data-amplify-container>\n  <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        type=\"number\"\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</div>\n"
             },] }
 ];
 ConfirmVerifyUserComponent.ctorParameters = () => [
@@ -536,9 +585,21 @@ 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;
@@ -552,7 +613,7 @@ class ForceNewPasswordComponent {
 ForceNewPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-force-new-password',
-                template: "<div data-amplify-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]=\"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        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-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</div>\n"
+                template: "<div data-amplify-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]=\"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</div>\n"
             },] }
 ];
 ForceNewPasswordComponent.ctorParameters = () => [
@@ -609,14 +670,15 @@ class FormFieldComponent {
         this.disabled = false;
         this.autocomplete = '';
         this.labelHidden = true;
-        this.countryDialCodes = countryDialCodes;
+        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.defaultCountryCode = country_code;
+            this.defaultCountryCodeValue = (_a = this.defaultCountryCode) !== null && _a !== void 0 ? _a : country_code;
         }
     }
     get attributeMap() {
@@ -662,7 +724,7 @@ class FormFieldComponent {
 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]=\"defaultCountryCode\"\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    [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"
             },] }
 ];
 FormFieldComponent.ctorParameters = () => [
@@ -677,7 +739,9 @@ FormFieldComponent.propDecorators = {
     initialValue: [{ type: Input }],
     disabled: [{ type: Input }],
     autocomplete: [{ type: Input }],
-    labelHidden: [{ type: Input }]
+    labelHidden: [{ type: Input }],
+    defaultCountryCode: [{ type: Input }],
+    dialCodeList: [{ type: Input }]
 };
 
 class ResetPasswordComponent {
@@ -694,6 +758,16 @@ class ResetPasswordComponent {
         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;
@@ -711,7 +785,7 @@ class ResetPasswordComponent {
 ResetPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-reset-password',
-                template: "<div data-amplify-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]=\"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        [placeholder]=\"labelText\"\n        [label]=\"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</div>\n"
+                template: "<div data-amplify-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]=\"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</div>\n"
             },] }
 ];
 ResetPasswordComponent.ctorParameters = () => [
@@ -737,11 +811,22 @@ 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;
     }
     generateQRCode() {
+        var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
             // TODO: This should be handled in core.
             const state = this.authenticator.authState;
@@ -749,8 +834,9 @@ class SetupTotpComponent {
             const { user } = actorContext;
             try {
                 this.secretKey = yield Auth.setupTOTP(user);
-                const issuer = 'AWSCognito';
-                const totpCode = `otpauth://totp/${issuer}:${user.username}?secret=${this.secretKey}&issuer=${issuer}`;
+                const issuer = (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a['QR']) === null || _b === void 0 ? void 0 : _b.totpIssuer) !== null && _c !== void 0 ? _c : 'AWSCognito';
+                const username = (_f = (_e = (_d = this.formOverrides) === null || _d === void 0 ? void 0 : _d['QR']) === null || _e === void 0 ? void 0 : _e.totpUsername) !== null && _f !== void 0 ? _f : user.username;
+                const totpCode = `otpauth://totp/${issuer}:${username}?secret=${this.secretKey}&issuer=${issuer}`;
                 logger.info('totp code was generated:', totpCode);
                 this.qrCodeSource = yield QRCode.toDataURL(totpCode);
             }
@@ -776,7 +862,7 @@ class SetupTotpComponent {
 SetupTotpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-setup-totp',
-                template: "<div data-amplify-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]=\"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            fill=\"none\"\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              fill=\"black\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-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</div>\n"
+                template: "<div data-amplify-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]=\"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            fill=\"none\"\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              fill=\"black\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"text\"\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</div>\n"
             },] }
 ];
 SetupTotpComponent.ctorParameters = () => [
@@ -797,6 +883,24 @@ 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;
     }
@@ -813,7 +917,7 @@ class SignInComponent {
 SignInComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-sign-in',
-                template: "<div data-amplify-container>\n  <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></amplify-user-name-alias>\n      <amplify-form-field\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</div>\n",
+                template: "<div data-amplify-container>\n  <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</div>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -877,12 +981,30 @@ class SignUpFormFieldsComponent {
         });
         // 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();
+    }
+    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  <amplify-user-name-alias [name]=\"loginMechanism\"></amplify-user-name-alias>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n\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  <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      <amplify-form-field\n        *ngSwitchCase=\"'password'\"\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      <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"
             },] }
 ];
 SignUpFormFieldsComponent.ctorParameters = () => [
@@ -898,17 +1020,19 @@ class UserNameAliasComponent {
         this.required = true;
     }
     ngOnInit() {
+        var _a, _b, _c;
         const context = this.authenticator.context;
-        const { label, type } = getAliasInfoFromContext(context);
-        this.label = label;
+        const { label: lbl, type } = getAliasInfoFromContext(context);
+        this.labelValue = (_a = this.label) !== null && _a !== void 0 ? _a : lbl;
         this.type = type;
-        this.placeholder = label;
+        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  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
+                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 = () => [
@@ -918,7 +1042,12 @@ UserNameAliasComponent.propDecorators = {
     name: [{ type: Input }],
     disabled: [{ type: Input }],
     initialValue: [{ type: Input }],
-    required: [{ type: Input }]
+    required: [{ type: Input }],
+    labelHidden: [{ type: Input }],
+    label: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    dialCode: [{ type: Input }],
+    dialCodeList: [{ type: Input }]
 };
 
 class VerifyUserComponent {
@@ -1106,13 +1235,16 @@ class PhoneNumberFieldComponent {
         this.required = true;
         this.labelHidden = false;
         this.display = 'contents';
-        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        var _a;
+        this.countryDialCodesValues = (_a = this.dialCodeList) !== null && _a !== void 0 ? _a : countryDialCodes;
     }
 }
 PhoneNumberFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'amplify-phone-number-field',
-                template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
+                template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodesValues\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
             },] }
 ];
 PhoneNumberFieldComponent.propDecorators = {
@@ -1128,6 +1260,7 @@ PhoneNumberFieldComponent.propDecorators = {
     required: [{ type: Input }],
     type: [{ type: Input }],
     labelHidden: [{ type: Input }],
+    dialCodeList: [{ type: Input }],
     display: [{ type: HostBinding, args: ['style.display',] }]
 };