@aws-amplify/ui-angular 2.4.25 → 3.0.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('aws-amplify'), require('nanoid'), require('qrcode')) :
-    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', '@aws-amplify/core', 'xstate', 'aws-amplify', 'nanoid', 'qrcode'], 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.core, global.xstate, global["aws-amplify"], global.nanoid, global.QRCode));
-})(this, (function (exports, i0, common, ui, core, xstate, awsAmplify, nanoid, QRCode) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('nanoid'), require('qrcode'), require('aws-amplify')) :
+    typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', '@aws-amplify/core', 'xstate', 'nanoid', 'qrcode', 'aws-amplify'], 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.core, global.xstate, global.nanoid, global.QRCode, global["aws-amplify"]));
+})(this, (function (exports, i0, i6, ui, core, xstate, nanoid, QRCode, awsAmplify) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,8 +25,336 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
 
+    /******************************************************************************
+    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 (g && (g = 0, op[0] && (_ = 0)), _)
+                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;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (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;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
+
     var AmplifySlotDirective = /** @class */ (function () {
         function AmplifySlotDirective(template) {
             this.template = template;
@@ -40,17 +368,16 @@
         });
         return AmplifySlotDirective;
     }());
-    AmplifySlotDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[amplifySlot]',
-                },] }
-    ];
-    AmplifySlotDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
-    AmplifySlotDirective.propDecorators = {
-        amplifySlot: [{ type: i0.Input }]
-    };
+    AmplifySlotDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifySlotDirective, deps: [{ token: i0__namespace.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AmplifySlotDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AmplifySlotDirective, selector: "[amplifySlot]", inputs: { amplifySlot: "amplifySlot" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifySlotDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[amplifySlot]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }]; }, propDecorators: { amplifySlot: [{
+                    type: i0.Input
+                }] } });
 
     /**
      * Stores and provides custom components that users provide with `amplify-slot`.
@@ -71,14 +398,16 @@
         });
         return CustomComponentsService;
     }());
-    CustomComponentsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CustomComponentsService_Factory() { return new CustomComponentsService(); }, token: CustomComponentsService, providedIn: "root" });
-    CustomComponentsService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
+    CustomComponentsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    CustomComponentsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentsService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentsService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
 
-    var logger$2 = new core.Logger('state-machine');
+    var logger$1 = new core.Logger('state-machine');
     /**
      * AuthenticatorService provides access to the authenticator state and context.
      */
@@ -251,997 +580,844 @@
         Object.defineProperty(AuthenticatorService.prototype, "authState", {
             /**
              * Internal utility functions
-             */
-            /** @deprecated For internal use only */
-            get: function () {
-                return this._authState;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AuthenticatorService.prototype, "authService", {
-            /** @deprecated For internal use only */
-            get: function () {
-                return this._authService;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AuthenticatorService.prototype, "context", {
-            /** @deprecated For internal use only */
-            get: function () {
-                return this._authState.context;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AuthenticatorService.prototype, "slotContext", {
-            /** @deprecated For internal use only */
-            get: function () {
-                var slotContext = Object.assign(Object.assign({}, this._facade), this._sendEventAliases);
-                return Object.assign(Object.assign({}, slotContext), { $implicit: Object.assign({}, slotContext) });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /** @deprecated For internal use only */
-        AuthenticatorService.prototype.subscribe = function (callback) {
-            if (this._authService) {
-                return this._authService.subscribe(callback);
-            }
-            else {
-                logger$2.error('Subscription attempted before machine was created. This is likely a bug on the library, please consider filing a bug.');
-            }
-        };
-        /** @deprecated For internal use only */
-        AuthenticatorService.prototype.send = function (event) {
-            this.authService.send(event);
-        };
-        return AuthenticatorService;
-    }());
-    AuthenticatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AuthenticatorService_Factory() { return new AuthenticatorService(); }, token: AuthenticatorService, providedIn: "root" });
-    AuthenticatorService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    AuthenticatorService.ctorParameters = function () { return []; };
-
-    var AuthenticatorComponent = /** @class */ (function () {
-        function AuthenticatorComponent(authenticator, contextService, changeDetector) {
-            this.authenticator = authenticator;
-            this.contextService = contextService;
-            this.changeDetector = changeDetector;
-            this.customComponentQuery = null;
-            // translated texts
-            this.signInTitle = ui.translate('Sign In');
-            this.signUpTitle = ui.translate('Create Account');
-            this.hasInitialized = false;
-            this.isHandlingHubEvent = false;
-        }
-        AuthenticatorComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders, formFields = _a.formFields;
-            var _b = this.authenticator, authService = _b.authService, initializeMachine = _b.initializeMachine;
-            this.unsubscribeHub = ui.listenToAuthHub(authService, function (data, service) {
-                ui.defaultAuthHubHandler(data, service);
-                /**
-                 * Hub events aren't properly caught by Angular, because they are
-                 * synchronous events. Angular tracks async network events and
-                 * html events, but not synchronous events like hub.
-                 *
-                 * On any notable hub events, we run change detection manually.
-                 */
-                _this.changeDetector.detectChanges();
-                /**
-                 * Hub events that we handle can lead to multiple state changes:
-                 * e.g. `authenticated` -> `signOut` -> initialState.
-                 *
-                 * We want to ensure change detection runs all the way, until
-                 * we reach back to the initial state. Setting the below flag
-                 * to true to until we reach initial state.
-                 */
-                _this.isHandlingHubEvent = true;
-            });
-            /**
-             * Subscribes to state machine changes and sends INIT event
-             * once machine reaches 'setup' state.
-             */
-            this.unsubscribeMachine = this.authenticator.subscribe(function () {
-                var route = _this.authenticator.route;
-                if (_this.isHandlingHubEvent) {
-                    _this.changeDetector.detectChanges();
-                    var initialStateWithDefault = initialState !== null && initialState !== void 0 ? initialState : 'signIn';
-                    // We can stop manual change detection if we're back to the initial state
-                    if (route === initialStateWithDefault) {
-                        _this.isHandlingHubEvent = false;
-                    }
-                }
-                if (!_this.hasInitialized && route === 'setup') {
-                    initializeMachine({
-                        initialState: initialState,
-                        loginMechanisms: loginMechanisms,
-                        services: services,
-                        signUpAttributes: signUpAttributes,
-                        socialProviders: socialProviders,
-                        formFields: formFields,
-                    });
-                    _this.hasInitialized = true;
-                }
-            }).unsubscribe;
-            /**
-             * 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
-         */
-        AuthenticatorComponent.prototype.ngAfterContentInit = function () {
-            this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
-        };
-        AuthenticatorComponent.prototype.ngOnDestroy = function () {
-            if (this.unsubscribeMachine)
-                this.unsubscribeMachine();
-            if (this.unsubscribeHub)
-                this.unsubscribeHub();
-        };
-        Object.defineProperty(AuthenticatorComponent.prototype, "context", {
-            /**
-             * Class Functions
-             */
-            // context passed to "authenticated" slot
-            get: function () {
-                return this.authenticator.slotContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AuthenticatorComponent.prototype, "route", {
-            get: function () {
-                return this.authenticator.route;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AuthenticatorComponent.prototype.onTabChange = function () {
-            var route = this.authenticator.route;
-            if (route === 'signIn') {
-                this.authenticator.toSignUp();
-            }
-            else {
-                this.authenticator.toSignIn();
-            }
-        };
-        AuthenticatorComponent.prototype.hasTabs = function () {
-            var route = this.authenticator.route;
-            return route === 'signIn' || route === 'signUp';
-        };
-        AuthenticatorComponent.prototype.hasRouteComponent = function () {
-            var route = this.authenticator.route;
-            switch (route) {
-                case 'authenticated':
-                case 'idle':
-                case 'setup':
-                case 'signOut':
-                case 'autoSignIn':
-                    return false;
-                default:
-                    return true;
-            }
-        };
-        AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
-            if (!componentQuery)
-                return {};
-            var customComponents = {};
-            componentQuery.forEach(function (component) {
-                customComponents[component.name] = component.template;
-            });
-            return customComponents;
-        };
-        return AuthenticatorComponent;
-    }());
-    AuthenticatorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-authenticator',
-                    template: "<div\n  data-amplify-authenticator\n  [attr.data-variation]=\"variation\"\n  *ngIf=\"hasRouteComponent()\"\n>\n  <div data-amplify-container>\n    <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n    <div\n      data-amplify-router\n      [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n    >\n      <amplify-tabs\n        (tabChange)=\"onTabChange()\"\n        *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n      >\n        <amplify-tab-item\n          [title]=\"signInTitle\"\n          [active]=\"route === 'signIn'\"\n          data-amplify-router-content\n        >\n          <!-- signIn component -->\n          <amplify-slot\n            name=\"sign-in\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signIn'\"\n          >\n            <amplify-sign-in></amplify-sign-in>\n          </amplify-slot>\n        </amplify-tab-item>\n        <amplify-tab-item\n          [title]=\"signUpTitle\"\n          [active]=\"route === 'signUp'\"\n          data-amplify-router-content\n        >\n          <!-- signUp component -->\n          <amplify-slot\n            name=\"sign-up\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signUp'\"\n          >\n            <amplify-sign-up></amplify-sign-up>\n          </amplify-slot>\n        </amplify-tab-item>\n      </amplify-tabs>\n\n      <amplify-slot\n        name=\"sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'signIn' && hideSignUp\"\n      >\n        <amplify-sign-in></amplify-sign-in>\n      </amplify-slot>\n\n      <!-- confirmSignUp content -->\n      <amplify-slot\n        name=\"confirm-sign-up\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignUp'\"\n      >\n        <amplify-confirm-sign-up></amplify-confirm-sign-up>\n      </amplify-slot>\n\n      <!-- confirmSignIn content -->\n      <amplify-slot\n        name=\"confirm-sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignIn'\"\n      >\n        <amplify-confirm-sign-in></amplify-confirm-sign-in>\n      </amplify-slot>\n\n      <!-- setupTotp content -->\n      <amplify-slot\n        name=\"setup-totp\"\n        [context]=\"context\"\n        *ngIf=\"route === 'setupTOTP'\"\n      >\n        <amplify-setup-totp></amplify-setup-totp>\n      </amplify-slot>\n\n      <!-- forceNewPassword content -->\n      <amplify-slot\n        name=\"force-new-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'forceNewPassword'\"\n      >\n        <amplify-force-new-password></amplify-force-new-password>\n      </amplify-slot>\n\n      <!-- resetPassword content -->\n      <amplify-slot\n        name=\"reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'resetPassword'\"\n      >\n        <amplify-reset-password></amplify-reset-password>\n      </amplify-slot>\n\n      <!-- confirmResetPassword content -->\n      <amplify-slot\n        name=\"confirm-reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmResetPassword'\"\n      >\n        <amplify-confirm-reset-password></amplify-confirm-reset-password>\n      </amplify-slot>\n\n      <!-- verifyUser content -->\n      <amplify-slot\n        name=\"verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'verifyUser'\"\n      >\n        <amplify-verify-user></amplify-verify-user>\n      </amplify-slot>\n\n      <!-- confirmVerifyUser content -->\n      <amplify-slot\n        name=\"confirm-verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmVerifyUser'\"\n      >\n        <amplify-confirm-verify-user></amplify-confirm-verify-user>\n      </amplify-slot>\n    </div>\n\n    <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n  name=\"authenticated\"\n  [context]=\"context\"\n  *ngIf=\"route === 'authenticated'\"\n>\n  <ng-content></ng-content>\n</amplify-slot>\n",
-                    providers: [CustomComponentsService],
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    AuthenticatorComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService },
-        { type: CustomComponentsService },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    AuthenticatorComponent.propDecorators = {
-        formFields: [{ type: i0.Input }],
-        initialState: [{ type: i0.Input }],
-        loginMechanisms: [{ type: i0.Input }],
-        services: [{ type: i0.Input }],
-        signUpAttributes: [{ type: i0.Input }],
-        socialProviders: [{ type: i0.Input }],
-        variation: [{ type: i0.Input }],
-        hideSignUp: [{ type: i0.Input }],
-        customComponentQuery: [{ type: i0.ContentChildren, args: [AmplifySlotDirective,] }]
-    };
-
-    var ConfirmResetPasswordComponent = /** @class */ (function () {
-        function ConfirmResetPasswordComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Reset your password');
-            // translated strings
-            this.backToSignInText = ui.translate('Back to Sign In');
-            this.resendCodeText = ui.translate('Resend Code');
-            /**
-             * Support backwards compatibility for erroneous 'Send Code' text
-             * See https://github.com/aws-amplify/amplify-ui/issues/1784
-             * TODO: Remove support for 'Send Code' translation in next Major release
-             */
-            this.submitText = !ui.hasTranslation('Send Code')
-                ? ui.translate('Submit')
-                : ui.translate('Send Code');
-        }
-        Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
-            get: function () {
-                return this.authenticator.slotContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmResetPasswordComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
-        };
-        ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
-        };
-        return ConfirmResetPasswordComponent;
-    }());
-    ConfirmResetPasswordComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-reset-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields\n      route=\"confirmResetPassword\"\n    ></amplify-base-form-fields>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
-                },] }
-    ];
-    ConfirmResetPasswordComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ConfirmResetPasswordComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
-        headerText: [{ type: i0.Input }]
-    };
-
-    var logger$1 = new awsAmplify.Logger('ConfirmSignIn');
-    var ConfirmSignInComponent = /** @class */ (function () {
-        function ConfirmSignInComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.dataAttr = '';
-            this.confirmText = ui.translate('Confirm');
-            this.backToSignInText = ui.translate('Back to Sign In');
-        }
-        ConfirmSignInComponent.prototype.ngOnInit = function () {
-            this.setHeaderText();
-        };
-        Object.defineProperty(ConfirmSignInComponent.prototype, "context", {
+             */
+            /** @deprecated For internal use only */
             get: function () {
-                return this.authenticator.slotContext;
+                return this._authState;
             },
             enumerable: false,
             configurable: true
         });
-        ConfirmSignInComponent.prototype.setHeaderText = function () {
-            var state = this.authenticator.authState;
-            var actorContext = ui.getActorContext(state);
-            var challengeName = actorContext.challengeName;
-            switch (challengeName) {
-                case 'SOFTWARE_TOKEN_MFA':
-                    this.headerText = ui.translate('Confirm TOTP Code');
-                    break;
-                case 'SMS_MFA':
-                    this.headerText = ui.translate('Confirm SMS Code');
-                    break;
-                default:
-                    logger$1.error('Unexpected challengeName', challengeName);
-            }
-        };
-        ConfirmSignInComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
-        };
-        ConfirmSignInComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
-        };
-        return ConfirmSignInComponent;
-    }());
-    ConfirmSignInComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-sign-in',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields route=\"confirmSignIn\"></amplify-base-form-fields>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n"
-                },] }
-    ];
-    ConfirmSignInComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ConfirmSignInComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
-    };
-
-    var ConfirmSignUpComponent = /** @class */ (function () {
-        function ConfirmSignUpComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.headerText = ui.translate('Confirm Sign Up');
-            this.dataAttr = '';
-            // translated texts
-            this.resendCodeText = ui.translate('Resend Code');
-            this.confirmText = ui.translate('Confirm');
-            this.emailMessage = ui.translate('Your code is on the way. To log in, enter the code we emailed to');
-            this.textedMessage = ui.translate('Your code is on the way. To log in, enter the code we texted to');
-            this.defaultMessage = ui.translate('Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.');
-            this.minutesMessage = ui.translate('It may take a minute to arrive.');
-        }
-        Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
+        Object.defineProperty(AuthenticatorService.prototype, "authService", {
+            /** @deprecated For internal use only */
             get: function () {
-                return this.authenticator.slotContext;
+                return this._authService;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
+        Object.defineProperty(AuthenticatorService.prototype, "context", {
+            /** @deprecated For internal use only */
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
-                return DeliveryMedium === 'EMAIL'
-                    ? ui.translate('We Emailed You')
-                    : DeliveryMedium === 'SMS'
-                        ? ui.translate('We Texted You')
-                        : ui.translate('We Sent A Code');
+                return this._authState.context;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
+        Object.defineProperty(AuthenticatorService.prototype, "slotContext", {
+            /** @deprecated For internal use only */
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
-                return DeliveryMedium === 'EMAIL'
-                    ? this.emailMessage + " " + Destination + ". " + this.minutesMessage
-                    : DeliveryMedium === 'SMS'
-                        ? this.textedMessage + " " + Destination + ". " + this.minutesMessage
-                        : ui.translate("" + this.defaultMessage);
+                var slotContext = Object.assign(Object.assign({}, this._facade), this._sendEventAliases);
+                return Object.assign(Object.assign({}, slotContext), { $implicit: Object.assign({}, slotContext) });
             },
             enumerable: false,
             configurable: true
         });
-        ConfirmSignUpComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
+        /** @deprecated For internal use only */
+        AuthenticatorService.prototype.subscribe = function (callback) {
+            if (this._authService) {
+                return this._authService.subscribe(callback);
+            }
+            else {
+                logger$1.error('Subscription attempted before machine was created. This is likely a bug on the library, please consider filing a bug.');
+            }
         };
-        ConfirmSignUpComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        /** @deprecated For internal use only */
+        AuthenticatorService.prototype.send = function (event) {
+            this.authService.send(event);
         };
-        return ConfirmSignUpComponent;
+        return AuthenticatorService;
     }());
-    ConfirmSignUpComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-sign-up',
-                    template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex amplify-authenticator__column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3\n          class=\"amplify-heading amplify-authenticator__heading\"\n          style=\"font-size: 1.5rem\"\n        >\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span class=\"amplify-authenticator__subtitle\">\n        {{ subtitleText }}\n      </span>\n      <amplify-base-form-fields\n        route=\"confirmSignUp\"\n      ></amplify-base-form-fields>\n\n      <button\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n        [isDisabled]=\"authenticator.isPending\"\n      >\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n"
-                },] }
-    ];
-    ConfirmSignUpComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ConfirmSignUpComponent.propDecorators = {
-        headerText: [{ type: i0.Input }],
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }]
-    };
+    AuthenticatorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AuthenticatorService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AuthenticatorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AuthenticatorService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AuthenticatorService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root', // ensure we have a singleton service
+                    }]
+            }], ctorParameters: function () { return []; } });
 
