@aws-amplify/ui-angular 2.0.1-next.2 → 2.0.1-next.3

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@aws-amplify/ui'), require('xstate'), require('aws-amplify'), require('qrcode'), require('rxjs'), require('@aws-amplify/ui-components/dist/components')) :
-    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@aws-amplify/ui', 'xstate', 'aws-amplify', 'qrcode', 'rxjs', '@aws-amplify/ui-components/dist/components'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['aws-amplify'] = global['aws-amplify'] || {}, global['aws-amplify']['ui-angular'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ui, global.xstate, global['aws-amplify'], global.QRCode, global.rxjs, global.components));
-}(this, (function (exports, i0, common, forms, ui, xstate, awsAmplify, QRCode, rxjs, components) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('xstate'), require('aws-amplify'), require('qrcode'), require('rxjs'), require('@aws-amplify/ui-components/dist/components')) :
+    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', 'xstate', 'aws-amplify', 'qrcode', 'rxjs', '@aws-amplify/ui-components/dist/components'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['aws-amplify'] = global['aws-amplify'] || {}, global['aws-amplify']['ui-angular'] = {}), global.ng.core, global.ng.common, global.ui, global.xstate, global['aws-amplify'], global.QRCode, global.rxjs, global.components));
+}(this, (function (exports, i0, common, ui, xstate, awsAmplify, QRCode, rxjs, components) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -212,7 +212,7 @@
     AmplifyAuthenticatorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-authenticator',
-                    template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated>\n  <p>You've signed In.</p>\n  <amplify-sign-out></amplify-sign-out>\n</ng-template>\n<ng-template #setupTOTP>\n  <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n  <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n  <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n  <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n  <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n  <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n  Next, we render respective auth subcomponent respective to the current authState.\n  If customer is overriding that component, we render customer's template instead.\n-->\n\n<!-- signIn component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signIn')\"\n>\n</ng-container>\n\n<!-- signUp component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signUp')\"\n>\n</ng-container>\n\n<!-- confirmSignUp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignUp')\"\n>\n</ng-container>\n\n<!-- confirmSignIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignIn')\"\n>\n</ng-container>\n\n<!-- setupTotp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('setupTOTP')\"\n>\n</ng-container>\n\n<!-- forceNewPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('forceNewPassword')\"\n>\n</ng-container>\n\n<!-- resetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('resetPassword')\"\n>\n</ng-container>\n\n<!-- confirmResetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"\n    customComponents.confirmResetPassword || confirmResetPassword\n  \"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmResetPassword')\"\n>\n</ng-container>\n\n<!-- verifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('verifyUser')\"\n>\n</ng-container>\n\n<!-- confirmVerifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmVerifyUser || confirmVerifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n>\n</ng-container>\n\n<!-- signedIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
+                    template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <ng-content></ng-content> </ng-template>\n<ng-template #setupTOTP>\n  <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n  <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n  <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n  <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n  <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n  <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n  Next, we render respective auth subcomponent respective to the current authState.\n  If customer is overriding that component, we render customer's template instead.\n-->\n\n<!-- signIn component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signIn')\"\n>\n</ng-container>\n\n<!-- signUp component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signUp')\"\n>\n</ng-container>\n\n<!-- confirmSignUp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignUp')\"\n>\n</ng-container>\n\n<!-- confirmSignIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignIn')\"\n>\n</ng-container>\n\n<!-- setupTotp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('setupTOTP')\"\n>\n</ng-container>\n\n<!-- forceNewPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('forceNewPassword')\"\n>\n</ng-container>\n\n<!-- resetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('resetPassword')\"\n>\n</ng-container>\n\n<!-- confirmResetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"\n    customComponents.confirmResetPassword || confirmResetPassword\n  \"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmResetPassword')\"\n>\n</ng-container>\n\n<!-- verifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('verifyUser')\"\n>\n</ng-container>\n\n<!-- confirmVerifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmVerifyUser || confirmVerifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n>\n</ng-container>\n\n<!-- signedIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
                     providers: [AuthPropService],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -545,16 +545,21 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var logger$4 = new awsAmplify.Logger('SignIn');
+    var logger$3 = new awsAmplify.Logger('SignIn');
     var AmplifySignInComponent = /** @class */ (function () {
         function AmplifySignInComponent(stateMachine, contextService) {
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Sign in to your account';
+            this.headerText = ui.translate('Sign in to your account');
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated phrases
+            this.forgotPasswordText = ui.translate('Forgot your password? ');
+            this.signInButtonText = ui.translate('Sign in');
+            this.noAccountText = ui.translate('No account? ');
+            this.createAccountText = ui.translate('Create account');
         }
         AmplifySignInComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -564,7 +569,7 @@
             this.customComponents = this.contextService.customComponents;
         };
         AmplifySignInComponent.prototype.ngOnDestroy = function () {
-            logger$4.log('sign in destroyed, unsubscribing from state machine...');
+            logger$3.log('sign in destroyed, unsubscribing from state machine...');
             this.authSubscription.unsubscribe();
         };
         AmplifySignInComponent.prototype.onStateUpdate = function (state) {
@@ -611,7 +616,7 @@
     AmplifySignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-sign-in',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button data-amplify-button type=\"submit\">Sign In</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-input\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-input>\n      <button type=\"button\" (click)=\"toResetPassword()\">\n        Forgot your password?\n      </button>\n      <div data-amplify-footer>\n        <div>\n          No account?{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignUp()\">Create account</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button data-amplify-button type=\"submit\">{{ signInButtonText }}</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-input\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-input>\n      <button type=\"button\" (click)=\"toResetPassword()\">\n        {{ forgotPasswordText }}\n      </button>\n      <div data-amplify-footer>\n        <div>\n          {{ noAccountText }}\n          <button type=\"button\" (click)=\"toSignUp()\">\n            {{ createAccountText }}\n          </button>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -624,46 +629,21 @@
         headerText: [{ type: i0.Input }]
     };
 
-    var AmplifySignOutComponent = /** @class */ (function () {
-        function AmplifySignOutComponent(stateMachine) {
-            this.stateMachine = stateMachine;
-        }
-        AmplifySignOutComponent.prototype.signOut = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    try {
-                        this.stateMachine.authService.send('SIGN_OUT');
-                    }
-                    catch (err) {
-                        console.error(err);
-                    }
-                    return [2 /*return*/];
-                });
-            });
-        };
-        return AmplifySignOutComponent;
-    }());
-    AmplifySignOutComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-out',
-                    template: "<div [ngStyle]=\"{ height: '24rem' }\">\n  <button (click)=\"signOut()\">Sign Out</button>\n</div>\n"
-                },] }
-    ];
-    AmplifySignOutComponent.ctorParameters = function () { return [
-        { type: StateMachineService }
-    ]; };
-
     var AmplifySignUpComponent = /** @class */ (function () {
         function AmplifySignUpComponent(stateMachine, contextService) {
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Create a new account';
+            this.headerText = ui.translate('Create a new account');
             this.remoteError = '';
             this.isPending = false;
             this.primaryAlias = '';
             this.secondaryAliases = [];
             this.validationError = {};
+            // translated texts
+            this.createAccountText = ui.translate('Back to Sign In');
+            this.haveAccountText = ui.translate('Have an account? ');
+            this.signInText = ui.translate('Sign in');
         }
         Object.defineProperty(AmplifySignUpComponent.prototype, "context", {
             get: function () {
@@ -731,7 +711,7 @@
     AmplifySignUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-sign-up',
-                    template: "<ng-template #signUpButton>\n  <button data-amplify-button type=\"submit\">Create Account</button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-input\n    name=\"password\"\n    [required]=\"true\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-input\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    [required]=\"true\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-input [name]=\"secondaryAlias\"></amplify-form-input>\n    </ng-container>\n  </fieldset>\n\n  <amplify-error *ngIf=\"remoteError\">\n    {{ remoteError }}\n  </amplify-error>\n</ng-template>\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <form\n    data-amplify-form\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n    ngNativeValidate\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <div data-amplify-footer>\n      <div>\n        Have an account?{{ ' ' }}\n        <span data-amplify-link (click)=\"toSignIn()\">Sign In</span>\n      </div>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </div>\n  </form>\n</div>\n"
+                    template: "<ng-template #signUpButton>\n  <button data-amplify-button type=\"submit\">{{ createAccountText }}</button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-input\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-input\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-input [name]=\"secondaryAlias\"></amplify-form-input>\n    </ng-container>\n  </fieldset>\n\n  <amplify-error *ngIf=\"remoteError\">\n    {{ remoteError }}\n  </amplify-error>\n</ng-template>\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <div data-amplify-footer>\n      <div>\n        {{ haveAccountText }}\n        <button type=\"button\" (click)=\"toSignIn()\">{{ signInText }}</button>\n      </div>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </div>\n  </form>\n</div>\n"
                 },] }
     ];
     AmplifySignUpComponent.ctorParameters = function () { return [
@@ -746,19 +726,35 @@
     var getAttributeMap = function () { return ui.authInputAttributes; };
 
     /**
-     * Contains an input element and its label. Intended to be used with
-     * Angular Reactive Form
+     * Input interface opinionated for authenticator usage.
+     *
+     * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
+     * contains authenticator opinionated logic and 2) amplify-text-field primitive
+     * that does not make any auth-related inference.
      */
     var AmplifyInputComponent = /** @class */ (function () {
         function AmplifyInputComponent(stateMachine) {
             this.stateMachine = stateMachine;
-            this.required = false;
+            this.required = true;
             this.placeholder = '';
             this.label = '';
             this.initialValue = '';
             this.disabled = false;
             this.autocomplete = '';
+            this.countryDialCodes = ui.countryDialCodes;
         }
+        AmplifyInputComponent.prototype.ngOnInit = function () {
+            var state = this.stateMachine.authState;
+            var country_code = ui.getActorContext(state).country_code;
+            this.defaultCountryCode = country_code;
+            // TODO: consider better default handling mechanisms across frameworks
+            if (this.isTelInput()) {
+                this.stateMachine.send({
+                    type: 'CHANGE',
+                    data: { name: 'country_code', value: country_code },
+                });
+            }
+        };
         Object.defineProperty(AmplifyInputComponent.prototype, "attributeMap", {
             get: function () {
                 return getAttributeMap();
@@ -775,14 +771,19 @@
             enumerable: false,
             configurable: true
         });
+        AmplifyInputComponent.prototype.isTelInput = function () {
+            return this.inferType() === 'tel';
+        };
         AmplifyInputComponent.prototype.inferLabel = function () {
             var _a;
-            return this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+            var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+            return ui.translate(label);
         };
         AmplifyInputComponent.prototype.inferPlaceholder = function () {
             var _a;
-            return (this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-                this.inferLabel());
+            var placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+                this.inferLabel();
+            return ui.translate(placeholder);
         };
         // infers what the `type` of underlying input element should be.
         AmplifyInputComponent.prototype.inferType = function () {
@@ -794,7 +795,7 @@
     AmplifyInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-input',
-                    template: "<label>\n  <div data-amplify-label>{{ inferLabel() }}</div>\n  <input\n    data-amplify-form-input\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required ? true : false\"\n    [value]=\"this.initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</label>\n"
+                    template: "<!-- Country code field -->\n<amplify-form-select\n  *ngIf=\"isTelInput()\"\n  name=\"country_code\"\n  label=\"Country Code\"\n  [id]=\"'country-code'\"\n  [items]=\"countryDialCodes\"\n  [initialValue]=\"defaultCountryCode\"\n></amplify-form-select>\n<!-- Textbox field -->\n<label>\n  <div data-amplify-label>{{ inferLabel() }}</div>\n  <input\n    data-amplify-form-input\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</label>\n"
                 },] }
     ];
     AmplifyInputComponent.ctorParameters = function () { return [
@@ -823,15 +824,20 @@
                 },] }
     ];
 
-    var logger$3 = new awsAmplify.Logger('ConfirmSignUp');
     var AmplifyConfirmSignUpComponent = /** @class */ (function () {
         function AmplifyConfirmSignUpComponent(stateMachine, contextService) {
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
+            this.headerText = ui.translate('Confirm Sign Up');
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated texts
+            this.signInText = ui.translate('Sign in');
+            this.resendCodeText = ui.translate('Resend Code');
+            this.lostCodeText = ui.translate('Lost your code? ');
+            this.confirmText = ui.translate('Confirm');
         }
         AmplifyConfirmSignUpComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -857,7 +863,6 @@
             this.customComponents = this.contextService.customComponents;
         };
         AmplifyConfirmSignUpComponent.prototype.ngOnDestroy = function () {
-            logger$3.log('confirm sign up destroyed, unsubscribing from state machine...');
             this.authSubscription.unsubscribe();
         };
         AmplifyConfirmSignUpComponent.prototype.onStateUpdate = function (state) {
@@ -910,7 +915,7 @@
     AmplifyConfirmSignUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-up',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias\n        [initialValue]=\"username ? username : null\"\n        [disabled]=\"!!username\"\n      ></amplify-user-name-alias>\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        Lost your code? {{ ' ' }}\n        <a data-amplify-link (click)=\"resend()\">Resend Code</a>\n      </div>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignUpButton || confirmSignUpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>Confirm Your Account</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        [initialValue]=\"username ? username : null\"\n        [disabled]=\"!!username\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        {{ lostCodeText }}\n        <a data-amplify-link (click)=\"resend()\">{{ resendCodeText }}</a>\n      </div>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">{{ signInText }}</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignUpButton || confirmSignUpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     AmplifyConfirmSignUpComponent.ctorParameters = function () { return [
@@ -918,7 +923,8 @@
         { type: AuthPropService }
     ]; };
     AmplifyConfirmSignUpComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+        headerText: [{ type: i0.Input }]
     };
 
     var AmplifyUserNameAliasComponent = /** @class */ (function () {
@@ -927,20 +933,21 @@
             this.name = 'username';
             this.disabled = false;
             this.initialValue = '';
+            this.required = true;
         }
         AmplifyUserNameAliasComponent.prototype.ngOnInit = function () {
             var context = this.stateMachine.context;
             var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
             this.label = label;
             this.type = type;
-            this.placeholder = "Enter your " + label.toLowerCase();
+            this.placeholder = label;
         };
         return AmplifyUserNameAliasComponent;
     }());
     AmplifyUserNameAliasComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-user-name-alias',
