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

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

@@ -1,134 +1,233 @@
 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 { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, ContentChildren, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { authMachine, getSendEventAliases, getActorState, translate, getConfiguredAliases, getActorContext, authInputAttributes, countryDialCodes, getAliasInfoFromContext, AuthChallengeNames, FederatedIdentityProviders } from '@aws-amplify/ui';
+import { BrowserModule } from '@angular/platform-browser';
+import { createAuthenticatorMachine, getServiceContextFacade, getSendEventAliases, translate, getActorContext, AuthChallengeNames, FederatedIdentityProviders, authInputAttributes, countryDialCodes, getAliasInfoFromContext, getActorState } from '@aws-amplify/ui';
+import { Logger } from '@aws-amplify/core';
 import { interpret } from 'xstate';
-import { __awaiter, __decorate } from 'tslib';
-import { Logger, Auth } from 'aws-amplify';
+import { Logger as Logger$1, Auth } from 'aws-amplify';
+import { __awaiter } from 'tslib';
 import QRCode from 'qrcode';
-import { fromEvent } from 'rxjs';
-import { AmplifyButton as AmplifyButton$1, AmplifyInput as AmplifyInput$1, AmplifyToast as AmplifyToast$1, AmplifyChatbot as AmplifyChatbot$1, AmplifyS3Album as AmplifyS3Album$1, AmplifyS3ImagePicker as AmplifyS3ImagePicker$1, AmplifyS3Text as AmplifyS3Text$1, AmplifyS3TextPicker as AmplifyS3TextPicker$1, AmplifyS3Image as AmplifyS3Image$1, AmplifyPicker as AmplifyPicker$1, AmplifyPhotoPicker as AmplifyPhotoPicker$1 } from '@aws-amplify/ui-components/dist/components';
+import { nanoid } from 'nanoid';
 
-class AmplifyOverrideDirective {
+class AmplifySlotDirective {
     constructor(template) {
         this.template = template;
     }
-    set amplifyOverride(component) {
+    set amplifySlot(component) {
         this.name = component;
     }
 }
-AmplifyOverrideDirective.decorators = [
+AmplifySlotDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[amplifyOverride]',
+                selector: '[amplifySlot]',
             },] }
 ];
-AmplifyOverrideDirective.ctorParameters = () => [
+AmplifySlotDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-AmplifyOverrideDirective.propDecorators = {
-    amplifyOverride: [{ type: Input }]
+AmplifySlotDirective.propDecorators = {
+    amplifySlot: [{ type: Input }]
 };
 
 /**
- * AmplifyContextService contains access to the xstate machine
- * and custom components passed by the user.
+ * Stores and provides custom components that users provide with `amplify-slot`.
  */
-class StateMachineService {
+class CustomComponentsService {
     constructor() {
-        const interpreter = interpret(authMachine, { devTools: true })
-            .onTransition((state) => {
-            this._user = state.context.user;
+        this._customComponents = {};
+    }
+    get customComponents() {
+        return this._customComponents;
+    }
+    set customComponents(customComponents) {
+        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+    }
+}
+CustomComponentsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CustomComponentsService_Factory() { return new CustomComponentsService(); }, token: CustomComponentsService, providedIn: "root" });
+CustomComponentsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+const logger$2 = new Logger('state-machine');
+/**
+ * AuthenticatorService provides access to the authenticator state and context.
+ */
+class AuthenticatorService {
+    startMachine({ initialState, loginMechanisms, services, signUpAttributes, socialProviders, }) {
+        const machine = createAuthenticatorMachine({
+            initialState,
+            loginMechanisms,
+            services,
+            signUpAttributes,
+            socialProviders,
+        });
+        const authService = interpret(machine, {
+            devTools: process.env.NODE_ENV === 'development',
+        }).start();
+        this._subscription = authService.subscribe((state) => {
             this._authState = state;
-        })
-            .start();
-        this._services = getSendEventAliases(interpreter.send);
-        this._authService = interpreter;
+            this._facade = getServiceContextFacade(state);
+        });
+        this._sendEventAliases = getSendEventAliases(authService.send);
+        this._authService = authService;
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    /**
+     * Context facades
+     */
+    get error() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.error;
+    }
+    get hasValidationErrors() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.hasValidationErrors;
+    }
+    get isPending() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.isPending;
+    }
+    get route() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.route;
+    }
+    get user() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.user;
+    }
+    get validationErrors() {
+        var _a;
+        return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.validationErrors;
+    }
+    /**
+     * Service facades
+     */
+    get updateForm() {
+        return this._sendEventAliases.updateForm;
+    }
+    get resendCode() {
+        return this._sendEventAliases.resendCode;
+    }
+    get signOut() {
+        return this._sendEventAliases.signOut;
+    }
+    get submitForm() {
+        return this._sendEventAliases.submitForm;
+    }
+    /**
+     * Transition facades
+     */
+    get toFederatedSignIn() {
+        return this._sendEventAliases.toFederatedSignIn;
+    }
+    get toResetPassword() {
+        return this._sendEventAliases.toResetPassword;
+    }
+    get toSignIn() {
+        return this._sendEventAliases.toSignIn;
+    }
+    get toSignUp() {
+        return this._sendEventAliases.toSignUp;
     }
-    get services() {
-        return this._services;
+    get skipVerification() {
+        return this._sendEventAliases.skipVerification;
     }
+    /**
+     * Internal utility functions
+     */
+    /** @deprecated For internal use only */
     get authState() {
         return this._authState;
     }
+    /** @deprecated For internal use only */
     get authService() {
         return this._authService;
     }
-    get user() {
-        return this._user;
-    }
+    /** @deprecated For internal use only */
     get context() {
         return this._authState.context;
     }
-    send(event) {
-        this.authService.send(event);
-    }
-}
-StateMachineService.ɵprov = i0.ɵɵdefineInjectable({ factory: function StateMachineService_Factory() { return new StateMachineService(); }, token: StateMachineService, providedIn: "root" });
-StateMachineService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-StateMachineService.ctorParameters = () => [];
-
-class AuthPropService {
-    constructor() {
-        this._customComponents = {};
-        this._props = {};
-    }
-    get customComponents() {
-        return this._customComponents;
-    }
-    set customComponents(customComponents) {
-        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+    /** @deprecated For internal use only */
+    get slotContext() {
+        const slotContext = Object.assign(Object.assign({}, this._facade), this._sendEventAliases);
+        return Object.assign(Object.assign({}, slotContext), { $implicit: Object.assign({}, slotContext) });
     }
-    get props() {
-        return this._props;
+    /** @deprecated For internal use only */
+    subscribe(callback) {
+        if (this._authService) {
+            return this._authService.subscribe(callback);
+        }
+        else {
+            logger$2.error('Subscription attempted before machine was created. This is likely a bug on the library, please consider filing a bug.');
+        }
     }
-    set props(props) {
-        this._props = Object.assign(Object.assign({}, this._props), props);
+    /** @deprecated For internal use only */
+    send(event) {
+        this.authService.send(event);
     }
 }
-AuthPropService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
-AuthPropService.decorators = [
+AuthenticatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthenticatorService_Factory() { return new AuthenticatorService(); }, token: AuthenticatorService, providedIn: "root" });
+AuthenticatorService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
             },] }
 ];
-AuthPropService.ctorParameters = () => [];
 
-class AmplifyAuthenticatorComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
+class AuthenticatorComponent {
+    constructor(authenticator, contextService) {
+        this.authenticator = authenticator;
         this.contextService = contextService;
+        this.customComponentQuery = null;
+        // translated texts
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
+    }
+    ngOnInit() {
+        const { initialState, loginMechanisms, services, signUpAttributes, socialProviders, } = this;
+        this.authenticator.startMachine({
+            initialState,
+            loginMechanisms,
+            services,
+            signUpAttributes,
+            socialProviders,
+        });
         /**
-         * TODO: Add back custom events
+         * handling translations after content init, because authenticator and its
+         * translations might be initialized before the main app's `ngOnInit` is run.
          */
-        this.initialAuthState = 'signIn';
-        this.dataAttr = '';
-        this.customComponentQuery = null;
-        this.customComponents = {};
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
     }
     /**
      * Lifecycle Methods
      */
     ngAfterContentInit() {
         this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
-        this.customComponents = this.contextService.customComponents;
     }
     /**
      * Class Functions
      */
+    // context passed to "authenticated" slot
     get context() {
-        const { signOut } = this.stateMachine.services;
-        const user = this.stateMachine.user;
-        return { signOut, user };
+        return this.authenticator.slotContext;
     }
-    get actorState() {
-        return getActorState(this.stateMachine.authState);
+    get route() {
+        return this.authenticator.route;
     }
-    get authenticatorState() {
-        return this.stateMachine.authState;
+    onTabChange() {
+        const route = this.authenticator.route;
+        if (route === 'signIn') {
+            this.authenticator.toSignUp();
+        }
+        else {
+            this.authenticator.toSignIn();
+        }
     }
     mapCustomComponents(componentQuery) {
         if (!componentQuery)
@@ -140,181 +239,290 @@ class AmplifyAuthenticatorComponent {
         return customComponents;
     }
 }
-AmplifyAuthenticatorComponent.decorators = [
+AuthenticatorComponent.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> <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],
+                template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\n  <div data-amplify-container>\n    <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n    <div data-amplify-router>\n      <amplify-tabs\n        (tabChange)=\"onTabChange()\"\n        *ngIf=\"route === 'signIn' || route === 'signUp'\"\n      >\n        <amplify-tab-item [title]=\"signInTitle\" [active]=\"route === 'signIn'\">\n          <!-- signIn component -->\n          <amplify-slot\n            name=\"sign-in\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signIn'\"\n          >\n            <amplify-sign-in></amplify-sign-in>\n          </amplify-slot>\n        </amplify-tab-item>\n        <amplify-tab-item [title]=\"signUpTitle\" [active]=\"route === 'signUp'\">\n          <!-- signUp component -->\n          <amplify-slot\n            name=\"sign-up\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signUp'\"\n          >\n            <amplify-sign-up></amplify-sign-up>\n          </amplify-slot>\n        </amplify-tab-item>\n      </amplify-tabs>\n\n      <!-- confirmSignUp content -->\n      <amplify-slot\n        name=\"confirm-sign-up\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignUp'\"\n      >\n        <amplify-confirm-sign-up></amplify-confirm-sign-up>\n      </amplify-slot>\n\n      <!-- confirmSignIn content -->\n      <amplify-slot\n        name=\"confirm-sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignIn'\"\n      >\n        <amplify-confirm-sign-in></amplify-confirm-sign-in>\n      </amplify-slot>\n\n      <!-- setupTotp content -->\n      <amplify-slot\n        name=\"setup-totp\"\n        [context]=\"context\"\n        *ngIf=\"route === 'setupTOTP'\"\n      >\n        <amplify-setup-totp></amplify-setup-totp>\n      </amplify-slot>\n\n      <!-- forceNewPassword content -->\n      <amplify-slot\n        name=\"force-new-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'forceNewPassword'\"\n      >\n        <amplify-force-new-password></amplify-force-new-password>\n      </amplify-slot>\n\n      <!-- resetPassword content -->\n      <amplify-slot\n        name=\"reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'resetPassword'\"\n      >\n        <amplify-reset-password></amplify-reset-password>\n      </amplify-slot>\n\n      <!-- confirmResetPassword content -->\n      <amplify-slot\n        name=\"confirm-reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmResetPassword'\"\n      >\n        <amplify-confirm-reset-password></amplify-confirm-reset-password>\n      </amplify-slot>\n\n      <!-- verifyUser content -->\n      <amplify-slot\n        name=\"verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'verifyUser'\"\n      >\n        <amplify-verify-user></amplify-verify-user>\n      </amplify-slot>\n\n      <!-- confirmVerifyUser content -->\n      <amplify-slot\n        name=\"confirm-verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmVerifyUser'\"\n      >\n        <amplify-confirm-verify-user></amplify-confirm-verify-user>\n      </amplify-slot>\n    </div>\n\n    <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n  name=\"authenticated\"\n  [context]=\"context\"\n  *ngIf=\"route === 'authenticated'\"\n>\n  <ng-content></ng-content>\n</amplify-slot>\n",
+                providers: [CustomComponentsService],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifyAuthenticatorComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+AuthenticatorComponent.ctorParameters = () => [
+    { type: AuthenticatorService },
+    { type: CustomComponentsService }
 ];
-AmplifyAuthenticatorComponent.propDecorators = {
-    initialAuthState: [{ type: Input }],
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator',] }],
-    customComponentQuery: [{ type: ContentChildren, args: [AmplifyOverrideDirective,] }]
+AuthenticatorComponent.propDecorators = {
+    initialState: [{ type: Input }],
+    loginMechanisms: [{ type: Input }],
+    services: [{ type: Input }],
+    signUpAttributes: [{ type: Input }],
+    socialProviders: [{ type: Input }],
+    variation: [{ type: Input }],
+    customComponentQuery: [{ type: ContentChildren, args: [AmplifySlotDirective,] }]
 };
 
-const logger$3 = new Logger('SignIn');
-class AmplifySignInComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class ConfirmResetPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        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');
+        this.headerText = translate('Reset your password');
+        // translated strings
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+        this.resendCodeText = translate('Resend Code');
     }
-    ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    get context() {
+        return this.authenticator.slotContext;
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
-    ngOnDestroy() {
-        logger$3.log('sign in destroyed, unsubscribing from state machine...');
-        this.authSubscription.unsubscribe();
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
+    }
+}
+ConfirmResetPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-reset-password',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ sendCodeText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        type=\"button\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
+            },] }
+];
+ConfirmResetPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+ConfirmResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
+    headerText: [{ type: Input }]
+};
+
+const logger$1 = new Logger$1('ConfirmSignIn');
+class ConfirmSignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
+        this.confirmText = translate('Confirm');
+        this.backToSignInText = translate('Back to Sign In');
     }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('signIn.edit');
+    ngOnInit() {
+        this.setHeaderText();
     }
     get context() {
-        const { change, resetPassword, signUp, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, resetPassword, signUp, submit };
+        return this.authenticator.slotContext;
+    }
+    setHeaderText() {
+        const state = this.authenticator.authState;
+        const actorContext = getActorContext(state);
+        const { challengeName } = actorContext;
+        switch (challengeName) {
+            case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
+                this.headerText = translate('Confirm TOTP Code');
+                break;
+            case AuthChallengeNames.SMS_MFA:
+                this.headerText = translate('Confirm SMS Code');
+                break;
+            default:
+                logger$1.error('Unexpected challengeName', challengeName);
+        }
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
-    toSignUp() {
-        this.stateMachine.send('SIGN_UP');
+}
+ConfirmSignInComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-in',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot\n      name=\"confirm-sign-in-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</div>\n"
+            },] }
+];
+ConfirmSignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+ConfirmSignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+};
+
+class ConfirmSignUpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.headerText = translate('Confirm Sign Up');
+        this.dataAttr = '';
+        // translated texts
+        this.resendCodeText = translate('Resend Code');
+        this.confirmText = translate('Confirm');
     }
-    toResetPassword() {
-        this.stateMachine.send('RESET_PASSWORD');
+    get context() {
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            this.stateMachine.send({
-                type: 'SUBMIT',
-            });
-        });
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-AmplifySignInComponent.decorators = [
+ConfirmSignUpComponent.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\">{{ 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
+                selector: 'amplify-confirm-sign-up',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifySignInComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ConfirmSignUpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySignInComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
-    headerText: [{ type: Input }]
+ConfirmSignUpComponent.propDecorators = {
+    headerText: [{ type: Input }],
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
 };
 
-class AmplifySignUpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class ConfirmVerifyUserComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        this.headerText = translate('Create a new account');
-        this.remoteError = '';
-        this.isPending = false;
-        this.primaryAlias = '';
-        this.secondaryAliases = [];
-        this.validationError = {};
+        this.headerText = translate('Account recovery requires verified contact information');
         // translated texts
-        this.createAccountText = translate('Back to Sign In');
-        this.haveAccountText = translate('Have an account? ');
-        this.signInText = translate('Sign in');
+        this.skipText = translate('Skip');
+        this.submitText = translate('Submit');
     }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        const validationError = this.validationError;
-        return {
-            change,
-            remoteError,
-            signIn,
-            submit,
-            validationError,
-        };
+        return this.authenticator.slotContext;
     }
-    ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-        const context = this.stateMachine.context;
-        const { primaryAlias, secondaryAliases } = getConfiguredAliases(context);
-        this.primaryAlias = primaryAlias;
-        this.secondaryAliases = secondaryAliases;
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
+}
+ConfirmVerifyUserComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-verify-user',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ submitText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.skipVerification()\"\n      >\n        {{ skipText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
+            },] }
+];
+ConfirmVerifyUserComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+ConfirmVerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+    headerText: [{ type: Input }]
+};
+
+class FederatedSignInButtonComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.onClick = () => {
+            this.authenticator.send({
+                type: 'FEDERATED_SIGN_IN',
+                data: { provider: this.provider },
+            });
+        };
     }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        const actorContext = getActorContext(state);
-        this.remoteError = actorContext.remoteError;
-        this.validationError = actorContext.validationError;
-        this.isPending = !actorState.matches({
-            signUp: {
-                submission: 'idle',
-            },
-        });
+}
+FederatedSignInButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in-button',
+                template: "<button\n  amplify-button\n  class=\"amplify-field-group__control federated-sign-in-button\"\n  fullWidth=\"true\"\n  fontWeight=\"normal\"\n  style=\"display: block\"\n  (click)=\"onClick()\"\n>\n  <div\n    class=\"amplify-flex federated-sign-in-button-row\"\n    style=\"flex-direction: row; justify-content: center; align-items: center\"\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n"
+            },] }
+];
+FederatedSignInButtonComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+FederatedSignInButtonComponent.propDecorators = {
+    provider: [{ type: Input }],
+    text: [{ type: Input }]
+};
+
+class FederatedSignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.FederatedProviders = FederatedIdentityProviders;
+        this.includeAmazon = false;
+        this.includeApple = false;
+        this.includeFacebook = false;
+        this.includeGoogle = false;
+        this.shouldShowFederatedSignIn = false;
     }
