@aws-amplify/ui-angular 2.1.1 → 2.2.0

package/bundles/aws-amplify-ui-angular.umd.js

@@ -87,7 +87,7 @@
         }
         AuthenticatorService.prototype.startMachine = function (_b) {
             var _this = this;
-            var initialState = _b.initialState, loginMechanisms = _b.loginMechanisms, services = _b.services, signUpAttributes = _b.signUpAttributes, socialProviders = _b.socialProviders;
+            var initialState = _b.initialState, loginMechanisms = _b.loginMechanisms, services = _b.services, signUpAttributes = _b.signUpAttributes, socialProviders = _b.socialProviders, formFields = _b.formFields;
             var machine = ui.createAuthenticatorMachine();
             var authService = xstate.interpret(machine).start();
             authService.send({
@@ -98,6 +98,7 @@
                     socialProviders: socialProviders,
                     signUpAttributes: signUpAttributes,
                     services: services,
+                    formFields: formFields,
                 },
             });
             this._machineSubscription = authService.subscribe(function (state) {
@@ -317,13 +318,14 @@
             this.signUpTitle = ui.translate('Create Account');
         }
         AuthenticatorComponent.prototype.ngOnInit = function () {
-            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders;
+            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders, formFields = _a.formFields;
             this.authenticator.startMachine({
                 initialState: initialState,
                 loginMechanisms: loginMechanisms,
                 services: services,
                 signUpAttributes: signUpAttributes,
                 socialProviders: socialProviders,
+                formFields: formFields,
             });
             /**
              * handling translations after content init, because authenticator and its
@@ -393,6 +395,7 @@
         { type: CustomComponentsService }
     ]; };
     AuthenticatorComponent.propDecorators = {
+        formFields: [{ type: i0.Input }],
         initialState: [{ type: i0.Input }],
         loginMechanisms: [{ type: i0.Input }],
         services: [{ type: i0.Input }],
@@ -413,6 +416,18 @@
             this.backToSignInText = ui.translate('Back to Sign In');
             this.resendCodeText = ui.translate('Resend Code');
         }
+        ConfirmResetPasswordComponent.prototype.ngOnInit = function () {
+            this.setFormFields();
+        };
+        ConfirmResetPasswordComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmResetPassword;
+        };
+        ConfirmResetPasswordComponent.prototype.grabField = function (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;
+        };
         Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -422,19 +437,19 @@
         });
         ConfirmResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmResetPasswordComponent;
     }());
     ConfirmResetPasswordComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -455,6 +470,16 @@
         }
         ConfirmSignInComponent.prototype.ngOnInit = function () {
             this.setHeaderText();
+            this.setFormFields();
+        };
+        ConfirmSignInComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignIn;
+        };
+        ConfirmSignInComponent.prototype.grabField = function (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;
         };
         Object.defineProperty(ConfirmSignInComponent.prototype, "context", {
             get: function () {
@@ -480,19 +505,19 @@
         };
         ConfirmSignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignInComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmSignInComponent;
     }());
     ConfirmSignInComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -510,7 +535,23 @@
             // translated texts
             this.resendCodeText = ui.translate('Resend Code');
             this.confirmText = ui.translate('Confirm');
+            this.emailMessage = ui.translate('Your code is on the way. To log in, enter the code we emailed to');
+            this.textedMessage = ui.translate('Your code is on the way. To log in, enter the code we texted to');
+            this.defaultMessage = ui.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 = ui.translate('It may take a minute to arrive.');
         }
+        ConfirmSignUpComponent.prototype.ngOnInit = function () {
+            this.setFormFields();
+        };
+        ConfirmSignUpComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignUp;
+        };
+        ConfirmSignUpComponent.prototype.grabField = function (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;
+        };
         Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -520,7 +561,7 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
+                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium;
                 return DeliveryMedium === 'EMAIL'
                     ? ui.translate('We Emailed You')
                     : DeliveryMedium === 'SMS'
@@ -532,31 +573,31 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
+                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium, Destination = _e.Destination;
                 return DeliveryMedium === 'EMAIL'
-                    ? "Your code is on the way. To log in, enter the code we emailed to " + Destination + ". It may take a minute to arrive."
+                    ? this.emailMessage + " " + Destination + ". " + this.minutesMessage
                     : DeliveryMedium === 'SMS'
-                        ? "Your code is on the way. To log in, enter the code we texted to " + Destination + ". It may take a minute to arrive."
-                        : ui.translate("Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.");
+                        ? this.textedMessage + " " + Destination + ". " + this.minutesMessage
+                        : ui.translate("" + this.defaultMessage);
             },
             enumerable: false,
             configurable: true
         });
         ConfirmSignUpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignUpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmSignUpComponent;
     }());
     ConfirmSignUpComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -576,6 +617,18 @@
             this.skipText = ui.translate('Skip');
             this.submitText = ui.translate('Submit');
         }
+        ConfirmVerifyUserComponent.prototype.ngOnInit = function () {
+            this.setFormFields();
+        };
+        ConfirmVerifyUserComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmVerifyUser;
+        };
+        ConfirmVerifyUserComponent.prototype.grabField = function (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;
+        };
         Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -585,19 +638,19 @@
         });
         ConfirmVerifyUserComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmVerifyUserComponent;
     }());
     ConfirmVerifyUserComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -688,6 +741,9 @@
             this.changePasswordText = ui.translate('Change Password');
             this.backToSignInText = ui.translate('Back to Sign In');
         }
+        ForceNewPasswordComponent.prototype.ngOnInit = function () {
+            this.setFormFields();
+        };
         Object.defineProperty(ForceNewPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -695,21 +751,30 @@
             enumerable: false,
             configurable: true
         });
+        ForceNewPasswordComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.forceNewPassword;
+        };
+        ForceNewPasswordComponent.prototype.grabField = function (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;
+        };
         ForceNewPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ForceNewPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ForceNewPasswordComponent;
     }());
     ForceNewPasswordComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -767,14 +832,15 @@
             this.disabled = false;
             this.autocomplete = '';
             this.labelHidden = true;
-            this.countryDialCodes = ui.countryDialCodes;
+            this.countryDialCodesValue = ui.countryDialCodes;
         }
         FormFieldComponent.prototype.ngOnInit = function () {
+            var _a;
             // TODO: consider better default handling mechanisms across frameworks
             if (this.isPhoneField()) {
                 var state = this.authenticator.authState;
                 var country_code = ui.getActorContext(state).country_code;
-                this.defaultCountryCode = country_code;
+                this.defaultCountryCodeValue = (_a = this.defaultCountryCode) !== null && _a !== void 0 ? _a : country_code;
             }
         };
         Object.defineProperty(FormFieldComponent.prototype, "attributeMap", {
@@ -829,7 +895,7 @@
     FormFieldComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -844,7 +910,9 @@
         initialValue: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         autocomplete: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }]
+        labelHidden: [{ type: i0.Input }],
+        defaultCountryCode: [{ type: i0.Input }],
+        dialCodeList: [{ type: i0.Input }]
     };
 
     var ResetPasswordComponent = /** @class */ (function () {
@@ -861,6 +929,16 @@
             var authState = this.authenticator.authState;
             var label = ui.getAliasInfoFromContext(authState.context).label;
             this.labelText = "Enter your " + label.toLowerCase();
+            this.setFormFields();
+        };
+        ResetPasswordComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.resetPassword;
+        };
+        ResetPasswordComponent.prototype.grabField = function (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;
         };
         Object.defineProperty(ResetPasswordComponent.prototype, "context", {
             get: function () {
@@ -871,19 +949,19 @@
         });
         ResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ResetPasswordComponent;
     }());
     ResetPasswordComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1227,6 +1305,16 @@
         }
         SetupTotpComponent.prototype.ngOnInit = function () {
             this.generateQRCode();
+            this.setFormFields();
+        };
+        SetupTotpComponent.prototype.setFormFields = function () {
+            var _a, _b;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.setupTOTP;
+        };
+        SetupTotpComponent.prototype.grabField = function (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;
         };
         Object.defineProperty(SetupTotpComponent.prototype, "context", {
             get: function () {
@@ -1236,31 +1324,33 @@
             configurable: true
         });
         SetupTotpComponent.prototype.generateQRCode = function () {
+            var _a, _b, _c, _d, _e, _f;
             return __awaiter(this, void 0, void 0, function () {
-                var state, actorContext, user, _a, issuer, totpCode, _b, err_1;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var state, actorContext, user, _g, issuer, username, totpCode, _h, err_1;
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
                         case 0:
                             state = this.authenticator.authState;
                             actorContext = ui.getActorContext(state);
                             user = actorContext.user;
-                            _c.label = 1;
+                            _j.label = 1;
                         case 1:
-                            _c.trys.push([1, 4, , 5]);
-                            _a = this;
+                            _j.trys.push([1, 4, , 5]);
+                            _g = this;
                             return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
                         case 2:
-                            _a.secretKey = _c.sent();
-                            issuer = 'AWSCognito';
-                            totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + this.secretKey + "&issuer=" + issuer;
+                            _g.secretKey = _j.sent();
+                            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';
+                            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;
+                            totpCode = "otpauth://totp/" + issuer + ":" + username + "?secret=" + this.secretKey + "&issuer=" + issuer;
                             logger.info('totp code was generated:', totpCode);
-                            _b = this;
+                            _h = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
                         case 3:
-                            _b.qrCodeSource = _c.sent();
+                            _h.qrCodeSource = _j.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _c.sent();
+                            err_1 = _j.sent();
                             logger.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -1270,12 +1360,12 @@
         };
         SetupTotpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _g = event.target, name = _g.name, value = _g.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SetupTotpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         SetupTotpComponent.prototype.copyText = function () {
             navigator.clipboard.writeText(this.secretKey);
@@ -1286,7 +1376,7 @@
     SetupTotpComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1307,6 +1397,26 @@
                 : ui.translate('Forgot your password? ');
             this.signInButtonText = ui.translate('Sign in');
         }
+        SignInComponent.prototype.ngOnInit = function () {
+            this.setFormFields();
+        };
+        SignInComponent.prototype.setFormFields = function () {
+            var _a, _b, _c, _d;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.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'];
+        };
+        SignInComponent.prototype.labelHidden = function (name, defaultV) {
+            if (defaultV === void 0) { 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;
+        };
+        SignInComponent.prototype.required = function (name, defaultV) {
+            if (defaultV === void 0) { 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;
+        };
         Object.defineProperty(SignInComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -1316,19 +1426,19 @@
         });
         SignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _e = event.target, name = _e.name, value = _e.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SignInComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return SignInComponent;
     }());
     SignInComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1361,7 +1471,7 @@
         };
         SignUpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return SignUpComponent;
     }());