-                    template: "<amplify-form-input\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  autocomplete=\"username\"\n>\n</amplify-form-input>\n"
+                    template: "<amplify-form-input\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-input>\n"
                 },] }
     ];
     AmplifyUserNameAliasComponent.ctorParameters = function () { return [
@@ -949,7 +956,8 @@
     AmplifyUserNameAliasComponent.propDecorators = {
         name: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }]
+        initialValue: [{ type: i0.Input }],
+        required: [{ type: i0.Input }]
     };
 
     var logger$2 = new awsAmplify.Logger('ConfirmSignIn');
@@ -961,7 +969,8 @@
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
-            this.headerText = '';
+            this.confirmText = ui.translate('Confirm');
+            this.backToSignInText = ui.translate('Back to Sign In');
         }
         AmplifyConfirmSignInComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -992,10 +1001,10 @@
             switch (challengeName) {
                 case ui.AuthChallengeNames.SOFTWARE_TOKEN_MFA:
                     // TODO: this string should be centralized and translated from ui.
-                    this.headerText = 'Confirm TOTP Code';
+                    this.headerText = ui.translate('Confirm TOTP Code');
                     break;
                 case ui.AuthChallengeNames.SMS_MFA:
-                    this.headerText = 'Confirm SMS Code';
+                    this.headerText = ui.translate('Confirm SMS Code');
                     break;
                 default:
                     logger$2.error('Unexpected challengeName', challengeName);
@@ -1031,7 +1040,7 @@
     AmplifyConfirmSignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-in',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <a data-amplify-link (click)=\"toSignIn()\">Back to Sign In</a>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignInButton || confirmSignInButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button type=\"button\" (click)=\"toSignIn()\">\n          {{ backToSignInText }}\n        </button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignInButton || confirmSignInButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     AmplifyConfirmSignInComponent.ctorParameters = function () { return [
@@ -1050,8 +1059,11 @@
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
-            this.headerText = 'Setup TOTP';
+            this.headerText = ui.translate('Setup TOTP');
             this.qrCodeSource = '';
+            // translated texts
+            this.backToSignInText = ui.translate('Back to Sign In');
+            this.confirmText = ui.translate('Confirm');
         }
         AmplifySetupTotpComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1084,11 +1096,13 @@
         AmplifySetupTotpComponent.prototype.generateQRCode = function () {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var user, secretKey, issuer, totpCode, _b, err_1;
+                var state, actorContext, user, secretKey, issuer, totpCode, _b, err_1;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            user = this.stateMachine.context.user;
+                            state = this.stateMachine.authState;
+                            actorContext = ui.getActorContext(state);
+                            user = actorContext.user;
                             _c.label = 1;
                         case 1:
                             _c.trys.push([1, 4, , 5]);
@@ -1130,12 +1144,15 @@
                 data: Object.fromEntries(formData),
             });
         };
+        AmplifySetupTotpComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
         return AmplifySetupTotpComponent;
     }());
     AmplifySetupTotpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-setup-totp',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button data-amplify-button type=\"submit\">Confirm</button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img *ngIf=\"qrCodeSource\" [src]=\"qrCodeSource\" alt=\"qr code\" />\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <a data-amplify-link (click)=\"toSignIn()\">Back to Sign In</a>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.setupTotpButton || setupTotpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img *ngIf=\"qrCodeSource\" [src]=\"qrCodeSource\" alt=\"qr code\" />\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.setupTotpButton || setupTotpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     AmplifySetupTotpComponent.ctorParameters = function () { return [
@@ -1152,10 +1169,13 @@
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Change Password';
+            this.headerText = ui.translate('Reset your password');
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated texts
+            this.changePasswordText = ui.translate('Change Password');
+            this.backToSignInText = ui.translate('Back to Sign In');
         }
         AmplifyForceNewPasswordComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1171,7 +1191,11 @@
         AmplifyForceNewPasswordComponent.prototype.onStateUpdate = function (state) {
             var actorState = ui.getActorState(state);
             this.remoteError = actorState.context.remoteError;
-            this.isPending = !actorState.matches('forceNewPassword.edit');
+            this.isPending = actorState.matches({
+                signUp: {
+                    submission: 'idle',
+                },
+            });
         };
         Object.defineProperty(AmplifyForceNewPasswordComponent.prototype, "context", {
             get: function () {
@@ -1210,7 +1234,7 @@
     AmplifyForceNewPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-force-new-password',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Change Password</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"password\"\n        type=\"password\"\n        label=\"Change password\"\n        autocomplete=\"password\"\n        [required]=\"true\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.forceNewPasswordSubmitButton ||\n            forceNewPasswordSubmitButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">{{ changePasswordText }}</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <amplify-form-input\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button type=\"button\" (click)=\"toSignIn()\">\n          {{ backToSignInText }}\n        </button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.forceNewPasswordSubmitButton ||\n            forceNewPasswordSubmitButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     AmplifyForceNewPasswordComponent.ctorParameters = function () { return [
@@ -1230,6 +1254,10 @@
             this.includeGoogle = false;
             this.includeAmazon = false;
             this.shouldShowFederatedSignIn = false;
+            // translated texts
+            this.signInFacebookText = ui.translate('Sign In with Facebook');
+            this.signInGoogleText = ui.translate('Sign In with Google');
+            this.signInAmazonText = ui.translate('Sign In with Amazon');
         }
         AmplifyFederatedSignInComponent.prototype.ngOnInit = function () {
             var _a, _b;
@@ -1245,7 +1273,7 @@
     AmplifyFederatedSignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-federated-sign-in',
-                    template: "<div data-amplify-federated>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    text=\"Sign in with Facebook\"\n    [provider]=\"FederatedProviders.Facebook\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    text=\"Sign in with Google\"\n    [provider]=\"FederatedProviders.Google\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    text=\"Sign in with Amazon\"\n    [provider]=\"FederatedProviders.Amazon\"\n  ></amplify-federated-sign-in-button>\n</div>\n"
+                    template: "<div data-amplify-federated>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [text]=\"signInGoogleText\"\n    [provider]=\"FederatedProviders.Google\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  ></amplify-federated-sign-in-button>\n</div>\n"
                 },] }
     ];
     AmplifyFederatedSignInComponent.ctorParameters = function () { return [
@@ -1284,10 +1312,13 @@
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Reset your password';
+            this.headerText = ui.translate('Reset your password');
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated texts
+            this.sendCodeText = ui.translate('Send Code');
+            this.backToSignInText = ui.translate('Back to Sign In');
         }
         AmplifyResetPasswordComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1333,7 +1364,7 @@
     AmplifyResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-reset-password',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Send Code</button>\n</ng-template>\n\n<ng-template #resetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      Back to{{ ' ' }}\n      <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.resetPasswordSubmitButton || resetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form\n    data-amplify-form\n    ngNativeValidate\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n  >\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordFooter || resetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">{{ sendCodeText }}</button>\n</ng-template>\n\n<ng-template #resetPasswordFooter>\n  <div data-amplify-footer>\n    <button type=\"button\" (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.resetPasswordSubmitButton || resetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordFooter || resetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     AmplifyResetPasswordComponent.ctorParameters = function () { return [
@@ -1350,11 +1381,14 @@
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Account recovery requires verified contact information';
+            this.headerText = ui.translate('Account recovery requires verified contact information');
             this.customComponents = {};
             this.unverifiedAttributes = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated texts
+            this.skipText = ui.translate('Skip');
+            this.verifyText = ui.translate('Verify');
         }
         AmplifyVerifyUserComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1384,6 +1418,10 @@
         AmplifyVerifyUserComponent.prototype.skipVerify = function () {
             this.stateMachine.send('SKIP');
         };