-    onSubmit($event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            $event.preventDefault();
-            this.stateMachine.send('SUBMIT');
-        });
+    ngOnInit() {
+        var _a;
+        const { socialProviders } = (_a = this.authenticator.context) === null || _a === void 0 ? void 0 : _a.config;
+        this.setFederatedTexts();
+        this.includeAmazon = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('amazon');
+        this.includeApple = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('apple');
+        this.includeGoogle = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('google');
+        this.includeFacebook = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('facebook');
+        this.shouldShowFederatedSignIn =
+            this.includeAmazon ||
+                this.includeApple ||
+                this.includeFacebook ||
+                this.includeGoogle;
+    }
+    setFederatedTexts() {
+        const { route } = this.authenticator;
+        const federatedText = route === 'signUp' ? 'Up' : 'In';
+        this.signInAmazonText = translate(`Sign ${federatedText} with Amazon`);
+        this.signInAppleText = translate(`Sign ${federatedText} with Apple`);
+        this.signInFacebookText = translate(`Sign ${federatedText} with Facebook`);
+        this.signInGoogleText = translate(`Sign ${federatedText} with Google`);
+    }
+}
+FederatedSignInComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in',
+                template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  style=\"flex-direction: column; padding: 0 0 1rem 0\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  >\n    <svg\n      aria-label=\"Amazon icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 248 268\"\n    >\n      <path\n        d=\"M139.056521,147.024612 C133.548808,156.744524 124.782731,162.726926 115.087401,162.726926 C101.790721,162.726926 93.9937779,152.612964 93.9937779,137.68681 C93.9937779,108.224571 120.447551,102.879017 145.533369,102.879017 L145.533369,110.365976 C145.533369,123.831358 145.876354,135.063787 139.056521,147.024612 M207.206992,162.579655 C209.400505,165.692256 209.887066,169.437725 207.063416,171.770186 C199.996315,177.653081 187.429476,188.590967 180.513926,194.716661 L180.46208,194.621133 C178.176838,196.663031 174.862638,196.810303 172.27828,195.445057 C160.780281,185.9162 158.686473,181.494078 152.405048,172.403055 C133.405233,191.751331 119.909143,197.534719 95.309886,197.534719 C66.1281801,197.534719 43.4791563,179.599451 43.4791563,143.669212 C43.4791563,115.616003 58.6782107,96.5105248 80.4019706,87.1727225 C99.2063636,78.9096034 125.464714,77.4528107 145.533369,75.1641337 L145.533369,70.694248 C145.533369,62.4749122 146.167493,52.7510201 141.297893,45.6541312 C137.110277,39.2856386 129.018206,36.6586354 121.859376,36.6586354 C108.658413,36.6586354 96.9171331,43.4171982 94.0416364,57.4199213 C93.4593582,60.532522 91.1701278,63.5933787 88.003492,63.7406501 L54.4387473,60.1424518 C51.6150972,59.5095829 48.4484614,57.2248862 49.2740201,52.8982915 C56.9712583,12.2553679 93.7983558,0 126.732964,0 C143.587124,0 165.606011,4.47386604 178.902691,17.2148315 C195.760839,32.917146 194.149604,53.8694866 194.149604,76.6726704 L194.149604,130.542157 C194.149604,146.734049 200.87372,153.830938 207.206992,162.579655 Z M233.826346,208.038962 C230.467669,203.683255 211.550709,205.9821 203.056405,206.998432 C200.470662,207.321077 200.076227,205.042397 202.406981,203.404973 C217.475208,192.664928 242.201125,195.766353 245.081698,199.363845 C247.966255,202.981502 244.336653,228.071183 230.172839,240.049379 C228.001452,241.888455 225.929671,240.904388 226.89783,238.468418 C230.077218,230.430525 237.204944,212.418868 233.826346,208.038962 Z M126.768855,264 C74.0234043,264 42.0764048,241.955028 17.7852554,217.541992 C12.9733903,212.705982 6.71799208,206.295994 3.31151296,200.690918 C1.90227474,198.372135 5.59096074,195.021875 8.0442063,196.84375 C38.2390146,219.267578 82.1011654,239.538304 125.529506,239.538304 C154.819967,239.538304 191.046475,227.469543 220.66851,214.867659 C225.146771,212.966167 225.146771,219.180222 224.511585,221.060516 C224.183264,222.03242 209.514625,236.221149 189.247207,247.047411 C170.304273,257.166172 146.397132,264 126.768855,264 Z\"\n        fill=\"#FF9900\"\n      ></path>\n    </svg>\n\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInAmazonText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeApple\"\n    [provider]=\"FederatedProviders.Apple\"\n  >\n    <svg\n      aria-label=\"Apple icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      fill=\"#000\"\n      preserveAspectRatio=\"xMidYMid\"\n      stroke=\"#000\"\n      strokeWidth=\"0\"\n      viewBox=\"0 0 1024 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInAppleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  >\n    <svg\n      aria-label=\"Facebook icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 279 538\"\n    >\n      <path\n        d=\"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z\"\n        fill=\"#1877F2\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInFacebookText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [provider]=\"FederatedProviders.Google\"\n  >\n    <svg\n      aria-label=\"Google icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 256 262\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <path\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n        fill=\"#4285F4\"\n      ></path>\n      <path\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n        fill=\"#34A853\"\n      ></path>\n      <path\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n        fill=\"#FBBC05\"\n      ></path>\n      <path\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n        fill=\"#EB4335\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInGoogleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <div class=\"amplify-flex\" data-or-container>\n    <div data-or-line>or</div>\n    <hr\n      class=\"amplify-divider\"\n      aria-orientation=\"horizontal\"\n      data-size=\"small\"\n    />\n  </div>\n</div>\n"
+            },] }
+];
+FederatedSignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
+];
+
+class ForceNewPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
+        this.headerText = translate('Change Password');
+        // translated texts
+        this.changePasswordText = translate('Change Password');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    get context() {
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-AmplifySignUpComponent.decorators = [
+ForceNewPasswordComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-sign-up',
-                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"
+                selector: 'amplify-force-new-password',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <amplify-form-field\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ changePasswordText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifySignUpComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ForceNewPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
+ForceNewPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
     headerText: [{ type: Input }]
 };
 
@@ -327,26 +535,28 @@ const getAttributeMap = () => authInputAttributes;
  * 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;
+class FormFieldComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.required = true;
         this.placeholder = '';
         this.label = '';
         this.initialValue = '';
         this.disabled = false;
         this.autocomplete = '';
+        this.labelHidden = true;
         this.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 },
+        if (this.isPhoneField()) {
+            const state = this.authenticator.authState;
+            const { country_code } = getActorContext(state);
+            this.defaultCountryCode = country_code;
+            // TODO: remove this side-effect
+            this.authenticator.updateForm({
+                name: 'country_code',
+                value: country_code,
             });
         }
     }
@@ -354,13 +564,10 @@ class AmplifyInputComponent {
         return getAttributeMap();
     }
     get error() {
-        const formContext = getActorContext(this.stateMachine.authState);
+        const formContext = getActorContext(this.authenticator.authState);
         const { validationError } = formContext;
         return validationError[this.name];
     }
-    isTelInput() {
-        return this.inferType() === 'tel';
-    }
     inferLabel() {
         var _a;
         const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
@@ -377,17 +584,28 @@ class AmplifyInputComponent {
         var _a, _b, _c;
         return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
     }
+    inferAutocomplete() {
+        var _a;
+        return this.autocomplete || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.autocomplete);
+    }
+    // TODO(enhancement): use enum to differentiate special field types
+    isPasswordField() {
+        return this.inferType() === 'password';
+    }
+    isPhoneField() {
+        return this.inferType() === 'tel';
+    }
 }
-AmplifyInputComponent.decorators = [
+FormFieldComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-form-input',
-                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"
+                selector: 'amplify-form-field',
+                template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
             },] }
 ];
-AmplifyInputComponent.ctorParameters = () => [
-    { type: StateMachineService }
+FormFieldComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyInputComponent.propDecorators = {
+FormFieldComponent.propDecorators = {
     name: [{ type: Input }],
     type: [{ type: Input }],
     required: [{ type: Input }],
@@ -395,240 +613,57 @@ AmplifyInputComponent.propDecorators = {
     label: [{ type: Input }],
     initialValue: [{ type: Input }],
     disabled: [{ type: Input }],
-    autocomplete: [{ type: Input }]
+    autocomplete: [{ type: Input }],
+    labelHidden: [{ type: Input }]
 };
 
-class AmplifyErrorComponent {
-}
-AmplifyErrorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-error',
-                template: "<span data-amplify-error>\n  <ng-content></ng-content>\n</span>\n"
-            },] }
-];
-
-class AmplifyConfirmSignUpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class ResetPasswordComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        this.headerText = translate('Confirm Sign Up');
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+        this.headerText = translate('Reset your password');
         // 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
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-        this.setUsername();
-    }
-    setUsername() {
-        var _a;
-        const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { user, authAttributes } = actorContext;
-        const username = (_a = user === null || user === void 0 ? void 0 : user.username) !== null && _a !== void 0 ? _a : authAttributes === null || authAttributes === void 0 ? void 0 : authAttributes.username;
-        if (username) {
-            this.username = username;
-            this.stateMachine.send({
-                type: 'CHANGE',
-                data: { name: 'username', value: this.username },
-            });
-        }
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignUp.edit');
-    }
-    get context() {
-        const { change, resend, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        const username = this.username;
-        return { change, remoteError, resend, signIn, submit, username };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
-    }
-    resend() {
-        this.stateMachine.send({
-            type: 'RESEND',
-            data: {
-                username: this.username,
-            },
-        });
-    }
-    onInput($event) {
-        $event.preventDefault();
-        const { name, value } = $event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
-    }
-    onSubmit(event) {
-        event.preventDefault();
-        const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { formValues } = actorContext;
-        const { username, confirmation_code } = formValues;
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: { username, confirmation_code },
-        });
-    }
-}
-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\">{{ 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 = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
-];
-AmplifyConfirmSignUpComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
-    headerText: [{ type: Input }]
-};
-
-class AmplifyUserNameAliasComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        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 = 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  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-input>\n"
-            },] }
-];
-AmplifyUserNameAliasComponent.ctorParameters = () => [
-    { type: StateMachineService }
-];
-AmplifyUserNameAliasComponent.propDecorators = {
-    name: [{ type: Input }],
-    disabled: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    required: [{ type: Input }]
-};
-
-const logger$2 = new Logger('ConfirmSignIn');
-class AmplifyConfirmSignInComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
-        this.confirmText = translate('Confirm');
+        this.sendCodeText = translate('Send Code');
         this.backToSignInText = translate('Back to Sign In');
+        this.labelText = translate('Username');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
-            this.onStateUpdate(state);
-        });
-        this.setHeaderText();
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
+        const { authState } = this.authenticator;
+        const { label } = getAliasInfoFromContext(authState.context);
+        this.labelText = `Enter your ${label.toLowerCase()}`;
     }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit };
-    }
-    setHeaderText() {
-        const state = this.stateMachine.authState;
-        const actorContext = getActorContext(state);
-        const { challengeName } = actorContext;
-        switch (challengeName) {
-            case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
-                // TODO: this string should be centralized and translated from ui.
-                this.headerText = translate('Confirm TOTP Code');
-                break;
-            case AuthChallengeNames.SMS_MFA:
-                this.headerText = translate('Confirm SMS Code');
-                break;
-            default:
-                logger$2.error('Unexpected challengeName', challengeName);
-        }
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmSignIn.edit');
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
         event.preventDefault();
-        // TODO: handle form data within the state machine
-        const formData = new FormData(event.target);
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: Object.fromEntries(formData),
-        });
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        this.authenticator.submitForm();
     }
 }
-AmplifyConfirmSignInComponent.decorators = [
+ResetPasswordComponent.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\">{{ 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"
+                selector: 'amplify-reset-password',
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot\n        class=\"amplify-flex\"\n        name=\"reset-password-header\"\n        [context]=\"context\"\n      >\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n\n      <amplify-form-field\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n        [placeholder]=\"labelText\"\n        [label]=\"labelText\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ sendCodeText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n\n    <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n    </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignInComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+ResetPasswordComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyConfirmSignInComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+ResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+    headerText: [{ type: Input }]
 };
 
-const logger$1 = new Logger('SetupTotp');
-class AmplifySetupTotpComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+const logger = new Logger$1('SetupTotp');
+class SetupTotpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
         this.headerText = translate('Setup TOTP');
         this.qrCodeSource = '';
         // translated texts
@@ -636,2344 +671,573 @@ class AmplifySetupTotpComponent {
         this.confirmText = translate('Confirm');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
-            this.onStateUpdate(state);
-        });
         this.generateQRCode();
     }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('setupTOTP.edit');
-    }
     get context() {
-        const { change, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        const user = this.stateMachine.user;
-        return { change, remoteError, submit, user };
+        return this.authenticator.slotContext;
     }
     generateQRCode() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // TODO: This should be handled in core.
-            const state = this.stateMachine.authState;
+            const state = this.authenticator.authState;
             const actorContext = getActorContext(state);
             const { user } = actorContext;
             try {
                 const secretKey = yield Auth.setupTOTP(user);
                 const issuer = 'AWSCognito';
                 const totpCode = `otpauth://totp/${issuer}:${user.username}?secret=${secretKey}&issuer=${issuer}`;
-                logger$1.info('totp code was generated:', totpCode);
+                logger.info('totp code was generated:', totpCode);
                 this.qrCodeSource = yield QRCode.toDataURL(totpCode);
             }
             catch (err) {
-                this.remoteError = (_a = err.message) !== null && _a !== void 0 ? _a : err;
-                logger$1.error(err);
+                logger.error(err);
             }
         });
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
         event.preventDefault();
-        // TODO: handle form data within the state machine
-        const formData = new FormData(event.target);
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: Object.fromEntries(formData),
-        });
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        this.authenticator.submitForm();
     }
 }
-AmplifySetupTotpComponent.decorators = [
+SetupTotpComponent.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\">{{ 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"
+                template: "<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\n        width=\"228\"\n        height=\"228\"\n      />\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n  </form>\n</div>\n"
             },] }
 ];
-AmplifySetupTotpComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SetupTotpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifySetupTotpComponent.propDecorators = {
-    customComponents: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+SetupTotpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
 };
 
-const logger = new Logger('ForceNewPassword');
-class AmplifyForceNewPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class SignInComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
-        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));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        logger.log('sign in destroyed, unsubscribing from state machine...');
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = actorState.matches({
-            signUp: {
-                submission: 'idle',
-            },
-        });
+        // translated phrases
+        this.forgotPasswordText = translate('Forgot your password? ');
+        this.signInButtonText = translate('Sign in');
     }
     get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const user = this.stateMachine.user;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit, user };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
+        return this.authenticator.slotContext;
     }
     onInput(event) {
         event.preventDefault();
         const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
         event.preventDefault();
-        // consider stateMachine directly providing actorState / actorContext
-        const state = this.stateMachine.authState;
-        const actorState = getActorContext(state);
-        const { formValues } = actorState;
-        this.stateMachine.send({
-            type: 'SUBMIT',
-            data: formValues,
-        });
+        this.authenticator.submitForm();
     }
 }
-AmplifyForceNewPasswordComponent.decorators = [
+SignInComponent.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\">{{ 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"
+                selector: 'amplify-sign-in',
+                template: "<div data-amplify-container>\n  <amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-field\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-field>\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ signInButtonText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n  </form>\n\n  <amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n    <div data-amplify-footer>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        size=\"small\"\n        variation=\"link\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.toResetPassword()\"\n      >\n        {{ forgotPasswordText }}\n      </button>\n    </div>\n  </amplify-slot>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifyForceNewPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+SignInComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyForceNewPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
-    headerText: [{ type: Input }]
+SignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }]
 };
 
-class AmplifyFederatedSignInComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.FederatedProviders = FederatedIdentityProviders;
-        this.includeFacebook = false;
-        this.includeGoogle = false;
-        this.includeAmazon = false;
-        this.shouldShowFederatedSignIn = false;
+class SignUpComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.dataAttr = '';
         // translated texts
-        this.signInFacebookText = translate('Sign In with Facebook');
-        this.signInGoogleText = translate('Sign In with Google');
-        this.signInAmazonText = translate('Sign In with Amazon');
+        this.createAccountText = translate('Create Account');
     }
-    ngOnInit() {
-        var _a, _b;
-        const loginMechanisms = (_b = (_a = this.stateMachine.context) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.login_mechanisms;
-        this.includeFacebook = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('facebook');
-        this.includeGoogle = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('google');
-        this.includeAmazon = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('amazon');
-        this.shouldShowFederatedSignIn =
-            this.includeFacebook || this.includeGoogle || this.includeAmazon;
+    get context() {
+        return this.authenticator.slotContext;
+    }
+    onInput(event) {
+        let { checked, name, type, value } = event.target;
+        if (type === 'checkbox' && !checked)
+            value = undefined;
+        this.authenticator.updateForm({ name, value });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-AmplifyFederatedSignInComponent.decorators = [
+SignUpComponent.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]=\"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"
+                selector: 'amplify-sign-up',
+                template: "<amplify-slot name=\"sign-up-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <div class=\"amplify-flex\" style=\"flex-direction: column\">\n    <div class=\"amplify-flex\" style=\"flex-direction: column\">\n      <amplify-slot name=\"sign-up-form-fields\" [context]=\"context\">\n        <amplify-sign-up-form-fields></amplify-sign-up-form-fields>\n      </amplify-slot>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </div>\n\n    <amplify-slot name=\"sign-up-button\" [context]=\"context\">\n      <button\n        [disabled]=\"\n          authenticator.isPending || authenticator.hasValidationErrors\n        \"\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n      >\n        {{ createAccountText }}\n      </button>\n    </amplify-slot>\n  </div>\n</form>\n\n<amplify-slot name=\"sign-up-footer\" [context]=\"context\"> </amplify-slot>\n"
             },] }
 ];
-AmplifyFederatedSignInComponent.ctorParameters = () => [
-    { type: StateMachineService }
+SignUpComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
+SignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }]
+};
 