-    var ConfirmVerifyUserComponent = /** @class */ (function () {
-        function ConfirmVerifyUserComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Account recovery requires verified contact information');
-            // translated texts
-            this.skipText = ui.translate('Skip');
-            this.submitText = ui.translate('Submit');
+    var AmplifySlotComponent = /** @class */ (function () {
+        function AmplifySlotComponent(propService) {
+            this.propService = propService;
+            this.display = 'contents';
+            this.isOverriden = false;
         }
-        Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
-            get: function () {
-                return this.authenticator.slotContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmVerifyUserComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
-        };
-        ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        AmplifySlotComponent.prototype.ngAfterContentInit = function () {
+            var customComponents = this.propService.customComponents;
+            var overridingComponent = customComponents[this.name];
+            if (overridingComponent) {
+                this.overridingComponent = overridingComponent;
+                this.isOverriden = true;
+            }
         };
-        return ConfirmVerifyUserComponent;
+        return AmplifySlotComponent;
     }());
-    ConfirmVerifyUserComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-confirm-verify-user',
-                    template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields\n      route=\"confirmVerifyUser\"\n    ></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
-                },] }
-    ];
-    ConfirmVerifyUserComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ConfirmVerifyUserComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
-        headerText: [{ type: i0.Input }]
-    };
+    AmplifySlotComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifySlotComponent, deps: [{ token: CustomComponentsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AmplifySlotComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AmplifySlotComponent, selector: "amplify-slot", inputs: { name: "name", context: "context" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0__namespace, template: "<!-- \n  if slot isn't overwritten, we display the the default coponent, which is the \n  children passed onto this component.\n-->\n<ng-content *ngIf=\"!isOverriden\"></ng-content>\n\n<!-- If slot is overwritten, we render that instead. -->\n<ng-container\n  *ngIf=\"isOverriden\"\n  [ngTemplateOutlet]=\"overridingComponent\"\n  [ngTemplateOutletContext]=\"context\"\n></ng-container>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifySlotComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-slot',
+                        templateUrl: './amplify-slot.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: CustomComponentsService }]; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], context: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.HostBinding,
+                    args: ['style.display']
+                }] } });
 
-    var FederatedSignInButtonComponent = /** @class */ (function () {
-        function FederatedSignInButtonComponent(authenticator) {
-            var _this = this;
-            this.authenticator = authenticator;
-            this.onClick = function () {
-                _this.authenticator.send({
-                    type: 'FEDERATED_SIGN_IN',
-                    data: { provider: _this.provider },
-                });
-            };
+    var TabItemComponent = /** @class */ (function () {
+        function TabItemComponent() {
+            this.active = false;
+            this.display = 'block'; // emulate div behavior
         }
-        return FederatedSignInButtonComponent;
+        return TabItemComponent;
     }());
-    FederatedSignInButtonComponent.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  (click)=\"onClick()\"\n>\n  <div class=\"amplify-flex federated-sign-in-button-row\">\n    <ng-content></ng-content>\n  </div>\n</button>\n"
-                },] }
-    ];
-    FederatedSignInButtonComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    FederatedSignInButtonComponent.propDecorators = {
-        provider: [{ type: i0.Input }],
-        text: [{ type: i0.Input }]
-    };
+    TabItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TabItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabItemComponent, selector: "amplify-tab-item", inputs: { title: "title", active: "active", id: "id", labelledById: "labelledById", tabIndex: "tabIndex" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0__namespace, 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", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-tab-item',
+                        templateUrl: './tab-item.component.html',
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }], active: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], labelledById: [{
+                    type: i0.Input
+                }], tabIndex: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.HostBinding,
+                    args: ['style.display']
+                }] } });
 
-    var FederatedSignInComponent = /** @class */ (function () {
-        function FederatedSignInComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.FederatedProviders = ui.FederatedIdentityProviders;
-            this.includeAmazon = false;
-            this.includeApple = false;
-            this.includeFacebook = false;
-            this.includeGoogle = false;
-            this.shouldShowFederatedSignIn = false;
+    var TabsComponent = /** @class */ (function () {
+        function TabsComponent() {
+            this.tabChange = new i0.EventEmitter();
         }
-        FederatedSignInComponent.prototype.ngOnInit = function () {
-            var _a;
-            var socialProviders = ((_a = this.authenticator.context) === null || _a === void 0 ? void 0 : _a.config).socialProviders;
-            this.setFederatedTexts();
-            this.includeAmazon = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('amazon');
-            this.includeApple = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('apple');
-            this.includeGoogle = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('google');
-            this.includeFacebook = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('facebook');
-            this.shouldShowFederatedSignIn =
-                this.includeAmazon ||
-                    this.includeApple ||
-                    this.includeFacebook ||
-                    this.includeGoogle;
-        };
-        FederatedSignInComponent.prototype.setFederatedTexts = function () {
-            var route = this.authenticator.route;
-            var federatedText = route === 'signUp' ? 'Up' : 'In';
-            this.signInAmazonText = ui.translate("Sign " + federatedText + " with Amazon");
-            this.signInAppleText = ui.translate("Sign " + federatedText + " with Apple");
-            this.signInFacebookText = ui.translate("Sign " + federatedText + " with Facebook");
-            this.signInGoogleText = ui.translate("Sign " + federatedText + " with Google");
+        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);
+            }
         };
-        return FederatedSignInComponent;
-    }());
-    FederatedSignInComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-federated-sign-in',
-                    template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  >\n    <svg\n      aria-label=\"Amazon icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 248 268\"\n    >\n      <path\n        d=\"M139.056521,147.024612 C133.548808,156.744524 124.782731,162.726926 115.087401,162.726926 C101.790721,162.726926 93.9937779,152.612964 93.9937779,137.68681 C93.9937779,108.224571 120.447551,102.879017 145.533369,102.879017 L145.533369,110.365976 C145.533369,123.831358 145.876354,135.063787 139.056521,147.024612 M207.206992,162.579655 C209.400505,165.692256 209.887066,169.437725 207.063416,171.770186 C199.996315,177.653081 187.429476,188.590967 180.513926,194.716661 L180.46208,194.621133 C178.176838,196.663031 174.862638,196.810303 172.27828,195.445057 C160.780281,185.9162 158.686473,181.494078 152.405048,172.403055 C133.405233,191.751331 119.909143,197.534719 95.309886,197.534719 C66.1281801,197.534719 43.4791563,179.599451 43.4791563,143.669212 C43.4791563,115.616003 58.6782107,96.5105248 80.4019706,87.1727225 C99.2063636,78.9096034 125.464714,77.4528107 145.533369,75.1641337 L145.533369,70.694248 C145.533369,62.4749122 146.167493,52.7510201 141.297893,45.6541312 C137.110277,39.2856386 129.018206,36.6586354 121.859376,36.6586354 C108.658413,36.6586354 96.9171331,43.4171982 94.0416364,57.4199213 C93.4593582,60.532522 91.1701278,63.5933787 88.003492,63.7406501 L54.4387473,60.1424518 C51.6150972,59.5095829 48.4484614,57.2248862 49.2740201,52.8982915 C56.9712583,12.2553679 93.7983558,0 126.732964,0 C143.587124,0 165.606011,4.47386604 178.902691,17.2148315 C195.760839,32.917146 194.149604,53.8694866 194.149604,76.6726704 L194.149604,130.542157 C194.149604,146.734049 200.87372,153.830938 207.206992,162.579655 Z M233.826346,208.038962 C230.467669,203.683255 211.550709,205.9821 203.056405,206.998432 C200.470662,207.321077 200.076227,205.042397 202.406981,203.404973 C217.475208,192.664928 242.201125,195.766353 245.081698,199.363845 C247.966255,202.981502 244.336653,228.071183 230.172839,240.049379 C228.001452,241.888455 225.929671,240.904388 226.89783,238.468418 C230.077218,230.430525 237.204944,212.418868 233.826346,208.038962 Z M126.768855,264 C74.0234043,264 42.0764048,241.955028 17.7852554,217.541992 C12.9733903,212.705982 6.71799208,206.295994 3.31151296,200.690918 C1.90227474,198.372135 5.59096074,195.021875 8.0442063,196.84375 C38.2390146,219.267578 82.1011654,239.538304 125.529506,239.538304 C154.819967,239.538304 191.046475,227.469543 220.66851,214.867659 C225.146771,212.966167 225.146771,219.180222 224.511585,221.060516 C224.183264,222.03242 209.514625,236.221149 189.247207,247.047411 C170.304273,257.166172 146.397132,264 126.768855,264 Z\"\n        fill=\"#FF9900\"\n      ></path>\n    </svg>\n\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInAmazonText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeApple\"\n    [provider]=\"FederatedProviders.Apple\"\n  >\n    <svg\n      aria-label=\"Apple icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      fill=\"#000\"\n      preserveAspectRatio=\"xMidYMid\"\n      stroke=\"#000\"\n      strokeWidth=\"0\"\n      viewBox=\"0 0 1024 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInAppleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  >\n    <svg\n      aria-label=\"Facebook icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 279 538\"\n    >\n      <path\n        d=\"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z\"\n        fill=\"#1877F2\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInFacebookText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [provider]=\"FederatedProviders.Google\"\n  >\n    <svg\n      aria-label=\"Google icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 256 262\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <path\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n        fill=\"#4285F4\"\n      ></path>\n      <path\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n        fill=\"#34A853\"\n      ></path>\n      <path\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n        fill=\"#FBBC05\"\n      ></path>\n      <path\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n        fill=\"#EB4335\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInGoogleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <hr\n    class=\"amplify-divider amplify-divider--label amplify-divider--small\"\n    aria-orientation=\"horizontal\"\n    data-size=\"small\"\n    data-label=\"or\"\n  />\n</div>\n"
-                },] }
-    ];
-    FederatedSignInComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-
-    var ForceNewPasswordComponent = /** @class */ (function () {
-        function ForceNewPasswordComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Change Password');
-            // translated texts
-            this.changePasswordText = ui.translate('Change Password');
-            this.backToSignInText = ui.translate('Back to Sign In');
-        }
-        Object.defineProperty(ForceNewPasswordComponent.prototype, "context", {
-            get: function () {
-                return this.authenticator.slotContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ForceNewPasswordComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
+        TabsComponent.prototype.selectTab = function (tab) {
+            this.tabs.forEach(function (tab) {
+                tab.active = false;
+            });
+            tab.active = true;
         };
-        ForceNewPasswordComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        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 ForceNewPasswordComponent;
-    }());
-    ForceNewPasswordComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-force-new-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
-                },] }
-    ];
-    ForceNewPasswordComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ForceNewPasswordComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
-        headerText: [{ type: i0.Input }]
-    };
-
-    var ForceNewPasswordFormFieldsComponent = /** @class */ (function () {
-        function ForceNewPasswordFormFieldsComponent() {
-        }
-        return ForceNewPasswordFormFieldsComponent;
+        return TabsComponent;
     }());
-    ForceNewPasswordFormFieldsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-force-new-password-form-fields',
-                    template: "<div class=\"amplify-flex amplify-authenticator__column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"forceNewPassword\"></amplify-base-form-fields>\n</div>\n"
-                },] }
-    ];
+    TabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TabsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabsComponent, selector: "amplify-tabs", outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0__namespace, template: "<div\n  tabindex=\"0\"\n  aria-orientation=\"horizontal\"\n  data-orientation=\"horizontal\"\n  role=\"tablist\"\n  style=\"outline: none\"\n>\n  <div\n    class=\"amplify-flex amplify-tabs\"\n    data-indicator-position=\"top\"\n    style=\"gap: 0px; justify-content: center\"\n  >\n    <div\n      *ngFor=\"let tab of tabs\"\n      class=\"amplify-tabs-item\"\n      data-spacing=\"equal\"\n      data-orientation=\"horizontal\"\n      role=\"tab\"\n      [id]=\"tab.labelledById\"\n      [tabindex]=\"tab.active ? '0' : '1'\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"tab.id\"\n      [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n      (click)=\"handleTabClick(tab)\"\n    >\n      {{ tab.title }}\n    </div>\n  </div>\n</div>\n\n<ng-content></ng-content>\n", directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-tabs',
+                        templateUrl: './tabs.component.html',
+                    }]
+            }], propDecorators: { tabs: [{
+                    type: i0.ContentChildren,
+                    args: [TabItemComponent]
+                }], tabChange: [{
+                    type: i0.Output
+                }] } });
 