+        // enable translate to be used inside the template
+        AmplifyVerifyUserComponent.prototype.translate = function (phrase) {
+            return ui.translate(phrase);
+        };
         AmplifyVerifyUserComponent.prototype.onSubmit = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var formData;
@@ -1403,7 +1441,7 @@
     AmplifyVerifyUserComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-verify-user',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Verify</button>\n  </div>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <ng-container\n        *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\"\n      >\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n        />\n        <amplify-label>{{ unverifiedAttribute.key }}</amplify-label>\n      </ng-container>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">{{ skipText }}</button>\n    <button data-amplify-button type=\"submit\">{{ verifyText }}</button>\n  </div>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <ng-container\n        *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\"\n      >\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n        />\n        <span>{{ translate(unverifiedAttribute.key) }}</span>\n      </ng-container>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1421,10 +1459,15 @@
             this.stateMachine = stateMachine;
             this.contextService = contextService;
             this.dataAttr = '';
-            this.headerText = 'Reset your password';
+            this.headerText = ui.translate('Reset your password');
             this.customComponents = {};
             this.remoteError = '';
             this.isPending = false;
+            // translated strings
+            this.sendCodeText = ui.translate('Send Code');
+            this.backToSignInText = ui.translate('Back to Sign In');
+            this.lostCodeText = ui.translate('Lost your code? ');
+            this.resendCodeText = ui.translate('Resend Code');
         }
         ConfirmResetPasswordComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1478,7 +1521,7 @@
     ConfirmResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-reset-password',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">Send Code</button>\n</ng-template>\n\n<ng-template #confirmResetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      Back to{{ ' ' }}\n      <a data-amplify-link (click)=\"toSignIn()\">Sign In</a>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPasswordSubmitButton ||\n        confirmResetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #confirmResetPasswordForm>\n  <form\n    data-amplify-form\n    ngNativeValidate\n    (submit)=\"onSubmit($event)\"\n    (input)=\"onInput($event)\"\n  >\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n        [required]=\"true\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        Lost your code? {{ ' ' }}\n        <a data-amplify-link (click)=\"resend()\">Resend Code</a>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordFooter ||\n          confirmResetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button data-amplify-button type=\"submit\">{{ sendCodeText }}</button>\n</ng-template>\n\n<ng-template #confirmResetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      <button type=\"button\" (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPasswordSubmitButton ||\n        confirmResetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #confirmResetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        {{ lostCodeText }}\n        <button type=\"button\" (click)=\"resend()\">{{ resendCodeText }}</button>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordFooter ||\n          confirmResetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     ConfirmResetPasswordComponent.ctorParameters = function () { return [
@@ -1546,7 +1589,7 @@
     ConfirmVerifyUserComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-verify-user',
-                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Submit</button>\n  </div>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n        [required]=\"true\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Submit</button>\n  </div>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
                 },] }
     ];
     ConfirmVerifyUserComponent.ctorParameters = function () { return [
@@ -1558,6 +1601,25 @@
         headerText: [{ type: i0.Input }]
     };
 
+    var AmplifySelectComponent = /** @class */ (function () {
+        function AmplifySelectComponent() {
+        }
+        return AmplifySelectComponent;
+    }());
+    AmplifySelectComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-form-select',
+                    template: "<select [id]=\"id\" [name]=\"name\" [attr.aria-label]=\"label\">\n  <option\n    *ngFor=\"let item of items\"\n    [value]=\"item\"\n    [selected]=\"item === initialValue\"\n  >\n    {{ item }}\n  </option>\n</select>\n"
+                },] }
+    ];
+    AmplifySelectComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }]
+    };
+
     var proxyInputs = function (Cmp, inputs) {
         var Prototype = Cmp.prototype;
         inputs.forEach(function (item) {
@@ -3432,7 +3494,6 @@
                         exports.AmplifyPhotoPicker,
                         AmplifyAuthenticatorComponent,
                         AmplifySignInComponent,
-                        AmplifySignOutComponent,
                         AmplifySignUpComponent,
                         AmplifyInputComponent,
                         AmplifyErrorComponent,
@@ -3448,8 +3509,9 @@
                         AmplifyVerifyUserComponent,
                         ConfirmResetPasswordComponent,
                         ConfirmVerifyUserComponent,
+                        AmplifySelectComponent,
                     ],
-                    imports: [common.CommonModule, forms.ReactiveFormsModule],
+                    imports: [common.CommonModule],
                     exports: [
                         exports.AmplifyChatbot,
                         exports.AmplifyToast,
@@ -3464,7 +3526,6 @@
                         exports.AmplifyPhotoPicker,
                         AmplifyAuthenticatorComponent,
                         AmplifySignInComponent,
-                        AmplifySignOutComponent,
                         AmplifyInputComponent,
                         AmplifyErrorComponent,
                         AmplifyOverrideDirective,
@@ -3482,34 +3543,43 @@
      */
 
     exports.AmplifyAuthenticatorComponent = AmplifyAuthenticatorComponent;
+    exports.AmplifyConfirmSignInComponent = AmplifyConfirmSignInComponent;
     exports.AmplifyConfirmSignUpComponent = AmplifyConfirmSignUpComponent;
     exports.AmplifyErrorComponent = AmplifyErrorComponent;
+    exports.AmplifyFederatedSignInButtonComponent = AmplifyFederatedSignInButtonComponent;
+    exports.AmplifyFederatedSignInComponent = AmplifyFederatedSignInComponent;
+    exports.AmplifyForceNewPasswordComponent = AmplifyForceNewPasswordComponent;
     exports.AmplifyInputComponent = AmplifyInputComponent;
     exports.AmplifyOverrideDirective = AmplifyOverrideDirective;
+    exports.AmplifyResetPasswordComponent = AmplifyResetPasswordComponent;
+    exports.AmplifySetupTotpComponent = AmplifySetupTotpComponent;
     exports.AmplifySignInComponent = AmplifySignInComponent;
-    exports.AmplifySignOutComponent = AmplifySignOutComponent;
     exports.AmplifySignUpComponent = AmplifySignUpComponent;
+    exports.AmplifyVerifyUserComponent = AmplifyVerifyUserComponent;
     exports.AuthPropService = AuthPropService;
+    exports.ConfirmResetPasswordComponent = ConfirmResetPasswordComponent;
+    exports.ConfirmVerifyUserComponent = ConfirmVerifyUserComponent;
     exports.StateMachineService = StateMachineService;
     exports.UiAngularModule = UiAngularModule;
+    exports.getAttributeMap = getAttributeMap;
     exports.ɵa = ProxyCmp;
     exports.ɵb = AmplifyAuthenticatorComponent;
     exports.ɵc = AmplifySignInComponent;
-    exports.ɵd = AmplifySignOutComponent;
-    exports.ɵe = AmplifySignUpComponent;
-    exports.ɵf = AmplifyInputComponent;
-    exports.ɵg = AmplifyErrorComponent;
-    exports.ɵh = AmplifyConfirmSignUpComponent;
-    exports.ɵi = AmplifyUserNameAliasComponent;
-    exports.ɵj = AmplifyConfirmSignInComponent;
-    exports.ɵk = AmplifySetupTotpComponent;
-    exports.ɵl = AmplifyForceNewPasswordComponent;
-    exports.ɵm = AmplifyFederatedSignInComponent;
-    exports.ɵn = AmplifyFederatedSignInButtonComponent;
-    exports.ɵo = AmplifyResetPasswordComponent;
-    exports.ɵp = AmplifyVerifyUserComponent;
-    exports.ɵq = ConfirmResetPasswordComponent;
-    exports.ɵr = ConfirmVerifyUserComponent;
+    exports.ɵd = AmplifySignUpComponent;
+    exports.ɵe = AmplifyInputComponent;
+    exports.ɵf = AmplifyErrorComponent;
+    exports.ɵg = AmplifyConfirmSignUpComponent;
+    exports.ɵh = AmplifyUserNameAliasComponent;
+    exports.ɵi = AmplifyConfirmSignInComponent;
+    exports.ɵj = AmplifySetupTotpComponent;
+    exports.ɵk = AmplifyForceNewPasswordComponent;
+    exports.ɵl = AmplifyFederatedSignInComponent;
+    exports.ɵm = AmplifyFederatedSignInButtonComponent;
+    exports.ɵn = AmplifyResetPasswordComponent;
+    exports.ɵo = AmplifyVerifyUserComponent;
+    exports.ɵp = ConfirmResetPasswordComponent;
+    exports.ɵq = ConfirmVerifyUserComponent;
+    exports.ɵr = AmplifySelectComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });