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

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

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, HostBinding, ContentChildren, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, NgZone, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { authMachine, getSendEventAliases, getActorState, getConfiguredAliases, getActorContext, authInputAttributes, getAliasInfoFromContext, AuthChallengeNames, FederatedIdentityProviders } from '@aws-amplify/ui';
+import { authMachine, getSendEventAliases, getActorState, translate, getConfiguredAliases, getActorContext, authInputAttributes, countryDialCodes, getAliasInfoFromContext, AuthChallengeNames, FederatedIdentityProviders } from '@aws-amplify/ui';
 import { interpret } from 'xstate';
 import { __awaiter, __decorate } from 'tslib';
 import { Logger, Auth } from 'aws-amplify';
@@ -144,7 +143,7 @@ class AmplifyAuthenticatorComponent {
 AmplifyAuthenticatorComponent.decorators = [
     { type: 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: ViewEncapsulation.None
             },] }
@@ -159,16 +158,21 @@ AmplifyAuthenticatorComponent.propDecorators = {
     customComponentQuery: [{ type: ContentChildren, args: [AmplifyOverrideDirective,] }]
 };
 
-const logger$4 = new Logger('SignIn');
+const logger$3 = new Logger('SignIn');
 class AmplifySignInComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Sign in to your account';
+        this.headerText = translate('Sign in to your account');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated phrases
+        this.forgotPasswordText = translate('Forgot your password? ');
+        this.signInButtonText = translate('Sign in');
+        this.noAccountText = translate('No account? ');
+        this.createAccountText = translate('Create account');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -177,7 +181,7 @@ class AmplifySignInComponent {
         this.customComponents = this.contextService.customComponents;
     }
     ngOnDestroy() {
-        logger$4.log('sign in destroyed, unsubscribing from state machine...');
+        logger$3.log('sign in destroyed, unsubscribing from state machine...');
         this.authSubscription.unsubscribe();
     }
     onStateUpdate(state) {
@@ -216,7 +220,7 @@ class AmplifySignInComponent {
 AmplifySignInComponent.decorators = [
     { type: 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: ViewEncapsulation.None
             },] }
 ];
@@ -229,42 +233,21 @@ AmplifySignInComponent.propDecorators = {
     headerText: [{ type: Input }]
 };
 
-class AmplifySignOutComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-    }
-    signOut() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.stateMachine.authService.send('SIGN_OUT');
-            }
-            catch (err) {
-                console.error(err);
-            }
-        });
-    }
-}
-AmplifySignOutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-out',
-                template: "<div [ngStyle]=\"{ height: '24rem' }\">\n  <button (click)=\"signOut()\">Sign Out</button>\n</div>\n"
-            },] }
-];
-AmplifySignOutComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-
 class AmplifySignUpComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Create a new account';
+        this.headerText = translate('Create a new account');
         this.remoteError = '';
         this.isPending = false;
         this.primaryAlias = '';
         this.secondaryAliases = [];
         this.validationError = {};