-    var FormFieldComponent = /** @class */ (function () {
-        function FormFieldComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.countryDialCodesValue = ui.countryDialCodes;
-            this.errorId = nanoid.nanoid(12);
+    var ButtonComponent = /** @class */ (function () {
+        function ButtonComponent() {
+            this.type = 'button';
+            this.fullWidth = false;
+            this.isDisabled = false;
+            this.size = 'medium';
+            this.variation = 'default';
+            this.fontWeight = 'normal';
         }
-        Object.defineProperty(FormFieldComponent.prototype, "errors", {
+        Object.defineProperty(ButtonComponent.prototype, "getDisabled", {
             get: function () {
-                var validationErrors = this.authenticator.validationErrors;
-                return ui.getErrors(validationErrors[this.name]);
+                return this.isDisabled ? '' : null;
             },
             enumerable: false,
             configurable: true
         });
-        FormFieldComponent.prototype.onBlur = function ($event) {
-            var name = $event.target.name;
-            this.authenticator.updateBlur({ name: name });
-        };
-        FormFieldComponent.prototype.isPasswordField = function () {
-            return this.formField.type === 'password';
-        };
-        FormFieldComponent.prototype.isPhoneField = function () {
-            return this.formField.type === 'tel';
-        };
-        FormFieldComponent.prototype.hasError = function () {
-            var _a;
-            return ((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        };
-        Object.defineProperty(FormFieldComponent.prototype, "ariaDescribedBy", {
+        Object.defineProperty(ButtonComponent.prototype, "classNames", {
             get: function () {
-                return this.hasError() ? this.errorId : undefined;
+                var className = 'amplify-button';
+                if (this.variation) {
+                    className += " amplify-button--" + this.variation;
+                }
+                if (this.size) {
+                    className += " amplify-button--" + this.size;
+                }
+                if (this.fullWidth) {
+                    className += " amplify-button--fullwidth";
+                }
+                if (this.isDisabled) {
+                    className += " amplify-button--disabled amplify-button--loading";
+                }
+                return className;
             },
             enumerable: false,
             configurable: true
         });
-        FormFieldComponent.prototype.translate = function (phrase) {
-            return ui.translate(phrase);
+        ButtonComponent.prototype.ngOnInit = function () {
+            this.typeAttr = this.type;
+            this.fullWidthAttr = this.fullWidth;
+            this.sizeAttr = this.size;
+            this.variationAttr = this.variation;
+            this.fontWeightAttr = this.fontWeight;
         };
-        return FormFieldComponent;
+        return ButtonComponent;
     }());
-    FormFieldComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-form-field',
-                    template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [defaultCountryCode]=\"formField.dialCode\"\n    [dialCodeList]=\"formField.dialCodeList\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n    type=\"tel\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [type]=\"formField.type\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n  ></amplify-text-field>\n\n  <div data-amplify-sign-up-errors *ngIf=\"hasError()\" [id]=\"errorId\">\n    <div\n      class=\"amplify-text amplify-text--error\"\n      data-variation=\"error\"\n      *ngFor=\"let error of errors\"\n    >\n      {{ translate(error) }}\n    </div>\n  </div>\n</div>\n"
-                },] }
-    ];
-    FormFieldComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    FormFieldComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        formField: [{ type: i0.Input }]
-    };
+    ButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonComponent, selector: "button[amplify-button]", inputs: { type: "type", fullWidth: "fullWidth", isDisabled: "isDisabled", size: "size", variation: "variation", fontWeight: "fontWeight" }, host: { properties: { "type": "this.typeAttr", "attr.data-fullwidth": "this.fullWidthAttr", "attr.data-size": "this.sizeAttr", "attr.data-variation": "this.variationAttr", "style.font-weight": "this.fontWeightAttr", "attr.disabled": "this.getDisabled", "class": "this.classNames" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'button[amplify-button]',
+                        templateUrl: './button.component.html',
+                    }]
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], fullWidth: [{
+                    type: i0.Input
+                }], isDisabled: [{
+                    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']
+                }], fontWeightAttr: [{
+                    type: i0.HostBinding,
+                    args: ['style.font-weight']
+                }], getDisabled: [{
+                    type: i0.HostBinding,
+                    args: ['attr.disabled']
+                }], classNames: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
 
-    var ResetPasswordComponent = /** @class */ (function () {
-        function ResetPasswordComponent(authenticator) {
+    var FederatedSignInButtonComponent = /** @class */ (function () {
+        function FederatedSignInButtonComponent(authenticator) {
+            var _this = this;
             this.authenticator = authenticator;
-            this.dataAttr = '';
-            this.headerText = ui.translate('Reset your password');
-            // translated texts
-            this.sendCodeText = ui.translate('Send Code');
-            this.backToSignInText = ui.translate('Back to Sign In');
+            this.onClick = function () {
+                _this.authenticator.send({
+                    type: 'FEDERATED_SIGN_IN',
+                    data: { provider: _this.provider },
+                });
+            };
         }
-        Object.defineProperty(ResetPasswordComponent.prototype, "context", {
-            get: function () {
-                return this.authenticator.slotContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ResetPasswordComponent.prototype.onInput = function (event) {
-            event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
-            this.authenticator.updateForm({ name: name, value: value });
+        return FederatedSignInButtonComponent;
+    }());
+    FederatedSignInButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedSignInButtonComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FederatedSignInButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FederatedSignInButtonComponent, selector: "amplify-federated-sign-in-button", inputs: { provider: "provider", text: "text" }, ngImport: i0__namespace, template: "<button\n  amplify-button\n  class=\"amplify-field-group__control federated-sign-in-button\"\n  fullWidth=\"true\"\n  fontWeight=\"normal\"\n  (click)=\"onClick()\"\n>\n  <div class=\"amplify-flex federated-sign-in-button-row\">\n    <ng-content></ng-content>\n  </div>\n</button>\n", components: [{ type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedSignInButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-federated-sign-in-button',
+                        templateUrl: './federated-sign-in-button.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { provider: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }] } });
+
+    var getSignInWithFederationText = ui.authenticatorTextUtil.getSignInWithFederationText;
+    var FederatedSignInComponent = /** @class */ (function () {
+        function FederatedSignInComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.FederatedProviders = ui.FederatedIdentityProviders;
+            this.includeAmazon = false;
+            this.includeApple = false;
+            this.includeFacebook = false;
+            this.includeGoogle = false;
+            this.shouldShowFederatedSignIn = false;
+        }
+        FederatedSignInComponent.prototype.ngOnInit = function () {
+            var _a;
+            var socialProviders = ((_a = this.authenticator.context) === null || _a === void 0 ? void 0 : _a.config).socialProviders;
+            this.setFederatedTexts();
+            this.includeAmazon = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('amazon');
+            this.includeApple = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('apple');
+            this.includeGoogle = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('google');
+            this.includeFacebook = socialProviders === null || socialProviders === void 0 ? void 0 : socialProviders.includes('facebook');
+            this.shouldShowFederatedSignIn =
+                this.includeAmazon ||
+                    this.includeApple ||
+                    this.includeFacebook ||
+                    this.includeGoogle;
         };
-        ResetPasswordComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        FederatedSignInComponent.prototype.setFederatedTexts = function () {
+            var route = this.authenticator.route;
+            this.signInAmazonText = getSignInWithFederationText(route, 'amazon');
+            this.signInAppleText = getSignInWithFederationText(route, 'apple');
+            this.signInFacebookText = getSignInWithFederationText(route, 'facebook');
+            this.signInGoogleText = getSignInWithFederationText(route, 'google');
         };
-        return ResetPasswordComponent;
+        return FederatedSignInComponent;
     }());
-    ResetPasswordComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-reset-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields route=\"resetPassword\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
-                },] }
-    ];
-    ResetPasswordComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    ResetPasswordComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
-        headerText: [{ type: i0.Input }]
-    };
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
+    FederatedSignInComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedSignInComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FederatedSignInComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FederatedSignInComponent, selector: "amplify-federated-sign-in", ngImport: i0__namespace, template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  >\n    <svg\n      aria-label=\"Amazon icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 248 268\"\n    >\n      <path\n        d=\"M139.056521,147.024612 C133.548808,156.744524 124.782731,162.726926 115.087401,162.726926 C101.790721,162.726926 93.9937779,152.612964 93.9937779,137.68681 C93.9937779,108.224571 120.447551,102.879017 145.533369,102.879017 L145.533369,110.365976 C145.533369,123.831358 145.876354,135.063787 139.056521,147.024612 M207.206992,162.579655 C209.400505,165.692256 209.887066,169.437725 207.063416,171.770186 C199.996315,177.653081 187.429476,188.590967 180.513926,194.716661 L180.46208,194.621133 C178.176838,196.663031 174.862638,196.810303 172.27828,195.445057 C160.780281,185.9162 158.686473,181.494078 152.405048,172.403055 C133.405233,191.751331 119.909143,197.534719 95.309886,197.534719 C66.1281801,197.534719 43.4791563,179.599451 43.4791563,143.669212 C43.4791563,115.616003 58.6782107,96.5105248 80.4019706,87.1727225 C99.2063636,78.9096034 125.464714,77.4528107 145.533369,75.1641337 L145.533369,70.694248 C145.533369,62.4749122 146.167493,52.7510201 141.297893,45.6541312 C137.110277,39.2856386 129.018206,36.6586354 121.859376,36.6586354 C108.658413,36.6586354 96.9171331,43.4171982 94.0416364,57.4199213 C93.4593582,60.532522 91.1701278,63.5933787 88.003492,63.7406501 L54.4387473,60.1424518 C51.6150972,59.5095829 48.4484614,57.2248862 49.2740201,52.8982915 C56.9712583,12.2553679 93.7983558,0 126.732964,0 C143.587124,0 165.606011,4.47386604 178.902691,17.2148315 C195.760839,32.917146 194.149604,53.8694866 194.149604,76.6726704 L194.149604,130.542157 C194.149604,146.734049 200.87372,153.830938 207.206992,162.579655 Z M233.826346,208.038962 C230.467669,203.683255 211.550709,205.9821 203.056405,206.998432 C200.470662,207.321077 200.076227,205.042397 202.406981,203.404973 C217.475208,192.664928 242.201125,195.766353 245.081698,199.363845 C247.966255,202.981502 244.336653,228.071183 230.172839,240.049379 C228.001452,241.888455 225.929671,240.904388 226.89783,238.468418 C230.077218,230.430525 237.204944,212.418868 233.826346,208.038962 Z M126.768855,264 C74.0234043,264 42.0764048,241.955028 17.7852554,217.541992 C12.9733903,212.705982 6.71799208,206.295994 3.31151296,200.690918 C1.90227474,198.372135 5.59096074,195.021875 8.0442063,196.84375 C38.2390146,219.267578 82.1011654,239.538304 125.529506,239.538304 C154.819967,239.538304 191.046475,227.469543 220.66851,214.867659 C225.146771,212.966167 225.146771,219.180222 224.511585,221.060516 C224.183264,222.03242 209.514625,236.221149 189.247207,247.047411 C170.304273,257.166172 146.397132,264 126.768855,264 Z\"\n        fill=\"#FF9900\"\n      ></path>\n    </svg>\n\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInAmazonText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeApple\"\n    [provider]=\"FederatedProviders.Apple\"\n  >\n    <svg\n      aria-label=\"Apple icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      fill=\"#000\"\n      preserveAspectRatio=\"xMidYMid\"\n      stroke=\"#000\"\n      strokeWidth=\"0\"\n      viewBox=\"0 0 1024 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInAppleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  >\n    <svg\n      aria-label=\"Facebook icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 279 538\"\n    >\n      <path\n        d=\"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z\"\n        fill=\"#1877F2\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInFacebookText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [provider]=\"FederatedProviders.Google\"\n  >\n    <svg\n      aria-label=\"Google icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 256 262\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <path\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n        fill=\"#4285F4\"\n      ></path>\n      <path\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n        fill=\"#34A853\"\n      ></path>\n      <path\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n        fill=\"#FBBC05\"\n      ></path>\n      <path\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n        fill=\"#EB4335\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text amplify-authenticator__federated-text\">\n      {{ signInGoogleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <hr\n    class=\"amplify-divider amplify-divider--label amplify-divider--small\"\n    aria-orientation=\"horizontal\"\n    data-size=\"small\"\n    data-label=\"or\"\n  />\n</div>\n", components: [{ type: FederatedSignInButtonComponent, selector: "amplify-federated-sign-in-button", inputs: ["provider", "text"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FederatedSignInComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-federated-sign-in',
+                        templateUrl: './federated-sign-in.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; } });
 
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
+    var SelectComponent = /** @class */ (function () {
+        function SelectComponent() {
+        }
+        return SelectComponent;
+    }());
+    SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "amplify-form-select", inputs: { items: "items", name: "name", label: "label", id: "id", defaultValue: "defaultValue" }, ngImport: i0__namespace, template: "<label class=\"amplify-label amplify-visually-hidden\" [for]=\"id\">{{\n  label\n}}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon amplify-icon--large\"\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", directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-form-select',
+                        templateUrl: './select.component.html',
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], defaultValue: [{
+                    type: i0.Input
+                }] } });
 
-    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;
+    var PhoneNumberFieldComponent = /** @class */ (function () {
+        function PhoneNumberFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.selectFieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.textFieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.labelHidden = false;
+            this.display = 'contents';
+        }
+        PhoneNumberFieldComponent.prototype.ngOnInit = function () {
+            var _a;
+            this.countryDialCodesValues = (_a = this.dialCodeList) !== null && _a !== void 0 ? _a : ui.countryDialCodes;
         };
-        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 };
+        return PhoneNumberFieldComponent;
+    }());
+    PhoneNumberFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PhoneNumberFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PhoneNumberFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PhoneNumberFieldComponent, selector: "amplify-phone-number-field", inputs: { autocomplete: "autocomplete", disabled: "disabled", defaultCountryCode: "defaultCountryCode", selectFieldId: "selectFieldId", textFieldId: "textFieldId", initialValue: "initialValue", label: "label", name: "name", placeholder: "placeholder", required: "required", type: "type", labelHidden: "labelHidden", dialCodeList: "dialCodeList", hasError: "hasError", describedBy: "describedBy" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0__namespace, template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex\n        amplify-field\n        amplify-selectfield\n        amplify-countrycodeselect\n        amplify-dialcodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodesValues\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\n  />\n</div>\n", components: [{ type: SelectComponent, selector: "amplify-form-select", inputs: ["items", "name", "label", "id", "defaultValue"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PhoneNumberFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-phone-number-field',
+                        templateUrl: './phone-number-field.component.html',
+                    }]
+            }], 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
+                }], labelHidden: [{
+                    type: i0.Input
+                }], dialCodeList: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], describedBy: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.HostBinding,
+                    args: ['style.display']
+                }] } });
+
+    var PasswordFieldComponent = /** @class */ (function () {
+        function PasswordFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.labelHidden = false;
+            this.setBlur = new i0.EventEmitter();
+            this.type = 'password';
+            this.showPassword = false;
+            this.showPasswordButtonlabel = ui.translate('Show password');
+        }
+        PasswordFieldComponent.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 PasswordFieldComponent;
+    }());
+    PasswordFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PasswordFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PasswordFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PasswordFieldComponent, selector: "amplify-password-field", inputs: { autocomplete: "autocomplete", disabled: "disabled", fieldId: "fieldId", initialValue: "initialValue", label: "label", name: "name", placeholder: "placeholder", required: "required", labelHidden: "labelHidden", hasError: "hasError", describedBy: "describedBy" }, outputs: { setBlur: "setBlur" }, ngImport: i0__namespace, template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\n    (blur)=\"setBlur.emit($event)\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PasswordFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-password-field',
+                        templateUrl: './password-field.component.html',
+                    }]
+            }], propDecorators: { autocomplete: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], fieldId: [{
+                    type: i0.Input
+                }], initialValue: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], labelHidden: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], describedBy: [{
+                    type: i0.Input
+                }], setBlur: [{
+                    type: i0.Output
+                }] } });
+
+    var TextFieldComponent = /** @class */ (function () {
+        function TextFieldComponent() {
+            this.autocomplete = 'new-password';
+            this.disabled = false;
+            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
+            this.initialValue = '';
+            this.label = '';
+            this.placeholder = '';
+            this.required = true;
+            this.labelHidden = false;
+            this.display = 'contents';
         }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-            desc = { enumerable: true, get: function () { return m[k]; } };
+        return TextFieldComponent;
+    }());
+    TextFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextFieldComponent, selector: "amplify-text-field", inputs: { autocomplete: "autocomplete", disabled: "disabled", fieldId: "fieldId", initialValue: "initialValue", label: "label", name: "name", placeholder: "placeholder", required: "required", type: "type", labelHidden: "labelHidden", hasError: "hasError", describedBy: "describedBy" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0__namespace, template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\n  [type]=\"type\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [required]=\"required\"\n  [value]=\"initialValue\"\n  [autocomplete]=\"autocomplete\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n  [attr.aria-describedby]=\"describedBy\"\n/>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-text-field',
+                        templateUrl: './text-field.component.html',
+                    }]
+            }], propDecorators: { autocomplete: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], fieldId: [{
+                    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
+                }], labelHidden: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], describedBy: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.HostBinding,
+                    args: ['style.display']
+                }] } });
+
+    var FormFieldComponent = /** @class */ (function () {
+        function FormFieldComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.countryDialCodesValue = ui.countryDialCodes;
+            this.errorId = nanoid.nanoid(12);
         }
-        Object.defineProperty(o, k2, desc);
-    }) : (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);
+        Object.defineProperty(FormFieldComponent.prototype, "errors", {
+            get: function () {
+                var validationErrors = this.authenticator.validationErrors;
+                return ui.getErrors(validationErrors[this.name]);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormFieldComponent.prototype.onBlur = function ($event) {
+            var name = $event.target.name;
+            this.authenticator.updateBlur({ name: name });
+        };
+        FormFieldComponent.prototype.isPasswordField = function () {
+            return this.formField.type === 'password';
+        };
+        FormFieldComponent.prototype.isPhoneField = function () {
+            return this.formField.type === 'tel';
+        };
+        FormFieldComponent.prototype.hasError = function () {
+            var _a;
+            return ((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        };
+        Object.defineProperty(FormFieldComponent.prototype, "ariaDescribedBy", {
+            get: function () {
+                return this.hasError() ? this.errorId : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormFieldComponent.prototype.translate = function (phrase) {
+            return ui.translate(phrase);
+        };
+        return FormFieldComponent;
+    }());
+    FormFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormFieldComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FormFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormFieldComponent, selector: "amplify-form-field", inputs: { name: "name", formField: "formField" }, ngImport: i0__namespace, template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [defaultCountryCode]=\"formField.dialCode\"\n    [dialCodeList]=\"formField.dialCodeList\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n    type=\"tel\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [type]=\"formField.type\"\n    [hasError]=\"hasError\"\n    [describedBy]=\"ariaDescribedBy\"\n  ></amplify-text-field>\n\n  <div data-amplify-sign-up-errors *ngIf=\"hasError()\" [id]=\"errorId\">\n    <div\n      class=\"amplify-text amplify-text--error\"\n      data-variation=\"error\"\n      *ngFor=\"let error of errors\"\n    >\n      {{ translate(error) }}\n    </div>\n  </div>\n</div>\n", components: [{ type: PhoneNumberFieldComponent, selector: "amplify-phone-number-field", inputs: ["autocomplete", "disabled", "defaultCountryCode", "selectFieldId", "textFieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "dialCodeList", "hasError", "describedBy"] }, { type: PasswordFieldComponent, selector: "amplify-password-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "labelHidden", "hasError", "describedBy"], outputs: ["setBlur"] }, { type: TextFieldComponent, selector: "amplify-text-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "hasError", "describedBy"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-form-field',
+                        templateUrl: './form-field.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], formField: [{
+                    type: i0.Input
+                }] } });
+
+    /**
+     * Sorts the given formFields, then renders them in order.
+     */
+    var BaseFormFieldsComponent = /** @class */ (function () {
+        function BaseFormFieldsComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.display = 'contents';
+            this.formFields = [];
         }
-        catch (error) {
-            e = { error: error };
+        BaseFormFieldsComponent.prototype.ngOnInit = function () {
+            var state = this.authenticator.authState;
+            this.formFields = ui.getSortedFormFields(this.route, state);
+        };
+        return BaseFormFieldsComponent;
+    }());
+    BaseFormFieldsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseFormFieldsComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BaseFormFieldsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: { route: "route" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let formField of formFields\">\n  <amplify-form-field\n    [name]=\"formField[0]\"\n    [formField]=\"formField[1]\"\n  ></amplify-form-field>\n</ng-container>\n", components: [{ type: FormFieldComponent, selector: "amplify-form-field", inputs: ["name", "formField"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseFormFieldsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-base-form-fields',
+                        templateUrl: './base-form-fields.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { route: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.HostBinding,
+                    args: ['style.display']
+                }] } });
+
+    var ErrorComponent = /** @class */ (function () {
+        function ErrorComponent() {
+            this.isVisible = true;
+            this.dismissAriaLabel = ui.translate('Dismiss alert');
         }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
+        ErrorComponent.prototype.close = function () {
+            this.isVisible = false;
+        };
+        return ErrorComponent;
+    }());
+    ErrorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ErrorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ErrorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorComponent, selector: "amplify-error", ngImport: i0__namespace, template: "<div\n  class=\"amplify-flex amplify-alert amplify-alert--error\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control amplify-alert__dismiss\"\n    [attr.aria-label]=\"dismissAriaLabel\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n", components: [{ type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ErrorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-error',
+                        templateUrl: './error.component.html',
+                    }]
+            }] });
+
+    var getForgotPasswordText = ui.authenticatorTextUtil.getForgotPasswordText, getSignInText = ui.authenticatorTextUtil.getSignInText;
+    var SignInComponent = /** @class */ (function () {
+        function SignInComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.forgotPasswordText = getForgotPasswordText();
+            this.signInButtonText = getSignInText();
         }
-        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));
+        Object.defineProperty(SignInComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SignInComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        SignInComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return SignInComponent;
+    }());
+    SignInComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignInComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SignInComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignInComponent, selector: "amplify-sign-in", host: { properties: { "attr.data-amplify-authenticator-signin": "this.dataAttr" } }, ngImport: i0__namespace, template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <legend class=\"amplify-visually-hidden\">Sign in</legend>\n    <amplify-base-form-fields route=\"signIn\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button\n      amplify-button\n      fontWeight=\"normal\"\n      size=\"small\"\n      variation=\"link\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\"\n    >\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: FederatedSignInComponent, selector: "amplify-federated-sign-in" }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignInComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-sign-in',
+                        templateUrl: './sign-in.component.html',
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-signin']
+                }] } });
+
+    var SignUpFormFieldsComponent = /** @class */ (function () {
+        function SignUpFormFieldsComponent() {
         }
-        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 });
+        return SignUpFormFieldsComponent;
+    }());
+    SignUpFormFieldsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignUpFormFieldsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SignUpFormFieldsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignUpFormFieldsComponent, selector: "amplify-sign-up-form-fields", ngImport: i0__namespace, template: "<div class=\"amplify-flex amplify-authenticator__column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"signUp\"></amplify-base-form-fields>\n</div>\n", components: [{ type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignUpFormFieldsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-sign-up-form-fields',
+                        templateUrl: './sign-up-form-fields.component.html',
+                    }]
+            }] });
+
+    var getCreateAccountText = ui.authenticatorTextUtil.getCreateAccountText;
+    var SignUpComponent = /** @class */ (function () {
+        function SignUpComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            // translated texts
+            this.createAccountText = getCreateAccountText();
+        }
+        Object.defineProperty(SignUpComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SignUpComponent.prototype.onInput = function (event) {
+            var _a = event.target, checked = _a.checked, name = _a.name, type = _a.type, value = _a.value;
+            if (type === 'checkbox' && !checked)
+                value = undefined;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        SignUpComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return SignUpComponent;
+    }());
+    SignUpComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignUpComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SignUpComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignUpComponent, selector: "amplify-sign-up", host: { properties: { "attr.data-amplify-authenticator-signup": "this.dataAttr" } }, ngImport: i0__namespace, template: "<amplify-slot name=\"sign-up-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <div class=\"amplify-flex amplify-authenticator__column\">\n    <div class=\"amplify-flex amplify-authenticator__column\">\n      <amplify-slot name=\"sign-up-form-fields\" [context]=\"context\">\n        <amplify-sign-up-form-fields></amplify-sign-up-form-fields>\n      </amplify-slot>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </div>\n\n    <amplify-slot name=\"sign-up-button\" [context]=\"context\">\n      <button\n        [isDisabled]=\"\n          authenticator.isPending || authenticator.hasValidationErrors\n        \"\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n      >\n        {{ createAccountText }}\n      </button>\n    </amplify-slot>\n  </div>\n</form>\n\n<amplify-slot name=\"sign-up-footer\" [context]=\"context\"> </amplify-slot>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: FederatedSignInComponent, selector: "amplify-federated-sign-in" }, { type: SignUpFormFieldsComponent, selector: "amplify-sign-up-form-fields" }, { type: ErrorComponent, selector: "amplify-error" }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SignUpComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-sign-up',
+                        templateUrl: './sign-up.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-signup']
+                }] } });
+
+    var getResendCodeText$1 = ui.authenticatorTextUtil.getResendCodeText, getConfirmText$2 = ui.authenticatorTextUtil.getConfirmText, getDeliveryMethodText = ui.authenticatorTextUtil.getDeliveryMethodText, getDeliveryMessageText = ui.authenticatorTextUtil.getDeliveryMessageText;
+    var ConfirmSignUpComponent = /** @class */ (function () {
+        function ConfirmSignUpComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            // translated texts
+            this.resendCodeText = getResendCodeText$1();
+            this.confirmText = getConfirmText$2();
         }
-        else {
-            cooked.raw = raw;
+        Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
+            get: function () {
+                var codeDeliveryDetails = this.authenticator.codeDeliveryDetails;
+                return getDeliveryMethodText(codeDeliveryDetails);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
+            get: function () {
+                var codeDeliveryDetails = this.authenticator.codeDeliveryDetails;
+                return getDeliveryMessageText(codeDeliveryDetails);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmSignUpComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        ConfirmSignUpComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return ConfirmSignUpComponent;
+    }());
+    ConfirmSignUpComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmSignUpComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ConfirmSignUpComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ConfirmSignUpComponent, selector: "amplify-confirm-sign-up", host: { properties: { "attr.data-amplify-authenticator-confirmsignup": "this.dataAttr" } }, ngImport: i0__namespace, template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex amplify-authenticator__column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3\n          class=\"amplify-heading amplify-authenticator__heading\"\n          style=\"font-size: 1.5rem\"\n        >\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span class=\"amplify-authenticator__subtitle\">\n        {{ subtitleText }}\n      </span>\n      <amplify-base-form-fields\n        route=\"confirmSignUp\"\n      ></amplify-base-form-fields>\n\n      <button\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n        [isDisabled]=\"authenticator.isPending\"\n      >\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmSignUpComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-confirm-sign-up',
+                        templateUrl: './confirm-sign-up.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-confirmsignup']
+                }] } });
+
+    var getConfirmText$1 = ui.authenticatorTextUtil.getConfirmText, getBackToSignInText$4 = ui.authenticatorTextUtil.getBackToSignInText, getChallengeText = ui.authenticatorTextUtil.getChallengeText;
+    var ConfirmSignInComponent = /** @class */ (function () {
+        function ConfirmSignInComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.confirmText = getConfirmText$1();
+            this.backToSignInText = getBackToSignInText$4();
         }
-        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;
-    }
-    function __classPrivateFieldIn(state, receiver) {
-        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
-            throw new TypeError("Cannot use 'in' operator on non-object");
-        return typeof state === "function" ? receiver === state : state.has(receiver);
-    }
+        ConfirmSignInComponent.prototype.ngOnInit = function () {
+            this.setHeaderText();
+        };
+        Object.defineProperty(ConfirmSignInComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmSignInComponent.prototype.setHeaderText = function () {
+            var state = this.authenticator.authState;
+            var actorContext = ui.getActorContext(state);
+            var challengeName = actorContext.challengeName;
+            this.headerText = getChallengeText(challengeName);
+        };
+        ConfirmSignInComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        ConfirmSignInComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return ConfirmSignInComponent;
+    }());
+    ConfirmSignInComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmSignInComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ConfirmSignInComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ConfirmSignInComponent, selector: "amplify-confirm-sign-in", host: { properties: { "attr.data-amplify-authenticator-confirmsignin": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields route=\"confirmSignIn\"></amplify-base-form-fields>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmSignInComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-confirm-sign-in',
+                        templateUrl: './confirm-sign-in.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-confirmsignin']
+                }] } });
 
     var logger = new awsAmplify.Logger('SetupTotp');