@@ -1386,7 +1496,7 @@
         }
         SignUpFormFieldsComponent.prototype.ngOnInit = function () {
             var context = this.authenticator.context;
-            var _a = context.config, loginMechanisms = _a.loginMechanisms, signUpAttributes = _a.signUpAttributes;
+            var _d = context.config, loginMechanisms = _d.loginMechanisms, signUpAttributes = _d.signUpAttributes;
             this.fieldNames = Array.from(new Set(__spread(loginMechanisms, signUpAttributes)));
             this.fieldNames = this.fieldNames.filter(function (fieldName) {
                 var hasDefaultField = !!ui.authInputAttributes[fieldName];
@@ -1397,13 +1507,31 @@
             });
             // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
             this.loginMechanism = this.fieldNames.shift();
+            var common = [
+                this.loginMechanism,
+                'password',
+                'confirm_password',
+            ];
+            this.fieldNamesCombined = __spread(common, this.fieldNames);
+            this.setFormFields();
+        };
+        SignUpFormFieldsComponent.prototype.setFormFields = function () {
+            var _a, _b, _c;
+            var _state = this.authenticator.authState;
+            this.formOverrides = (_b = (_a = ui.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 = ui.setFormOrder(this.formOverrides, this.fieldNamesCombined);
+        };
+        SignUpFormFieldsComponent.prototype.grabField = function (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;
         };
         return SignUpFormFieldsComponent;
     }());
     SignUpFormFieldsComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1419,18 +1547,20 @@
             this.required = true;
         }
         UserNameAliasComponent.prototype.ngOnInit = function () {
+            var _a, _b, _c;
             var context = this.authenticator.context;
-            var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
-            this.label = label;
+            var _d = ui.getAliasInfoFromContext(context), lbl = _d.label, type = _d.type;
+            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;
         };
         return UserNameAliasComponent;
     }());
     UserNameAliasComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1440,7 +1570,12 @@
         name: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
