@aws-amplify/ui-angular 0.0.0-next-poc-202198192630

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

@@ -0,0 +1,3818 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('aws-amplify'), require('xstate'), require('qrcode'), require('lodash'), require('nanoid'), require('rxjs'), require('@aws-amplify/ui-components/dist/components')) :
+    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', 'aws-amplify', 'xstate', 'qrcode', 'lodash', 'nanoid', 'rxjs', '@aws-amplify/ui-components/dist/components'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["aws-amplify"] = global["aws-amplify"] || {}, global["aws-amplify"]["ui-angular"] = {}), global.ng.core, global.ng.common, global.ui, global["aws-amplify"], global.xstate, global.QRCode, global.lodash, global.nanoid, global.rxjs, global.components));
+})(this, (function (exports, i0, common, ui, awsAmplify, xstate, QRCode, lodash, nanoid, rxjs, components) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
+
+    var AmplifySlotDirective = /** @class */ (function () {
+        function AmplifySlotDirective(template) {
+            this.template = template;
+        }
+        Object.defineProperty(AmplifySlotDirective.prototype, "amplifySlot", {
+            set: function (component) {
+                this.name = component;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AmplifySlotDirective;
+    }());
+    AmplifySlotDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[amplifySlot]',
+                },] }
+    ];
+    AmplifySlotDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+    AmplifySlotDirective.propDecorators = {
+        amplifySlot: [{ type: i0.Input }]
+    };
+
+    var AuthPropService = /** @class */ (function () {
+        function AuthPropService() {
+            this._customComponents = {};
+            this._props = {};
+        }
+        Object.defineProperty(AuthPropService.prototype, "customComponents", {
+            get: function () {
+                return this._customComponents;
+            },
+            set: function (customComponents) {
+                this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AuthPropService.prototype, "props", {
+            get: function () {
+                return this._props;
+            },
+            set: function (props) {
+                this._props = Object.assign(Object.assign({}, this._props), props);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AuthPropService;
+    }());
+    AuthPropService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
+    AuthPropService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    AuthPropService.ctorParameters = function () { return []; };
+
+    /**
+     * AmplifyContextService contains access to the xstate machine
+     * and custom components passed by the user.
+     */
+    var StateMachineService = /** @class */ (function () {
+        function StateMachineService() {
+        }
+        StateMachineService.prototype.startMachine = function (_a) {
+            var _this = this;
+            var initialState = _a.initialState, loginMechanisms = _a.loginMechanisms;
+            var machine = ui.createAuthenticatorMachine({
+                initialState: initialState,
+                loginMechanisms: loginMechanisms,
+            });
+            var authService = xstate.interpret(machine, {
+                devTools: process.env.NODE_ENV === 'development',
+            })
+                .onTransition(function (state) {
+                _this._user = state.context.user;
+                _this._authState = state;
+            })
+                .start();
+            this._services = ui.getSendEventAliases(authService.send);
+            this._authService = authService;
+        };
+        Object.defineProperty(StateMachineService.prototype, "services", {
+            get: function () {
+                return this._services;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StateMachineService.prototype, "authState", {
+            get: function () {
+                return this._authState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StateMachineService.prototype, "authService", {
+            get: function () {
+                return this._authService;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StateMachineService.prototype, "user", {
+            get: function () {
+                return this._user;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StateMachineService.prototype, "context", {
+            get: function () {
+                return this._authState.context;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StateMachineService.prototype.send = function (event) {
+            this.authService.send(event);
+        };
+        return StateMachineService;
+    }());
+    StateMachineService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StateMachineService_Factory() { return new StateMachineService(); }, token: StateMachineService, providedIn: "root" });
+    StateMachineService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+
+    var AmplifyAuthenticatorComponent = /** @class */ (function () {
+        function AmplifyAuthenticatorComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.customComponentQuery = null;
+            this.customComponents = {};
+            // translated texts
+            this.signInTitle = ui.translate('Sign In');
+            this.signUpTitle = ui.translate('Create Account');
+        }
+        AmplifyAuthenticatorComponent.prototype.ngOnInit = function () {
+            awsAmplify.I18n.putVocabularies(ui.translations);
+            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms;
+            this.stateMachine.startMachine({ initialState: initialState, loginMechanisms: loginMechanisms });
+            /**
+             * handling translations after content init, because authenticator and its
+             * translations might be initialized before the main app's `ngOnInit` is run.
+             **/
+            this.signInTitle = ui.translate('Sign In');
+            this.signUpTitle = ui.translate('Create Account');
+        };
+        /**
+         * Lifecycle Methods
+         */
+        AmplifyAuthenticatorComponent.prototype.ngAfterContentInit = function () {
+            this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
+            this.customComponents = this.contextService.customComponents;
+        };
+        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "context", {
+            /**
+             * Class Functions
+             */
+            get: function () {
+                var signOut = this.stateMachine.services.signOut;
+                var user = this.stateMachine.user;
+                return { signOut: signOut, user: user };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "actorState", {
+            get: function () {
+                return ui.getActorState(this.stateMachine.authState);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AmplifyAuthenticatorComponent.prototype, "authenticatorState", {
+            get: function () {
+                return this.stateMachine.authState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyAuthenticatorComponent.prototype.onTabChange = function () {
+            var currentState = this.stateMachine.authState.value;
+            if (currentState === 'signIn') {
+                this.stateMachine.send('SIGN_UP');
+            }
+            else {
+                this.stateMachine.send('SIGN_IN');
+            }
+        };
+        AmplifyAuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
+            if (!componentQuery)
+                return {};
+            var customComponents = {};
+            componentQuery.forEach(function (component) {
+                customComponents[component.name] = component.template;
+            });
+            return customComponents;
+        };
+        return AmplifyAuthenticatorComponent;
+    }());
+    AmplifyAuthenticatorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-authenticator',
+                    template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <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<div data-amplify-authenticator>\n  <div data-amplify-modal></div>\n\n  <div data-amplify-container>\n    <amplify-tabs\n      (tabChange)=\"onTabChange()\"\n      *ngIf=\"actorState?.matches('signIn') || actorState?.matches('signUp')\"\n    >\n      <amplify-tab-item\n        [title]=\"signInTitle\"\n        [active]=\"actorState?.matches('signIn')\"\n      >\n        <!-- signIn component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signIn')\"\n        ></ng-container>\n      </amplify-tab-item>\n      <amplify-tab-item\n        [title]=\"signUpTitle\"\n        [active]=\"actorState?.matches('signUp')\"\n      >\n        <!-- signUp component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signUp')\"\n        ></ng-container>\n      </amplify-tab-item>\n    </amplify-tabs>\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]=\"\n        customComponents.confirmVerifyUser || confirmVerifyUser\n      \"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n    >\n    </ng-container>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
+                    providers: [AuthPropService],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    AmplifyAuthenticatorComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyAuthenticatorComponent.propDecorators = {
+        initialState: [{ type: i0.Input }],
+        loginMechanisms: [{ type: i0.Input }],
+        customComponentQuery: [{ type: i0.ContentChildren, args: [AmplifySlotDirective,] }]
+    };
+
+    var logger$3 = new awsAmplify.Logger('ConfirmSignIn');
+    var AmplifyConfirmSignInComponent = /** @class */ (function () {
+        function AmplifyConfirmSignInComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            this.confirmText = ui.translate('Confirm');
+            this.backToSignInText = ui.translate('Back to Sign In');
+        }
+        AmplifyConfirmSignInComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) {
+                _this.onStateUpdate(state);
+            });
+            this.setHeaderText();
+        };
+        AmplifyConfirmSignInComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifyConfirmSignInComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        Object.defineProperty(AmplifyConfirmSignInComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
+                var remoteError = this.remoteError;
+                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyConfirmSignInComponent.prototype.setHeaderText = function () {
+            var state = this.stateMachine.authState;
+            var actorContext = ui.getActorContext(state);
+            var challengeName = actorContext.challengeName;
+            switch (challengeName) {
+                case ui.AuthChallengeNames.SOFTWARE_TOKEN_MFA:
+                    // TODO: this string should be centralized and translated from ui.
+                    this.headerText = ui.translate('Confirm TOTP Code');
+                    break;
+                case ui.AuthChallengeNames.SMS_MFA:
+                    this.headerText = ui.translate('Confirm SMS Code');
+                    break;
+                default:
+                    logger$3.error('Unexpected challengeName', challengeName);
+            }
+        };
+        AmplifyConfirmSignInComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('confirmSignIn.edit');
+        };
+        AmplifyConfirmSignInComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifyConfirmSignInComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            // TODO: handle form data within the state machine
+            var formData = new FormData(event.target);
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: Object.fromEntries(formData),
+            });
+        };
+        AmplifyConfirmSignInComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
+        return AmplifyConfirmSignInComponent;
+    }());
+    AmplifyConfirmSignInComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-sign-in',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\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      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignInButton || confirmSignInButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    AmplifyConfirmSignInComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyConfirmSignInComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+    };
+
+    var AmplifyConfirmSignUpComponent = /** @class */ (function () {
+        function AmplifyConfirmSignUpComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Confirm Sign Up');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated texts
+            this.resendCodeText = ui.translate('Resend Code');
+            this.lostCodeText = ui.translate('Lost your code? ');
+            this.confirmText = ui.translate('Confirm');
+        }
+        AmplifyConfirmSignUpComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // TODO: alias for subscribe
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        AmplifyConfirmSignUpComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifyConfirmSignUpComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        AmplifyConfirmSignUpComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('confirmSignUp.edit');
+        };
+        Object.defineProperty(AmplifyConfirmSignUpComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, resend = _a.resend, signIn = _a.signIn, submit = _a.submit;
+                var remoteError = this.remoteError;
+                var username = this.username;
+                return { change: change, remoteError: remoteError, resend: resend, signIn: signIn, submit: submit, username: username };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyConfirmSignUpComponent.prototype.resend = function () {
+            this.stateMachine.send({
+                type: 'RESEND',
+                data: {
+                    username: this.username,
+                },
+            });
+        };
+        AmplifyConfirmSignUpComponent.prototype.onInput = function ($event) {
+            $event.preventDefault();
+            var _a = $event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifyConfirmSignUpComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            var state = this.stateMachine.authState;
+            var actorContext = ui.getActorContext(state);
+            var formValues = actorContext.formValues;
+            var username = formValues.username, confirmation_code = formValues.confirmation_code;
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: { username: username, confirmation_code: confirmation_code },
+            });
+        };
+        return AmplifyConfirmSignUpComponent;
+    }());
+    AmplifyConfirmSignUpComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-sign-up',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignUpButton || confirmSignUpButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button amplify-button fontWeight=\"normal\" (click)=\"resend()\">\n        {{ resendCodeText }}\n      </button>\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  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    AmplifyConfirmSignUpComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyConfirmSignUpComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var AmplifyFederatedSignInButtonComponent = /** @class */ (function () {
+        function AmplifyFederatedSignInButtonComponent(stateMachine) {
+            var _this = this;
+            this.stateMachine = stateMachine;
+            this.onClick = function () {
+                _this.stateMachine.send({
+                    type: 'FEDERATED_SIGN_IN',
+                    data: { provider: _this.provider },
+                });
+            };
+        }
+        return AmplifyFederatedSignInButtonComponent;
+    }());
+    AmplifyFederatedSignInButtonComponent.decorators = [
+        { type: i0.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\"\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n"
+                },] }
+    ];
+    AmplifyFederatedSignInButtonComponent.ctorParameters = function () { return [
+        { type: StateMachineService }
+    ]; };
+    AmplifyFederatedSignInButtonComponent.propDecorators = {
+        provider: [{ type: i0.Input }],
+        text: [{ type: i0.Input }]
+    };
+
+    var AmplifyFederatedSignInComponent = /** @class */ (function () {
+        function AmplifyFederatedSignInComponent(stateMachine) {
+            this.stateMachine = stateMachine;
+            this.FederatedProviders = ui.FederatedIdentityProviders;
+            this.includeFacebook = false;
+            this.includeGoogle = false;
+            this.includeAmazon = false;
+            this.shouldShowFederatedSignIn = false;
+            // translated texts
+            this.signInFacebookText = ui.translate('Sign In with Facebook');
+            this.signInGoogleText = ui.translate('Sign In with Google');
+            this.signInAmazonText = ui.translate('Sign In with Amazon');
+        }
+        AmplifyFederatedSignInComponent.prototype.ngOnInit = function () {
+            var _a, _b;
+            var 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;
+        };
+        return AmplifyFederatedSignInComponent;
+    }());
+    AmplifyFederatedSignInComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-federated-sign-in',
+                    template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  style=\"flex-direction: column\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <hr\n    class=\"amplify-divider\"\n    aria-orientation=\"horizontal\"\n    data-size=\"small\"\n    style=\"margin: '1rem 0'\"\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  <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=\"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</div>\n"
+                },] }
+    ];
+    AmplifyFederatedSignInComponent.ctorParameters = function () { return [
+        { type: StateMachineService }
+    ]; };
+
+    var logger$2 = new awsAmplify.Logger('ForceNewPassword');
+    var AmplifyForceNewPasswordComponent = /** @class */ (function () {
+        function AmplifyForceNewPasswordComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Change Password');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated texts
+            this.changePasswordText = ui.translate('Change Password');
+            this.backToSignInText = ui.translate('Back to Sign In');
+        }
+        AmplifyForceNewPasswordComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        AmplifyForceNewPasswordComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifyForceNewPasswordComponent.prototype.ngOnDestroy = function () {
+            logger$2.log('sign in destroyed, unsubscribing from state machine...');
+            this.authSubscription.unsubscribe();
+        };
+        AmplifyForceNewPasswordComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = actorState.matches({
+                signUp: {
+                    submission: 'idle',
+                },
+            });
+        };
+        Object.defineProperty(AmplifyForceNewPasswordComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
+                var user = this.stateMachine.user;
+                var remoteError = this.remoteError;
+                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit, user: user };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyForceNewPasswordComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
+        AmplifyForceNewPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifyForceNewPasswordComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            // consider stateMachine directly providing actorState / actorContext
+            var state = this.stateMachine.authState;
+            var actorState = ui.getActorContext(state);
+            var formValues = actorState.formValues;
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: formValues,
+            });
+        };
+        return AmplifyForceNewPasswordComponent;
+    }());
+    AmplifyForceNewPasswordComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-force-new-password',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ changePasswordText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\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      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.forceNewPasswordSubmitButton ||\n          forceNewPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render force new password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    AmplifyForceNewPasswordComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyForceNewPasswordComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var AmplifyResetPasswordComponent = /** @class */ (function () {
+        function AmplifyResetPasswordComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Reset your password');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated texts
+            this.sendCodeText = ui.translate('Send Code');
+            this.backToSignInText = ui.translate('Back to Sign In');
+        }
+        AmplifyResetPasswordComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        AmplifyResetPasswordComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifyResetPasswordComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        AmplifyResetPasswordComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('resetPassword.edit');
+        };
+        Object.defineProperty(AmplifyResetPasswordComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
+                var remoteError = this.remoteError;
+                return { change: change, remoteError: remoteError, signIn: signIn, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyResetPasswordComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
+        AmplifyResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifyResetPasswordComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.stateMachine.send('SUBMIT');
+        };
+        return AmplifyResetPasswordComponent;
+    }());
+    AmplifyResetPasswordComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-reset-password',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n\n<ng-template #resetPasswordForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordSubmitButton ||\n          resetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    AmplifyResetPasswordComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyResetPasswordComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    var logger$1 = new awsAmplify.Logger('SetupTotp');
+    var AmplifySetupTotpComponent = /** @class */ (function () {
+        function AmplifySetupTotpComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            this.headerText = ui.translate('Setup TOTP');
+            this.qrCodeSource = '';
+            // translated texts
+            this.backToSignInText = ui.translate('Back to Sign In');
+            this.confirmText = ui.translate('Confirm');
+        }
+        AmplifySetupTotpComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) {
+                _this.onStateUpdate(state);
+            });
+            this.generateQRCode();
+        };
+        AmplifySetupTotpComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifySetupTotpComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        AmplifySetupTotpComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('setupTOTP.edit');
+        };
+        Object.defineProperty(AmplifySetupTotpComponent.prototype, "context", {
+            get: function () {
+                var _b = this.stateMachine.services, change = _b.change, submit = _b.submit;
+                var remoteError = this.remoteError;
+                var user = this.stateMachine.user;
+                return { change: change, remoteError: remoteError, submit: submit, user: user };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifySetupTotpComponent.prototype.generateQRCode = function () {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var state, actorContext, user, secretKey, issuer, totpCode, _b, err_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            state = this.stateMachine.authState;
+                            actorContext = ui.getActorContext(state);
+                            user = actorContext.user;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 4, , 5]);
+                            return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
+                        case 2:
+                            secretKey = _c.sent();
+                            issuer = 'AWSCognito';
+                            totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + secretKey + "&issuer=" + issuer;
+                            logger$1.info('totp code was generated:', totpCode);
+                            _b = this;
+                            return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
+                        case 3:
+                            _b.qrCodeSource = _c.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _c.sent();
+                            this.remoteError = (_a = err_1.message) !== null && _a !== void 0 ? _a : err_1;
+                            logger$1.error(err_1);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AmplifySetupTotpComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _b = event.target, name = _b.name, value = _b.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifySetupTotpComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            // TODO: handle form data within the state machine
+            var formData = new FormData(event.target);
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: Object.fromEntries(formData),
+            });
+        };
+        AmplifySetupTotpComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
+        return AmplifySetupTotpComponent;
+    }());
+    AmplifySetupTotpComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-setup-totp',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #setupTotpForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\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      <ng-container\n        [ngTemplateOutlet]=\"customComponents.setupTotpButton || setupTotpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    AmplifySetupTotpComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifySetupTotpComponent.propDecorators = {
+        customComponents: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+    };
+
+    var logger = new awsAmplify.Logger('SignIn');
+    var AmplifySignInComponent = /** @class */ (function () {
+        function AmplifySignInComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Sign in to your account');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated phrases
+            this.forgotPasswordText = ui.translate('Forgot your password? ');
+            this.signInButtonText = ui.translate('Sign in');
+            this.noAccountText = ui.translate('No account? ');
+        }
+        AmplifySignInComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        AmplifySignInComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifySignInComponent.prototype.ngOnDestroy = function () {
+            logger.log('sign in destroyed, unsubscribing from state machine...');
+            this.authSubscription.unsubscribe();
+        };
+        AmplifySignInComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('signIn.edit');
+        };
+        Object.defineProperty(AmplifySignInComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, resetPassword = _a.resetPassword, signUp = _a.signUp, submit = _a.submit;
+                var remoteError = this.remoteError;
+                return { change: change, remoteError: remoteError, resetPassword: resetPassword, signUp: signUp, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifySignInComponent.prototype.toResetPassword = function () {
+            this.stateMachine.send('RESET_PASSWORD');
+        };
+        AmplifySignInComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        AmplifySignInComponent.prototype.onSubmit = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    event.preventDefault();
+                    this.stateMachine.send({
+                        type: 'SUBMIT',
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return AmplifySignInComponent;
+    }());
+    AmplifySignInComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-in',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ signInButtonText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\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      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        size=\"small\"\n        variation=\"link\"\n        (click)=\"toResetPassword()\"\n      >\n        {{ forgotPasswordText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    AmplifySignInComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifySignInComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var AmplifySignUpComponent = /** @class */ (function () {
+        function AmplifySignUpComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Create a new account');
+            this.remoteError = '';
+            this.isPending = false;
+            this.primaryAlias = '';
+            this.secondaryAliases = [];
+            this.validationError = {};
+            // translated texts
+            this.createAccountText = ui.translate('Create Account');
+        }
+        Object.defineProperty(AmplifySignUpComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, signIn = _a.signIn, submit = _a.submit;
+                var remoteError = this.remoteError;
+                var validationError = this.validationError;
+                return {
+                    change: change,
+                    remoteError: remoteError,
+                    signIn: signIn,
+                    submit: submit,
+                    validationError: validationError,
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifySignUpComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+            var context = this.stateMachine.context;
+            var _a = ui.getConfiguredAliases(context), primaryAlias = _a.primaryAlias, secondaryAliases = _a.secondaryAliases;
+            /**
+             * If the login_mechanisms are configured to use ONLY username, we need
+             * to ask for some sort of secondary contact information in order to
+             * verify the user for Cognito. Currently matching this to how Vue is
+             * set up.
+             */
+            if (primaryAlias === 'username' && lodash.isEmpty(secondaryAliases)) {
+                secondaryAliases.push('email', 'phone_number');
+            }
+            this.primaryAlias = primaryAlias;
+            this.secondaryAliases = secondaryAliases;
+        };
+        AmplifySignUpComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifySignUpComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        AmplifySignUpComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            var actorContext = ui.getActorContext(state);
+            this.remoteError = actorContext.remoteError;
+            this.validationError = actorContext.validationError;
+            this.isPending = !actorState.matches({
+                signUp: {
+                    submission: 'idle',
+                },
+            });
+        };
+        AmplifySignUpComponent.prototype.onSubmit = function ($event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    $event.preventDefault();
+                    this.stateMachine.send('SUBMIT');
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AmplifySignUpComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        return AmplifySignUpComponent;
+    }());
+    AmplifySignUpComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-up',
+                    template: "<ng-template #signUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ createAccountText }}\n  </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-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"isPending\"\n  >\n    <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\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-field [name]=\"secondaryAlias\"></amplify-form-field>\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </fieldset>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n</ng-template>\n\n<div data-amplify-container>\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  </form>\n</div>\n"
+                },] }
+    ];
+    AmplifySignUpComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifySignUpComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var getAttributeMap = function () { return ui.authInputAttributes; };
+
+    var AmplifyVerifyUserComponent = /** @class */ (function () {
+        function AmplifyVerifyUserComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Account recovery requires verified contact information');
+            this.customComponents = {};
+            this.unverifiedAttributes = {};
+            this.remoteError = '';
+            this.isPending = false;
+            this.labelId = nanoid.nanoid(12);
+            // translated texts
+            this.skipText = ui.translate('Skip');
+            this.verifyText = ui.translate('Verify');
+        }
+        AmplifyVerifyUserComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        AmplifyVerifyUserComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        AmplifyVerifyUserComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        AmplifyVerifyUserComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.unverifiedAttributes = actorState.context.unverifiedAttributes;
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('verifyUser.edit');
+        };
+        Object.defineProperty(AmplifyVerifyUserComponent.prototype, "context", {
+            get: function () {
+                var _b = this.stateMachine.services, change = _b.change, skip = _b.skip, submit = _b.submit;
+                var remoteError = this.remoteError;
+                return { change: change, remoteError: remoteError, skip: skip, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyVerifyUserComponent.prototype.skipVerify = function () {
+            this.stateMachine.send('SKIP');
+        };
+        AmplifyVerifyUserComponent.prototype.getLabelForAttr = function (authAttr) {
+            var _a;
+            var attributeMap = getAttributeMap();
+            var label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+            return ui.translate(label);
+        };
+        AmplifyVerifyUserComponent.prototype.onSubmit = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var formData;
+                return __generator(this, function (_b) {
+                    event.preventDefault();
+                    formData = new FormData(event.target);
+                    this.stateMachine.send({
+                        type: 'SUBMIT',
+                        data: Object.fromEntries(formData),
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return AmplifyVerifyUserComponent;
+    }());
+    AmplifyVerifyUserComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-verify-user',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ verifyText }}\n  </button>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n\n      <div *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\">\n        <!-- TODO: match React implementation -->\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      <ng-container\n        [ngTemplateOutlet]=\"customComponents.verifyButton || verifyButton\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    AmplifyVerifyUserComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    AmplifyVerifyUserComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var ConfirmResetPasswordComponent = /** @class */ (function () {
+        function ConfirmResetPasswordComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Reset your password');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated strings
+            this.sendCodeText = ui.translate('Send Code');
+            this.backToSignInText = ui.translate('Back to Sign In');
+            this.lostCodeText = ui.translate('Lost your code? ');
+            this.resendCodeText = ui.translate('Resend Code');
+        }
+        ConfirmResetPasswordComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        ConfirmResetPasswordComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        ConfirmResetPasswordComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        ConfirmResetPasswordComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('confirmResetPassword.edit');
+        };
+        Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, change = _a.change, resend = _a.resend, signIn = _a.signIn, submit = _a.submit;
+                var remoteError = this.remoteError;
+                return { change: change, resend: resend, remoteError: remoteError, signIn: signIn, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmResetPasswordComponent.prototype.toSignIn = function () {
+            this.stateMachine.send('SIGN_IN');
+        };
+        ConfirmResetPasswordComponent.prototype.resend = function () {
+            this.stateMachine.send('RESEND');
+        };
+        ConfirmResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: name, value: value },
+            });
+        };
+        ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    event.preventDefault();
+                    this.stateMachine.send('SUBMIT');
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return ConfirmResetPasswordComponent;
+    }());
+    ConfirmResetPasswordComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-reset-password',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n<ng-template #confirmResetPasswordForm>\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]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\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\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordSubmitButton ||\n          confirmResetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        type=\"button\"\n        (click)=\"resend()\"\n      >\n        {{ resendCodeText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    ConfirmResetPasswordComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    ConfirmResetPasswordComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var ConfirmVerifyUserComponent = /** @class */ (function () {
+        function ConfirmVerifyUserComponent(stateMachine, contextService) {
+            this.stateMachine = stateMachine;
+            this.contextService = contextService;
+            this.dataAttr = '';
+            this.headerText = ui.translate('Account recovery requires verified contact information');
+            this.customComponents = {};
+            this.remoteError = '';
+            this.isPending = false;
+            // translated texts
+            this.skipText = ui.translate('Skip');
+            this.submitText = ui.translate('Submit');
+        }
+        ConfirmVerifyUserComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authSubscription = this.stateMachine.authService.subscribe(function (state) { return _this.onStateUpdate(state); });
+        };
+        ConfirmVerifyUserComponent.prototype.ngAfterContentInit = function () {
+            this.customComponents = this.contextService.customComponents;
+        };
+        ConfirmVerifyUserComponent.prototype.ngOnDestroy = function () {
+            this.authSubscription.unsubscribe();
+        };
+        ConfirmVerifyUserComponent.prototype.onStateUpdate = function (state) {
+            var actorState = ui.getActorState(state);
+            this.remoteError = actorState.context.remoteError;
+            this.isPending = !actorState.matches('confirmVerifyUser.edit');
+        };
+        Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
+            get: function () {
+                var _a = this.stateMachine.services, skip = _a.skip, submit = _a.submit;
+                var remoteError = this.remoteError;
+                return { remoteError: remoteError, skip: skip, submit: submit };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmVerifyUserComponent.prototype.skipVerify = function () {
+            this.stateMachine.send('SKIP');
+        };
+        ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var formData;
+                return __generator(this, function (_a) {
+                    event.preventDefault();
+                    formData = new FormData(event.target);
+                    this.stateMachine.send({
+                        type: 'SUBMIT',
+                        data: Object.fromEntries(formData),
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return ConfirmVerifyUserComponent;
+    }());
+    ConfirmVerifyUserComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-verify-user',
+                    template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmVerifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ submitText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmVerifyButton || confirmVerifyButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+                },] }
+    ];
+    ConfirmVerifyUserComponent.ctorParameters = function () { return [
+        { type: StateMachineService },
+        { type: AuthPropService }
+    ]; };
+    ConfirmVerifyUserComponent.propDecorators = {
+        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+        headerText: [{ type: i0.Input }]
+    };
+
+    var AmplifyButtonComponent = /** @class */ (function () {
+        function AmplifyButtonComponent() {
+            this.type = 'button';
+            this.fullWidth = false;
+            this.size = 'medium';
+            this.variation = 'default';
+            this.fontWeight = 'normal';
+            this.defaultClass = true;
+        }
+        AmplifyButtonComponent.prototype.ngOnInit = function () {
+            this.typeAttr = this.type;
+            this.fullWidthAttr = this.fullWidth;
+            this.sizeAttr = this.size;
+            this.variationAttr = this.variation;
+            this.fontWeightAttr = this.fontWeight;
+        };
+        return AmplifyButtonComponent;
+    }());
+    AmplifyButtonComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'button[amplify-button]',
+                    template: "<ng-content></ng-content>\n"
+                },] }
+    ];
+    AmplifyButtonComponent.propDecorators = {
+        type: [{ type: i0.Input }],
+        fullWidth: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
+        variation: [{ type: i0.Input }],
+        fontWeight: [{ type: i0.Input }],
+        typeAttr: [{ type: i0.HostBinding, args: ['type',] }],
+        fullWidthAttr: [{ type: i0.HostBinding, args: ['attr.data-fullwidth',] }],
+        sizeAttr: [{ type: i0.HostBinding, args: ['attr.data-size',] }],
+        variationAttr: [{ type: i0.HostBinding, args: ['attr.data-variation',] }],
+        defaultClass: [{ type: i0.HostBinding, args: ['class.amplify-button',] }],
+        fontWeightAttr: [{ type: i0.HostBinding, args: ['style.font-weight',] }]
+    };
+
+    var AmplifyErrorComponent = /** @class */ (function () {
+        function AmplifyErrorComponent() {
+        }
+        return AmplifyErrorComponent;
+    }());
+    AmplifyErrorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-error',
+                    template: "<span data-ui-error>\n  <ng-content></ng-content>\n</span>\n"
+                },] }
+    ];
+
+    /**
+     * Input interface opinionated for authenticator usage.
+     *
+     * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
+     * contains authenticator opinionated logic and 2) amplify-text-field primitive
+     * that does not make any auth-related inference.
+     */
+    var AmplifyFormFieldComponent = /** @class */ (function () {
+        function AmplifyFormFieldComponent(stateMachine) {
+            this.stateMachine = stateMachine;
+            this.required = true;
+            this.placeholder = '';
+            this.label = '';
+            this.initialValue = '';
+            this.disabled = false;
+            this.autocomplete = '';
+            this.countryDialCodes = ui.countryDialCodes;
+        }
+        AmplifyFormFieldComponent.prototype.ngOnInit = function () {
+            // TODO: field primtiives should have generate these by default.
+            this.textFieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.selectFieldId = "amplify-field-" + nanoid.nanoid(12);
+            // TODO: consider better default handling mechanisms across frameworks
+            if (this.isPhoneField()) {
+                var state = this.stateMachine.authState;
+                var country_code = ui.getActorContext(state).country_code;
+                this.defaultCountryCode = country_code;
+                // TODO: remove this side-effect
+                this.stateMachine.send({
+                    type: 'CHANGE',
+                    data: { name: 'country_code', value: country_code },
+                });
+            }
+        };
+        Object.defineProperty(AmplifyFormFieldComponent.prototype, "attributeMap", {
+            get: function () {
+                return getAttributeMap();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AmplifyFormFieldComponent.prototype, "error", {
+            get: function () {
+                var formContext = ui.getActorContext(this.stateMachine.authState);
+                var validationError = formContext.validationError;
+                return validationError[this.name];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AmplifyFormFieldComponent.prototype.inferLabel = function () {
+            var _a;
+            var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+            return ui.translate(label);
+        };
+        AmplifyFormFieldComponent.prototype.inferPlaceholder = function () {
+            var _a;
+            var placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+                this.inferLabel();
+            return ui.translate(placeholder);
+        };
+        // infers what the `type` of underlying input element should be.
+        AmplifyFormFieldComponent.prototype.inferType = function () {
+            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';
+        };
+        // TODO(enhancement): use enum to differentiate special field types
+        AmplifyFormFieldComponent.prototype.isPasswordField = function () {
+            return this.inferType() === 'password';
+        };
+        AmplifyFormFieldComponent.prototype.isPhoneField = function () {
+            return this.inferType() === 'tel';
+        };
+        return AmplifyFormFieldComponent;
+    }());
+    AmplifyFormFieldComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-form-field',
+                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column; gap: 0\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [selectFieldId]=\"selectFieldId\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [textFieldId]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [id]=\"textFieldId\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [id]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+                },] }
+    ];
+    AmplifyFormFieldComponent.ctorParameters = function () { return [
+        { type: StateMachineService }
+    ]; };
+    AmplifyFormFieldComponent.propDecorators = {
+        name: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }]
+    };
+
+    var AmplifyPasswordFieldComponent = /** @class */ (function () {
+        function AmplifyPasswordFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.type = 'password';
+            this.showPassword = false;
+            this.showPasswordButtonlabel = ui.translate('Show password');
+        }
+        AmplifyPasswordFieldComponent.prototype.togglePasswordText = function () {
+            this.showPassword = !this.showPassword;
+            this.showPasswordButtonlabel = this.showPassword
+                ? ui.translate('Show password')
+                : ui.translate('Hide password');
+            this.type = this.showPassword ? 'text' : 'password';
+        };
+        return AmplifyPasswordFieldComponent;
+    }());
+    AmplifyPasswordFieldComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-password-field',
+                    template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"id\"\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"
+                },] }
+    ];
+    AmplifyPasswordFieldComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        required: [{ type: i0.Input }]
+    };
+
+    var AmplifySelectComponent = /** @class */ (function () {
+        function AmplifySelectComponent() {
+        }
+        return AmplifySelectComponent;
+    }());
+    AmplifySelectComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-form-select',
+                    template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
+                },] }
+    ];
+    AmplifySelectComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        defaultValue: [{ type: i0.Input }]
+    };
+
+    var TabItemComponent = /** @class */ (function () {
+        function TabItemComponent() {
+            this.active = false;
+        }
+        return TabItemComponent;
+    }());
+    TabItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    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"
+                },] }
+    ];
+    TabItemComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        labelledById: [{ type: i0.Input }],
+        tabIndex: [{ type: i0.Input }]
+    };
+
+    var TabsComponent = /** @class */ (function () {
+        function TabsComponent() {
+            this.tabChange = new i0.EventEmitter();
+        }
+        TabsComponent.prototype.ngAfterContentInit = function () {
+            // assign ids
+            this.tabs.forEach(function (tab, index) {
+                tab.id = "radix-id-" + nanoid.nanoid(12) + "-1-content-" + index;
+                tab.labelledById = "radix-id-" + nanoid.nanoid(12) + "-1-trigger-" + index;
+            });
+            // find active tab
+            // TODO(enhancement): more declarative way for choosing the initial tab to render
+            var activeTabs = this.tabs.filter(function (tab) { return tab.active; });
+            // set active tab
+            if (activeTabs.length !== 1) {
+                this.selectTab(this.tabs.first);
+            }
+        };
+        TabsComponent.prototype.selectTab = function (tab) {
+            this.tabs.forEach(function (tab) {
+                tab.active = false;
+            });
+            tab.active = true;
+        };
+        TabsComponent.prototype.handleTabClick = function (tab) {
+            if (tab.active)
+                return; // don't do anything if clicks the current active tab
+            this.tabChange.emit();
+            this.selectTab(tab);
+        };
+        return TabsComponent;
+    }());
+    TabsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    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-grow=\"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"
+                },] }
+    ];
+    TabsComponent.propDecorators = {
+        tabs: [{ type: i0.ContentChildren, args: [TabItemComponent,] }],
+        tabChange: [{ type: i0.Output }]
+    };
+
+    var AmplifyTextFieldComponent = /** @class */ (function () {
+        function AmplifyTextFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+        }
+        return AmplifyTextFieldComponent;
+    }());
+    AmplifyTextFieldComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-text-field',
+                    template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"id\"\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"
+                },] }
+    ];
+    AmplifyTextFieldComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        type: [{ type: i0.Input }]
+    };
+
+    var AmplifyUserNameAliasComponent = /** @class */ (function () {
+        function AmplifyUserNameAliasComponent(stateMachine) {
+            this.stateMachine = stateMachine;
+            this.name = 'username';
+            this.disabled = false;
+            this.initialValue = '';
+            this.required = true;
+        }
+        AmplifyUserNameAliasComponent.prototype.ngOnInit = function () {
+            var context = this.stateMachine.context;
+            var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
+            this.label = label;
+            this.type = type;
+            this.placeholder = label;
+        };
+        return AmplifyUserNameAliasComponent;
+    }());
+    AmplifyUserNameAliasComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-user-name-alias',
+                    template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
+                },] }
+    ];
+    AmplifyUserNameAliasComponent.ctorParameters = function () { return [
+        { type: StateMachineService }
+    ]; };
+    AmplifyUserNameAliasComponent.propDecorators = {
+        name: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        required: [{ type: i0.Input }]
+    };
+
+    var proxyInputs = function (Cmp, inputs) {
+        var Prototype = Cmp.prototype;
+        inputs.forEach(function (item) {
+            Object.defineProperty(Prototype, item, {
+                get: function () {
+                    return this.el[item];
+                },
+                set: function (val) {
+                    var _this = this;
+                    this.z.runOutsideAngular(function () { return (_this.el[item] = val); });
+                },
+            });
+        });
+    };
+    var proxyMethods = function (Cmp, methods) {
+        var Prototype = Cmp.prototype;
+        methods.forEach(function (methodName) {
+            Prototype[methodName] = function () {
+                var _this = this;
+                var args = arguments;
+                return this.z.runOutsideAngular(function () { return _this.el[methodName].apply(_this.el, args); });
+            };
+        });
+    };
+    var proxyOutputs = function (instance, el, events) {
+        events.forEach(function (eventName) { return (instance[eventName] = rxjs.fromEvent(el, eventName)); });
+    };
+    // tslint:disable-next-line: only-arrow-functions
+    function ProxyCmp(opts) {
+        var decorator = function (cls) {
+            if (opts.inputs) {
+                proxyInputs(cls, opts.inputs);
+            }
+            if (opts.methods) {
+                proxyMethods(cls, opts.methods);
+            }
+            return cls;
+        };
+        return decorator;
+    }
+    var AmplifyAmazonButton = /** @class */ (function () {
+        function AmplifyAmazonButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyAmazonButton;
+    }());
+    AmplifyAmazonButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-amazon-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['clientId', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifyAmazonButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyAmazonButton = __decorate([
+        ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
+    ], AmplifyAmazonButton);
+    var AmplifyAuthContainer = /** @class */ (function () {
+        function AmplifyAuthContainer(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyAuthContainer;
+    }());
+    AmplifyAuthContainer.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-auth-container',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyAuthContainer.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    var AmplifyAuthFields = /** @class */ (function () {
+        function AmplifyAuthFields(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyAuthFields;
+    }());
+    AmplifyAuthFields.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-auth-fields',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['formFields']
+                },] }
+    ];
+    AmplifyAuthFields.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyAuthFields = __decorate([
+        ProxyCmp({ inputs: ['formFields'] })
+    ], AmplifyAuthFields);
+    var AmplifyAuth0Button = /** @class */ (function () {
+        function AmplifyAuth0Button(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyAuth0Button;
+    }());
+    AmplifyAuth0Button.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-auth0-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['config', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifyAuth0Button.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyAuth0Button = __decorate([
+        ProxyCmp({ inputs: ['config', 'handleAuthStateChange'] })
+    ], AmplifyAuth0Button);
+    var AmplifyAuthenticator = /** @class */ (function () {
+        function AmplifyAuthenticator(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyAuthenticator;
+    }());
+    AmplifyAuthenticator.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-authenticator',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'federated',
+                        'handleAuthStateChange',
+                        'hideToast',
+                        'initialAuthState',
+                        'usernameAlias',
+                    ]
+                },] }
+    ];
+    AmplifyAuthenticator.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyAuthenticator = __decorate([
+        ProxyCmp({
+            inputs: [
+                'federated',
+                'handleAuthStateChange',
+                'hideToast',
+                'initialAuthState',
+                'usernameAlias',
+            ],
+        })
+    ], AmplifyAuthenticator);
+    exports.AmplifyButton = /** @class */ (function () {
+        function AmplifyButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyButton;
+    }());
+    exports.AmplifyButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']
+                },] }
+    ];
+    exports.AmplifyButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyButton = __decorate([
+        ProxyCmp({
+            inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'],
+        })
+    ], exports.AmplifyButton);
+    exports.AmplifyChatbot = /** @class */ (function () {
+        function AmplifyChatbot(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+            proxyOutputs(this, this.el, ['chatCompleted']);
+        }
+        return AmplifyChatbot;
+    }());
+    exports.AmplifyChatbot.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-chatbot',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'botName',
+                        'botTitle',
+                        'clearOnComplete',
+                        'conversationModeOn',
+                        'silenceThreshold',
+                        'silenceTime',
+                        'textEnabled',
+                        'voiceEnabled',
+                        'welcomeMessage',
+                    ]
+                },] }
+    ];
+    exports.AmplifyChatbot.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyChatbot = __decorate([
+        ProxyCmp({
+            inputs: [
+                'botName',
+                'botTitle',
+                'clearOnComplete',
+                'conversationModeOn',
+                'silenceThreshold',
+                'silenceTime',
+                'textEnabled',
+                'voiceEnabled',
+                'welcomeMessage',
+            ],
+        })
+    ], exports.AmplifyChatbot);
+    var AmplifyCheckbox = /** @class */ (function () {
+        function AmplifyCheckbox(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyCheckbox;
+    }());
+    AmplifyCheckbox.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-checkbox',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']
+                },] }
+    ];
+    AmplifyCheckbox.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyCheckbox = __decorate([
+        ProxyCmp({
+            inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'],
+        })
+    ], AmplifyCheckbox);
+    var AmplifyCodeField = /** @class */ (function () {
+        function AmplifyCodeField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyCodeField;
+    }());
+    AmplifyCodeField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-code-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'placeholder',
+                        'required',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyCodeField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyCodeField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'placeholder',
+                'required',
+                'value',
+            ],
+        })
+    ], AmplifyCodeField);
+    var AmplifyConfirmSignIn = /** @class */ (function () {
+        function AmplifyConfirmSignIn(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyConfirmSignIn;
+    }());
+    AmplifyConfirmSignIn.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-sign-in',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSubmit',
+                        'headerText',
+                        'submitButtonText',
+                        'user',
+                    ]
+                },] }
+    ];
+    AmplifyConfirmSignIn.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyConfirmSignIn = __decorate([
+        ProxyCmp({
+            inputs: [
+                'formFields',
+                'handleAuthStateChange',
+                'handleSubmit',
+                'headerText',
+                'submitButtonText',
+                'user',
+            ],
+        })
+    ], AmplifyConfirmSignIn);
+    var AmplifyConfirmSignUp = /** @class */ (function () {
+        function AmplifyConfirmSignUp(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyConfirmSignUp;
+    }());
+    AmplifyConfirmSignUp.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-confirm-sign-up',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSubmit',
+                        'headerText',
+                        'submitButtonText',
+                        'user',
+                        'usernameAlias',
+                    ]
+                },] }
+    ];
+    AmplifyConfirmSignUp.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyConfirmSignUp = __decorate([
+        ProxyCmp({
+            inputs: [
+                'formFields',
+                'handleAuthStateChange',
+                'handleSubmit',
+                'headerText',
+                'submitButtonText',
+                'user',
+                'usernameAlias',
+            ],
+        })
+    ], AmplifyConfirmSignUp);
+    var AmplifyContainer = /** @class */ (function () {
+        function AmplifyContainer(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyContainer;
+    }());
+    AmplifyContainer.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-container',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyContainer.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    var AmplifyCountryDialCode = /** @class */ (function () {
+        function AmplifyCountryDialCode(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyCountryDialCode;
+    }());
+    AmplifyCountryDialCode.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-country-dial-code',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']
+                },] }
+    ];
+    AmplifyCountryDialCode.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyCountryDialCode = __decorate([
+        ProxyCmp({ inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] })
+    ], AmplifyCountryDialCode);
+    var AmplifyEmailField = /** @class */ (function () {
+        function AmplifyEmailField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyEmailField;
+    }());
+    AmplifyEmailField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-email-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'placeholder',
+                        'required',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyEmailField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyEmailField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'placeholder',
+                'required',
+                'value',
+            ],
+        })
+    ], AmplifyEmailField);
+    var AmplifyFacebookButton = /** @class */ (function () {
+        function AmplifyFacebookButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyFacebookButton;
+    }());
+    AmplifyFacebookButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-facebook-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['appId', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifyFacebookButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyFacebookButton = __decorate([
+        ProxyCmp({ inputs: ['appId', 'handleAuthStateChange'] })
+    ], AmplifyFacebookButton);
+    var AmplifyFederatedButtons = /** @class */ (function () {
+        function AmplifyFederatedButtons(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyFederatedButtons;
+    }());
+    AmplifyFederatedButtons.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-federated-buttons',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['authState', 'federated', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifyFederatedButtons.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyFederatedButtons = __decorate([
+        ProxyCmp({ inputs: ['authState', 'federated', 'handleAuthStateChange'] })
+    ], AmplifyFederatedButtons);
+    var AmplifyFederatedSignIn = /** @class */ (function () {
+        function AmplifyFederatedSignIn(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyFederatedSignIn;
+    }());
+    AmplifyFederatedSignIn.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-federated-sign-in',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['authState', 'federated']
+                },] }
+    ];
+    AmplifyFederatedSignIn.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyFederatedSignIn = __decorate([
+        ProxyCmp({ inputs: ['authState', 'federated'] })
+    ], AmplifyFederatedSignIn);
+    var AmplifyForgotPassword = /** @class */ (function () {
+        function AmplifyForgotPassword(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyForgotPassword;
+    }());
+    AmplifyForgotPassword.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-forgot-password',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSend',
+                        'handleSubmit',
+                        'headerText',
+                        'sendButtonText',
+                        'submitButtonText',
+                        'usernameAlias',
+                    ]
+                },] }
+    ];
+    AmplifyForgotPassword.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyForgotPassword = __decorate([
+        ProxyCmp({
+            inputs: [
+                'formFields',
+                'handleAuthStateChange',
+                'handleSend',
+                'handleSubmit',
+                'headerText',
+                'sendButtonText',
+                'submitButtonText',
+                'usernameAlias',
+            ],
+        })
+    ], AmplifyForgotPassword);
+    var AmplifyFormField = /** @class */ (function () {
+        function AmplifyFormField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyFormField;
+    }());
+    AmplifyFormField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-form-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'description',
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'name',
+                        'placeholder',
+                        'required',
+                        'type',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyFormField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyFormField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'description',
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'name',
+                'placeholder',
+                'required',
+                'type',
+                'value',
+            ],
+        })
+    ], AmplifyFormField);
+    var AmplifyFormSection = /** @class */ (function () {
+        function AmplifyFormSection(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyFormSection;
+    }());
+    AmplifyFormSection.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-form-section',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'handleSubmit',
+                        'headerText',
+                        'loading',
+                        'secondaryFooterContent',
+                        'submitButtonText',
+                        'testDataPrefix',
+                    ]
+                },] }
+    ];
+    AmplifyFormSection.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyFormSection = __decorate([
+        ProxyCmp({
+            inputs: [
+                'handleSubmit',
+                'headerText',
+                'loading',
+                'secondaryFooterContent',
+                'submitButtonText',
+                'testDataPrefix',
+            ],
+        })
+    ], AmplifyFormSection);
+    var AmplifyGoogleButton = /** @class */ (function () {
+        function AmplifyGoogleButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyGoogleButton;
+    }());
+    AmplifyGoogleButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-google-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['clientId', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifyGoogleButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyGoogleButton = __decorate([
+        ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
+    ], AmplifyGoogleButton);
+    var AmplifyGreetings = /** @class */ (function () {
+        function AmplifyGreetings(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyGreetings;
+    }());
+    AmplifyGreetings.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-greetings',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['handleAuthStateChange', 'logo', 'username']
+                },] }
+    ];
+    AmplifyGreetings.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyGreetings = __decorate([
+        ProxyCmp({ inputs: ['handleAuthStateChange', 'logo', 'username'] })
+    ], AmplifyGreetings);
+    var AmplifyHint = /** @class */ (function () {
+        function AmplifyHint(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyHint;
+    }());
+    AmplifyHint.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-hint',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyHint.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    var AmplifyIcon = /** @class */ (function () {
+        function AmplifyIcon(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyIcon;
+    }());
+    AmplifyIcon.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-icon',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['name']
+                },] }
+    ];
+    AmplifyIcon.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyIcon = __decorate([
+        ProxyCmp({ inputs: ['name'] })
+    ], AmplifyIcon);
+    var AmplifyIconButton = /** @class */ (function () {
+        function AmplifyIconButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyIconButton;
+    }());
+    AmplifyIconButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-icon-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['autoShowTooltip', 'name', 'tooltip']
+                },] }
+    ];
+    AmplifyIconButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyIconButton = __decorate([
+        ProxyCmp({ inputs: ['autoShowTooltip', 'name', 'tooltip'] })
+    ], AmplifyIconButton);
+    exports.AmplifyInput = /** @class */ (function () {
+        function AmplifyInput(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyInput;
+    }());
+    exports.AmplifyInput.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-input',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'description',
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'inputProps',
+                        'name',
+                        'placeholder',
+                        'required',
+                        'type',
+                        'value',
+                    ]
+                },] }
+    ];
+    exports.AmplifyInput.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyInput = __decorate([
+        ProxyCmp({
+            inputs: [
+                'description',
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'inputProps',
+                'name',
+                'placeholder',
+                'required',
+                'type',
+                'value',
+            ],
+        })
+    ], exports.AmplifyInput);
+    var AmplifyLabel = /** @class */ (function () {
+        function AmplifyLabel(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyLabel;
+    }());
+    AmplifyLabel.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-label',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['htmlFor']
+                },] }
+    ];
+    AmplifyLabel.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyLabel = __decorate([
+        ProxyCmp({ inputs: ['htmlFor'] })
+    ], AmplifyLabel);
+    var AmplifyLink = /** @class */ (function () {
+        function AmplifyLink(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyLink;
+    }());
+    AmplifyLink.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-link',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['role']
+                },] }
+    ];
+    AmplifyLink.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyLink = __decorate([
+        ProxyCmp({ inputs: ['role'] })
+    ], AmplifyLink);
+    var AmplifyLoadingSpinner = /** @class */ (function () {
+        function AmplifyLoadingSpinner(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyLoadingSpinner;
+    }());
+    AmplifyLoadingSpinner.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-loading-spinner',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyLoadingSpinner.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    var AmplifyNav = /** @class */ (function () {
+        function AmplifyNav(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyNav;
+    }());
+    AmplifyNav.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-nav',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyNav.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    var AmplifyOauthButton = /** @class */ (function () {
+        function AmplifyOauthButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyOauthButton;
+    }());
+    AmplifyOauthButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-oauth-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['config']
+                },] }
+    ];
+    AmplifyOauthButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyOauthButton = __decorate([
+        ProxyCmp({ inputs: ['config'] })
+    ], AmplifyOauthButton);
+    var AmplifyPasswordField = /** @class */ (function () {
+        function AmplifyPasswordField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyPasswordField;
+    }());
+    AmplifyPasswordField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-password-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'placeholder',
+                        'required',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyPasswordField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyPasswordField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'placeholder',
+                'required',
+                'value',
+            ],
+        })
+    ], AmplifyPasswordField);
+    var AmplifyPhoneField = /** @class */ (function () {
+        function AmplifyPhoneField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyPhoneField;
+    }());
+    AmplifyPhoneField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-phone-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'dialCode',
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'placeholder',
+                        'required',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyPhoneField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyPhoneField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'dialCode',
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'placeholder',
+                'required',
+                'value',
+            ],
+        })
+    ], AmplifyPhoneField);
+    exports.AmplifyPhotoPicker = /** @class */ (function () {
+        function AmplifyPhotoPicker(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyPhotoPicker;
+    }());
+    exports.AmplifyPhotoPicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-photo-picker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'buttonText',
+                        'handleClick',
+                        'headerHint',
+                        'headerTitle',
+                        'placeholderHint',
+                        'previewSrc',
+                    ]
+                },] }
+    ];
+    exports.AmplifyPhotoPicker.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyPhotoPicker = __decorate([
+        ProxyCmp({
+            inputs: [
+                'buttonText',
+                'handleClick',
+                'headerHint',
+                'headerTitle',
+                'placeholderHint',
+                'previewSrc',
+            ],
+        })
+    ], exports.AmplifyPhotoPicker);
+    exports.AmplifyPicker = /** @class */ (function () {
+        function AmplifyPicker(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyPicker;
+    }());
+    exports.AmplifyPicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-picker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['acceptValue', 'inputHandler', 'pickerText']
+                },] }
+    ];
+    exports.AmplifyPicker.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyPicker = __decorate([
+        ProxyCmp({ inputs: ['acceptValue', 'inputHandler', 'pickerText'] })
+    ], exports.AmplifyPicker);
+    var AmplifyRadioButton = /** @class */ (function () {
+        function AmplifyRadioButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyRadioButton;
+    }());
+    AmplifyRadioButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-radio-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'checked',
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'inputProps',
+                        'label',
+                        'name',
+                        'placeholder',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyRadioButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyRadioButton = __decorate([
+        ProxyCmp({
+            inputs: [
+                'checked',
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'inputProps',
+                'label',
+                'name',
+                'placeholder',
+                'value',
+            ],
+        })
+    ], AmplifyRadioButton);
+    var AmplifyRequireNewPassword = /** @class */ (function () {
+        function AmplifyRequireNewPassword(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyRequireNewPassword;
+    }());
+    AmplifyRequireNewPassword.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-require-new-password',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSubmit',
+                        'headerText',
+                        'submitButtonText',
+                        'user',
+                    ]
+                },] }
+    ];
+    AmplifyRequireNewPassword.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyRequireNewPassword = __decorate([
+        ProxyCmp({
+            inputs: [
+                'formFields',
+                'handleAuthStateChange',
+                'handleSubmit',
+                'headerText',
+                'submitButtonText',
+                'user',
+            ],
+        })
+    ], AmplifyRequireNewPassword);
+    exports.AmplifyS3Album = /** @class */ (function () {
+        function AmplifyS3Album(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyS3Album;
+    }());
+    exports.AmplifyS3Album.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-s3-album',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'contentType',
+                        'fileToKey',
+                        'filter',
+                        'handleOnError',
+                        'handleOnLoad',
+                        'identityId',
+                        'level',
+                        'path',
+                        'picker',
+                        'pickerText',
+                        'sort',
+                        'track',
+                    ]
+                },] }
+    ];
+    exports.AmplifyS3Album.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyS3Album = __decorate([
+        ProxyCmp({
+            inputs: [
+                'contentType',
+                'fileToKey',
+                'filter',
+                'handleOnError',
+                'handleOnLoad',
+                'identityId',
+                'level',
+                'path',
+                'picker',
+                'pickerText',
+                'sort',
+                'track',
+            ],
+        })
+    ], exports.AmplifyS3Album);
+    exports.AmplifyS3Image = /** @class */ (function () {
+        function AmplifyS3Image(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyS3Image;
+    }());
+    exports.AmplifyS3Image.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-s3-image',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'alt',
+                        'body',
+                        'contentType',
+                        'handleOnError',
+                        'handleOnLoad',
+                        'identityId',
+                        'imgKey',
+                        'imgProps',
+                        'level',
+                        'path',
+                        'track',
+                    ]
+                },] }
+    ];
+    exports.AmplifyS3Image.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyS3Image = __decorate([
+        ProxyCmp({
+            inputs: [
+                'alt',
+                'body',
+                'contentType',
+                'handleOnError',
+                'handleOnLoad',
+                'identityId',
+                'imgKey',
+                'imgProps',
+                'level',
+                'path',
+                'track',
+            ],
+        })
+    ], exports.AmplifyS3Image);
+    exports.AmplifyS3ImagePicker = /** @class */ (function () {
+        function AmplifyS3ImagePicker(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyS3ImagePicker;
+    }());
+    exports.AmplifyS3ImagePicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-s3-image-picker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'buttonText',
+                        'contentType',
+                        'fileToKey',
+                        'headerHint',
+                        'headerTitle',
+                        'identityId',
+                        'level',
+                        'path',
+                        'placeholderHint',
+                        'track',
+                    ]
+                },] }
+    ];
+    exports.AmplifyS3ImagePicker.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyS3ImagePicker = __decorate([
+        ProxyCmp({
+            inputs: [
+                'buttonText',
+                'contentType',
+                'fileToKey',
+                'headerHint',
+                'headerTitle',
+                'identityId',
+                'level',
+                'path',
+                'placeholderHint',
+                'track',
+            ],
+        })
+    ], exports.AmplifyS3ImagePicker);
+    exports.AmplifyS3Text = /** @class */ (function () {
+        function AmplifyS3Text(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyS3Text;
+    }());
+    exports.AmplifyS3Text.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-s3-text',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'body',
+                        'contentType',
+                        'fallbackText',
+                        'identityId',
+                        'level',
+                        'path',
+                        'textKey',
+                        'track',
+                    ]
+                },] }
+    ];
+    exports.AmplifyS3Text.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyS3Text = __decorate([
+        ProxyCmp({
+            inputs: [
+                'body',
+                'contentType',
+                'fallbackText',
+                'identityId',
+                'level',
+                'path',
+                'textKey',
+                'track',
+            ],
+        })
+    ], exports.AmplifyS3Text);
+    exports.AmplifyS3TextPicker = /** @class */ (function () {
+        function AmplifyS3TextPicker(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyS3TextPicker;
+    }());
+    exports.AmplifyS3TextPicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-s3-text-picker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'contentType',
+                        'fallbackText',
+                        'fileToKey',
+                        'identityId',
+                        'level',
+                        'path',
+                        'track',
+                    ]
+                },] }
+    ];
+    exports.AmplifyS3TextPicker.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyS3TextPicker = __decorate([
+        ProxyCmp({
+            inputs: [
+                'contentType',
+                'fallbackText',
+                'fileToKey',
+                'identityId',
+                'level',
+                'path',
+                'track',
+            ],
+        })
+    ], exports.AmplifyS3TextPicker);
+    var AmplifySection = /** @class */ (function () {
+        function AmplifySection(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySection;
+    }());
+    AmplifySection.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-section',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['role']
+                },] }
+    ];
+    AmplifySection.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySection = __decorate([
+        ProxyCmp({ inputs: ['role'] })
+    ], AmplifySection);
+    var AmplifySelect = /** @class */ (function () {
+        function AmplifySelect(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySelect;
+    }());
+    AmplifySelect.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-select',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['fieldId', 'handleInputChange', 'options', 'selected']
+                },] }
+    ];
+    AmplifySelect.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySelect = __decorate([
+        ProxyCmp({ inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] })
+    ], AmplifySelect);
+    var AmplifySelectMfaType = /** @class */ (function () {
+        function AmplifySelectMfaType(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySelectMfaType;
+    }());
+    AmplifySelectMfaType.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-select-mfa-type',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['MFATypes', 'authData', 'handleSubmit']
+                },] }
+    ];
+    AmplifySelectMfaType.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySelectMfaType = __decorate([
+        ProxyCmp({ inputs: ['MFATypes', 'authData', 'handleSubmit'] })
+    ], AmplifySelectMfaType);
+    var AmplifySignIn = /** @class */ (function () {
+        function AmplifySignIn(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySignIn;
+    }());
+    AmplifySignIn.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-in',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'federated',
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSubmit',
+                        'headerText',
+                        'hideSignUp',
+                        'submitButtonText',
+                        'usernameAlias',
+                    ]
+                },] }
+    ];
+    AmplifySignIn.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySignIn = __decorate([
+        ProxyCmp({
+            inputs: [
+                'federated',
+                'formFields',
+                'handleAuthStateChange',
+                'handleSubmit',
+                'headerText',
+                'hideSignUp',
+                'submitButtonText',
+                'usernameAlias',
+            ],
+        })
+    ], AmplifySignIn);
+    var AmplifySignInButton = /** @class */ (function () {
+        function AmplifySignInButton(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySignInButton;
+    }());
+    AmplifySignInButton.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-in-button',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['provider']
+                },] }
+    ];
+    AmplifySignInButton.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySignInButton = __decorate([
+        ProxyCmp({ inputs: ['provider'] })
+    ], AmplifySignInButton);
+    var AmplifySignOut = /** @class */ (function () {
+        function AmplifySignOut(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySignOut;
+    }());
+    AmplifySignOut.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-out',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['buttonText', 'handleAuthStateChange']
+                },] }
+    ];
+    AmplifySignOut.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySignOut = __decorate([
+        ProxyCmp({ inputs: ['buttonText', 'handleAuthStateChange'] })
+    ], AmplifySignOut);
+    var AmplifySignUp = /** @class */ (function () {
+        function AmplifySignUp(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifySignUp;
+    }());
+    AmplifySignUp.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-sign-up',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'formFields',
+                        'handleAuthStateChange',
+                        'handleSignUp',
+                        'handleSubmit',
+                        'haveAccountText',
+                        'headerText',
+                        'signInText',
+                        'submitButtonText',
+                        'usernameAlias',
+                        'validationErrors',
+                    ]
+                },] }
+    ];
+    AmplifySignUp.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifySignUp = __decorate([
+        ProxyCmp({
+            inputs: [
+                'formFields',
+                'handleAuthStateChange',
+                'handleSignUp',
+                'handleSubmit',
+                'haveAccountText',
+                'headerText',
+                'signInText',
+                'submitButtonText',
+                'usernameAlias',
+                'validationErrors',
+            ],
+        })
+    ], AmplifySignUp);
+    var AmplifyStrike = /** @class */ (function () {
+        function AmplifyStrike(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyStrike;
+    }());
+    AmplifyStrike.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-strike',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                },] }
+    ];
+    AmplifyStrike.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyToast = /** @class */ (function () {
+        function AmplifyToast(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyToast;
+    }());
+    exports.AmplifyToast.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-toast',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['handleClose', 'message']
+                },] }
+    ];
+    exports.AmplifyToast.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.AmplifyToast = __decorate([
+        ProxyCmp({ inputs: ['handleClose', 'message'] })
+    ], exports.AmplifyToast);
+    var AmplifyTooltip = /** @class */ (function () {
+        function AmplifyTooltip(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyTooltip;
+    }());
+    AmplifyTooltip.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-tooltip',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['shouldAutoShow', 'text']
+                },] }
+    ];
+    AmplifyTooltip.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyTooltip = __decorate([
+        ProxyCmp({ inputs: ['shouldAutoShow', 'text'] })
+    ], AmplifyTooltip);
+    var AmplifyTotpSetup = /** @class */ (function () {
+        function AmplifyTotpSetup(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyTotpSetup;
+    }());
+    AmplifyTotpSetup.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-totp-setup',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'handleAuthStateChange',
+                        'handleComplete',
+                        'headerText',
+                        'issuer',
+                        'standalone',
+                        'user',
+                    ]
+                },] }
+    ];
+    AmplifyTotpSetup.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyTotpSetup = __decorate([
+        ProxyCmp({
+            inputs: [
+                'handleAuthStateChange',
+                'handleComplete',
+                'headerText',
+                'issuer',
+                'standalone',
+                'user',
+            ],
+        })
+    ], AmplifyTotpSetup);
+    var AmplifyUsernameField = /** @class */ (function () {
+        function AmplifyUsernameField(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyUsernameField;
+    }());
+    AmplifyUsernameField.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-username-field',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: [
+                        'disabled',
+                        'fieldId',
+                        'handleInputChange',
+                        'hint',
+                        'inputProps',
+                        'label',
+                        'placeholder',
+                        'required',
+                        'value',
+                    ]
+                },] }
+    ];
+    AmplifyUsernameField.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyUsernameField = __decorate([
+        ProxyCmp({
+            inputs: [
+                'disabled',
+                'fieldId',
+                'handleInputChange',
+                'hint',
+                'inputProps',
+                'label',
+                'placeholder',
+                'required',
+                'value',
+            ],
+        })
+    ], AmplifyUsernameField);
+    var AmplifyVerifyContact = /** @class */ (function () {
+        function AmplifyVerifyContact(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return AmplifyVerifyContact;
+    }());
+    AmplifyVerifyContact.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-verify-contact',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['handleAuthStateChange', 'user']
+                },] }
+    ];
+    AmplifyVerifyContact.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    AmplifyVerifyContact = __decorate([
+        ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
+    ], AmplifyVerifyContact);
+
+    var PhoneNumberFieldComponent = /** @class */ (function () {
+        function PhoneNumberFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.countryDialCodes = ui.countryDialCodes;
+        }
+        return PhoneNumberFieldComponent;
+    }());
+    PhoneNumberFieldComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-phone-number-field',
+                    template: "<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=\" amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\"\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  <label class=\"sr-only amplify-label\" [for]=\"textFieldId\">\n    {{ label }}\n  </label>\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
+                },] }
+    ];
+    PhoneNumberFieldComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        defaultCountryCode: [{ type: i0.Input }],
+        selectFieldId: [{ type: i0.Input }],
+        textFieldId: [{ type: i0.Input }],
+        initialValue: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        type: [{ type: i0.Input }]
+    };
+
+    customElements.define('amplify-button', components.AmplifyButton);
+    customElements.define('amplify-input', components.AmplifyInput);
+    customElements.define('amplify-toast', components.AmplifyToast);
+    customElements.define('amplify-chatbot', components.AmplifyChatbot);
+    customElements.define('amplify-s3-album', components.AmplifyS3Album);
+    customElements.define('amplify-s3-image-picker', components.AmplifyS3ImagePicker);
+    customElements.define('amplify-s3-text', components.AmplifyS3Text);
+    customElements.define('amplify-s3-text-picker', components.AmplifyS3TextPicker);
+    customElements.define('amplify-s3-image', components.AmplifyS3Image);
+    customElements.define('amplify-picker', components.AmplifyPicker);
+    customElements.define('amplify-photo-picker', components.AmplifyPhotoPicker);
+    var UiAngularModule = /** @class */ (function () {
+        function UiAngularModule() {
+        }
+        return UiAngularModule;
+    }());
+    UiAngularModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        exports.AmplifyChatbot,
+                        exports.AmplifyToast,
+                        exports.AmplifyInput,
+                        exports.AmplifyButton,
+                        exports.AmplifyS3Album,
+                        exports.AmplifyS3ImagePicker,
+                        exports.AmplifyS3Text,
+                        exports.AmplifyS3TextPicker,
+                        exports.AmplifyS3Image,
+                        exports.AmplifyPicker,
+                        exports.AmplifyPhotoPicker,
+                        AmplifyAuthenticatorComponent,
+                        AmplifySignInComponent,
+                        AmplifySignUpComponent,
+                        AmplifyFormFieldComponent,
+                        AmplifyErrorComponent,
+                        AmplifySlotDirective,
+                        AmplifyConfirmSignUpComponent,
+                        AmplifyUserNameAliasComponent,
+                        AmplifyConfirmSignInComponent,
+                        AmplifySetupTotpComponent,
+                        AmplifyForceNewPasswordComponent,
+                        AmplifyFederatedSignInComponent,
+                        AmplifyFederatedSignInButtonComponent,
+                        AmplifyResetPasswordComponent,
+                        AmplifyVerifyUserComponent,
+                        ConfirmResetPasswordComponent,
+                        ConfirmVerifyUserComponent,
+                        AmplifySelectComponent,
+                        AmplifyButtonComponent,
+                        AmplifyPasswordFieldComponent,
+                        AmplifyTextFieldComponent,
+                        TabsComponent,
+                        TabItemComponent,
+                        PhoneNumberFieldComponent,
+                    ],
+                    imports: [common.CommonModule],
+                    exports: [
+                        exports.AmplifyChatbot,
+                        exports.AmplifyToast,
+                        exports.AmplifyInput,
+                        exports.AmplifyButton,
+                        exports.AmplifyS3Album,
+                        exports.AmplifyS3ImagePicker,
+                        exports.AmplifyS3Text,
+                        exports.AmplifyS3TextPicker,
+                        exports.AmplifyS3Image,
+                        exports.AmplifyPicker,
+                        exports.AmplifyPhotoPicker,
+                        AmplifyAuthenticatorComponent,
+                        AmplifySignInComponent,
+                        AmplifyFormFieldComponent,
+                        AmplifyErrorComponent,
+                        AmplifySlotDirective,
+                    ],
+                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
+                },] }
+    ];
+
+    /*
+     * Public API Surface of ui-angular
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.AmplifyAuthenticatorComponent = AmplifyAuthenticatorComponent;
+    exports.AmplifyConfirmSignInComponent = AmplifyConfirmSignInComponent;
+    exports.AmplifyConfirmSignUpComponent = AmplifyConfirmSignUpComponent;
+    exports.AmplifyErrorComponent = AmplifyErrorComponent;
+    exports.AmplifyFederatedSignInButtonComponent = AmplifyFederatedSignInButtonComponent;
+    exports.AmplifyFederatedSignInComponent = AmplifyFederatedSignInComponent;
+    exports.AmplifyForceNewPasswordComponent = AmplifyForceNewPasswordComponent;
+    exports.AmplifyFormFieldComponent = AmplifyFormFieldComponent;
+    exports.AmplifyResetPasswordComponent = AmplifyResetPasswordComponent;
+    exports.AmplifySetupTotpComponent = AmplifySetupTotpComponent;
+    exports.AmplifySignInComponent = AmplifySignInComponent;
+    exports.AmplifySignUpComponent = AmplifySignUpComponent;
+    exports.AmplifySlotDirective = AmplifySlotDirective;
+    exports.AmplifyVerifyUserComponent = AmplifyVerifyUserComponent;
+    exports.AuthPropService = AuthPropService;
+    exports.ConfirmResetPasswordComponent = ConfirmResetPasswordComponent;
+    exports.ConfirmVerifyUserComponent = ConfirmVerifyUserComponent;
+    exports.StateMachineService = StateMachineService;
+    exports.UiAngularModule = UiAngularModule;
+    exports.getAttributeMap = getAttributeMap;
+    exports["ɵa"] = ProxyCmp;
+    exports["ɵb"] = AmplifyAuthenticatorComponent;
+    exports["ɵc"] = AmplifySignInComponent;
+    exports["ɵd"] = AmplifySignUpComponent;
+    exports["ɵe"] = AmplifyFormFieldComponent;
+    exports["ɵf"] = AmplifyErrorComponent;
+    exports["ɵg"] = AmplifyConfirmSignUpComponent;
+    exports["ɵh"] = AmplifyUserNameAliasComponent;
+    exports["ɵi"] = AmplifyConfirmSignInComponent;
+    exports["ɵj"] = AmplifySetupTotpComponent;
+    exports["ɵk"] = AmplifyForceNewPasswordComponent;
+    exports["ɵl"] = AmplifyFederatedSignInComponent;
+    exports["ɵm"] = AmplifyFederatedSignInButtonComponent;
+    exports["ɵn"] = AmplifyResetPasswordComponent;
+    exports["ɵo"] = AmplifyVerifyUserComponent;
+    exports["ɵp"] = ConfirmResetPasswordComponent;
+    exports["ɵq"] = ConfirmVerifyUserComponent;
+    exports["ɵr"] = AmplifySelectComponent;
+    exports["ɵs"] = AmplifyButtonComponent;
+    exports["ɵt"] = AmplifyPasswordFieldComponent;
+    exports["ɵu"] = AmplifyTextFieldComponent;
+    exports["ɵv"] = TabsComponent;
+    exports["ɵw"] = TabItemComponent;
+    exports["ɵx"] = PhoneNumberFieldComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=aws-amplify-ui-angular.umd.js.map