+    var getSetupTOTPText = ui.authenticatorTextUtil.getSetupTOTPText, getCopyText = ui.authenticatorTextUtil.getCopyText, getBackToSignInText$3 = ui.authenticatorTextUtil.getBackToSignInText, getConfirmText = ui.authenticatorTextUtil.getConfirmText, getCopiedText = ui.authenticatorTextUtil.getCopiedText;
     var SetupTotpComponent = /** @class */ (function () {
         function SetupTotpComponent(authenticator) {
             this.authenticator = authenticator;
             this.dataAttr = '';
-            this.headerText = ui.translate('Setup TOTP');
+            this.headerText = getSetupTOTPText();
             this.qrCodeSource = '';
             this.secretKey = '';
-            this.copyTextLabel = ui.translate('COPY');
+            this.copyTextLabel = getCopyText();
             // translated texts
-            this.backToSignInText = ui.translate('Back to Sign In');
-            this.confirmText = ui.translate('Confirm');
+            this.backToSignInText = getBackToSignInText$3();
+            this.confirmText = getConfirmText();
         }
         SetupTotpComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -1307,129 +1483,181 @@
         };
         SetupTotpComponent.prototype.copyText = function () {
             navigator.clipboard.writeText(this.secretKey);
-            this.copyTextLabel = ui.translate('COPIED');
+            this.copyTextLabel = getCopiedText();
         };
         return SetupTotpComponent;
     }());
-    SetupTotpComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-setup-totp',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-base-form-fields route=\"setupTOTP\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n"
-                },] }
-    ];
-    SetupTotpComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    SetupTotpComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
-    };
+    SetupTotpComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SetupTotpComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SetupTotpComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SetupTotpComponent, selector: "amplify-setup-totp", host: { properties: { "attr.data-amplify-authenticator-setup-totp": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-base-form-fields route=\"setupTOTP\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SetupTotpComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-setup-totp',
+                        templateUrl: './setup-totp.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-setup-totp']
+                }] } });
 
-    var SignInComponent = /** @class */ (function () {
-        function SignInComponent(authenticator) {
+    var ForceNewPasswordFormFieldsComponent = /** @class */ (function () {
+        function ForceNewPasswordFormFieldsComponent() {
+        }
+        return ForceNewPasswordFormFieldsComponent;
+    }());
+    ForceNewPasswordFormFieldsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ForceNewPasswordFormFieldsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ForceNewPasswordFormFieldsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ForceNewPasswordFormFieldsComponent, selector: "amplify-force-new-password-form-fields", ngImport: i0__namespace, template: "<div class=\"amplify-flex amplify-authenticator__column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"forceNewPassword\"></amplify-base-form-fields>\n</div>\n", components: [{ type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ForceNewPasswordFormFieldsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-force-new-password-form-fields',
+                        templateUrl: './force-new-password-form-fields.component.html',
+                    }]
+            }] });
+
+    var getChangePasswordText = ui.authenticatorTextUtil.getChangePasswordText, getBackToSignInText$2 = ui.authenticatorTextUtil.getBackToSignInText;
+    var ForceNewPasswordComponent = /** @class */ (function () {
+        function ForceNewPasswordComponent(authenticator) {
             this.authenticator = authenticator;
             this.dataAttr = '';
-            // translated phrases
-            // Support backwards compatibility for legacy key with trailing space
-            this.forgotPasswordText = !ui.hasTranslation('Forgot your password? ')
-                ? ui.translate('Forgot your password?')
-                : ui.translate('Forgot your password? ');
-            this.signInButtonText = ui.translate('Sign in');
+            this.headerText = getChangePasswordText();
+            // translated texts
+            this.changePasswordText = getChangePasswordText();
+            this.backToSignInText = getBackToSignInText$2();
         }
-        Object.defineProperty(SignInComponent.prototype, "context", {
+        Object.defineProperty(ForceNewPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        SignInComponent.prototype.onInput = function (event) {
+        ForceNewPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
             var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
-        SignInComponent.prototype.onSubmit = function (event) {
+        ForceNewPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
             this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
-        return SignInComponent;
+        return ForceNewPasswordComponent;
     }());
-    SignInComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-in',
-                    template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <legend class=\"amplify-visually-hidden\">Sign in</legend>\n    <amplify-base-form-fields route=\"signIn\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button\n      amplify-button\n      fontWeight=\"normal\"\n      size=\"small\"\n      variation=\"link\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\"\n    >\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    SignInComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    SignInComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signin',] }]
-    };
+    ForceNewPasswordComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ForceNewPasswordComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ForceNewPasswordComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ForceNewPasswordComponent, selector: "amplify-force-new-password", inputs: { headerText: "headerText" }, host: { properties: { "attr.data-amplify-authenticator-forcenewpassword": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: ForceNewPasswordFormFieldsComponent, selector: "amplify-force-new-password-form-fields" }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ForceNewPasswordComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-force-new-password',
+                        templateUrl: './force-new-password.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-forcenewpassword']
+                }], headerText: [{
+                    type: i0.Input
+                }] } });
 