-        required: [{ type: i0.Input }]
+        required: [{ type: i0.Input }],
+        labelHidden: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        dialCode: [{ type: i0.Input }],
+        dialCodeList: [{ type: i0.Input }]
     };
 
     var VerifyUserComponent = /** @class */ (function () {
@@ -1478,7 +1613,7 @@
         };
         VerifyUserComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return VerifyUserComponent;
     }());
@@ -1609,7 +1744,7 @@
     PasswordFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-password-field',
-                    template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n    (blur)=\"setBlur.emit($event)\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n    (blur)=\"setBlur.emit($event)\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
                 },] }
     ];
     PasswordFieldComponent.propDecorators = {
@@ -1637,14 +1772,17 @@
             this.required = true;
             this.labelHidden = false;
             this.display = 'contents';
-            this.countryDialCodes = ui.countryDialCodes;
         }
+        PhoneNumberFieldComponent.prototype.ngOnInit = function () {
+            var _a;
+            this.countryDialCodesValues = (_a = this.dialCodeList) !== null && _a !== void 0 ? _a : ui.countryDialCodes;
+        };
         return PhoneNumberFieldComponent;
     }());
     PhoneNumberFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-phone-number-field',
-                    template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"textFieldId\">\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 = {
@@ -1660,6 +1798,7 @@
         required: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
         labelHidden: [{ type: i0.Input }],
+        dialCodeList: [{ type: i0.Input }],
         display: [{ type: i0.HostBinding, args: ['style.display',] }]
     };
 
@@ -1671,7 +1810,7 @@
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-select',
-                    template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
+                    template: "<label class=\"amplify-label amplify-visually-hidden\" [for]=\"id\">{{\n  label\n}}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
                 },] }
     ];
     SelectComponent.propDecorators = {
@@ -1764,7 +1903,7 @@
     TextFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-text-field',
-                    template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\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"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\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"
                 },] }
     ];
     TextFieldComponent.propDecorators = {
@@ -1869,6 +2008,10 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'translations', {
+        enumerable: true,
+        get: function () { return ui.translations; }
+    });
     exports.AmplifyAuthenticatorModule = AmplifyAuthenticatorModule;
     exports.AmplifySlotDirective = AmplifySlotDirective;
     exports.AuthenticatorComponent = AuthenticatorComponent;