+        // translated texts
+        this.createAccountText = translate('Back to Sign In');
+        this.haveAccountText = translate('Have an account? ');
+        this.signInText = translate('Sign in');
     }
     get context() {
         const { change, signIn, submit } = this.stateMachine.services;
@@ -323,7 +306,7 @@ class AmplifySignUpComponent {
 AmplifySignUpComponent.decorators = [
     { type: 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 = () => [
@@ -338,18 +321,34 @@ AmplifySignUpComponent.propDecorators = {
 const getAttributeMap = () => 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.
  */
 class AmplifyInputComponent {
     constructor(stateMachine) {
         this.stateMachine = stateMachine;
-        this.required = false;
+        this.required = true;
         this.placeholder = '';
         this.label = '';
         this.initialValue = '';
         this.disabled = false;
         this.autocomplete = '';
+        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        const state = this.stateMachine.authState;
+        const { country_code } = getActorContext(state);
+        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 },
+            });
+        }
     }
     get attributeMap() {
         return getAttributeMap();
@@ -359,14 +358,19 @@ class AmplifyInputComponent {
         const { validationError } = formContext;
         return validationError[this.name];
     }
+    isTelInput() {
+        return this.inferType() === 'tel';
+    }
     inferLabel() {
         var _a;
-        return this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+        const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+        return translate(label);
     }
     inferPlaceholder() {
         var _a;
-        return (this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-            this.inferLabel());
+        const placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+            this.inferLabel();
+        return translate(placeholder);
     }
     // infers what the `type` of underlying input element should be.
     inferType() {
@@ -377,7 +381,7 @@ class AmplifyInputComponent {
 AmplifyInputComponent.decorators = [
     { type: 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 = () => [
@@ -403,15 +407,20 @@ AmplifyErrorComponent.decorators = [
             },] }
 ];
 
-const logger$3 = new Logger('ConfirmSignUp');
 class AmplifyConfirmSignUpComponent {
     constructor(stateMachine, contextService) {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
+        this.headerText = translate('Confirm Sign Up');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.signInText = translate('Sign in');
+        this.resendCodeText = translate('Resend Code');
+        this.lostCodeText = translate('Lost your code? ');
+        this.confirmText = translate('Confirm');
     }
     ngOnInit() {
         // TODO: alias for subscribe
@@ -436,7 +445,6 @@ class AmplifyConfirmSignUpComponent {
         this.customComponents = this.contextService.customComponents;
     }
     ngOnDestroy() {
-        logger$3.log('confirm sign up destroyed, unsubscribing from state machine...');
         this.authSubscription.unsubscribe();
     }
     onStateUpdate(state) {
@@ -484,7 +492,7 @@ class AmplifyConfirmSignUpComponent {
 AmplifyConfirmSignUpComponent.decorators = [
     { type: 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 = () => [
@@ -492,7 +500,8 @@ AmplifyConfirmSignUpComponent.ctorParameters = () => [
     { type: AuthPropService }
 ];
 AmplifyConfirmSignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+    headerText: [{ type: Input }]
 };
 
 class AmplifyUserNameAliasComponent {
@@ -501,19 +510,20 @@ class AmplifyUserNameAliasComponent {
         this.name = 'username';
         this.disabled = false;
         this.initialValue = '';
+        this.required = true;
     }
     ngOnInit() {
         const context = this.stateMachine.context;
         const { label, type } = getAliasInfoFromContext(context);
         this.label = label;
         this.type = type;
-        this.placeholder = `Enter your ${label.toLowerCase()}`;
+        this.placeholder = label;
     }
 }
 AmplifyUserNameAliasComponent.decorators = [
     { type: 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 = () => [
@@ -522,7 +532,8 @@ AmplifyUserNameAliasComponent.ctorParameters = () => [
 AmplifyUserNameAliasComponent.propDecorators = {
     name: [{ type: Input }],
     disabled: [{ type: Input }],
-    initialValue: [{ type: Input }]
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
 };
 
 const logger$2 = new Logger('ConfirmSignIn');
@@ -534,7 +545,8 @@ class AmplifyConfirmSignInComponent {
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
-        this.headerText = '';
+        this.confirmText = translate('Confirm');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => {
@@ -560,10 +572,10 @@ class AmplifyConfirmSignInComponent {
         switch (challengeName) {
             case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
                 // TODO: this string should be centralized and translated from ui.
-                this.headerText = 'Confirm TOTP Code';
+                this.headerText = translate('Confirm TOTP Code');
                 break;
             case AuthChallengeNames.SMS_MFA:
-                this.headerText = 'Confirm SMS Code';
+                this.headerText = translate('Confirm SMS Code');
                 break;
             default:
                 logger$2.error('Unexpected challengeName', challengeName);
@@ -598,7 +610,7 @@ class AmplifyConfirmSignInComponent {
 AmplifyConfirmSignInComponent.decorators = [
     { type: 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 = () => [
@@ -617,8 +629,11 @@ class AmplifySetupTotpComponent {
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
-        this.headerText = 'Setup TOTP';
+        this.headerText = translate('Setup TOTP');
         this.qrCodeSource = '';
+        // translated texts
+        this.backToSignInText = translate('Back to Sign In');
+        this.confirmText = translate('Confirm');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => {
@@ -647,7 +662,9 @@ class AmplifySetupTotpComponent {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // TODO: This should be handled in core.
-            const { user } = this.stateMachine.context;
+            const state = this.stateMachine.authState;
+            const actorContext = getActorContext(state);
+            const { user } = actorContext;
             try {
                 const secretKey = yield Auth.setupTOTP(user);
                 const issuer = 'AWSCognito';
@@ -678,11 +695,14 @@ class AmplifySetupTotpComponent {
             data: Object.fromEntries(formData),
         });
     }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
 }
 AmplifySetupTotpComponent.decorators = [
     { type: 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 = () => [
@@ -699,10 +719,13 @@ class AmplifyForceNewPasswordComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Change Password';
+        this.headerText = translate('Reset your password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.changePasswordText = translate('Change Password');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -717,7 +740,11 @@ class AmplifyForceNewPasswordComponent {
     onStateUpdate(state) {
         const actorState = getActorState(state);
         this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('forceNewPassword.edit');
+        this.isPending = actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
     }
     get context() {
         const { change, signIn, submit } = this.stateMachine.services;
@@ -751,7 +778,7 @@ class AmplifyForceNewPasswordComponent {
 AmplifyForceNewPasswordComponent.decorators = [
     { type: 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 = () => [
@@ -771,6 +798,10 @@ class AmplifyFederatedSignInComponent {
         this.includeGoogle = false;
         this.includeAmazon = false;
         this.shouldShowFederatedSignIn = false;
+        // translated texts
+        this.signInFacebookText = translate('Sign In with Facebook');
+        this.signInGoogleText = translate('Sign In with Google');
+        this.signInAmazonText = translate('Sign In with Amazon');
     }
     ngOnInit() {
         var _a, _b;
@@ -785,7 +816,7 @@ class AmplifyFederatedSignInComponent {
 AmplifyFederatedSignInComponent.decorators = [
     { type: 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 = () => [
@@ -822,10 +853,13 @@ class AmplifyResetPasswordComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Reset your password';
+        this.headerText = translate('Reset your password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -865,7 +899,7 @@ class AmplifyResetPasswordComponent {
 AmplifyResetPasswordComponent.decorators = [
     { type: 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 = () => [
@@ -882,11 +916,14 @@ class AmplifyVerifyUserComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Account recovery requires verified contact information';
+        this.headerText = translate('Account recovery requires verified contact information');
         this.customComponents = {};
         this.unverifiedAttributes = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated texts
+        this.skipText = translate('Skip');
+        this.verifyText = translate('Verify');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -911,6 +948,10 @@ class AmplifyVerifyUserComponent {
     skipVerify() {
         this.stateMachine.send('SKIP');
     }
+    // enable translate to be used inside the template
+    translate(phrase) {
+        return translate(phrase);
+    }
     onSubmit(event) {
         return __awaiter(this, void 0, void 0, function* () {
             event.preventDefault();
@@ -925,7 +966,7 @@ class AmplifyVerifyUserComponent {
 AmplifyVerifyUserComponent.decorators = [
     { type: 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: ViewEncapsulation.None
             },] }
 ];
@@ -943,10 +984,15 @@ class ConfirmResetPasswordComponent {
         this.stateMachine = stateMachine;
         this.contextService = contextService;
         this.dataAttr = '';
-        this.headerText = 'Reset your password';
+        this.headerText = translate('Reset your password');
         this.customComponents = {};
         this.remoteError = '';
         this.isPending = false;
+        // translated strings
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+        this.lostCodeText = translate('Lost your code? ');
+        this.resendCodeText = translate('Resend Code');
     }
     ngOnInit() {
         this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
@@ -991,7 +1037,7 @@ class ConfirmResetPasswordComponent {
 ConfirmResetPasswordComponent.decorators = [
     { type: 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 = () => [
@@ -1049,7 +1095,7 @@ class ConfirmVerifyUserComponent {
 ConfirmVerifyUserComponent.decorators = [
     { type: 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 = () => [
@@ -1061,6 +1107,22 @@ ConfirmVerifyUserComponent.propDecorators = {
     headerText: [{ type: Input }]
 };
 
+class AmplifySelectComponent {
+}
+AmplifySelectComponent.decorators = [
+    { type: 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: Input }],
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }]
+};
+
 const proxyInputs = (Cmp, inputs) => {
     const Prototype = Cmp.prototype;
     inputs.forEach((item) => {
@@ -2875,7 +2937,6 @@ UiAngularModule.decorators = [
                     AmplifyPhotoPicker,
                     AmplifyAuthenticatorComponent,
                     AmplifySignInComponent,
-                    AmplifySignOutComponent,
                     AmplifySignUpComponent,
                     AmplifyInputComponent,
                     AmplifyErrorComponent,
@@ -2891,8 +2952,9 @@ UiAngularModule.decorators = [
                     AmplifyVerifyUserComponent,
                     ConfirmResetPasswordComponent,
                     ConfirmVerifyUserComponent,
+                    AmplifySelectComponent,
                 ],
-                imports: [CommonModule, ReactiveFormsModule],
+                imports: [CommonModule],
                 exports: [
                     AmplifyChatbot,
                     AmplifyToast,
@@ -2907,7 +2969,6 @@ UiAngularModule.decorators = [
                     AmplifyPhotoPicker,
                     AmplifyAuthenticatorComponent,
                     AmplifySignInComponent,
-                    AmplifySignOutComponent,
                     AmplifyInputComponent,
                     AmplifyErrorComponent,
                     AmplifyOverrideDirective,
@@ -2924,5 +2985,5 @@ UiAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AmplifyAuthenticatorComponent, AmplifyButton, AmplifyChatbot, AmplifyConfirmSignUpComponent, AmplifyErrorComponent, AmplifyInput, AmplifyInputComponent, AmplifyOverrideDirective, AmplifyPhotoPicker, AmplifyPicker, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySignInComponent, AmplifySignOutComponent, AmplifySignUpComponent, AmplifyToast, AuthPropService, StateMachineService, UiAngularModule, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignOutComponent as ɵd, AmplifySignUpComponent as ɵe, AmplifyInputComponent as ɵf, AmplifyErrorComponent as ɵg, AmplifyConfirmSignUpComponent as ɵh, AmplifyUserNameAliasComponent as ɵi, AmplifyConfirmSignInComponent as ɵj, AmplifySetupTotpComponent as ɵk, AmplifyForceNewPasswordComponent as ɵl, AmplifyFederatedSignInComponent as ɵm, AmplifyFederatedSignInButtonComponent as ɵn, AmplifyResetPasswordComponent as ɵo, AmplifyVerifyUserComponent as ɵp, ConfirmResetPasswordComponent as ɵq, ConfirmVerifyUserComponent as ɵr };
+export { AmplifyAuthenticatorComponent, AmplifyButton, AmplifyChatbot, AmplifyConfirmSignInComponent, AmplifyConfirmSignUpComponent, AmplifyErrorComponent, AmplifyFederatedSignInButtonComponent, AmplifyFederatedSignInComponent, AmplifyForceNewPasswordComponent, AmplifyInput, AmplifyInputComponent, AmplifyOverrideDirective, AmplifyPhotoPicker, AmplifyPicker, AmplifyResetPasswordComponent, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySetupTotpComponent, AmplifySignInComponent, AmplifySignUpComponent, AmplifyToast, AmplifyVerifyUserComponent, AuthPropService, ConfirmResetPasswordComponent, ConfirmVerifyUserComponent, StateMachineService, UiAngularModule, getAttributeMap, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignUpComponent as ɵd, AmplifyInputComponent as ɵe, AmplifyErrorComponent as ɵf, AmplifyConfirmSignUpComponent as ɵg, AmplifyUserNameAliasComponent as ɵh, AmplifyConfirmSignInComponent as ɵi, AmplifySetupTotpComponent as ɵj, AmplifyForceNewPasswordComponent as ɵk, AmplifyFederatedSignInComponent as ɵl, AmplifyFederatedSignInButtonComponent as ɵm, AmplifyResetPasswordComponent as ɵn, AmplifyVerifyUserComponent as ɵo, ConfirmResetPasswordComponent as ɵp, ConfirmVerifyUserComponent as ɵq, AmplifySelectComponent as ɵr };
 //# sourceMappingURL=aws-amplify-ui-angular.js.map