-    var SignUpComponent = /** @class */ (function () {
-        function SignUpComponent(authenticator) {
+    var getResetYourPasswordText$1 = ui.authenticatorTextUtil.getResetYourPasswordText, getSendCodeText = ui.authenticatorTextUtil.getSendCodeText, getBackToSignInText$1 = ui.authenticatorTextUtil.getBackToSignInText;
+    var ResetPasswordComponent = /** @class */ (function () {
+        function ResetPasswordComponent(authenticator) {
             this.authenticator = authenticator;
             this.dataAttr = '';
+            this.headerText = getResetYourPasswordText$1();
             // translated texts
-            this.createAccountText = ui.translate('Create Account');
+            this.sendCodeText = getSendCodeText();
+            this.backToSignInText = getBackToSignInText$1();
         }
-        Object.defineProperty(SignUpComponent.prototype, "context", {
+        Object.defineProperty(ResetPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        SignUpComponent.prototype.onInput = function (event) {
-            var _a = event.target, checked = _a.checked, name = _a.name, type = _a.type, value = _a.value;
-            if (type === 'checkbox' && !checked)
-                value = undefined;
+        ResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
-        SignUpComponent.prototype.onSubmit = function (event) {
+        ResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
             this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
-        return SignUpComponent;
+        return ResetPasswordComponent;
     }());
-    SignUpComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-up',
-                    template: "<amplify-slot name=\"sign-up-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <div class=\"amplify-flex amplify-authenticator__column\">\n    <div class=\"amplify-flex amplify-authenticator__column\">\n      <amplify-slot name=\"sign-up-form-fields\" [context]=\"context\">\n        <amplify-sign-up-form-fields></amplify-sign-up-form-fields>\n      </amplify-slot>\n\n      <amplify-error *ngIf=\"authenticator.error\">\n        {{ authenticator.error }}\n      </amplify-error>\n    </div>\n\n    <amplify-slot name=\"sign-up-button\" [context]=\"context\">\n      <button\n        [isDisabled]=\"\n          authenticator.isPending || authenticator.hasValidationErrors\n        \"\n        amplify-button\n        variation=\"primary\"\n        fullWidth=\"true\"\n        type=\"submit\"\n      >\n        {{ createAccountText }}\n      </button>\n    </amplify-slot>\n  </div>\n</form>\n\n<amplify-slot name=\"sign-up-footer\" [context]=\"context\"> </amplify-slot>\n"
-                },] }
-    ];
-    SignUpComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    SignUpComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-signup',] }]
-    };
+    ResetPasswordComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResetPasswordComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ResetPasswordComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ResetPasswordComponent, selector: "amplify-reset-password", inputs: { headerText: "headerText" }, host: { properties: { "attr.data-amplify-authenticator-resetPassword": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields route=\"resetPassword\"></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResetPasswordComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-reset-password',
+                        templateUrl: './reset-password.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-resetPassword']
+                }], headerText: [{
+                    type: i0.Input
+                }] } });
 
-    var SignUpFormFieldsComponent = /** @class */ (function () {
-        function SignUpFormFieldsComponent() {
+    var getBackToSignInText = ui.authenticatorTextUtil.getBackToSignInText, getResendCodeText = ui.authenticatorTextUtil.getResendCodeText, getSubmitText$1 = ui.authenticatorTextUtil.getSubmitText, getResetYourPasswordText = ui.authenticatorTextUtil.getResetYourPasswordText;
+    var ConfirmResetPasswordComponent = /** @class */ (function () {
+        function ConfirmResetPasswordComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.headerText = getResetYourPasswordText();
+            // translated strings
+            this.backToSignInText = getBackToSignInText();
+            this.resendCodeText = getResendCodeText();
+            this.submitText = getSubmitText$1();
         }
-        return SignUpFormFieldsComponent;
+        Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmResetPasswordComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return ConfirmResetPasswordComponent;
     }());
-    SignUpFormFieldsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-sign-up-form-fields',
-                    template: "<div class=\"amplify-flex amplify-authenticator__column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"signUp\"></amplify-base-form-fields>\n</div>\n"
-                },] }
-    ];
+    ConfirmResetPasswordComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmResetPasswordComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ConfirmResetPasswordComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ConfirmResetPasswordComponent, selector: "amplify-confirm-reset-password", inputs: { headerText: "headerText" }, host: { properties: { "attr.data-amplify-authenticator-confirmsignin": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields\n      route=\"confirmResetPassword\"\n    ></amplify-base-form-fields>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmResetPasswordComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-confirm-reset-password',
+                        templateUrl: './amplify-confirm-reset-password.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-confirmsignin']
+                }], headerText: [{
+                    type: i0.Input
+                }] } });
 
     var getAttributeMap = function () { return ui.defaultFormFieldOptions; };
 
