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

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

@@ -0,0 +1,3209 @@
+import * as i0 from '@angular/core';
+import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, ContentChildren, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, NgZone, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { createAuthenticatorMachine, getSendEventAliases, translate, translations, getActorState, getActorContext, AuthChallengeNames, FederatedIdentityProviders, getConfiguredAliases, authInputAttributes, countryDialCodes, getAliasInfoFromContext } from '@aws-amplify/ui';
+import { I18n, Logger, Auth } from 'aws-amplify';
+import { interpret } from 'xstate';
+import { __awaiter, __decorate } from 'tslib';
+import QRCode from 'qrcode';
+import { isEmpty } from 'lodash';
+import { nanoid } from 'nanoid';
+import { fromEvent } from 'rxjs';
+import { AmplifyButton as AmplifyButton$1, AmplifyInput as AmplifyInput$1, AmplifyToast as AmplifyToast$1, AmplifyChatbot as AmplifyChatbot$1, AmplifyS3Album as AmplifyS3Album$1, AmplifyS3ImagePicker as AmplifyS3ImagePicker$1, AmplifyS3Text as AmplifyS3Text$1, AmplifyS3TextPicker as AmplifyS3TextPicker$1, AmplifyS3Image as AmplifyS3Image$1, AmplifyPicker as AmplifyPicker$1, AmplifyPhotoPicker as AmplifyPhotoPicker$1 } from '@aws-amplify/ui-components/dist/components';
+
+class AmplifySlotDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    set amplifySlot(component) {
+        this.name = component;
+    }
+}
+AmplifySlotDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[amplifySlot]',
+            },] }
+];
+AmplifySlotDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+AmplifySlotDirective.propDecorators = {
+    amplifySlot: [{ type: Input }]
+};
+
+class AuthPropService {
+    constructor() {
+        this._customComponents = {};
+        this._props = {};
+    }
+    get customComponents() {
+        return this._customComponents;
+    }
+    set customComponents(customComponents) {
+        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+    }
+    get props() {
+        return this._props;
+    }
+    set props(props) {
+        this._props = Object.assign(Object.assign({}, this._props), props);
+    }
+}
+AuthPropService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthPropService_Factory() { return new AuthPropService(); }, token: AuthPropService, providedIn: "root" });
+AuthPropService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+AuthPropService.ctorParameters = () => [];
+
+/**
+ * AmplifyContextService contains access to the xstate machine
+ * and custom components passed by the user.
+ */
+class StateMachineService {
+    startMachine({ initialState, loginMechanisms, }) {
+        const machine = createAuthenticatorMachine({
+            initialState,
+            loginMechanisms,
+        });
+        const authService = interpret(machine, {
+            devTools: process.env.NODE_ENV === 'development',
+        })
+            .onTransition((state) => {
+            this._user = state.context.user;
+            this._authState = state;
+        })
+            .start();
+        this._services = getSendEventAliases(authService.send);
+        this._authService = authService;
+    }
+    get services() {
+        return this._services;
+    }
+    get authState() {
+        return this._authState;
+    }
+    get authService() {
+        return this._authService;
+    }
+    get user() {
+        return this._user;
+    }
+    get context() {
+        return this._authState.context;
+    }
+    send(event) {
+        this.authService.send(event);
+    }
+}
+StateMachineService.ɵprov = i0.ɵɵdefineInjectable({ factory: function StateMachineService_Factory() { return new StateMachineService(); }, token: StateMachineService, providedIn: "root" });
+StateMachineService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+class AmplifyAuthenticatorComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.customComponentQuery = null;
+        this.customComponents = {};
+        // translated texts
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
+    }
+    ngOnInit() {
+        I18n.putVocabularies(translations);
+        const { initialState, loginMechanisms } = this;
+        this.stateMachine.startMachine({ initialState, loginMechanisms });
+        /**
+         * handling translations after content init, because authenticator and its
+         * translations might be initialized before the main app's `ngOnInit` is run.
+         **/
+        this.signInTitle = translate('Sign In');
+        this.signUpTitle = translate('Create Account');
+    }
+    /**
+     * Lifecycle Methods
+     */
+    ngAfterContentInit() {
+        this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
+        this.customComponents = this.contextService.customComponents;
+    }
+    /**
+     * Class Functions
+     */
+    get context() {
+        const { signOut } = this.stateMachine.services;
+        const user = this.stateMachine.user;
+        return { signOut, user };
+    }
+    get actorState() {
+        return getActorState(this.stateMachine.authState);
+    }
+    get authenticatorState() {
+        return this.stateMachine.authState;
+    }
+    onTabChange() {
+        const currentState = this.stateMachine.authState.value;
+        if (currentState === 'signIn') {
+            this.stateMachine.send('SIGN_UP');
+        }
+        else {
+            this.stateMachine.send('SIGN_IN');
+        }
+    }
+    mapCustomComponents(componentQuery) {
+        if (!componentQuery)
+            return {};
+        const customComponents = {};
+        componentQuery.forEach((component) => {
+            customComponents[component.name] = component.template;
+        });
+        return customComponents;
+    }
+}
+AmplifyAuthenticatorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-authenticator',
+                template: "<!-- \n  Define default contents here.\n-->\n<ng-template #signIn>\n  <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n  <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n  <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n  <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <ng-content></ng-content> </ng-template>\n<ng-template #setupTOTP>\n  <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n  <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n  <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n  <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n  <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n  <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n  Next, we render respective auth subcomponent respective to the current authState.\n  If customer is overriding that component, we render customer's template instead.\n-->\n\n<div data-amplify-authenticator>\n  <div data-amplify-modal></div>\n\n  <div data-amplify-container>\n    <amplify-tabs\n      (tabChange)=\"onTabChange()\"\n      *ngIf=\"actorState?.matches('signIn') || actorState?.matches('signUp')\"\n    >\n      <amplify-tab-item\n        [title]=\"signInTitle\"\n        [active]=\"actorState?.matches('signIn')\"\n      >\n        <!-- signIn component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signIn')\"\n        ></ng-container>\n      </amplify-tab-item>\n      <amplify-tab-item\n        [title]=\"signUpTitle\"\n        [active]=\"actorState?.matches('signUp')\"\n      >\n        <!-- signUp component -->\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n          [ngTemplateOutletContext]=\"context\"\n          *ngIf=\"actorState?.matches('signUp')\"\n        ></ng-container>\n      </amplify-tab-item>\n    </amplify-tabs>\n\n    <!-- confirmSignUp content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmSignUp')\"\n    >\n    </ng-container>\n\n    <!-- confirmSignIn content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmSignIn')\"\n    >\n    </ng-container>\n\n    <!-- setupTotp content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('setupTOTP')\"\n    >\n    </ng-container>\n\n    <!-- forceNewPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('forceNewPassword')\"\n    >\n    </ng-container>\n\n    <!-- resetPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('resetPassword')\"\n    >\n    </ng-container>\n\n    <!-- confirmResetPassword content -->\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPassword || confirmResetPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmResetPassword')\"\n    >\n    </ng-container>\n\n    <!-- verifyUser content -->\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('verifyUser')\"\n    >\n    </ng-container>\n\n    <!-- confirmVerifyUser content -->\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmVerifyUser || confirmVerifyUser\n      \"\n      [ngTemplateOutletContext]=\"context\"\n      *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n    >\n    </ng-container>\n  </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
+                providers: [AuthPropService],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AmplifyAuthenticatorComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyAuthenticatorComponent.propDecorators = {
+    initialState: [{ type: Input }],
+    loginMechanisms: [{ type: Input }],
+    customComponentQuery: [{ type: ContentChildren, args: [AmplifySlotDirective,] }]
+};
+
+const logger$3 = new Logger('ConfirmSignIn');
+class AmplifyConfirmSignInComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        this.confirmText = translate('Confirm');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
+            this.onStateUpdate(state);
+        });
+        this.setHeaderText();
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    get context() {
+        const { change, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { change, remoteError, signIn, submit };
+    }
+    setHeaderText() {
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { challengeName } = actorContext;
+        switch (challengeName) {
+            case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
+                // TODO: this string should be centralized and translated from ui.
+                this.headerText = translate('Confirm TOTP Code');
+                break;
+            case AuthChallengeNames.SMS_MFA:
+                this.headerText = translate('Confirm SMS Code');
+                break;
+            default:
+                logger$3.error('Unexpected challengeName', challengeName);
+        }
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmSignIn.edit');
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        // TODO: handle form data within the state machine
+        const formData = new FormData(event.target);
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: Object.fromEntries(formData),
+        });
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+}
+AmplifyConfirmSignInComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-in',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignInButton || confirmSignInButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyConfirmSignInComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyConfirmSignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+};
+
+class AmplifyConfirmSignUpComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Confirm Sign Up');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.resendCodeText = translate('Resend Code');
+        this.lostCodeText = translate('Lost your code? ');
+        this.confirmText = translate('Confirm');
+    }
+    ngOnInit() {
+        // TODO: alias for subscribe
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmSignUp.edit');
+    }
+    get context() {
+        const { change, resend, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const username = this.username;
+        return { change, remoteError, resend, signIn, submit, username };
+    }
+    resend() {
+        this.stateMachine.send({
+            type: 'RESEND',
+            data: {
+                username: this.username,
+            },
+        });
+    }
+    onInput($event) {
+        $event.preventDefault();
+        const { name, value } = $event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { formValues } = actorContext;
+        const { username, confirmation_code } = formValues;
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: { username, confirmation_code },
+        });
+    }
+}
+AmplifyConfirmSignUpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-up',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmSignUpButton || confirmSignUpButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button amplify-button fontWeight=\"normal\" (click)=\"resend()\">\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyConfirmSignUpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyConfirmSignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifyFederatedSignInButtonComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.onClick = () => {
+            this.stateMachine.send({
+                type: 'FEDERATED_SIGN_IN',
+                data: { provider: this.provider },
+            });
+        };
+    }
+}
+AmplifyFederatedSignInButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in-button',
+                template: "<button\n  amplify-button\n  class=\"amplify-field-group__control federated-sign-in-button\"\n  fullWidth=\"true\"\n  fontWeight=\"normal\"\n  style=\"display: block\"\n  (click)=\"onClick()\"\n>\n  <div\n    class=\"amplify-flex federated-sign-in-button-row\"\n    style=\"flex-direction: row; justify-content: center\"\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n"
+            },] }
+];
+AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyFederatedSignInButtonComponent.propDecorators = {
+    provider: [{ type: Input }],
+    text: [{ type: Input }]
+};
+
+class AmplifyFederatedSignInComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.FederatedProviders = FederatedIdentityProviders;
+        this.includeFacebook = false;
+        this.includeGoogle = false;
+        this.includeAmazon = false;
+        this.shouldShowFederatedSignIn = false;
+        // translated texts
+        this.signInFacebookText = translate('Sign In with Facebook');
+        this.signInGoogleText = translate('Sign In with Google');
+        this.signInAmazonText = translate('Sign In with Amazon');
+    }
+    ngOnInit() {
+        var _a, _b;
+        const loginMechanisms = (_b = (_a = this.stateMachine.context) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.login_mechanisms;
+        this.includeFacebook = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('facebook');
+        this.includeGoogle = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('google');
+        this.includeAmazon = loginMechanisms === null || loginMechanisms === void 0 ? void 0 : loginMechanisms.includes('amazon');
+        this.shouldShowFederatedSignIn =
+            this.includeFacebook || this.includeGoogle || this.includeAmazon;
+    }
+}
+AmplifyFederatedSignInComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in',
+                template: "<div\n  class=\"amplify-flex federated-sign-in-container\"\n  style=\"flex-direction: column\"\n  *ngIf=\"shouldShowFederatedSignIn\"\n  data-orientation=\"horizontal\"\n  data-size=\"small\"\n>\n  <hr\n    class=\"amplify-divider\"\n    aria-orientation=\"horizontal\"\n    data-size=\"small\"\n    style=\"margin: '1rem 0'\"\n  />\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [provider]=\"FederatedProviders.Google\"\n  >\n    <svg\n      aria-label=\"Google icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 256 262\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <path\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n        fill=\"#4285F4\"\n      ></path>\n      <path\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n        fill=\"#34A853\"\n      ></path>\n      <path\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n        fill=\"#FBBC05\"\n      ></path>\n      <path\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n        fill=\"#EB4335\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInGoogleText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  >\n    <svg\n      aria-label=\"Facebook icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 279 538\"\n    >\n      <path\n        d=\"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z\"\n        fill=\"#1877F2\"\n      ></path>\n    </svg>\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInFacebookText }}\n    </p>\n  </amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  >\n    <svg\n      aria-label=\"Amazon icon\"\n      class=\"amplify-icon federated-sign-in-icon\"\n      viewBox=\"0 0 248 268\"\n    >\n      <path\n        d=\"M139.056521,147.024612 C133.548808,156.744524 124.782731,162.726926 115.087401,162.726926 C101.790721,162.726926 93.9937779,152.612964 93.9937779,137.68681 C93.9937779,108.224571 120.447551,102.879017 145.533369,102.879017 L145.533369,110.365976 C145.533369,123.831358 145.876354,135.063787 139.056521,147.024612 M207.206992,162.579655 C209.400505,165.692256 209.887066,169.437725 207.063416,171.770186 C199.996315,177.653081 187.429476,188.590967 180.513926,194.716661 L180.46208,194.621133 C178.176838,196.663031 174.862638,196.810303 172.27828,195.445057 C160.780281,185.9162 158.686473,181.494078 152.405048,172.403055 C133.405233,191.751331 119.909143,197.534719 95.309886,197.534719 C66.1281801,197.534719 43.4791563,179.599451 43.4791563,143.669212 C43.4791563,115.616003 58.6782107,96.5105248 80.4019706,87.1727225 C99.2063636,78.9096034 125.464714,77.4528107 145.533369,75.1641337 L145.533369,70.694248 C145.533369,62.4749122 146.167493,52.7510201 141.297893,45.6541312 C137.110277,39.2856386 129.018206,36.6586354 121.859376,36.6586354 C108.658413,36.6586354 96.9171331,43.4171982 94.0416364,57.4199213 C93.4593582,60.532522 91.1701278,63.5933787 88.003492,63.7406501 L54.4387473,60.1424518 C51.6150972,59.5095829 48.4484614,57.2248862 49.2740201,52.8982915 C56.9712583,12.2553679 93.7983558,0 126.732964,0 C143.587124,0 165.606011,4.47386604 178.902691,17.2148315 C195.760839,32.917146 194.149604,53.8694866 194.149604,76.6726704 L194.149604,130.542157 C194.149604,146.734049 200.87372,153.830938 207.206992,162.579655 Z M233.826346,208.038962 C230.467669,203.683255 211.550709,205.9821 203.056405,206.998432 C200.470662,207.321077 200.076227,205.042397 202.406981,203.404973 C217.475208,192.664928 242.201125,195.766353 245.081698,199.363845 C247.966255,202.981502 244.336653,228.071183 230.172839,240.049379 C228.001452,241.888455 225.929671,240.904388 226.89783,238.468418 C230.077218,230.430525 237.204944,212.418868 233.826346,208.038962 Z M126.768855,264 C74.0234043,264 42.0764048,241.955028 17.7852554,217.541992 C12.9733903,212.705982 6.71799208,206.295994 3.31151296,200.690918 C1.90227474,198.372135 5.59096074,195.021875 8.0442063,196.84375 C38.2390146,219.267578 82.1011654,239.538304 125.529506,239.538304 C154.819967,239.538304 191.046475,227.469543 220.66851,214.867659 C225.146771,212.966167 225.146771,219.180222 224.511585,221.060516 C224.183264,222.03242 209.514625,236.221149 189.247207,247.047411 C170.304273,257.166172 146.397132,264 126.768855,264 Z\"\n        fill=\"#FF9900\"\n      ></path>\n    </svg>\n\n    <p class=\"amplify-text\" style=\"align-self: center\">\n      {{ signInAmazonText }}\n    </p>\n  </amplify-federated-sign-in-button>\n</div>\n"
+            },] }
+];
+AmplifyFederatedSignInComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+
+const logger$2 = new Logger('ForceNewPassword');
+class AmplifyForceNewPasswordComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Change Password');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.changePasswordText = translate('Change Password');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        logger$2.log('sign in destroyed, unsubscribing from state machine...');
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
+    }
+    get context() {
+        const { change, signIn, submit } = this.stateMachine.services;
+        const user = this.stateMachine.user;
+        const remoteError = this.remoteError;
+        return { change, remoteError, signIn, submit, user };
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        // consider stateMachine directly providing actorState / actorContext
+        const state = this.stateMachine.authState;
+        const actorState = getActorContext(state);
+        const { formValues } = actorState;
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: formValues,
+        });
+    }
+}
+AmplifyForceNewPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-force-new-password',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #forceNewPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ changePasswordText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.forceNewPasswordSubmitButton ||\n          forceNewPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render force new password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyForceNewPasswordComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyForceNewPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifyResetPasswordComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Reset your password');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('resetPassword.edit');
+    }
+    get context() {
+        const { change, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { change, remoteError, signIn, submit };
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        this.stateMachine.send('SUBMIT');
+    }
+}
+AmplifyResetPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-reset-password',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #resetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordSubmitButton ||\n          resetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyResetPasswordComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+    headerText: [{ type: Input }]
+};
+
+const logger$1 = new Logger('SetupTotp');
+class AmplifySetupTotpComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        this.headerText = translate('Setup TOTP');
+        this.qrCodeSource = '';
+        // translated texts
+        this.backToSignInText = translate('Back to Sign In');
+        this.confirmText = translate('Confirm');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => {
+            this.onStateUpdate(state);
+        });
+        this.generateQRCode();
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('setupTOTP.edit');
+    }
+    get context() {
+        const { change, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const user = this.stateMachine.user;
+        return { change, remoteError, submit, user };
+    }
+    generateQRCode() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: This should be handled in core.
+            const state = this.stateMachine.authState;
+            const actorContext = getActorContext(state);
+            const { user } = actorContext;
+            try {
+                const secretKey = yield Auth.setupTOTP(user);
+                const issuer = 'AWSCognito';
+                const totpCode = `otpauth://totp/${issuer}:${user.username}?secret=${secretKey}&issuer=${issuer}`;
+                logger$1.info('totp code was generated:', totpCode);
+                this.qrCodeSource = yield QRCode.toDataURL(totpCode);
+            }
+            catch (err) {
+                this.remoteError = (_a = err.message) !== null && _a !== void 0 ? _a : err;
+                logger$1.error(err);
+            }
+        });
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        // TODO: handle form data within the state machine
+        const formData = new FormData(event.target);
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: Object.fromEntries(formData),
+        });
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+}
+AmplifySetupTotpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-setup-totp',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #setupTotpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ confirmText }}\n  </button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img\n        *ngIf=\"qrCodeSource\"\n        [src]=\"qrCodeSource\"\n        alt=\"qr code\"\n        data-amplify-qrcode\n      />\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.setupTotpButton || setupTotpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"toSignIn()\"\n      >\n        {{ backToSignInText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifySetupTotpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySetupTotpComponent.propDecorators = {
+    customComponents: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+};
+
+const logger = new Logger('SignIn');
+class AmplifySignInComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Sign in to your account');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated phrases
+        this.forgotPasswordText = translate('Forgot your password? ');
+        this.signInButtonText = translate('Sign in');
+        this.noAccountText = translate('No account? ');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        logger.log('sign in destroyed, unsubscribing from state machine...');
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('signIn.edit');
+    }
+    get context() {
+        const { change, resetPassword, signUp, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { change, remoteError, resetPassword, signUp, submit };
+    }
+    toResetPassword() {
+        this.stateMachine.send('RESET_PASSWORD');
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            this.stateMachine.send({
+                type: 'SUBMIT',
+            });
+        });
+    }
+}
+AmplifySignInComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-in',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #signInButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ signInButtonText }}\n  </button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-field\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        size=\"small\"\n        variation=\"link\"\n        (click)=\"toResetPassword()\"\n      >\n        {{ forgotPasswordText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AmplifySignInComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signin',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifySignUpComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Create a new account');
+        this.remoteError = '';
+        this.isPending = false;
+        this.primaryAlias = '';
+        this.secondaryAliases = [];
+        this.validationError = {};
+        // translated texts
+        this.createAccountText = translate('Create Account');
+    }
+    get context() {
+        const { change, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const validationError = this.validationError;
+        return {
+            change,
+            remoteError,
+            signIn,
+            submit,
+            validationError,
+        };
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+        const context = this.stateMachine.context;
+        const { primaryAlias, secondaryAliases } = getConfiguredAliases(context);
+        /**
+         * If the login_mechanisms are configured to use ONLY username, we need
+         * to ask for some sort of secondary contact information in order to
+         * verify the user for Cognito. Currently matching this to how Vue is
+         * set up.
+         */
+        if (primaryAlias === 'username' && isEmpty(secondaryAliases)) {
+            secondaryAliases.push('email', 'phone_number');
+        }
+        this.primaryAlias = primaryAlias;
+        this.secondaryAliases = secondaryAliases;
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        const actorContext = getActorContext(state);
+        this.remoteError = actorContext.remoteError;
+        this.validationError = actorContext.validationError;
+        this.isPending = !actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
+    }
+    onSubmit($event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            $event.preventDefault();
+            this.stateMachine.send('SUBMIT');
+        });
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+}
+AmplifySignUpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-up',
+                template: "<ng-template #signUpButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ createAccountText }}\n  </button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"isPending\"\n  >\n    <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-field [name]=\"secondaryAlias\"></amplify-form-field>\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </fieldset>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n</ng-template>\n\n<div data-amplify-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </form>\n</div>\n"
+            },] }
+];
+AmplifySignUpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
+    headerText: [{ type: Input }]
+};
+
+const getAttributeMap = () => authInputAttributes;
+
+class AmplifyVerifyUserComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Account recovery requires verified contact information');
+        this.customComponents = {};
+        this.unverifiedAttributes = {};
+        this.remoteError = '';
+        this.isPending = false;
+        this.labelId = nanoid(12);
+        // translated texts
+        this.skipText = translate('Skip');
+        this.verifyText = translate('Verify');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.unverifiedAttributes = actorState.context.unverifiedAttributes;
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('verifyUser.edit');
+    }
+    get context() {
+        const { change, skip, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { change, remoteError, skip, submit };
+    }
+    skipVerify() {
+        this.stateMachine.send('SKIP');
+    }
+    getLabelForAttr(authAttr) {
+        var _a;
+        const attributeMap = getAttributeMap();
+        const label = (_a = attributeMap[authAttr]) === null || _a === void 0 ? void 0 : _a.label;
+        return translate(label);
+    }
+    onSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            const formData = new FormData(event.target);
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: Object.fromEntries(formData),
+            });
+        });
+    }
+}
+AmplifyVerifyUserComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-verify-user',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #verifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ verifyText }}\n  </button>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n\n      <div *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\">\n        <!-- TODO: match React implementation -->\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n          [id]=\"labelId\"\n        />\n        <label [for]=\"labelId\">{{\n          getLabelForAttr(unverifiedAttribute.key)\n        }}</label>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.verifyButton || verifyButton\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AmplifyVerifyUserComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyVerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-verifyuser',] }],
+    headerText: [{ type: Input }]
+};
+
+class ConfirmResetPasswordComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Reset your password');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated strings
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+        this.lostCodeText = translate('Lost your code? ');
+        this.resendCodeText = translate('Resend Code');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmResetPassword.edit');
+    }
+    get context() {
+        const { change, resend, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { change, resend, remoteError, signIn, submit };
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+    resend() {
+        this.stateMachine.send('RESEND');
+    }
+    onInput(event) {
+        event.preventDefault();
+        const { name, value } = event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            this.stateMachine.send('SUBMIT');
+        });
+    }
+}
+ConfirmResetPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-reset-password',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmResetPasswordSubmitButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ sendCodeText }}\n  </button>\n</ng-template>\n<ng-template #confirmResetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordSubmitButton ||\n          confirmResetPasswordSubmitButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        type=\"button\"\n        (click)=\"resend()\"\n      >\n        {{ resendCodeText }}\n      </button>\n\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+ConfirmResetPasswordComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+ConfirmResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }],
+    headerText: [{ type: Input }]
+};
+
+class ConfirmVerifyUserComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Account recovery requires verified contact information');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.skipText = translate('Skip');
+        this.submitText = translate('Submit');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmVerifyUser.edit');
+    }
+    get context() {
+        const { skip, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { remoteError, skip, submit };
+    }
+    skipVerify() {
+        this.stateMachine.send('SKIP');
+    }
+    onSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            const formData = new FormData(event.target);
+            this.stateMachine.send({
+                type: 'SUBMIT',
+                data: Object.fromEntries(formData),
+            });
+        });
+    }
+}
+ConfirmVerifyUserComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-verify-user',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmVerifyButton>\n  <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n    {{ submitText }}\n  </button>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"isPending\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmVerifyButton || confirmVerifyButton\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n\n      <button\n        amplify-button\n        size=\"small\"\n        variation=\"link\"\n        fontWeight=\"normal\"\n        fullWidth=\"true\"\n        (click)=\"skipVerify()\"\n      >\n        {{ skipText }}\n      </button>\n      <amplify-error *ngIf=\"remoteError\">\n        {{ remoteError }}\n      </amplify-error>\n    </fieldset>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+ConfirmVerifyUserComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+ConfirmVerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifyButtonComponent {
+    constructor() {
+        this.type = 'button';
+        this.fullWidth = false;
+        this.size = 'medium';
+        this.variation = 'default';
+        this.fontWeight = 'normal';
+        this.defaultClass = true;
+    }
+    ngOnInit() {
+        this.typeAttr = this.type;
+        this.fullWidthAttr = this.fullWidth;
+        this.sizeAttr = this.size;
+        this.variationAttr = this.variation;
+        this.fontWeightAttr = this.fontWeight;
+    }
+}
+AmplifyButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'button[amplify-button]',
+                template: "<ng-content></ng-content>\n"
+            },] }
+];
+AmplifyButtonComponent.propDecorators = {
+    type: [{ type: Input }],
+    fullWidth: [{ type: Input }],
+    size: [{ type: Input }],
+    variation: [{ type: Input }],
+    fontWeight: [{ type: Input }],
+    typeAttr: [{ type: HostBinding, args: ['type',] }],
+    fullWidthAttr: [{ type: HostBinding, args: ['attr.data-fullwidth',] }],
+    sizeAttr: [{ type: HostBinding, args: ['attr.data-size',] }],
+    variationAttr: [{ type: HostBinding, args: ['attr.data-variation',] }],
+    defaultClass: [{ type: HostBinding, args: ['class.amplify-button',] }],
+    fontWeightAttr: [{ type: HostBinding, args: ['style.font-weight',] }]
+};
+
+class AmplifyErrorComponent {
+}
+AmplifyErrorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-error',
+                template: "<span data-ui-error>\n  <ng-content></ng-content>\n</span>\n"
+            },] }
+];
+
+/**
+ * Input interface opinionated for authenticator usage.
+ *
+ * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
+ * contains authenticator opinionated logic and 2) amplify-text-field primitive
+ * that does not make any auth-related inference.
+ */
+class AmplifyFormFieldComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.required = true;
+        this.placeholder = '';
+        this.label = '';
+        this.initialValue = '';
+        this.disabled = false;
+        this.autocomplete = '';
+        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        // TODO: field primtiives should have generate these by default.
+        this.textFieldId = `amplify-field-${nanoid(12)}`;
+        this.selectFieldId = `amplify-field-${nanoid(12)}`;
+        // TODO: consider better default handling mechanisms across frameworks
+        if (this.isPhoneField()) {
+            const state = this.stateMachine.authState;
+            const { country_code } = getActorContext(state);
+            this.defaultCountryCode = country_code;
+            // TODO: remove this side-effect
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: 'country_code', value: country_code },
+            });
+        }
+    }
+    get attributeMap() {
+        return getAttributeMap();
+    }
+    get error() {
+        const formContext = getActorContext(this.stateMachine.authState);
+        const { validationError } = formContext;
+        return validationError[this.name];
+    }
+    inferLabel() {
+        var _a;
+        const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+        return translate(label);
+    }
+    inferPlaceholder() {
+        var _a;
+        const placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+            this.inferLabel();
+        return translate(placeholder);
+    }
+    // infers what the `type` of underlying input element should be.
+    inferType() {
+        var _a, _b, _c;
+        return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
+    }
+    // TODO(enhancement): use enum to differentiate special field types
+    isPasswordField() {
+        return this.inferType() === 'password';
+    }
+    isPhoneField() {
+        return this.inferType() === 'tel';
+    }
+}
+AmplifyFormFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-field',
+                template: "<div class=\"amplify-flex\" style=\"flex-direction: column; gap: 0\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [selectFieldId]=\"selectFieldId\"\n    [defaultCountryCode]=\"defaultCountryCode\"\n    [textFieldId]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [id]=\"textFieldId\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [id]=\"textFieldId\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+            },] }
+];
+AmplifyFormFieldComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyFormFieldComponent.propDecorators = {
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    required: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    label: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    disabled: [{ type: Input }],
+    autocomplete: [{ type: Input }]
+};
+
+class AmplifyPasswordFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.type = 'password';
+        this.showPassword = false;
+        this.showPasswordButtonlabel = translate('Show password');
+    }
+    togglePasswordText() {
+        this.showPassword = !this.showPassword;
+        this.showPasswordButtonlabel = this.showPassword
+            ? translate('Show password')
+            : translate('Hide password');
+        this.type = this.showPassword ? 'text' : 'password';
+    }
+}
+AmplifyPasswordFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-password-field',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n  <input\n    class=\"amplify-input amplify-field-group__control\"\n    [id]=\"id\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <div class=\"amplify-field-group__outer-end\">\n    <button\n      amplify-button\n      [attr.aria-label]=\"showPasswordButtonlabel\"\n      class=\"amplify-field-group__control amplify-field__show-password\"\n      (click)=\"togglePasswordText()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n        ></path>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        class=\"amplify-icon\"\n      >\n        <path\n          d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n          fill=\"none\"\n        ></path>\n        <path\n          d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n</div>\n"
+            },] }
+];
+AmplifyPasswordFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }]
+};
+
+class AmplifySelectComponent {
+}
+AmplifySelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-select',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
+            },] }
+];
+AmplifySelectComponent.propDecorators = {
+    items: [{ type: Input }],
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    id: [{ type: Input }],
+    defaultValue: [{ type: Input }]
+};
+
+class TabItemComponent {
+    constructor() {
+        this.active = false;
+    }
+}
+TabItemComponent.decorators = [
+    { type: 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: Input }],
+    active: [{ type: Input }],
+    id: [{ type: Input }],
+    labelledById: [{ type: Input }],
+    tabIndex: [{ type: Input }]
+};
+
+class TabsComponent {
+    constructor() {
+        this.tabChange = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        // assign ids
+        this.tabs.forEach((tab, index) => {
+            tab.id = `radix-id-${nanoid(12)}-1-content-${index}`;
+            tab.labelledById = `radix-id-${nanoid(12)}-1-trigger-${index}`;
+        });
+        // find active tab
+        // TODO(enhancement): more declarative way for choosing the initial tab to render
+        const activeTabs = this.tabs.filter((tab) => tab.active);
+        // set active tab
+        if (activeTabs.length !== 1) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+    selectTab(tab) {
+        this.tabs.forEach((tab) => {
+            tab.active = false;
+        });
+        tab.active = true;
+    }
+    handleTabClick(tab) {
+        if (tab.active)
+            return; // don't do anything if clicks the current active tab
+        this.tabChange.emit();
+        this.selectTab(tab);
+    }
+}
+TabsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-tabs',
+                template: "<div\n  tabindex=\"0\"\n  aria-orientation=\"horizontal\"\n  data-orientation=\"horizontal\"\n  role=\"tablist\"\n  style=\"outline: none\"\n>\n  <div\n    class=\"amplify-flex amplify-tabs\"\n    data-indicator-position=\"top\"\n    style=\"gap: 0px; justify-content: center\"\n  >\n    <div\n      *ngFor=\"let tab of tabs\"\n      class=\"amplify-tabs-item\"\n      data-grow=\"equal\"\n      data-orientation=\"horizontal\"\n      role=\"tab\"\n      [id]=\"tab.labelledById\"\n      [tabindex]=\"tab.active ? '0' : '1'\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"tab.id\"\n      [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n      (click)=\"handleTabClick(tab)\"\n    >\n      {{ tab.title }}\n    </div>\n  </div>\n</div>\n\n<ng-content></ng-content>\n"
+            },] }
+];
+TabsComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabItemComponent,] }],
+    tabChange: [{ type: Output }]
+};
+
+class AmplifyTextFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+    }
+}
+AmplifyTextFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-text-field',
+                template: "<label class=\"amplify-label sr-only\" [for]=\"id\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\n  [id]=\"id\"\n  [type]=\"type\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [required]=\"required\"\n  [value]=\"initialValue\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [autocomplete]=\"autocomplete\"\n/>\n"
+            },] }
+];
+AmplifyTextFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }]
+};
+
+class AmplifyUserNameAliasComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.name = 'username';
+        this.disabled = false;
+        this.initialValue = '';
+        this.required = true;
+    }
+    ngOnInit() {
+        const context = this.stateMachine.context;
+        const { label, type } = getAliasInfoFromContext(context);
+        this.label = label;
+        this.type = type;
+        this.placeholder = label;
+    }
+}
+AmplifyUserNameAliasComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-user-name-alias',
+                template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
+            },] }
+];
+AmplifyUserNameAliasComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyUserNameAliasComponent.propDecorators = {
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
+};
+
+const proxyInputs = (Cmp, inputs) => {
+    const Prototype = Cmp.prototype;
+    inputs.forEach((item) => {
+        Object.defineProperty(Prototype, item, {
+            get() {
+                return this.el[item];
+            },
+            set(val) {
+                this.z.runOutsideAngular(() => (this.el[item] = val));
+            },
+        });
+    });
+};
+const proxyMethods = (Cmp, methods) => {
+    const Prototype = Cmp.prototype;
+    methods.forEach((methodName) => {
+        Prototype[methodName] = function () {
+            const args = arguments;
+            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+        };
+    });
+};
+const proxyOutputs = (instance, el, events) => {
+    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+// tslint:disable-next-line: only-arrow-functions
+function ProxyCmp(opts) {
+    const decorator = function (cls) {
+        if (opts.inputs) {
+            proxyInputs(cls, opts.inputs);
+        }
+        if (opts.methods) {
+            proxyMethods(cls, opts.methods);
+        }
+        return cls;
+    };
+    return decorator;
+}
+let AmplifyAmazonButton = class AmplifyAmazonButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyAmazonButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-amazon-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['clientId', 'handleAuthStateChange']
+            },] }
+];
+AmplifyAmazonButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyAmazonButton = __decorate([
+    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
+], AmplifyAmazonButton);
+class AmplifyAuthContainer {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyAuthContainer.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-auth-container',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyAuthContainer.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+let AmplifyAuthFields = class AmplifyAuthFields {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyAuthFields.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-auth-fields',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['formFields']
+            },] }
+];
+AmplifyAuthFields.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyAuthFields = __decorate([
+    ProxyCmp({ inputs: ['formFields'] })
+], AmplifyAuthFields);
+let AmplifyAuth0Button = class AmplifyAuth0Button {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyAuth0Button.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-auth0-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['config', 'handleAuthStateChange']
+            },] }
+];
+AmplifyAuth0Button.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyAuth0Button = __decorate([
+    ProxyCmp({ inputs: ['config', 'handleAuthStateChange'] })
+], AmplifyAuth0Button);
+let AmplifyAuthenticator = class AmplifyAuthenticator {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyAuthenticator.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-authenticator',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'federated',
+                    'handleAuthStateChange',
+                    'hideToast',
+                    'initialAuthState',
+                    'usernameAlias',
+                ]
+            },] }
+];
+AmplifyAuthenticator.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyAuthenticator = __decorate([
+    ProxyCmp({
+        inputs: [
+            'federated',
+            'handleAuthStateChange',
+            'hideToast',
+            'initialAuthState',
+            'usernameAlias',
+        ],
+    })
+], AmplifyAuthenticator);
+let AmplifyButton = class AmplifyButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']
+            },] }
+];
+AmplifyButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyButton = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'],
+    })
+], AmplifyButton);
+let AmplifyChatbot = class AmplifyChatbot {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['chatCompleted']);
+    }
+};
+AmplifyChatbot.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-chatbot',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'botName',
+                    'botTitle',
+                    'clearOnComplete',
+                    'conversationModeOn',
+                    'silenceThreshold',
+                    'silenceTime',
+                    'textEnabled',
+                    'voiceEnabled',
+                    'welcomeMessage',
+                ]
+            },] }
+];
+AmplifyChatbot.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyChatbot = __decorate([
+    ProxyCmp({
+        inputs: [
+            'botName',
+            'botTitle',
+            'clearOnComplete',
+            'conversationModeOn',
+            'silenceThreshold',
+            'silenceTime',
+            'textEnabled',
+            'voiceEnabled',
+            'welcomeMessage',
+        ],
+    })
+], AmplifyChatbot);
+let AmplifyCheckbox = class AmplifyCheckbox {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyCheckbox.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-checkbox',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']
+            },] }
+];
+AmplifyCheckbox.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyCheckbox = __decorate([
+    ProxyCmp({
+        inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'],
+    })
+], AmplifyCheckbox);
+let AmplifyCodeField = class AmplifyCodeField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyCodeField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-code-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'placeholder',
+                    'required',
+                    'value',
+                ]
+            },] }
+];
+AmplifyCodeField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyCodeField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'placeholder',
+            'required',
+            'value',
+        ],
+    })
+], AmplifyCodeField);
+let AmplifyConfirmSignIn = class AmplifyConfirmSignIn {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyConfirmSignIn.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-in',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSubmit',
+                    'headerText',
+                    'submitButtonText',
+                    'user',
+                ]
+            },] }
+];
+AmplifyConfirmSignIn.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyConfirmSignIn = __decorate([
+    ProxyCmp({
+        inputs: [
+            'formFields',
+            'handleAuthStateChange',
+            'handleSubmit',
+            'headerText',
+            'submitButtonText',
+            'user',
+        ],
+    })
+], AmplifyConfirmSignIn);
+let AmplifyConfirmSignUp = class AmplifyConfirmSignUp {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyConfirmSignUp.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-up',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSubmit',
+                    'headerText',
+                    'submitButtonText',
+                    'user',
+                    'usernameAlias',
+                ]
+            },] }
+];
+AmplifyConfirmSignUp.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyConfirmSignUp = __decorate([
+    ProxyCmp({
+        inputs: [
+            'formFields',
+            'handleAuthStateChange',
+            'handleSubmit',
+            'headerText',
+            'submitButtonText',
+            'user',
+            'usernameAlias',
+        ],
+    })
+], AmplifyConfirmSignUp);
+class AmplifyContainer {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyContainer.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-container',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyContainer.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+let AmplifyCountryDialCode = class AmplifyCountryDialCode {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyCountryDialCode.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-country-dial-code',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']
+            },] }
+];
+AmplifyCountryDialCode.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyCountryDialCode = __decorate([
+    ProxyCmp({ inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] })
+], AmplifyCountryDialCode);
+let AmplifyEmailField = class AmplifyEmailField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyEmailField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-email-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'placeholder',
+                    'required',
+                    'value',
+                ]
+            },] }
+];
+AmplifyEmailField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyEmailField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'placeholder',
+            'required',
+            'value',
+        ],
+    })
+], AmplifyEmailField);
+let AmplifyFacebookButton = class AmplifyFacebookButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyFacebookButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-facebook-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['appId', 'handleAuthStateChange']
+            },] }
+];
+AmplifyFacebookButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyFacebookButton = __decorate([
+    ProxyCmp({ inputs: ['appId', 'handleAuthStateChange'] })
+], AmplifyFacebookButton);
+let AmplifyFederatedButtons = class AmplifyFederatedButtons {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyFederatedButtons.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-buttons',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['authState', 'federated', 'handleAuthStateChange']
+            },] }
+];
+AmplifyFederatedButtons.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyFederatedButtons = __decorate([
+    ProxyCmp({ inputs: ['authState', 'federated', 'handleAuthStateChange'] })
+], AmplifyFederatedButtons);
+let AmplifyFederatedSignIn = class AmplifyFederatedSignIn {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyFederatedSignIn.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-federated-sign-in',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['authState', 'federated']
+            },] }
+];
+AmplifyFederatedSignIn.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyFederatedSignIn = __decorate([
+    ProxyCmp({ inputs: ['authState', 'federated'] })
+], AmplifyFederatedSignIn);
+let AmplifyForgotPassword = class AmplifyForgotPassword {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyForgotPassword.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-forgot-password',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSend',
+                    'handleSubmit',
+                    'headerText',
+                    'sendButtonText',
+                    'submitButtonText',
+                    'usernameAlias',
+                ]
+            },] }
+];
+AmplifyForgotPassword.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyForgotPassword = __decorate([
+    ProxyCmp({
+        inputs: [
+            'formFields',
+            'handleAuthStateChange',
+            'handleSend',
+            'handleSubmit',
+            'headerText',
+            'sendButtonText',
+            'submitButtonText',
+            'usernameAlias',
+        ],
+    })
+], AmplifyForgotPassword);
+let AmplifyFormField = class AmplifyFormField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyFormField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'description',
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'name',
+                    'placeholder',
+                    'required',
+                    'type',
+                    'value',
+                ]
+            },] }
+];
+AmplifyFormField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyFormField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'description',
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'name',
+            'placeholder',
+            'required',
+            'type',
+            'value',
+        ],
+    })
+], AmplifyFormField);
+let AmplifyFormSection = class AmplifyFormSection {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyFormSection.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-section',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'handleSubmit',
+                    'headerText',
+                    'loading',
+                    'secondaryFooterContent',
+                    'submitButtonText',
+                    'testDataPrefix',
+                ]
+            },] }
+];
+AmplifyFormSection.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyFormSection = __decorate([
+    ProxyCmp({
+        inputs: [
+            'handleSubmit',
+            'headerText',
+            'loading',
+            'secondaryFooterContent',
+            'submitButtonText',
+            'testDataPrefix',
+        ],
+    })
+], AmplifyFormSection);
+let AmplifyGoogleButton = class AmplifyGoogleButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyGoogleButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-google-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['clientId', 'handleAuthStateChange']
+            },] }
+];
+AmplifyGoogleButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyGoogleButton = __decorate([
+    ProxyCmp({ inputs: ['clientId', 'handleAuthStateChange'] })
+], AmplifyGoogleButton);
+let AmplifyGreetings = class AmplifyGreetings {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyGreetings.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-greetings',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['handleAuthStateChange', 'logo', 'username']
+            },] }
+];
+AmplifyGreetings.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyGreetings = __decorate([
+    ProxyCmp({ inputs: ['handleAuthStateChange', 'logo', 'username'] })
+], AmplifyGreetings);
+class AmplifyHint {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyHint.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-hint',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyHint.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+let AmplifyIcon = class AmplifyIcon {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyIcon.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-icon',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['name']
+            },] }
+];
+AmplifyIcon.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyIcon = __decorate([
+    ProxyCmp({ inputs: ['name'] })
+], AmplifyIcon);
+let AmplifyIconButton = class AmplifyIconButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyIconButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-icon-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['autoShowTooltip', 'name', 'tooltip']
+            },] }
+];
+AmplifyIconButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyIconButton = __decorate([
+    ProxyCmp({ inputs: ['autoShowTooltip', 'name', 'tooltip'] })
+], AmplifyIconButton);
+let AmplifyInput = class AmplifyInput {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyInput.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-input',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'description',
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'inputProps',
+                    'name',
+                    'placeholder',
+                    'required',
+                    'type',
+                    'value',
+                ]
+            },] }
+];
+AmplifyInput.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyInput = __decorate([
+    ProxyCmp({
+        inputs: [
+            'description',
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'inputProps',
+            'name',
+            'placeholder',
+            'required',
+            'type',
+            'value',
+        ],
+    })
+], AmplifyInput);
+let AmplifyLabel = class AmplifyLabel {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyLabel.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-label',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['htmlFor']
+            },] }
+];
+AmplifyLabel.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyLabel = __decorate([
+    ProxyCmp({ inputs: ['htmlFor'] })
+], AmplifyLabel);
+let AmplifyLink = class AmplifyLink {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyLink.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-link',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['role']
+            },] }
+];
+AmplifyLink.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyLink = __decorate([
+    ProxyCmp({ inputs: ['role'] })
+], AmplifyLink);
+class AmplifyLoadingSpinner {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyLoadingSpinner.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-loading-spinner',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyLoadingSpinner.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+class AmplifyNav {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyNav.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-nav',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyNav.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+let AmplifyOauthButton = class AmplifyOauthButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyOauthButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-oauth-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['config']
+            },] }
+];
+AmplifyOauthButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyOauthButton = __decorate([
+    ProxyCmp({ inputs: ['config'] })
+], AmplifyOauthButton);
+let AmplifyPasswordField = class AmplifyPasswordField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyPasswordField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-password-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'placeholder',
+                    'required',
+                    'value',
+                ]
+            },] }
+];
+AmplifyPasswordField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyPasswordField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'placeholder',
+            'required',
+            'value',
+        ],
+    })
+], AmplifyPasswordField);
+let AmplifyPhoneField = class AmplifyPhoneField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyPhoneField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-phone-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'dialCode',
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'placeholder',
+                    'required',
+                    'value',
+                ]
+            },] }
+];
+AmplifyPhoneField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyPhoneField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'dialCode',
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'placeholder',
+            'required',
+            'value',
+        ],
+    })
+], AmplifyPhoneField);
+let AmplifyPhotoPicker = class AmplifyPhotoPicker {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyPhotoPicker.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-photo-picker',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'buttonText',
+                    'handleClick',
+                    'headerHint',
+                    'headerTitle',
+                    'placeholderHint',
+                    'previewSrc',
+                ]
+            },] }
+];
+AmplifyPhotoPicker.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyPhotoPicker = __decorate([
+    ProxyCmp({
+        inputs: [
+            'buttonText',
+            'handleClick',
+            'headerHint',
+            'headerTitle',
+            'placeholderHint',
+            'previewSrc',
+        ],
+    })
+], AmplifyPhotoPicker);
+let AmplifyPicker = class AmplifyPicker {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyPicker.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-picker',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['acceptValue', 'inputHandler', 'pickerText']
+            },] }
+];
+AmplifyPicker.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyPicker = __decorate([
+    ProxyCmp({ inputs: ['acceptValue', 'inputHandler', 'pickerText'] })
+], AmplifyPicker);
+let AmplifyRadioButton = class AmplifyRadioButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyRadioButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-radio-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'checked',
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'inputProps',
+                    'label',
+                    'name',
+                    'placeholder',
+                    'value',
+                ]
+            },] }
+];
+AmplifyRadioButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyRadioButton = __decorate([
+    ProxyCmp({
+        inputs: [
+            'checked',
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'inputProps',
+            'label',
+            'name',
+            'placeholder',
+            'value',
+        ],
+    })
+], AmplifyRadioButton);
+let AmplifyRequireNewPassword = class AmplifyRequireNewPassword {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyRequireNewPassword.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-require-new-password',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSubmit',
+                    'headerText',
+                    'submitButtonText',
+                    'user',
+                ]
+            },] }
+];
+AmplifyRequireNewPassword.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyRequireNewPassword = __decorate([
+    ProxyCmp({
+        inputs: [
+            'formFields',
+            'handleAuthStateChange',
+            'handleSubmit',
+            'headerText',
+            'submitButtonText',
+            'user',
+        ],
+    })
+], AmplifyRequireNewPassword);
+let AmplifyS3Album = class AmplifyS3Album {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyS3Album.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-s3-album',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'contentType',
+                    'fileToKey',
+                    'filter',
+                    'handleOnError',
+                    'handleOnLoad',
+                    'identityId',
+                    'level',
+                    'path',
+                    'picker',
+                    'pickerText',
+                    'sort',
+                    'track',
+                ]
+            },] }
+];
+AmplifyS3Album.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyS3Album = __decorate([
+    ProxyCmp({
+        inputs: [
+            'contentType',
+            'fileToKey',
+            'filter',
+            'handleOnError',
+            'handleOnLoad',
+            'identityId',
+            'level',
+            'path',
+            'picker',
+            'pickerText',
+            'sort',
+            'track',
+        ],
+    })
+], AmplifyS3Album);
+let AmplifyS3Image = class AmplifyS3Image {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyS3Image.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-s3-image',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'alt',
+                    'body',
+                    'contentType',
+                    'handleOnError',
+                    'handleOnLoad',
+                    'identityId',
+                    'imgKey',
+                    'imgProps',
+                    'level',
+                    'path',
+                    'track',
+                ]
+            },] }
+];
+AmplifyS3Image.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyS3Image = __decorate([
+    ProxyCmp({
+        inputs: [
+            'alt',
+            'body',
+            'contentType',
+            'handleOnError',
+            'handleOnLoad',
+            'identityId',
+            'imgKey',
+            'imgProps',
+            'level',
+            'path',
+            'track',
+        ],
+    })
+], AmplifyS3Image);
+let AmplifyS3ImagePicker = class AmplifyS3ImagePicker {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyS3ImagePicker.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-s3-image-picker',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'buttonText',
+                    'contentType',
+                    'fileToKey',
+                    'headerHint',
+                    'headerTitle',
+                    'identityId',
+                    'level',
+                    'path',
+                    'placeholderHint',
+                    'track',
+                ]
+            },] }
+];
+AmplifyS3ImagePicker.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyS3ImagePicker = __decorate([
+    ProxyCmp({
+        inputs: [
+            'buttonText',
+            'contentType',
+            'fileToKey',
+            'headerHint',
+            'headerTitle',
+            'identityId',
+            'level',
+            'path',
+            'placeholderHint',
+            'track',
+        ],
+    })
+], AmplifyS3ImagePicker);
+let AmplifyS3Text = class AmplifyS3Text {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyS3Text.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-s3-text',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'body',
+                    'contentType',
+                    'fallbackText',
+                    'identityId',
+                    'level',
+                    'path',
+                    'textKey',
+                    'track',
+                ]
+            },] }
+];
+AmplifyS3Text.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyS3Text = __decorate([
+    ProxyCmp({
+        inputs: [
+            'body',
+            'contentType',
+            'fallbackText',
+            'identityId',
+            'level',
+            'path',
+            'textKey',
+            'track',
+        ],
+    })
+], AmplifyS3Text);
+let AmplifyS3TextPicker = class AmplifyS3TextPicker {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyS3TextPicker.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-s3-text-picker',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'contentType',
+                    'fallbackText',
+                    'fileToKey',
+                    'identityId',
+                    'level',
+                    'path',
+                    'track',
+                ]
+            },] }
+];
+AmplifyS3TextPicker.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyS3TextPicker = __decorate([
+    ProxyCmp({
+        inputs: [
+            'contentType',
+            'fallbackText',
+            'fileToKey',
+            'identityId',
+            'level',
+            'path',
+            'track',
+        ],
+    })
+], AmplifyS3TextPicker);
+let AmplifySection = class AmplifySection {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySection.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-section',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['role']
+            },] }
+];
+AmplifySection.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySection = __decorate([
+    ProxyCmp({ inputs: ['role'] })
+], AmplifySection);
+let AmplifySelect = class AmplifySelect {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySelect.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-select',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['fieldId', 'handleInputChange', 'options', 'selected']
+            },] }
+];
+AmplifySelect.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySelect = __decorate([
+    ProxyCmp({ inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] })
+], AmplifySelect);
+let AmplifySelectMfaType = class AmplifySelectMfaType {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySelectMfaType.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-select-mfa-type',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['MFATypes', 'authData', 'handleSubmit']
+            },] }
+];
+AmplifySelectMfaType.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySelectMfaType = __decorate([
+    ProxyCmp({ inputs: ['MFATypes', 'authData', 'handleSubmit'] })
+], AmplifySelectMfaType);
+let AmplifySignIn = class AmplifySignIn {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySignIn.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-in',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'federated',
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSubmit',
+                    'headerText',
+                    'hideSignUp',
+                    'submitButtonText',
+                    'usernameAlias',
+                ]
+            },] }
+];
+AmplifySignIn.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySignIn = __decorate([
+    ProxyCmp({
+        inputs: [
+            'federated',
+            'formFields',
+            'handleAuthStateChange',
+            'handleSubmit',
+            'headerText',
+            'hideSignUp',
+            'submitButtonText',
+            'usernameAlias',
+        ],
+    })
+], AmplifySignIn);
+let AmplifySignInButton = class AmplifySignInButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySignInButton.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-in-button',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['provider']
+            },] }
+];
+AmplifySignInButton.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySignInButton = __decorate([
+    ProxyCmp({ inputs: ['provider'] })
+], AmplifySignInButton);
+let AmplifySignOut = class AmplifySignOut {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySignOut.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-out',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['buttonText', 'handleAuthStateChange']
+            },] }
+];
+AmplifySignOut.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySignOut = __decorate([
+    ProxyCmp({ inputs: ['buttonText', 'handleAuthStateChange'] })
+], AmplifySignOut);
+let AmplifySignUp = class AmplifySignUp {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifySignUp.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-up',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'formFields',
+                    'handleAuthStateChange',
+                    'handleSignUp',
+                    'handleSubmit',
+                    'haveAccountText',
+                    'headerText',
+                    'signInText',
+                    'submitButtonText',
+                    'usernameAlias',
+                    'validationErrors',
+                ]
+            },] }
+];
+AmplifySignUp.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifySignUp = __decorate([
+    ProxyCmp({
+        inputs: [
+            'formFields',
+            'handleAuthStateChange',
+            'handleSignUp',
+            'handleSubmit',
+            'haveAccountText',
+            'headerText',
+            'signInText',
+            'submitButtonText',
+            'usernameAlias',
+            'validationErrors',
+        ],
+    })
+], AmplifySignUp);
+class AmplifyStrike {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+}
+AmplifyStrike.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-strike',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>'
+            },] }
+];
+AmplifyStrike.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+let AmplifyToast = class AmplifyToast {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyToast.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-toast',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['handleClose', 'message']
+            },] }
+];
+AmplifyToast.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyToast = __decorate([
+    ProxyCmp({ inputs: ['handleClose', 'message'] })
+], AmplifyToast);
+let AmplifyTooltip = class AmplifyTooltip {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyTooltip.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-tooltip',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['shouldAutoShow', 'text']
+            },] }
+];
+AmplifyTooltip.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyTooltip = __decorate([
+    ProxyCmp({ inputs: ['shouldAutoShow', 'text'] })
+], AmplifyTooltip);
+let AmplifyTotpSetup = class AmplifyTotpSetup {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyTotpSetup.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-totp-setup',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'handleAuthStateChange',
+                    'handleComplete',
+                    'headerText',
+                    'issuer',
+                    'standalone',
+                    'user',
+                ]
+            },] }
+];
+AmplifyTotpSetup.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyTotpSetup = __decorate([
+    ProxyCmp({
+        inputs: [
+            'handleAuthStateChange',
+            'handleComplete',
+            'headerText',
+            'issuer',
+            'standalone',
+            'user',
+        ],
+    })
+], AmplifyTotpSetup);
+let AmplifyUsernameField = class AmplifyUsernameField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyUsernameField.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-username-field',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: [
+                    'disabled',
+                    'fieldId',
+                    'handleInputChange',
+                    'hint',
+                    'inputProps',
+                    'label',
+                    'placeholder',
+                    'required',
+                    'value',
+                ]
+            },] }
+];
+AmplifyUsernameField.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyUsernameField = __decorate([
+    ProxyCmp({
+        inputs: [
+            'disabled',
+            'fieldId',
+            'handleInputChange',
+            'hint',
+            'inputProps',
+            'label',
+            'placeholder',
+            'required',
+            'value',
+        ],
+    })
+], AmplifyUsernameField);
+let AmplifyVerifyContact = class AmplifyVerifyContact {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+AmplifyVerifyContact.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-verify-contact',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content></ng-content>',
+                inputs: ['handleAuthStateChange', 'user']
+            },] }
+];
+AmplifyVerifyContact.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: NgZone }
+];
+AmplifyVerifyContact = __decorate([
+    ProxyCmp({ inputs: ['handleAuthStateChange', 'user'] })
+], AmplifyVerifyContact);
+
+class PhoneNumberFieldComponent {
+    constructor() {
+        this.autocomplete = 'new-password';
+        this.disabled = false;
+        this.initialValue = '';
+        this.label = '';
+        this.placeholder = '';
+        this.required = true;
+        this.countryDialCodes = countryDialCodes;
+    }
+}
+PhoneNumberFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-phone-number-field',
+                template: "<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\" amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <label class=\"sr-only amplify-label\" [for]=\"textFieldId\">\n    {{ label }}\n  </label>\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
+            },] }
+];
+PhoneNumberFieldComponent.propDecorators = {
+    autocomplete: [{ type: Input }],
+    disabled: [{ type: Input }],
+    defaultCountryCode: [{ type: Input }],
+    selectFieldId: [{ type: Input }],
+    textFieldId: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    label: [{ type: Input }],
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    required: [{ type: Input }],
+    type: [{ type: Input }]
+};
+
+customElements.define('amplify-button', AmplifyButton$1);
+customElements.define('amplify-input', AmplifyInput$1);
+customElements.define('amplify-toast', AmplifyToast$1);
+customElements.define('amplify-chatbot', AmplifyChatbot$1);
+customElements.define('amplify-s3-album', AmplifyS3Album$1);
+customElements.define('amplify-s3-image-picker', AmplifyS3ImagePicker$1);
+customElements.define('amplify-s3-text', AmplifyS3Text$1);
+customElements.define('amplify-s3-text-picker', AmplifyS3TextPicker$1);
+customElements.define('amplify-s3-image', AmplifyS3Image$1);
+customElements.define('amplify-picker', AmplifyPicker$1);
+customElements.define('amplify-photo-picker', AmplifyPhotoPicker$1);
+class UiAngularModule {
+}
+UiAngularModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    AmplifyChatbot,
+                    AmplifyToast,
+                    AmplifyInput,
+                    AmplifyButton,
+                    AmplifyS3Album,
+                    AmplifyS3ImagePicker,
+                    AmplifyS3Text,
+                    AmplifyS3TextPicker,
+                    AmplifyS3Image,
+                    AmplifyPicker,
+                    AmplifyPhotoPicker,
+                    AmplifyAuthenticatorComponent,
+                    AmplifySignInComponent,
+                    AmplifySignUpComponent,
+                    AmplifyFormFieldComponent,
+                    AmplifyErrorComponent,
+                    AmplifySlotDirective,
+                    AmplifyConfirmSignUpComponent,
+                    AmplifyUserNameAliasComponent,
+                    AmplifyConfirmSignInComponent,
+                    AmplifySetupTotpComponent,
+                    AmplifyForceNewPasswordComponent,
+                    AmplifyFederatedSignInComponent,
+                    AmplifyFederatedSignInButtonComponent,
+                    AmplifyResetPasswordComponent,
+                    AmplifyVerifyUserComponent,
+                    ConfirmResetPasswordComponent,
+                    ConfirmVerifyUserComponent,
+                    AmplifySelectComponent,
+                    AmplifyButtonComponent,
+                    AmplifyPasswordFieldComponent,
+                    AmplifyTextFieldComponent,
+                    TabsComponent,
+                    TabItemComponent,
+                    PhoneNumberFieldComponent,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    AmplifyChatbot,
+                    AmplifyToast,
+                    AmplifyInput,
+                    AmplifyButton,
+                    AmplifyS3Album,
+                    AmplifyS3ImagePicker,
+                    AmplifyS3Text,
+                    AmplifyS3TextPicker,
+                    AmplifyS3Image,
+                    AmplifyPicker,
+                    AmplifyPhotoPicker,
+                    AmplifyAuthenticatorComponent,
+                    AmplifySignInComponent,
+                    AmplifyFormFieldComponent,
+                    AmplifyErrorComponent,
+                    AmplifySlotDirective,
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            },] }
+];
+
+/*
+ * Public API Surface of ui-angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AmplifyAuthenticatorComponent, AmplifyButton, AmplifyChatbot, AmplifyConfirmSignInComponent, AmplifyConfirmSignUpComponent, AmplifyErrorComponent, AmplifyFederatedSignInButtonComponent, AmplifyFederatedSignInComponent, AmplifyForceNewPasswordComponent, AmplifyFormFieldComponent, AmplifyInput, AmplifyPhotoPicker, AmplifyPicker, AmplifyResetPasswordComponent, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySetupTotpComponent, AmplifySignInComponent, AmplifySignUpComponent, AmplifySlotDirective, AmplifyToast, AmplifyVerifyUserComponent, AuthPropService, ConfirmResetPasswordComponent, ConfirmVerifyUserComponent, StateMachineService, UiAngularModule, getAttributeMap, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignUpComponent as ɵd, AmplifyFormFieldComponent as ɵe, AmplifyErrorComponent as ɵf, AmplifyConfirmSignUpComponent as ɵg, AmplifyUserNameAliasComponent as ɵh, AmplifyConfirmSignInComponent as ɵi, AmplifySetupTotpComponent as ɵj, AmplifyForceNewPasswordComponent as ɵk, AmplifyFederatedSignInComponent as ɵl, AmplifyFederatedSignInButtonComponent as ɵm, AmplifyResetPasswordComponent as ɵn, AmplifyVerifyUserComponent as ɵo, ConfirmResetPasswordComponent as ɵp, ConfirmVerifyUserComponent as ɵq, AmplifySelectComponent as ɵr, AmplifyButtonComponent as ɵs, AmplifyPasswordFieldComponent as ɵt, AmplifyTextFieldComponent as ɵu, TabsComponent as ɵv, TabItemComponent as ɵw, PhoneNumberFieldComponent as ɵx };
+//# sourceMappingURL=aws-amplify-ui-angular.js.map