-class AmplifyFederatedSignInButtonComponent {
-    constructor(stateMachine) {
-        this.stateMachine = stateMachine;
-        this.onClick = () => {
-            this.stateMachine.send({
-                type: 'FEDERATED_SIGN_IN',
-                data: { provider: this.provider },
-            });
-        };
+class SignUpFormFieldsComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.primaryAlias = '';
+        this.secondaryAliases = [];
+    }
+    ngOnInit() {
+        const context = this.authenticator.context;
+        const { loginMechanisms, signUpAttributes } = context.config;
+        this.fieldNames = Array.from(new Set([...loginMechanisms, ...signUpAttributes]));
+        this.fieldNames = this.fieldNames.filter((fieldName) => {
+            const hasDefaultField = !!authInputAttributes[fieldName];
+            if (!hasDefaultField) {
+                console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize Authenticator.SignUp.FormFields to add your own.`);
+            }
+            return hasDefaultField;
+        });
+        // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
+        this.loginMechanism = this.fieldNames.shift();
     }
 }
-AmplifyFederatedSignInButtonComponent.decorators = [
+SignUpFormFieldsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-federated-sign-in-button',
-                template: "<button data-amplify-button (click)=\"onClick()\">{{ text }}</button>\n"
+                selector: 'amplify-sign-up-form-fields',
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-user-name-alias [name]=\"loginMechanism\"></amplify-user-name-alias>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n\n  <ng-container *ngFor=\"let field of fieldNames\">\n    <amplify-form-field\n      [name]=\"field\"\n      [labelHidden]=\"false\"\n    ></amplify-form-field>\n  </ng-container>\n</div>\n"
             },] }
 ];
-AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
-    { type: StateMachineService }
+SignUpFormFieldsComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyFederatedSignInButtonComponent.propDecorators = {
-    provider: [{ type: Input }],
-    text: [{ type: Input }]
-};
 
-class AmplifyResetPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        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');
+class UserNameAliasComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
+        this.name = 'username';
+        this.disabled = false;
+        this.initialValue = '';
+        this.required = true;
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('resetPassword.edit');
-    }
-    get context() {
-        const { change, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, signIn, submit };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
-    }
-    onInput(event) {
-        event.preventDefault();
-        const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
-    }
-    onSubmit(event) {
-        event.preventDefault();
-        this.stateMachine.send('SUBMIT');
+        const context = this.authenticator.context;
+        const { label, type } = getAliasInfoFromContext(context);
+        this.label = label;
+        this.type = type;
+        this.placeholder = label;
     }
 }
-AmplifyResetPasswordComponent.decorators = [
+UserNameAliasComponent.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\">{{ 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"
+                selector: 'amplify-user-name-alias',
+                template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
             },] }
 ];
-AmplifyResetPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+UserNameAliasComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyResetPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
-    headerText: [{ type: Input }]
+UserNameAliasComponent.propDecorators = {
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
 };
 
-class AmplifyVerifyUserComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
+class VerifyUserComponent {
+    constructor(authenticator) {
+        this.authenticator = authenticator;
         this.dataAttr = '';
         this.headerText = translate('Account recovery requires verified contact information');
-        this.customComponents = {};
         this.unverifiedAttributes = {};
-        this.remoteError = '';
-        this.isPending = false;
+        this.labelId = nanoid(12);
         // translated texts
         this.skipText = translate('Skip');
         this.verifyText = translate('Verify');
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
+        const actorState = getActorState(this.authenticator.authState);
         this.unverifiedAttributes = actorState.context.unverifiedAttributes;
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('verifyUser.edit');
     }
     get context() {
-        const { change, skip, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, remoteError, skip, submit };
+        return this.authenticator.slotContext;
     }
-    skipVerify() {
-        this.stateMachine.send('SKIP');
+    getLabelForAttr(authAttr) {
+        var _a;
+        const attributeMap = getAttributeMap();
+        const label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+        return translate(label);
     }
-    // enable translate to be used inside the template
-    translate(phrase) {
-        return translate(phrase);
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.authenticator.updateForm({ name, value });
     }
     onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
-        });
+        event.preventDefault();
+        this.authenticator.submitForm();
     }
 }
-AmplifyVerifyUserComponent.decorators = [
+VerifyUserComponent.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()\">{{ 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",
+                template: "<div data-amplify-container>\n  <form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"authenticator.isPending\"\n    >\n      <amplify-slot name=\"verify-user-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      </amplify-slot>\n\n      <div *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\">\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n          [id]=\"labelId\"\n        />\n        <label [for]=\"labelId\">{{\n          getLabelForAttr(unverifiedAttribute.key)\n        }}</label>\n      </div>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ verifyText }}\n      </button>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"authenticator.skipVerification()\"\n      >\n        {{ skipText }}\n      </button>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </fieldset>\n    <amplify-slot name=\"verify-user-footer\" [context]=\"context\"> </amplify-slot>\n  </form>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-AmplifyVerifyUserComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
+VerifyUserComponent.ctorParameters = () => [
+    { type: AuthenticatorService }
 ];
-AmplifyVerifyUserComponent.propDecorators = {
+VerifyUserComponent.propDecorators = {
     dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
     headerText: [{ type: Input }]
 };
 
-class ConfirmResetPasswordComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        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');
+class ButtonComponent {
+    constructor() {
+        this.type = 'button';
+        this.fullWidth = false;
+        this.size = 'medium';
+        this.variation = 'default';
+        this.fontWeight = 'normal';
+        this.defaultClass = true;
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmResetPassword.edit');
-    }
-    get context() {
-        const { change, resend, signIn, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { change, resend, remoteError, signIn, submit };
-    }
-    toSignIn() {
-        this.stateMachine.send('SIGN_IN');
-    }
-    resend() {
-        this.stateMachine.send('RESEND');
-    }
-    onInput(event) {
-        event.preventDefault();
-        const { name, value } = event.target;
-        this.stateMachine.send({
-            type: 'CHANGE',
-            data: { name, value },
-        });
-    }
-    onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            this.stateMachine.send('SUBMIT');
-        });
+        this.typeAttr = this.type;
+        this.fullWidthAttr = this.fullWidth;
+        this.sizeAttr = this.size;
+        this.variationAttr = this.variation;
+        this.fontWeightAttr = this.fontWeight;
     }
 }
-ConfirmResetPasswordComponent.decorators = [
+ButtonComponent.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\">{{ 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"
+                selector: 'button[amplify-button]',
+                template: "<ng-content></ng-content>\n"
             },] }
 ];
-ConfirmResetPasswordComponent.ctorParameters = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
-];
-ConfirmResetPasswordComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
-    headerText: [{ type: Input }]
+ButtonComponent.propDecorators = {
+    type: [{ type: Input }],
+    fullWidth: [{ type: Input }],
+    size: [{ type: Input }],
+    variation: [{ type: Input }],
+    fontWeight: [{ type: Input }],
+    typeAttr: [{ type: HostBinding, args: ['type',] }],
+    fullWidthAttr: [{ type: HostBinding, args: ['attr.data-fullwidth',] }],
+    sizeAttr: [{ type: HostBinding, args: ['attr.data-size',] }],
+    variationAttr: [{ type: HostBinding, args: ['attr.data-variation',] }],
+    defaultClass: [{ type: HostBinding, args: ['class.amplify-button',] }],
+    fontWeightAttr: [{ type: HostBinding, args: ['style.font-weight',] }]
 };
 
-class ConfirmVerifyUserComponent {
-    constructor(stateMachine, contextService) {
-        this.stateMachine = stateMachine;
-        this.contextService = contextService;
-        this.dataAttr = '';
-        this.headerText = 'Account recovery requires verified contact information';
-        this.customComponents = {};
-        this.remoteError = '';
-        this.isPending = false;
+class CheckboxComponent {
+    constructor() {
+        this.defaultChecked = false;
+        this.hasError = false;
+        this.isChecked = false;
     }
     ngOnInit() {
-        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
-    }
-    ngAfterContentInit() {
-        this.customComponents = this.contextService.customComponents;
-    }
-    ngOnDestroy() {
-        this.authSubscription.unsubscribe();
-    }
-    onStateUpdate(state) {
-        const actorState = getActorState(state);
-        this.remoteError = actorState.context.remoteError;
-        this.isPending = !actorState.matches('confirmVerifyUser.edit');
-    }
-    get context() {
-        const { skip, submit } = this.stateMachine.services;
-        const remoteError = this.remoteError;
-        return { remoteError, skip, submit };
+        if (this.defaultChecked) {
+            this.isChecked = true;
+        }
     }
-    skipVerify() {
-        this.stateMachine.send('SKIP');
-    }
-    onSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            this.stateMachine.send({
-                type: 'SUBMIT',
-                data: Object.fromEntries(formData),
-            });
-        });
+    handleClick() {
+        this.isChecked = !this.isChecked;
     }
 }
-ConfirmVerifyUserComponent.decorators = [
+CheckboxComponent.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      ></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 = () => [
-    { type: StateMachineService },
-    { type: AuthPropService }
-];
-ConfirmVerifyUserComponent.propDecorators = {
-    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
-    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"
+                selector: 'amplify-checkbox',
+                template: "<div class=\"amplify-flex amplify-field amplify-checkboxfield\">\n  <label class=\"amplify-flex amplify-checkbox\">\n    <span class=\"amplify-visually-hidden\">\n      <input\n        (click)=\"handleClick()\"\n        class=\"\n          amplify-input\n          amplify-field-group__control\n          amplify-checkbox__input\n        \"\n        aria-invalid=\"false\"\n        type=\"checkbox\"\n        [name]=\"name\"\n        [value]=\"value\"\n      />\n    </span>\n    <span\n      class=\"amplify-flex amplify-checkbox__button\"\n      aria-hidden=\"true\"\n      data-focus=\"false\"\n      [attr.data-error]=\"hasError\"\n      [attr.data-checked]=\"isChecked\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"amplify-icon amplify-checkbox__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        [attr.data-checked]=\"isChecked\"\n      >\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"></path>\n      </svg>\n    </span>\n    <span class=\"amplify-text amplify-checkbox__label\">\n      <ng-content></ng-content>\n    </span>\n  </label>\n  <p *ngIf=\"hasError\" class=\"amplify-text amplify-field__error-message\">\n    {{ errorMessage }}\n  </p>\n</div>\n"
             },] }
 ];
-AmplifySelectComponent.propDecorators = {
-    items: [{ type: Input }],
-    name: [{ type: Input }],
+CheckboxComponent.propDecorators = {
+    defaultChecked: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    hasError: [{ type: Input }],
     label: [{ type: Input }],
-    id: [{ type: Input }],
-    initialValue: [{ type: Input }]
+    name: [{ type: Input }],
+    value: [{ type: Input }]
 };
 
-const proxyInputs = (Cmp, inputs) => {
-    const Prototype = Cmp.prototype;
-    inputs.forEach((item) => {
-        Object.defineProperty(Prototype, item, {
-            get() {
-                return this.el[item];
-            },
-            set(val) {
-                this.z.runOutsideAngular(() => (this.el[item] = val));
-            },
-        });
-    });
-};
-const proxyMethods = (Cmp, methods) => {
-    const Prototype = Cmp.prototype;
-    methods.forEach((methodName) => {
-        Prototype[methodName] = function () {
-            const args = arguments;
-            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
-        };
-    });
-};
-const proxyOutputs = (instance, el, events) => {
-    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
-};
-// tslint:disable-next-line: only-arrow-functions
-function ProxyCmp(opts) {
-    const decorator = function (cls) {
-        if (opts.inputs) {
-            proxyInputs(cls, opts.inputs);
-        }
-        if (opts.methods) {
-            proxyMethods(cls, opts.methods);
-        }
-        return cls;
-    };
-    return decorator;
-}
-let AmplifyAmazonButton = class AmplifyAmazonButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+class ErrorComponent {
+    constructor() {
+        this.isVisible = true;
     }
-};
-AmplifyAmazonButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-amazon-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['clientId', 'handleAuthStateChange']
-            },] }
-];
-AmplifyAmazonButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAmazonButton = __decorate([
-    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-], AmplifyAmazonButton);
-class AmplifyAuthContainer {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+    close() {
+        this.isVisible = false;
     }
 }
-AmplifyAuthContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth-container',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyAuthContainer.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyAuthFields = class AmplifyAuthFields {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuthFields.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth-fields',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['formFields']
-            },] }
-];
-AmplifyAuthFields.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuthFields = __decorate([
-    ProxyCmp({ inputs: ['formFields'] })
-], AmplifyAuthFields);
-let AmplifyAuth0Button = class AmplifyAuth0Button {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuth0Button.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-auth0-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['config', 'handleAuthStateChange']
-            },] }
-];
-AmplifyAuth0Button.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuth0Button = __decorate([
-    ProxyCmp({ inputs: ['config', 'handleAuthStateChange'] })
-], AmplifyAuth0Button);
-let AmplifyAuthenticator = class AmplifyAuthenticator {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyAuthenticator.decorators = [
+ErrorComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-authenticator',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'federated',
-                    'handleAuthStateChange',
-                    'hideToast',
-                    'initialAuthState',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifyAuthenticator.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyAuthenticator = __decorate([
-    ProxyCmp({
-        inputs: [
-            'federated',
-            'handleAuthStateChange',
-            'hideToast',
-            'initialAuthState',
-            'usernameAlias',
-        ],
-    })
-], AmplifyAuthenticator);
-let AmplifyButton = class AmplifyButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']
-            },] }
-];
-AmplifyButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyButton = __decorate([
-    ProxyCmp({
-        inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'],
-    })
-], AmplifyButton);
-let AmplifyChatbot = class AmplifyChatbot {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['chatCompleted']);
-    }
-};
-AmplifyChatbot.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-chatbot',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'botName',
-                    'botTitle',
-                    'clearOnComplete',
-                    'conversationModeOn',
-                    'silenceThreshold',
-                    'silenceTime',
-                    'textEnabled',
-                    'voiceEnabled',
-                    'welcomeMessage',
-                ]
-            },] }
-];
-AmplifyChatbot.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyChatbot = __decorate([
-    ProxyCmp({
-        inputs: [
-            'botName',
-            'botTitle',
-            'clearOnComplete',
-            'conversationModeOn',
-            'silenceThreshold',
-            'silenceTime',
-            'textEnabled',
-            'voiceEnabled',
-            'welcomeMessage',
-        ],
-    })
-], AmplifyChatbot);
-let AmplifyCheckbox = class AmplifyCheckbox {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCheckbox.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-checkbox',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']
-            },] }
-];
-AmplifyCheckbox.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCheckbox = __decorate([
-    ProxyCmp({
-        inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'],
-    })
-], AmplifyCheckbox);
-let AmplifyCodeField = class AmplifyCodeField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCodeField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-code-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyCodeField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCodeField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyCodeField);
-let AmplifyConfirmSignIn = class AmplifyConfirmSignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyConfirmSignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-confirm-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                ]
-            },] }
-];
-AmplifyConfirmSignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyConfirmSignIn = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-        ],
-    })
-], AmplifyConfirmSignIn);
-let AmplifyConfirmSignUp = class AmplifyConfirmSignUp {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyConfirmSignUp.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-confirm-sign-up',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                    'usernameAlias',
-                ]
+                selector: 'amplify-error',
+                template: "<div\n  class=\"amplify-flex amplify-alert\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n"
             },] }
 ];
-AmplifyConfirmSignUp.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyConfirmSignUp = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-            'usernameAlias',
-        ],
-    })
-], AmplifyConfirmSignUp);
-class AmplifyContainer {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class PasswordFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.fieldId = `amplify-field-${nanoid(12)}`;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.labelHidden = false;
+        this.type = 'password';
+        this.showPassword = false;
+        this.showPasswordButtonlabel = translate('Show password');
+    }
+    togglePasswordText() {
+        this.showPassword = !this.showPassword;
+        this.showPasswordButtonlabel = this.showPassword
+            ? translate('Show password')
+            : translate('Hide password');
+        this.type = this.showPassword ? 'text' : 'password';
     }
 }
-AmplifyContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-container',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyContainer.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyCountryDialCode = class AmplifyCountryDialCode {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyCountryDialCode.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-country-dial-code',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']
-            },] }
-];
-AmplifyCountryDialCode.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyCountryDialCode = __decorate([
-    ProxyCmp({ inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] })
-], AmplifyCountryDialCode);
-let AmplifyEmailField = class AmplifyEmailField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyEmailField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-email-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyEmailField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyEmailField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyEmailField);
-let AmplifyFacebookButton = class AmplifyFacebookButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFacebookButton.decorators = [
+PasswordFieldComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-facebook-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['appId', 'handleAuthStateChange']
-            },] }
-];
-AmplifyFacebookButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFacebookButton = __decorate([
-    ProxyCmp({ inputs: ['appId', 'handleAuthStateChange'] })
-], AmplifyFacebookButton);
-let AmplifyFederatedButtons = class AmplifyFederatedButtons {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFederatedButtons.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-federated-buttons',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['authState', 'federated', 'handleAuthStateChange']
-            },] }
-];
-AmplifyFederatedButtons.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFederatedButtons = __decorate([
-    ProxyCmp({ inputs: ['authState', 'federated', 'handleAuthStateChange'] })
-], AmplifyFederatedButtons);
-let AmplifyFederatedSignIn = class AmplifyFederatedSignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFederatedSignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-federated-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['authState', 'federated']
-            },] }
-];
-AmplifyFederatedSignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFederatedSignIn = __decorate([
-    ProxyCmp({ inputs: ['authState', 'federated'] })
-], AmplifyFederatedSignIn);
-let AmplifyForgotPassword = class AmplifyForgotPassword {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyForgotPassword.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-forgot-password',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSend',
-                    'handleSubmit',
-                    'headerText',
-                    'sendButtonText',
-                    'submitButtonText',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifyForgotPassword.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyForgotPassword = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSend',
-            'handleSubmit',
-            'headerText',
-            'sendButtonText',
-            'submitButtonText',
-            'usernameAlias',
-        ],
-    })
-], AmplifyForgotPassword);
-let AmplifyFormField = class AmplifyFormField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFormField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-form-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'description',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'name',
-                    'placeholder',
-                    'required',
-                    'type',
-                    'value',
-                ]
-            },] }
-];
-AmplifyFormField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFormField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'description',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'name',
-            'placeholder',
-            'required',
-            'type',
-            'value',
-        ],
-    })
-], AmplifyFormField);
-let AmplifyFormSection = class AmplifyFormSection {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyFormSection.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-form-section',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'handleSubmit',
-                    'headerText',
-                    'loading',
-                    'secondaryFooterContent',
-                    'submitButtonText',
-                    'testDataPrefix',
-                ]
-            },] }
-];
-AmplifyFormSection.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyFormSection = __decorate([
-    ProxyCmp({
-        inputs: [
-            'handleSubmit',
-            'headerText',
-            'loading',
-            'secondaryFooterContent',
-            'submitButtonText',
-            'testDataPrefix',
-        ],
-    })
-], AmplifyFormSection);
-let AmplifyGoogleButton = class AmplifyGoogleButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyGoogleButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-google-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['clientId', 'handleAuthStateChange']
+                selector: 'amplify-password-field',
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
             },] }
 ];
-AmplifyGoogleButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyGoogleButton = __decorate([
-    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
-], AmplifyGoogleButton);
-let AmplifyGreetings = class AmplifyGreetings {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+PasswordFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    fieldId: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    labelHidden: [{ type: Input }]
 };
-AmplifyGreetings.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-greetings',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleAuthStateChange', 'logo', 'username']
-            },] }
-];
-AmplifyGreetings.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyGreetings = __decorate([
-    ProxyCmp({ inputs: ['handleAuthStateChange', 'logo', 'username'] })
-], AmplifyGreetings);
-class AmplifyHint {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class PhoneNumberFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.selectFieldId = `amplify-field-${nanoid(12)}`;
+        this.textFieldId = `amplify-field-${nanoid(12)}`;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.labelHidden = false;
+        this.display = 'contents';
+        this.countryDialCodes = countryDialCodes;
     }
 }
-AmplifyHint.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-hint',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyHint.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyIcon = class AmplifyIcon {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyIcon.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-icon',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['name']
-            },] }
-];
-AmplifyIcon.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyIcon = __decorate([
-    ProxyCmp({ inputs: ['name'] })
-], AmplifyIcon);
-let AmplifyIconButton = class AmplifyIconButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyIconButton.decorators = [
+PhoneNumberFieldComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-icon-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['autoShowTooltip', 'name', 'tooltip']
+                selector: 'amplify-phone-number-field',
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"textFieldId\">\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
             },] }
 ];
-AmplifyIconButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyIconButton = __decorate([
-    ProxyCmp({ inputs: ['autoShowTooltip', 'name', 'tooltip'] })
-], AmplifyIconButton);
-let AmplifyInput = class AmplifyInput {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyInput.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-input',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'description',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'inputProps',
-                    'name',
-                    'placeholder',
-                    'required',
-                    'type',
-                    'value',
-                ]
-            },] }
-];
-AmplifyInput.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyInput = __decorate([
-    ProxyCmp({
-        inputs: [
-            'description',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'inputProps',
-            'name',
-            'placeholder',
-            'required',
-            'type',
-            'value',
-        ],
-    })
-], AmplifyInput);
-let AmplifyLabel = class AmplifyLabel {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyLabel.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-label',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['htmlFor']
-            },] }
-];
-AmplifyLabel.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyLabel = __decorate([
-    ProxyCmp({ inputs: ['htmlFor'] })
-], AmplifyLabel);
-let AmplifyLink = class AmplifyLink {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+PhoneNumberFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    defaultCountryCode: [{ type: Input }],
+    selectFieldId: [{ type: Input }],
+    textFieldId: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }],
+    labelHidden: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
-AmplifyLink.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-link',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['role']
-            },] }
-];
-AmplifyLink.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyLink = __decorate([
-    ProxyCmp({ inputs: ['role'] })
-], AmplifyLink);
-class AmplifyLoadingSpinner {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-}
-AmplifyLoadingSpinner.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-loading-spinner',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyLoadingSpinner.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-class AmplifyNav {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+
+class SelectComponent {
 }
-AmplifyNav.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-nav',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyNav.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyOauthButton = class AmplifyOauthButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyOauthButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-oauth-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['config']
-            },] }
-];
-AmplifyOauthButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyOauthButton = __decorate([
-    ProxyCmp({ inputs: ['config'] })
-], AmplifyOauthButton);
-let AmplifyPasswordField = class AmplifyPasswordField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPasswordField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-password-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyPasswordField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPasswordField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyPasswordField);
-let AmplifyPhoneField = class AmplifyPhoneField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPhoneField.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-phone-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'dialCode',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
-            },] }
-];
-AmplifyPhoneField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPhoneField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'dialCode',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyPhoneField);
-let AmplifyPhotoPicker = class AmplifyPhotoPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPhotoPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-photo-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'buttonText',
-                    'handleClick',
-                    'headerHint',
-                    'headerTitle',
-                    'placeholderHint',
-                    'previewSrc',
-                ]
-            },] }
-];
-AmplifyPhotoPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPhotoPicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'buttonText',
-            'handleClick',
-            'headerHint',
-            'headerTitle',
-            'placeholderHint',
-            'previewSrc',
-        ],
-    })
-], AmplifyPhotoPicker);
-let AmplifyPicker = class AmplifyPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['acceptValue', 'inputHandler', 'pickerText']
-            },] }
-];
-AmplifyPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyPicker = __decorate([
-    ProxyCmp({ inputs: ['acceptValue', 'inputHandler', 'pickerText'] })
-], AmplifyPicker);
-let AmplifyRadioButton = class AmplifyRadioButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyRadioButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-radio-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'checked',
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'inputProps',
-                    'label',
-                    'name',
-                    'placeholder',
-                    'value',
-                ]
-            },] }
-];
-AmplifyRadioButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyRadioButton = __decorate([
-    ProxyCmp({
-        inputs: [
-            'checked',
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'inputProps',
-            'label',
-            'name',
-            'placeholder',
-            'value',
-        ],
-    })
-], AmplifyRadioButton);
-let AmplifyRequireNewPassword = class AmplifyRequireNewPassword {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyRequireNewPassword.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-require-new-password',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'submitButtonText',
-                    'user',
-                ]
-            },] }
-];
-AmplifyRequireNewPassword.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyRequireNewPassword = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'submitButtonText',
-            'user',
-        ],
-    })
-], AmplifyRequireNewPassword);
-let AmplifyS3Album = class AmplifyS3Album {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Album.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-album',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'contentType',
-                    'fileToKey',
-                    'filter',
-                    'handleOnError',
-                    'handleOnLoad',
-                    'identityId',
-                    'level',
-                    'path',
-                    'picker',
-                    'pickerText',
-                    'sort',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3Album.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Album = __decorate([
-    ProxyCmp({
-        inputs: [
-            'contentType',
-            'fileToKey',
-            'filter',
-            'handleOnError',
-            'handleOnLoad',
-            'identityId',
-            'level',
-            'path',
-            'picker',
-            'pickerText',
-            'sort',
-            'track',
-        ],
-    })
-], AmplifyS3Album);
-let AmplifyS3Image = class AmplifyS3Image {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Image.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-image',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'alt',
-                    'body',
-                    'contentType',
-                    'handleOnError',
-                    'handleOnLoad',
-                    'identityId',
-                    'imgKey',
-                    'imgProps',
-                    'level',
-                    'path',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3Image.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Image = __decorate([
-    ProxyCmp({
-        inputs: [
-            'alt',
-            'body',
-            'contentType',
-            'handleOnError',
-            'handleOnLoad',
-            'identityId',
-            'imgKey',
-            'imgProps',
-            'level',
-            'path',
-            'track',
-        ],
-    })
-], AmplifyS3Image);
-let AmplifyS3ImagePicker = class AmplifyS3ImagePicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3ImagePicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-image-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'buttonText',
-                    'contentType',
-                    'fileToKey',
-                    'headerHint',
-                    'headerTitle',
-                    'identityId',
-                    'level',
-                    'path',
-                    'placeholderHint',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3ImagePicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3ImagePicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'buttonText',
-            'contentType',
-            'fileToKey',
-            'headerHint',
-            'headerTitle',
-            'identityId',
-            'level',
-            'path',
-            'placeholderHint',
-            'track',
-        ],
-    })
-], AmplifyS3ImagePicker);
-let AmplifyS3Text = class AmplifyS3Text {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyS3Text.decorators = [
+SelectComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-s3-text',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'body',
-                    'contentType',
-                    'fallbackText',
-                    'identityId',
-                    'level',
-                    'path',
-                    'textKey',
-                    'track',
-                ]
+                selector: 'amplify-form-select',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
             },] }
 ];
-AmplifyS3Text.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3Text = __decorate([
-    ProxyCmp({
-        inputs: [
-            'body',
-            'contentType',
-            'fallbackText',
-            'identityId',
-            'level',
-            'path',
-            'textKey',
-            'track',
-        ],
-    })
-], AmplifyS3Text);
-let AmplifyS3TextPicker = class AmplifyS3TextPicker {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+SelectComponent.propDecorators = {
+    items: [{ type: Input }],
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    id: [{ type: Input }],
+    defaultValue: [{ type: Input }]
 };
-AmplifyS3TextPicker.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-s3-text-picker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'contentType',
-                    'fallbackText',
-                    'fileToKey',
-                    'identityId',
-                    'level',
-                    'path',
-                    'track',
-                ]
-            },] }
-];
-AmplifyS3TextPicker.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyS3TextPicker = __decorate([
-    ProxyCmp({
-        inputs: [
-            'contentType',
-            'fallbackText',
-            'fileToKey',
-            'identityId',
-            'level',
-            'path',
-            'track',
-        ],
-    })
-], AmplifyS3TextPicker);
-let AmplifySection = class AmplifySection {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class TabItemComponent {
+    constructor() {
+        this.active = false;
     }
-};
-AmplifySection.decorators = [
+}
+TabItemComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-section',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['role']
+                selector: 'amplify-tab-item',
+                template: "<div\n  data-orientation=\"horizontal\"\n  role=\"tabpanel\"\n  [id]=\"id\"\n  [attr.aria-labelledby]=\"labelledById\"\n  [attr.data-state]=\"active ? 'active' : 'inactive'\"\n  [attr.tabindex]=\"tabIndex\"\n>\n  <ng-content *ngIf=\"active\"></ng-content>\n</div>\n"
             },] }
 ];
-AmplifySection.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySection = __decorate([
-    ProxyCmp({ inputs: ['role'] })
-], AmplifySection);
-let AmplifySelect = class AmplifySelect {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+TabItemComponent.propDecorators = {
+    title: [{ type: Input }],
+    active: [{ type: Input }],
+    id: [{ type: Input }],
+    labelledById: [{ type: Input }],
+    tabIndex: [{ type: Input }]
 };
-AmplifySelect.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-select',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['fieldId', 'handleInputChange', 'options', 'selected']
-            },] }
-];
-AmplifySelect.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySelect = __decorate([
-    ProxyCmp({ inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] })
-], AmplifySelect);
-let AmplifySelectMfaType = class AmplifySelectMfaType {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class TabsComponent {
+    constructor() {
+        this.tabChange = new EventEmitter();
     }
-};
-AmplifySelectMfaType.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-select-mfa-type',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['MFATypes', 'authData', 'handleSubmit']
-            },] }
-];
-AmplifySelectMfaType.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySelectMfaType = __decorate([
-    ProxyCmp({ inputs: ['MFATypes', 'authData', 'handleSubmit'] })
-], AmplifySelectMfaType);
-let AmplifySignIn = class AmplifySignIn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+    ngAfterContentInit() {
+        // assign ids
+        this.tabs.forEach((tab, index) => {
+            tab.id = `radix-id-${nanoid(12)}-1-content-${index}`;
+            tab.labelledById = `radix-id-${nanoid(12)}-1-trigger-${index}`;
+        });
+        // find active tab
+        // TODO(enhancement): more declarative way for choosing the initial tab to render
+        const activeTabs = this.tabs.filter((tab) => tab.active);
+        // set active tab
+        if (activeTabs.length !== 1) {
+            this.selectTab(this.tabs.first);
+        }
     }
-};
-AmplifySignIn.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-in',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'federated',
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSubmit',
-                    'headerText',
-                    'hideSignUp',
-                    'submitButtonText',
-                    'usernameAlias',
-                ]
-            },] }
-];
-AmplifySignIn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignIn = __decorate([
-    ProxyCmp({
-        inputs: [
-            'federated',
-            'formFields',
-            'handleAuthStateChange',
-            'handleSubmit',
-            'headerText',
-            'hideSignUp',
-            'submitButtonText',
-            'usernameAlias',
-        ],
-    })
-], AmplifySignIn);
-let AmplifySignInButton = class AmplifySignInButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+    selectTab(tab) {
+        this.tabs.forEach((tab) => {
+            tab.active = false;
+        });
+        tab.active = true;
     }
-};
-AmplifySignInButton.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-in-button',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['provider']
-            },] }
-];
-AmplifySignInButton.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignInButton = __decorate([
-    ProxyCmp({ inputs: ['provider'] })
-], AmplifySignInButton);
-let AmplifySignOut = class AmplifySignOut {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+    handleTabClick(tab) {
+        if (tab.active)
+            return; // don't do anything if clicks the current active tab
+        this.tabChange.emit();
+        this.selectTab(tab);
     }
-};
-AmplifySignOut.decorators = [
+}
+TabsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-sign-out',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['buttonText', 'handleAuthStateChange']
+                selector: 'amplify-tabs',
+                template: "<div\n  tabindex=\"0\"\n  aria-orientation=\"horizontal\"\n  data-orientation=\"horizontal\"\n  role=\"tablist\"\n  style=\"outline: none\"\n>\n  <div\n    class=\"amplify-flex amplify-tabs\"\n    data-indicator-position=\"top\"\n    style=\"gap: 0px; justify-content: center\"\n  >\n    <div\n      *ngFor=\"let tab of tabs\"\n      class=\"amplify-tabs-item\"\n      data-spacing=\"equal\"\n      data-orientation=\"horizontal\"\n      role=\"tab\"\n      [id]=\"tab.labelledById\"\n      [tabindex]=\"tab.active ? '0' : '1'\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"tab.id\"\n      [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n      (click)=\"handleTabClick(tab)\"\n    >\n      {{ tab.title }}\n    </div>\n  </div>\n</div>\n\n<ng-content></ng-content>\n"
             },] }
 ];
-AmplifySignOut.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignOut = __decorate([
-    ProxyCmp({ inputs: ['buttonText', 'handleAuthStateChange'] })
-], AmplifySignOut);
-let AmplifySignUp = class AmplifySignUp {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+TabsComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabItemComponent,] }],
+    tabChange: [{ type: Output }]
 };
-AmplifySignUp.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-sign-up',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'formFields',
-                    'handleAuthStateChange',
-                    'handleSignUp',
-                    'handleSubmit',
-                    'haveAccountText',
-                    'headerText',
-                    'signInText',
-                    'submitButtonText',
-                    'usernameAlias',
-                    'validationErrors',
-                ]
-            },] }
-];
-AmplifySignUp.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifySignUp = __decorate([
-    ProxyCmp({
-        inputs: [
-            'formFields',
-            'handleAuthStateChange',
-            'handleSignUp',
-            'handleSubmit',
-            'haveAccountText',
-            'headerText',
-            'signInText',
-            'submitButtonText',
-            'usernameAlias',
-            'validationErrors',
-        ],
-    })
-], AmplifySignUp);
-class AmplifyStrike {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class TextFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.fieldId = `amplify-field-${nanoid(12)}`;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.labelHidden = false;
+        this.display = 'contents';
     }
 }
-AmplifyStrike.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-strike',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>'
-            },] }
-];
-AmplifyStrike.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-let AmplifyToast = class AmplifyToast {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-AmplifyToast.decorators = [
+TextFieldComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-toast',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleClose', 'message']
+                selector: 'amplify-text-field',
+                template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\n  [type]=\"type\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [required]=\"required\"\n  [value]=\"initialValue\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [autocomplete]=\"autocomplete\"\n/>\n"
             },] }
 ];
-AmplifyToast.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyToast = __decorate([
-    ProxyCmp({ inputs: ['handleClose', 'message'] })
-], AmplifyToast);
-let AmplifyTooltip = class AmplifyTooltip {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+TextFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    fieldId: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }],
+    labelHidden: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
-AmplifyTooltip.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-tooltip',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['shouldAutoShow', 'text']
-            },] }
-];
-AmplifyTooltip.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyTooltip = __decorate([
-    ProxyCmp({ inputs: ['shouldAutoShow', 'text'] })
-], AmplifyTooltip);
-let AmplifyTotpSetup = class AmplifyTotpSetup {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+
+class AmplifySlotComponent {
+    constructor(propService) {
+        this.propService = propService;
+        this.display = 'contents';
+        this.isOverriden = false;
     }
-};
-AmplifyTotpSetup.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-totp-setup',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'handleAuthStateChange',
-                    'handleComplete',
-                    'headerText',
-                    'issuer',
-                    'standalone',
-                    'user',
-                ]
-            },] }
-];
-AmplifyTotpSetup.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyTotpSetup = __decorate([
-    ProxyCmp({
-        inputs: [
-            'handleAuthStateChange',
-            'handleComplete',
-            'headerText',
-            'issuer',
-            'standalone',
-            'user',
-        ],
-    })
-], AmplifyTotpSetup);
-let AmplifyUsernameField = class AmplifyUsernameField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+    ngAfterContentInit() {
+        const customComponents = this.propService.customComponents;
+        const overridingComponent = customComponents[this.name];
+        if (overridingComponent) {
+            this.overridingComponent = overridingComponent;
+            this.isOverriden = true;
+        }
     }
-};
-AmplifyUsernameField.decorators = [
+}
+AmplifySlotComponent.decorators = [
     { type: Component, args: [{
-                selector: 'amplify-username-field',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: [
-                    'disabled',
-                    'fieldId',
-                    'handleInputChange',
-                    'hint',
-                    'inputProps',
-                    'label',
-                    'placeholder',
-                    'required',
-                    'value',
-                ]
+                selector: 'amplify-slot',
+                template: "<!-- \n  if slot isn't overwritten, we display the the default coponent, which is the \n  children passed onto this component.\n-->\n<ng-content *ngIf=\"!isOverriden\"></ng-content>\n\n<!-- If slot is overwritten, we render that instead. -->\n<ng-container\n  *ngIf=\"isOverriden\"\n  [ngTemplateOutlet]=\"overridingComponent\"\n  [ngTemplateOutletContext]=\"context\"\n></ng-container>\n"
             },] }
 ];
-AmplifyUsernameField.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
+AmplifySlotComponent.ctorParameters = () => [
+    { type: CustomComponentsService }
 ];
-AmplifyUsernameField = __decorate([
-    ProxyCmp({
-        inputs: [
-            'disabled',
-            'fieldId',
-            'handleInputChange',
-            'hint',
-            'inputProps',
-            'label',
-            'placeholder',
-            'required',
-            'value',
-        ],
-    })
-], AmplifyUsernameField);
-let AmplifyVerifyContact = class AmplifyVerifyContact {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
+AmplifySlotComponent.propDecorators = {
+    name: [{ type: Input }],
+    context: [{ type: Input }],
+    display: [{ type: HostBinding, args: ['style.display',] }]
 };
-AmplifyVerifyContact.decorators = [
-    { type: Component, args: [{
-                selector: 'amplify-verify-contact',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: '<ng-content></ng-content>',
-                inputs: ['handleAuthStateChange', 'user']
-            },] }
-];
-AmplifyVerifyContact.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: NgZone }
-];
-AmplifyVerifyContact = __decorate([
-    ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
-], AmplifyVerifyContact);
 
-customElements.define('amplify-button', AmplifyButton$1);
-customElements.define('amplify-input', AmplifyInput$1);
-customElements.define('amplify-toast', AmplifyToast$1);
-customElements.define('amplify-chatbot', AmplifyChatbot$1);
-customElements.define('amplify-s3-album', AmplifyS3Album$1);
-customElements.define('amplify-s3-image-picker', AmplifyS3ImagePicker$1);
-customElements.define('amplify-s3-text', AmplifyS3Text$1);
-customElements.define('amplify-s3-text-picker', AmplifyS3TextPicker$1);
-customElements.define('amplify-s3-image', AmplifyS3Image$1);
-customElements.define('amplify-picker', AmplifyPicker$1);
-customElements.define('amplify-photo-picker', AmplifyPhotoPicker$1);
-class UiAngularModule {
+class AmplifyAuthenticatorModule {
 }
-UiAngularModule.decorators = [
+AmplifyAuthenticatorModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    AmplifyChatbot,
-                    AmplifyToast,
-                    AmplifyInput,
-                    AmplifyButton,
-                    AmplifyS3Album,
-                    AmplifyS3ImagePicker,
-                    AmplifyS3Text,
-                    AmplifyS3TextPicker,
-                    AmplifyS3Image,
-                    AmplifyPicker,
-                    AmplifyPhotoPicker,
-                    AmplifyAuthenticatorComponent,
-                    AmplifySignInComponent,
-                    AmplifySignUpComponent,
-                    AmplifyInputComponent,
-                    AmplifyErrorComponent,
-                    AmplifyOverrideDirective,
-                    AmplifyConfirmSignUpComponent,
-                    AmplifyUserNameAliasComponent,
-                    AmplifyConfirmSignInComponent,
-                    AmplifySetupTotpComponent,
-                    AmplifyForceNewPasswordComponent,
-                    AmplifyFederatedSignInComponent,
-                    AmplifyFederatedSignInButtonComponent,
-                    AmplifyResetPasswordComponent,
-                    AmplifyVerifyUserComponent,
+                    AmplifySlotComponent,
+                    AmplifySlotDirective,
+                    AuthenticatorComponent,
+                    ButtonComponent,
+                    CheckboxComponent,
                     ConfirmResetPasswordComponent,
+                    ConfirmSignInComponent,
+                    ConfirmSignUpComponent,
                     ConfirmVerifyUserComponent,
-                    AmplifySelectComponent,
+                    ErrorComponent,
+                    FederatedSignInButtonComponent,
+                    FederatedSignInComponent,
+                    ForceNewPasswordComponent,
+                    FormFieldComponent,
+                    PasswordFieldComponent,
+                    PhoneNumberFieldComponent,
+                    ResetPasswordComponent,
+                    SelectComponent,
+                    SetupTotpComponent,
+                    SignInComponent,
+                    SignUpComponent,
+                    SignUpFormFieldsComponent,
+                    TabItemComponent,
+                    TabsComponent,
+                    TextFieldComponent,
+                    UserNameAliasComponent,
+                    VerifyUserComponent,
                 ],
-                imports: [CommonModule],
+                imports: [CommonModule, BrowserModule],
                 exports: [
-                    AmplifyChatbot,
-                    AmplifyToast,
-                    AmplifyInput,
-                    AmplifyButton,
-                    AmplifyS3Album,
-                    AmplifyS3ImagePicker,
-                    AmplifyS3Text,
-                    AmplifyS3TextPicker,
-                    AmplifyS3Image,
-                    AmplifyPicker,
-                    AmplifyPhotoPicker,
-                    AmplifyAuthenticatorComponent,
-                    AmplifySignInComponent,
-                    AmplifyInputComponent,
-                    AmplifyErrorComponent,
-                    AmplifyOverrideDirective,
+                    AmplifySlotDirective,
+                    AuthenticatorComponent,
+                    CheckboxComponent,
+                    SignUpFormFieldsComponent,
+                    TextFieldComponent,
                 ],
-                schemas: [CUSTOM_ELEMENTS_SCHEMA],
             },] }
 ];
 
@@ -2985,5 +1249,5 @@ UiAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AmplifyAuthenticatorModule, AmplifySlotDirective, AuthenticatorComponent, AuthenticatorService, ButtonComponent, CheckboxComponent, ConfirmResetPasswordComponent, ConfirmSignInComponent, ConfirmSignUpComponent, ConfirmVerifyUserComponent, CustomComponentsService, ErrorComponent, FederatedSignInButtonComponent, FederatedSignInComponent, ForceNewPasswordComponent, FormFieldComponent, PasswordFieldComponent, PhoneNumberFieldComponent, ResetPasswordComponent, SelectComponent, SetupTotpComponent, SignInComponent, SignUpComponent, SignUpFormFieldsComponent, TabItemComponent, TabsComponent, TextFieldComponent, UserNameAliasComponent, VerifyUserComponent, getAttributeMap, AmplifySlotComponent as ɵa, AuthenticatorComponent as ɵb, ButtonComponent as ɵc, CheckboxComponent as ɵd, ConfirmResetPasswordComponent as ɵe, ConfirmSignInComponent as ɵf, ConfirmSignUpComponent as ɵg, ConfirmVerifyUserComponent as ɵh, ErrorComponent as ɵi, FederatedSignInButtonComponent as ɵj, FederatedSignInComponent as ɵk, ForceNewPasswordComponent as ɵl, FormFieldComponent as ɵm, PasswordFieldComponent as ɵn, PhoneNumberFieldComponent as ɵo, ResetPasswordComponent as ɵp, SelectComponent as ɵq, SetupTotpComponent as ɵr, SignInComponent as ɵs, SignUpComponent as ɵt, SignUpFormFieldsComponent as ɵu, TabItemComponent as ɵv, TabsComponent as ɵw, TextFieldComponent as ɵx, UserNameAliasComponent as ɵy, VerifyUserComponent as ɵz };
 //# sourceMappingURL=aws-amplify-ui-angular.js.map