+    var getSkipText$1 = ui.authenticatorTextUtil.getSkipText, getVerifyText = ui.authenticatorTextUtil.getVerifyText, getAccountRecoveryInfoText$1 = ui.authenticatorTextUtil.getAccountRecoveryInfoText;
     var VerifyUserComponent = /** @class */ (function () {
         function VerifyUserComponent(authenticator) {
             this.authenticator = authenticator;
             this.dataAttr = '';
-            this.headerText = ui.translate('Account recovery requires verified contact information');
+            this.headerText = getAccountRecoveryInfoText$1();
             this.unverifiedContactMethods = {};
             this.labelId = nanoid.nanoid(12);
             // translated texts
-            this.skipText = ui.translate('Skip');
-            this.verifyText = ui.translate('Verify');
+            this.skipText = getSkipText$1();
+            this.verifyText = getVerifyText();
         }
         VerifyUserComponent.prototype.ngOnInit = function () {
             var actorState = ui.getActorState(this.authenticator.authState);
@@ -1453,145 +1681,245 @@
             var _b = event.target, name = _b.name, value = _b.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
-        VerifyUserComponent.prototype.onSubmit = function (event) {
-            event.preventDefault();
-            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        VerifyUserComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return VerifyUserComponent;
+    }());
+    VerifyUserComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerifyUserComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VerifyUserComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerifyUserComponent, selector: "amplify-verify-user", inputs: { headerText: "headerText" }, host: { properties: { "attr.data-amplify-authenticator-verifyuser": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <div\n      *ngFor=\"\n        let unverifiedContactMethod of unverifiedContactMethods | keyvalue\n      \"\n    >\n      <input\n        name=\"unverifiedAttr\"\n        type=\"radio\"\n        [value]=\"unverifiedContactMethod.key\"\n        [id]=\"labelId\"\n      />\n      <label [for]=\"labelId\">{{\n        getLabelForAttr(unverifiedContactMethod.key)\n      }}</label>\n    </div>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ verifyText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"verify-user-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "keyvalue": i6__namespace.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerifyUserComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-verify-user',
+                        templateUrl: './verify-user.component.html',
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-verifyuser']
+                }], headerText: [{
+                    type: i0.Input
+                }] } });
+
+    var getAccountRecoveryInfoText = ui.authenticatorTextUtil.getAccountRecoveryInfoText, getSkipText = ui.authenticatorTextUtil.getSkipText, getSubmitText = ui.authenticatorTextUtil.getSubmitText;
+    var ConfirmVerifyUserComponent = /** @class */ (function () {
+        function ConfirmVerifyUserComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.dataAttr = '';
+            this.headerText = getAccountRecoveryInfoText();
+            // translated texts
+            this.skipText = getSkipText();
+            this.submitText = getSubmitText();
+        }
+        Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
+            get: function () {
+                return this.authenticator.slotContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ConfirmVerifyUserComponent.prototype.onInput = function (event) {
+            event.preventDefault();
+            var _a = event.target, name = _a.name, value = _a.value;
+            this.authenticator.updateForm({ name: name, value: value });
+        };
+        ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
+            event.preventDefault();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
+        };
+        return ConfirmVerifyUserComponent;
+    }());
+    ConfirmVerifyUserComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmVerifyUserComponent, deps: [{ token: AuthenticatorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ConfirmVerifyUserComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ConfirmVerifyUserComponent, selector: "amplify-confirm-verify-user", inputs: { headerText: "headerText" }, host: { properties: { "attr.data-amplify-authenticator-confirmverifyuser": "this.dataAttr" } }, ngImport: i0__namespace, template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields\n      route=\"confirmVerifyUser\"\n    ></amplify-base-form-fields>\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { type: ErrorComponent, selector: "amplify-error" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ConfirmVerifyUserComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-confirm-verify-user',
+                        templateUrl: './amplify-confirm-verify-user.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { dataAttr: [{
+                    type: i0.HostBinding,
+                    args: ['attr.data-amplify-authenticator-confirmverifyuser']
+                }], headerText: [{
+                    type: i0.Input
+                }] } });
+
+    var getSignInTabText = ui.authenticatorTextUtil.getSignInTabText, getSignUpTabText = ui.authenticatorTextUtil.getSignUpTabText;
+    var AuthenticatorComponent = /** @class */ (function () {
+        function AuthenticatorComponent(authenticator, contextService, changeDetector) {
+            this.authenticator = authenticator;
+            this.contextService = contextService;
+            this.changeDetector = changeDetector;
+            this.customComponentQuery = null;
+            // translated texts
+            this.signInTitle = getSignInTabText();
+            this.signUpTitle = getSignUpTabText();
+            this.hasInitialized = false;
+            this.isHandlingHubEvent = false;
+        }
+        AuthenticatorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders, formFields = _a.formFields;
+            var _b = this.authenticator, authService = _b.authService, initializeMachine = _b.initializeMachine;
+            this.unsubscribeHub = ui.listenToAuthHub(authService, function (data, service) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, ui.defaultAuthHubHandler(data, service)];
+                        case 1:
+                            _a.sent();
+                            /**
+                             * Hub events aren't properly caught by Angular, because they are
+                             * synchronous events. Angular tracks async network events and
+                             * html events, but not synchronous events like hub.
+                             *
+                             * On any notable hub events, we run change detection manually.
+                             */
+                            this.changeDetector.detectChanges();
+                            /**
+                             * Hub events that we handle can lead to multiple state changes:
+                             * e.g. `authenticated` -> `signOut` -> initialState.
+                             *
+                             * We want to ensure change detection runs all the way, until
+                             * we reach back to the initial state. Setting the below flag
+                             * to true to until we reach initial state.
+                             */
+                            this.isHandlingHubEvent = true;
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            /**
+             * Subscribes to state machine changes and sends INIT event
+             * once machine reaches 'setup' state.
+             */
+            this.unsubscribeMachine = this.authenticator.subscribe(function () {
+                var route = _this.authenticator.route;
+                if (_this.isHandlingHubEvent) {
+                    _this.changeDetector.detectChanges();
+                    var initialStateWithDefault = initialState !== null && initialState !== void 0 ? initialState : 'signIn';
+                    // We can stop manual change detection if we're back to the initial state
+                    if (route === initialStateWithDefault) {
+                        _this.isHandlingHubEvent = false;
+                    }
+                }
+                if (!_this.hasInitialized && route === 'setup') {
+                    initializeMachine({
+                        initialState: initialState,
+                        loginMechanisms: loginMechanisms,
+                        services: services,
+                        signUpAttributes: signUpAttributes,
+                        socialProviders: socialProviders,
+                        formFields: formFields,
+                    });
+                    _this.hasInitialized = true;
+                }
+            }).unsubscribe;
+            /**
+             * handling translations after content init, because authenticator and its
+             * translations might be initialized before the main app's `ngOnInit` is run.
+             */
+            this.signInTitle = getSignInTabText();
+            this.signUpTitle = getSignUpTabText();
+        };
+        /**
+         * Lifecycle Methods
+         */
+        AuthenticatorComponent.prototype.ngAfterContentInit = function () {
+            this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
         };
-        return VerifyUserComponent;
-    }());
-    VerifyUserComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-verify-user',
-                    template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex amplify-authenticator__column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading amplify-heading--3\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <div\n      *ngFor=\"\n        let unverifiedContactMethod of unverifiedContactMethods | keyvalue\n      \"\n    >\n      <input\n        name=\"unverifiedAttr\"\n        type=\"radio\"\n        [value]=\"unverifiedContactMethod.key\"\n        [id]=\"labelId\"\n      />\n      <label [for]=\"labelId\">{{\n        getLabelForAttr(unverifiedContactMethod.key)\n      }}</label>\n    </div>\n\n    <button\n      amplify-button\n      variation=\"primary\"\n      fullWidth=\"true\"\n      type=\"submit\"\n      [isDisabled]=\"authenticator.isPending\"\n    >\n      {{ verifyText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"verify-user-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    VerifyUserComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    VerifyUserComponent.propDecorators = {
-        dataAttr: [{ type: i0.HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
-        headerText: [{ type: i0.Input }]
-    };
-
-    /**
-     * Sorts the given formFields, then renders them in order.
-     */
-    var BaseFormFieldsComponent = /** @class */ (function () {
-        function BaseFormFieldsComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.display = 'contents';
-            this.formFields = [];
-        }
-        BaseFormFieldsComponent.prototype.ngOnInit = function () {
-            var state = this.authenticator.authState;
-            this.formFields = ui.getSortedFormFields(this.route, state);
-            if (this.route === 'confirmSignUp') {
-                this.handleConfirmSignUp();
-            }
+        AuthenticatorComponent.prototype.ngOnDestroy = function () {
+            if (this.unsubscribeMachine)
+                this.unsubscribeMachine();
+            if (this.unsubscribeHub)
+                this.unsubscribeHub();
         };
-        BaseFormFieldsComponent.prototype.handleConfirmSignUp = function () {
+        Object.defineProperty(AuthenticatorComponent.prototype, "context", {
             /**
-             * @todo(breaking): Angular `confirmSignUp` has different placholder here from other frameworks.
-             *
-             * Translating here in a backwards-compatible manner, but should be resolved in next major version.
+             * Class Functions
              */
-            var _a;
-            var state = this.authenticator.authState;
-            // backwards compatible placeholder text
-            var placeholder = !ui.hasTranslation('Confirmation Code')
-                ? ui.translate('Enter your code') // prioritize new placeholder
-                : ui.translate('Confirmation Code'); // legacy placeholder
-            var defaultFormFields = ui.getDefaultFormFields(this.route, state);
-            if (defaultFormFields.confirmation_code.placeholder) {
-                defaultFormFields.confirmation_code.placeholder = placeholder;
-            }
-            var customFormFields = ((_a = ui.getActorContext(state).formFields) === null || _a === void 0 ? void 0 : _a.confirmSignUp) || {};
-            var newFormFields = ui.applyDefaults(defaultFormFields, customFormFields);
-            this.formFields = ui.sortFormFields(newFormFields);
-        };
-        return BaseFormFieldsComponent;
-    }());
-    BaseFormFieldsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-base-form-fields',
-                    template: "<ng-container *ngFor=\"let formField of formFields\">\n  <amplify-form-field\n    [name]=\"formField[0]\"\n    [formField]=\"formField[1]\"\n  ></amplify-form-field>\n</ng-container>\n"
-                },] }
-    ];
-    BaseFormFieldsComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    BaseFormFieldsComponent.propDecorators = {
-        route: [{ type: i0.Input }],
-        display: [{ type: i0.HostBinding, args: ['style.display',] }]
-    };
-
-    var ButtonComponent = /** @class */ (function () {
-        function ButtonComponent() {
-            this.type = 'button';
-            this.fullWidth = false;
-            this.isDisabled = false;
-            this.size = 'medium';
-            this.variation = 'default';
-            this.fontWeight = 'normal';
-        }
-        Object.defineProperty(ButtonComponent.prototype, "getDisabled", {
+            // context passed to "authenticated" slot
             get: function () {
-                return this.isDisabled ? '' : null;
+                return this.authenticator.slotContext;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ButtonComponent.prototype, "classNames", {
+        Object.defineProperty(AuthenticatorComponent.prototype, "route", {
             get: function () {
-                var className = 'amplify-button';
-                if (this.variation) {
-                    className += " amplify-button--" + this.variation;
-                }
-                if (this.size) {
-                    className += " amplify-button--" + this.size;
-                }
-                if (this.fullWidth) {
-                    className += " amplify-button--fullwidth";
-                }
-                if (this.isDisabled) {
-                    className += " amplify-button--disabled amplify-button--loading";
-                }
-                return className;
+                return this.authenticator.route;
             },
             enumerable: false,
             configurable: true
         });
-        ButtonComponent.prototype.ngOnInit = function () {
-            this.typeAttr = this.type;
-            this.fullWidthAttr = this.fullWidth;
-            this.sizeAttr = this.size;
-            this.variationAttr = this.variation;
-            this.fontWeightAttr = this.fontWeight;
+        AuthenticatorComponent.prototype.onTabChange = function () {
+            var route = this.authenticator.route;
+            if (route === 'signIn') {
+                this.authenticator.toSignUp();
+            }
+            else {
+                this.authenticator.toSignIn();
+            }
         };
-        return ButtonComponent;
+        AuthenticatorComponent.prototype.hasTabs = function () {
+            var route = this.authenticator.route;
+            return route === 'signIn' || route === 'signUp';
+        };
+        AuthenticatorComponent.prototype.hasRouteComponent = function () {
+            var route = this.authenticator.route;
+            switch (route) {
+                case 'authenticated':
+                case 'idle':
+                case 'setup':
+                case 'signOut':
+                case 'transition':
+                    return false;
+                default:
+                    return true;
+            }
+        };
+        AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
+            if (!componentQuery)
+                return {};
+            var customComponents = {};
+            componentQuery.forEach(function (component) {
+                customComponents[component.name] = component.template;
+            });
+            return customComponents;
+        };
+        return AuthenticatorComponent;
     }());
-    ButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'button[amplify-button]',
-                    template: "<ng-content></ng-content>\n"
-                },] }
-    ];
-    ButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        fullWidth: [{ type: i0.Input }],
-        isDisabled: [{ 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',] }],
-        fontWeightAttr: [{ type: i0.HostBinding, args: ['style.font-weight',] }],
-        getDisabled: [{ type: i0.HostBinding, args: ['attr.disabled',] }],
-        classNames: [{ type: i0.HostBinding, args: ['class',] }]
-    };
+    AuthenticatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AuthenticatorComponent, deps: [{ token: AuthenticatorService }, { token: CustomComponentsService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AuthenticatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AuthenticatorComponent, selector: "amplify-authenticator", inputs: { formFields: "formFields", initialState: "initialState", loginMechanisms: "loginMechanisms", services: "services", signUpAttributes: "signUpAttributes", socialProviders: "socialProviders", variation: "variation", hideSignUp: "hideSignUp" }, providers: [CustomComponentsService], queries: [{ propertyName: "customComponentQuery", predicate: AmplifySlotDirective }], ngImport: i0__namespace, template: "<div\n  data-amplify-authenticator\n  [attr.data-variation]=\"variation\"\n  *ngIf=\"hasRouteComponent()\"\n>\n  <div data-amplify-container>\n    <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n    <div\n      data-amplify-router\n      [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n    >\n      <amplify-tabs\n        (tabChange)=\"onTabChange()\"\n        *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n      >\n        <amplify-tab-item\n          [title]=\"signInTitle\"\n          [active]=\"route === 'signIn'\"\n          data-amplify-router-content\n        >\n          <!-- signIn component -->\n          <amplify-slot\n            name=\"sign-in\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signIn'\"\n          >\n            <amplify-sign-in></amplify-sign-in>\n          </amplify-slot>\n        </amplify-tab-item>\n        <amplify-tab-item\n          [title]=\"signUpTitle\"\n          [active]=\"route === 'signUp'\"\n          data-amplify-router-content\n        >\n          <!-- signUp component -->\n          <amplify-slot\n            name=\"sign-up\"\n            [context]=\"context\"\n            *ngIf=\"route === 'signUp'\"\n          >\n            <amplify-sign-up></amplify-sign-up>\n          </amplify-slot>\n        </amplify-tab-item>\n      </amplify-tabs>\n\n      <amplify-slot\n        name=\"sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'signIn' && hideSignUp\"\n      >\n        <amplify-sign-in></amplify-sign-in>\n      </amplify-slot>\n\n      <!-- confirmSignUp content -->\n      <amplify-slot\n        name=\"confirm-sign-up\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignUp'\"\n      >\n        <amplify-confirm-sign-up></amplify-confirm-sign-up>\n      </amplify-slot>\n\n      <!-- confirmSignIn content -->\n      <amplify-slot\n        name=\"confirm-sign-in\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmSignIn'\"\n      >\n        <amplify-confirm-sign-in></amplify-confirm-sign-in>\n      </amplify-slot>\n\n      <!-- setupTotp content -->\n      <amplify-slot\n        name=\"setup-totp\"\n        [context]=\"context\"\n        *ngIf=\"route === 'setupTOTP'\"\n      >\n        <amplify-setup-totp></amplify-setup-totp>\n      </amplify-slot>\n\n      <!-- forceNewPassword content -->\n      <amplify-slot\n        name=\"force-new-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'forceNewPassword'\"\n      >\n        <amplify-force-new-password></amplify-force-new-password>\n      </amplify-slot>\n\n      <!-- resetPassword content -->\n      <amplify-slot\n        name=\"reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'resetPassword'\"\n      >\n        <amplify-reset-password></amplify-reset-password>\n      </amplify-slot>\n\n      <!-- confirmResetPassword content -->\n      <amplify-slot\n        name=\"confirm-reset-password\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmResetPassword'\"\n      >\n        <amplify-confirm-reset-password></amplify-confirm-reset-password>\n      </amplify-slot>\n\n      <!-- verifyUser content -->\n      <amplify-slot\n        name=\"verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'verifyUser'\"\n      >\n        <amplify-verify-user></amplify-verify-user>\n      </amplify-slot>\n\n      <!-- confirmVerifyUser content -->\n      <amplify-slot\n        name=\"confirm-verify-user\"\n        [context]=\"context\"\n        *ngIf=\"route === 'confirmVerifyUser'\"\n      >\n        <amplify-confirm-verify-user></amplify-confirm-verify-user>\n      </amplify-slot>\n    </div>\n\n    <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n  name=\"authenticated\"\n  [context]=\"context\"\n  *ngIf=\"route === 'authenticated'\"\n>\n  <ng-content></ng-content>\n</amplify-slot>\n", components: [{ type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { type: TabsComponent, selector: "amplify-tabs", outputs: ["tabChange"] }, { type: TabItemComponent, selector: "amplify-tab-item", inputs: ["title", "active", "id", "labelledById", "tabIndex"] }, { type: SignInComponent, selector: "amplify-sign-in" }, { type: SignUpComponent, selector: "amplify-sign-up" }, { type: ConfirmSignUpComponent, selector: "amplify-confirm-sign-up" }, { type: ConfirmSignInComponent, selector: "amplify-confirm-sign-in" }, { type: SetupTotpComponent, selector: "amplify-setup-totp" }, { type: ForceNewPasswordComponent, selector: "amplify-force-new-password", inputs: ["headerText"] }, { type: ResetPasswordComponent, selector: "amplify-reset-password", inputs: ["headerText"] }, { type: ConfirmResetPasswordComponent, selector: "amplify-confirm-reset-password", inputs: ["headerText"] }, { type: VerifyUserComponent, selector: "amplify-verify-user", inputs: ["headerText"] }, { type: ConfirmVerifyUserComponent, selector: "amplify-confirm-verify-user", inputs: ["headerText"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AuthenticatorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-authenticator',
+                        templateUrl: './authenticator.component.html',
+                        providers: [CustomComponentsService],
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: AuthenticatorService }, { type: CustomComponentsService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { formFields: [{
+                    type: i0.Input
+                }], initialState: [{
+                    type: i0.Input
+                }], loginMechanisms: [{
+                    type: i0.Input
+                }], services: [{
+                    type: i0.Input
+                }], signUpAttributes: [{
+                    type: i0.Input
+                }], socialProviders: [{
+                    type: i0.Input
+                }], variation: [{
+                    type: i0.Input
+                }], hideSignUp: [{
+                    type: i0.Input
+                }], customComponentQuery: [{
+                    type: i0.ContentChildren,
+                    args: [AmplifySlotDirective]
+                }] } });
 
     var CheckboxComponent = /** @class */ (function () {
         function CheckboxComponent() {
@@ -1609,326 +1937,112 @@
         };
         return CheckboxComponent;
     }());
-    CheckboxComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-checkbox',
-                    template: "<div class=\"amplify-flex amplify-field amplify-checkboxfield\">\n  <label class=\"amplify-flex amplify-checkbox\">\n    <span class=\"amplify-visually-hidden\">\n      <input\n        (click)=\"handleClick()\"\n        class=\"\n          amplify-input\n          amplify-field-group__control\n          amplify-checkbox__input\n        \"\n        aria-invalid=\"false\"\n        type=\"checkbox\"\n        [name]=\"name\"\n        [value]=\"value\"\n      />\n    </span>\n    <span\n      class=\"amplify-flex amplify-checkbox__button\"\n      aria-hidden=\"true\"\n      data-focus=\"false\"\n      [ngClass]=\"{\n        'amplify-checkbox__button--error': hasError\n      }\"\n      [attr.data-error]=\"hasError\"\n      [attr.data-checked]=\"isChecked\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"amplify-icon amplify-checkbox__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        [attr.data-checked]=\"isChecked\"\n        [ngClass]=\"{\n          'amplify-checkbox__icon--checked': isChecked\n        }\"\n      >\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"></path>\n      </svg>\n    </span>\n    <span class=\"amplify-text amplify-checkbox__label\">\n      <ng-content></ng-content>\n    </span>\n  </label>\n  <p *ngIf=\"hasError\" class=\"amplify-text amplify-field__error-message\">\n    {{ errorMessage }}\n  </p>\n</div>\n"
-                },] }
-    ];
-    CheckboxComponent.propDecorators = {
-        defaultChecked: [{ type: i0.Input }],
-        errorMessage: [{ type: i0.Input }],
-        hasError: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        name: [{ type: i0.Input }],
-        value: [{ type: i0.Input }]
-    };
-
-    var ErrorComponent = /** @class */ (function () {
-        function ErrorComponent() {
-            this.isVisible = true;
-            this.dismissAriaLabel = ui.translate('Dismiss alert');
-        }
-        ErrorComponent.prototype.close = function () {
-            this.isVisible = false;
-        };
-        return ErrorComponent;
-    }());
-    ErrorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-error',
-                    template: "<div\n  class=\"amplify-flex amplify-alert amplify-alert--error\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control amplify-alert__dismiss\"\n    [attr.aria-label]=\"dismissAriaLabel\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n"
-                },] }
-    ];
-
-    var PasswordFieldComponent = /** @class */ (function () {
-        function PasswordFieldComponent() {
-            this.autocomplete = 'new-password';
-            this.disabled = false;
-            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
-            this.initialValue = '';
-            this.label = '';
-            this.placeholder = '';
-            this.required = true;
-            this.labelHidden = false;
-            this.setBlur = new i0.EventEmitter();
-            this.type = 'password';
-            this.showPassword = false;
-            this.showPasswordButtonlabel = ui.translate('Show password');
-        }
-        PasswordFieldComponent.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 PasswordFieldComponent;
-    }());
-    PasswordFieldComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-password-field',
-                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"fieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\n    (blur)=\"setBlur.emit($event)\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
-                },] }
-    ];
-    PasswordFieldComponent.propDecorators = {
-        autocomplete: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        fieldId: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        name: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }],
-        hasError: [{ type: i0.Input }],
-        describedBy: [{ type: i0.Input }],
-        setBlur: [{ type: i0.Output }]
-    };
-
-    var PhoneNumberFieldComponent = /** @class */ (function () {
-        function PhoneNumberFieldComponent() {
-            this.autocomplete = 'new-password';
-            this.disabled = false;
-            this.selectFieldId = "amplify-field-" + nanoid.nanoid(12);
-            this.textFieldId = "amplify-field-" + nanoid.nanoid(12);
-            this.initialValue = '';
-            this.label = '';
-            this.placeholder = '';
-            this.required = true;
-            this.labelHidden = false;
-            this.display = 'contents';
-        }
-        PhoneNumberFieldComponent.prototype.ngOnInit = function () {
-            var _a;
-            this.countryDialCodesValues = (_a = this.dialCodeList) !== null && _a !== void 0 ? _a : ui.countryDialCodes;
-        };
-        return PhoneNumberFieldComponent;
-    }());
-    PhoneNumberFieldComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-phone-number-field',
-                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex\n        amplify-field\n        amplify-selectfield\n        amplify-countrycodeselect\n        amplify-dialcodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodesValues\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\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 }],
-        labelHidden: [{ type: i0.Input }],
-        dialCodeList: [{ type: i0.Input }],
-        hasError: [{ type: i0.Input }],
-        describedBy: [{ type: i0.Input }],
-        display: [{ type: i0.HostBinding, args: ['style.display',] }]
-    };
-
-    var SelectComponent = /** @class */ (function () {
-        function SelectComponent() {
-        }
-        return SelectComponent;
-    }());
-    SelectComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-form-select',
-                    template: "<label class=\"amplify-label amplify-visually-hidden\" [for]=\"id\">{{\n  label\n}}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon amplify-icon--large\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
-                },] }
-    ];
-    SelectComponent.propDecorators = {
-        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;
-            this.display = 'block'; // emulate div behavior
-        }
-        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 }],
-        display: [{ type: i0.HostBinding, args: ['style.display',] }]
-    };
-
-    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-spacing=\"equal\"\n      data-orientation=\"horizontal\"\n      role=\"tab\"\n      [id]=\"tab.labelledById\"\n      [tabindex]=\"tab.active ? '0' : '1'\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"tab.id\"\n      [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n      (click)=\"handleTabClick(tab)\"\n    >\n      {{ tab.title }}\n    </div>\n  </div>\n</div>\n\n<ng-content></ng-content>\n"
-                },] }
-    ];
-    TabsComponent.propDecorators = {
-        tabs: [{ type: i0.ContentChildren, args: [TabItemComponent,] }],
-        tabChange: [{ type: i0.Output }]
-    };
-
-    var TextFieldComponent = /** @class */ (function () {
-        function TextFieldComponent() {
-            this.autocomplete = 'new-password';
-            this.disabled = false;
-            this.fieldId = "amplify-field-" + nanoid.nanoid(12);
-            this.initialValue = '';
-            this.label = '';
-            this.placeholder = '';
-            this.required = true;
-            this.labelHidden = false;
-            this.display = 'contents';
-        }
-        return TextFieldComponent;
-    }());
-    TextFieldComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-text-field',
-                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"fieldId\"\n  [type]=\"type\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [required]=\"required\"\n  [value]=\"initialValue\"\n  [autocomplete]=\"autocomplete\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n  [attr.aria-describedby]=\"describedBy\"\n/>\n"
-                },] }
-    ];
-    TextFieldComponent.propDecorators = {
-        autocomplete: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        fieldId: [{ 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 }],
-        labelHidden: [{ type: i0.Input }],
-        hasError: [{ type: i0.Input }],
-        describedBy: [{ type: i0.Input }],
-        display: [{ type: i0.HostBinding, args: ['style.display',] }]
-    };
-
-    var AmplifySlotComponent = /** @class */ (function () {
-        function AmplifySlotComponent(propService) {
-            this.propService = propService;
-            this.display = 'contents';
-            this.isOverriden = false;
-        }
-        AmplifySlotComponent.prototype.ngAfterContentInit = function () {
-            var customComponents = this.propService.customComponents;
-            var overridingComponent = customComponents[this.name];
-            if (overridingComponent) {
-                this.overridingComponent = overridingComponent;
-                this.isOverriden = true;
-            }
-        };
-        return AmplifySlotComponent;
-    }());
-    AmplifySlotComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-slot',
-                    template: "<!-- \n  if slot isn't overwritten, we display the the default coponent, which is the \n  children passed onto this component.\n-->\n<ng-content *ngIf=\"!isOverriden\"></ng-content>\n\n<!-- If slot is overwritten, we render that instead. -->\n<ng-container\n  *ngIf=\"isOverriden\"\n  [ngTemplateOutlet]=\"overridingComponent\"\n  [ngTemplateOutletContext]=\"context\"\n></ng-container>\n"
-                },] }
-    ];
-    AmplifySlotComponent.ctorParameters = function () { return [
-        { type: CustomComponentsService }
-    ]; };
-    AmplifySlotComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        context: [{ type: i0.Input }],
-        display: [{ type: i0.HostBinding, args: ['style.display',] }]
-    };
+    CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "amplify-checkbox", inputs: { defaultChecked: "defaultChecked", errorMessage: "errorMessage", hasError: "hasError", label: "label", name: "name", value: "value" }, ngImport: i0__namespace, template: "<div class=\"amplify-flex amplify-field amplify-checkboxfield\">\n  <label class=\"amplify-flex amplify-checkbox\">\n    <span class=\"amplify-visually-hidden\">\n      <input\n        (click)=\"handleClick()\"\n        class=\"\n          amplify-input\n          amplify-field-group__control\n          amplify-checkbox__input\n        \"\n        aria-invalid=\"false\"\n        type=\"checkbox\"\n        [name]=\"name\"\n        [value]=\"value\"\n      />\n    </span>\n    <span\n      class=\"amplify-flex amplify-checkbox__button\"\n      aria-hidden=\"true\"\n      data-focus=\"false\"\n      [ngClass]=\"{\n        'amplify-checkbox__button--error': hasError\n      }\"\n      [attr.data-error]=\"hasError\"\n      [attr.data-checked]=\"isChecked\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"amplify-icon amplify-checkbox__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        [attr.data-checked]=\"isChecked\"\n        [ngClass]=\"{\n          'amplify-checkbox__icon--checked': isChecked\n        }\"\n      >\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"></path>\n      </svg>\n    </span>\n    <span class=\"amplify-text amplify-checkbox__label\">\n      <ng-content></ng-content>\n    </span>\n  </label>\n  <p *ngIf=\"hasError\" class=\"amplify-text amplify-field__error-message\">\n    {{ errorMessage }}\n  </p>\n</div>\n", directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'amplify-checkbox',
+                        templateUrl: './checkbox.component.html',
+                    }]
+            }], propDecorators: { defaultChecked: [{
+                    type: i0.Input
+                }], errorMessage: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }] } });
 
     var AmplifyAuthenticatorModule = /** @class */ (function () {
         function AmplifyAuthenticatorModule() {
         }
         return AmplifyAuthenticatorModule;
     }());
-    AmplifyAuthenticatorModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        AmplifySlotComponent,
-                        AmplifySlotDirective,
-                        AuthenticatorComponent,
-                        BaseFormFieldsComponent,
-                        ButtonComponent,
-                        CheckboxComponent,
-                        ConfirmResetPasswordComponent,
-                        ConfirmSignInComponent,
-                        ConfirmSignUpComponent,
-                        ConfirmVerifyUserComponent,
-                        ErrorComponent,
-                        FederatedSignInButtonComponent,
-                        FederatedSignInComponent,
-                        ForceNewPasswordComponent,
-                        ForceNewPasswordFormFieldsComponent,
-                        FormFieldComponent,
-                        PasswordFieldComponent,
-                        PhoneNumberFieldComponent,
-                        ResetPasswordComponent,
-                        SelectComponent,
-                        SetupTotpComponent,
-                        SignInComponent,
-                        SignUpComponent,
-                        SignUpFormFieldsComponent,
-                        TabItemComponent,
-                        TabsComponent,
-                        TextFieldComponent,
-                        VerifyUserComponent,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        AmplifySlotDirective,
-                        AuthenticatorComponent,
-                        CheckboxComponent,
-                        SignUpFormFieldsComponent,
-                        ForceNewPasswordFormFieldsComponent,
-                        TextFieldComponent,
-                    ],
-                },] }
-    ];
+    AmplifyAuthenticatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifyAuthenticatorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AmplifyAuthenticatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifyAuthenticatorModule, declarations: [AmplifySlotComponent,
+            AmplifySlotDirective,
+            AuthenticatorComponent,
+            BaseFormFieldsComponent,
+            ButtonComponent,
+            CheckboxComponent,
+            ConfirmResetPasswordComponent,
+            ConfirmSignInComponent,
+            ConfirmSignUpComponent,
+            ConfirmVerifyUserComponent,
+            ErrorComponent,
+            FederatedSignInButtonComponent,
+            FederatedSignInComponent,
+            ForceNewPasswordComponent,
+            ForceNewPasswordFormFieldsComponent,
+            FormFieldComponent,
+            PasswordFieldComponent,
+            PhoneNumberFieldComponent,
+            ResetPasswordComponent,
+            SelectComponent,
+            SetupTotpComponent,
+            SignInComponent,
+            SignUpComponent,
+            SignUpFormFieldsComponent,
+            TabItemComponent,
+            TabsComponent,
+            TextFieldComponent,
+            VerifyUserComponent], imports: [i6.CommonModule], exports: [AmplifySlotDirective,
+            AuthenticatorComponent,
+            CheckboxComponent,
+            SignUpFormFieldsComponent,
+            ForceNewPasswordFormFieldsComponent,
+            TextFieldComponent] });
+    AmplifyAuthenticatorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifyAuthenticatorModule, imports: [[i6.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AmplifyAuthenticatorModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            AmplifySlotComponent,
+                            AmplifySlotDirective,
+                            AuthenticatorComponent,
+                            BaseFormFieldsComponent,
+                            ButtonComponent,
+                            CheckboxComponent,
+                            ConfirmResetPasswordComponent,
+                            ConfirmSignInComponent,
+                            ConfirmSignUpComponent,
+                            ConfirmVerifyUserComponent,
+                            ErrorComponent,
+                            FederatedSignInButtonComponent,
+                            FederatedSignInComponent,
+                            ForceNewPasswordComponent,
+                            ForceNewPasswordFormFieldsComponent,
+                            FormFieldComponent,
+                            PasswordFieldComponent,
+                            PhoneNumberFieldComponent,
+                            ResetPasswordComponent,
+                            SelectComponent,
+                            SetupTotpComponent,
+                            SignInComponent,
+                            SignUpComponent,
+                            SignUpFormFieldsComponent,
+                            TabItemComponent,
+                            TabsComponent,
+                            TextFieldComponent,
+                            VerifyUserComponent,
+                        ],
+                        imports: [i6.CommonModule],
+                        exports: [
+                            AmplifySlotDirective,
+                            AuthenticatorComponent,
+                            CheckboxComponent,
+                            SignUpFormFieldsComponent,
+                            ForceNewPasswordFormFieldsComponent,
+                            TextFieldComponent,
+                        ],
+                    }]
+            }] });
 
     /*
      * Public API Surface of ui-angular
@@ -1973,33 +2087,6 @@
     exports.TextFieldComponent = TextFieldComponent;
     exports.VerifyUserComponent = VerifyUserComponent;
     exports.getAttributeMap = getAttributeMap;
-    exports["ɵa"] = AmplifySlotComponent;
-    exports["ɵb"] = AuthenticatorComponent;
-    exports["ɵba"] = VerifyUserComponent;
-    exports["ɵc"] = BaseFormFieldsComponent;
-    exports["ɵd"] = ButtonComponent;
-    exports["ɵe"] = CheckboxComponent;
-    exports["ɵf"] = ConfirmResetPasswordComponent;
-    exports["ɵg"] = ConfirmSignInComponent;
-    exports["ɵh"] = ConfirmSignUpComponent;
-    exports["ɵi"] = ConfirmVerifyUserComponent;
-    exports["ɵj"] = ErrorComponent;
-    exports["ɵk"] = FederatedSignInButtonComponent;
-    exports["ɵl"] = FederatedSignInComponent;
-    exports["ɵm"] = ForceNewPasswordComponent;
-    exports["ɵn"] = ForceNewPasswordFormFieldsComponent;
-    exports["ɵo"] = FormFieldComponent;
-    exports["ɵp"] = PasswordFieldComponent;
-    exports["ɵq"] = PhoneNumberFieldComponent;
-    exports["ɵr"] = ResetPasswordComponent;
-    exports["ɵs"] = SelectComponent;
-    exports["ɵt"] = SetupTotpComponent;
-    exports["ɵu"] = SignInComponent;
-    exports["ɵv"] = SignUpComponent;
-    exports["ɵw"] = SignUpFormFieldsComponent;
-    exports["ɵx"] = TabItemComponent;
-    exports["ɵy"] = TabsComponent;
-    exports["ɵz"] = TextFieldComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });