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

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

@@ -0,0 +1,2989 @@
+import * as i0 from '@angular/core';
+import { Directive, TemplateRef, Input, Injectable, Component, ViewEncapsulation, HostBinding, ContentChildren, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, NgZone, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { authMachine, getSendEventAliases, getActorState, translate, getConfiguredAliases, getActorContext, authInputAttributes, countryDialCodes, getAliasInfoFromContext, AuthChallengeNames, FederatedIdentityProviders } from '@aws-amplify/ui';
+import { interpret } from 'xstate';
+import { __awaiter, __decorate } from 'tslib';
+import { Logger, Auth } from 'aws-amplify';
+import QRCode from 'qrcode';
+import { fromEvent } from 'rxjs';
+import { AmplifyButton as AmplifyButton$1, AmplifyInput as AmplifyInput$1, AmplifyToast as AmplifyToast$1, AmplifyChatbot as AmplifyChatbot$1, AmplifyS3Album as AmplifyS3Album$1, AmplifyS3ImagePicker as AmplifyS3ImagePicker$1, AmplifyS3Text as AmplifyS3Text$1, AmplifyS3TextPicker as AmplifyS3TextPicker$1, AmplifyS3Image as AmplifyS3Image$1, AmplifyPicker as AmplifyPicker$1, AmplifyPhotoPicker as AmplifyPhotoPicker$1 } from '@aws-amplify/ui-components/dist/components';
+
+class AmplifyOverrideDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    set amplifyOverride(component) {
+        this.name = component;
+    }
+}
+AmplifyOverrideDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[amplifyOverride]',
+            },] }
+];
+AmplifyOverrideDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+AmplifyOverrideDirective.propDecorators = {
+    amplifyOverride: [{ type: Input }]
+};
+
+/**
+ * AmplifyContextService contains access to the xstate machine
+ * and custom components passed by the user.
+ */
+class StateMachineService {
+    constructor() {
+        const interpreter = interpret(authMachine, { devTools: true })
+            .onTransition((state) => {
+            this._user = state.context.user;
+            this._authState = state;
+        })
+            .start();
+        this._services = getSendEventAliases(interpreter.send);
+        this._authService = interpreter;
+    }
+    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',
+            },] }
+];
+StateMachineService.ctorParameters = () => [];
+
+class AuthPropService {
+    constructor() {
+        this._customComponents = {};
+        this._props = {};
+    }
+    get customComponents() {
+        return this._customComponents;
+    }
+    set customComponents(customComponents) {
+        this._customComponents = Object.assign(Object.assign({}, this._customComponents), customComponents);
+    }
+    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 = () => [];
+
+class AmplifyAuthenticatorComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        /**
+         * TODO: Add back custom events
+         */
+        this.initialAuthState = 'signIn';
+        this.dataAttr = '';
+        this.customComponentQuery = null;
+        this.customComponents = {};
+    }
+    /**
+     * 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;
+    }
+    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<!-- signIn component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signIn')\"\n>\n</ng-container>\n\n<!-- signUp component -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('signUp')\"\n>\n</ng-container>\n\n<!-- confirmSignUp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignUp')\"\n>\n</ng-container>\n\n<!-- confirmSignIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmSignIn')\"\n>\n</ng-container>\n\n<!-- setupTotp content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('setupTOTP')\"\n>\n</ng-container>\n\n<!-- forceNewPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('forceNewPassword')\"\n>\n</ng-container>\n\n<!-- resetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('resetPassword')\"\n>\n</ng-container>\n\n<!-- confirmResetPassword content -->\n<ng-container\n  [ngTemplateOutlet]=\"\n    customComponents.confirmResetPassword || confirmResetPassword\n  \"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmResetPassword')\"\n>\n</ng-container>\n\n<!-- verifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('verifyUser')\"\n>\n</ng-container>\n\n<!-- confirmVerifyUser content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.confirmVerifyUser || confirmVerifyUser\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n>\n</ng-container>\n\n<!-- signedIn content -->\n<ng-container\n  [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n  [ngTemplateOutletContext]=\"context\"\n  *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
+                providers: [AuthPropService],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AmplifyAuthenticatorComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyAuthenticatorComponent.propDecorators = {
+    initialAuthState: [{ type: Input }],
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator',] }],
+    customComponentQuery: [{ type: ContentChildren, args: [AmplifyOverrideDirective,] }]
+};
+
+const logger$3 = 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? ');
+        this.createAccountText = translate('Create account');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        logger$3.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 };
+    }
+    toSignUp() {
+        this.stateMachine.send('SIGN_UP');
+    }
+    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 data-amplify-button type=\"submit\">{{ signInButtonText }}</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-user-name-alias></amplify-user-name-alias>\n      <amplify-form-input\n        data-amplify-password\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n      ></amplify-form-input>\n      <button type=\"button\" (click)=\"toResetPassword()\">\n        {{ forgotPasswordText }}\n      </button>\n      <div data-amplify-footer>\n        <div>\n          {{ noAccountText }}\n          <button type=\"button\" (click)=\"toSignUp()\">\n            {{ createAccountText }}\n          </button>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"customComponents.signInButton || signInButton\"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+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('Back to Sign In');
+        this.haveAccountText = translate('Have an account? ');
+        this.signInText = translate('Sign in');
+    }
+    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);
+        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 },
+        });
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+}
+AmplifySignUpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-sign-up',
+                template: "<ng-template #signUpButton>\n  <button data-amplify-button type=\"submit\">{{ createAccountText }}</button>\n</ng-template>\n\n<ng-template #signUpUsername>\n  <amplify-user-name-alias [name]=\"primaryAlias\"></amplify-user-name-alias>\n</ng-template>\n\n<ng-template #signUpPassword>\n  <amplify-form-input\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpConfirmPassword>\n  <amplify-form-input\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-input>\n</ng-template>\n\n<ng-template #signUpFieldset>\n  <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n    <amplify-federated-sign-in></amplify-federated-sign-in>\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpUsername || signUpUsername\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpPassword || signUpPassword\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.signUpConfirmPassword || signUpConfirmPassword\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <ng-container *ngFor=\"let secondaryAlias of secondaryAliases\">\n      <amplify-form-input [name]=\"secondaryAlias\"></amplify-form-input>\n    </ng-container>\n  </fieldset>\n\n  <amplify-error *ngIf=\"remoteError\">\n    {{ remoteError }}\n  </amplify-error>\n</ng-template>\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"customComponents.signUpFieldset || signUpFieldset\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n\n    <div data-amplify-footer>\n      <div>\n        {{ haveAccountText }}\n        <button type=\"button\" (click)=\"toSignIn()\">{{ signInText }}</button>\n      </div>\n      <ng-container\n        [ngTemplateOutlet]=\"customComponents.signUpButton || signUpButton\"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </div>\n  </form>\n</div>\n"
+            },] }
+];
+AmplifySignUpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-signup',] }],
+    headerText: [{ type: Input }]
+};
+
+const getAttributeMap = () => authInputAttributes;
+
+/**
+ * Input interface opinionated for authenticator usage.
+ *
+ * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
+ * contains authenticator opinionated logic and 2) amplify-text-field primitive
+ * that does not make any auth-related inference.
+ */
+class AmplifyInputComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.required = true;
+        this.placeholder = '';
+        this.label = '';
+        this.initialValue = '';
+        this.disabled = false;
+        this.autocomplete = '';
+        this.countryDialCodes = countryDialCodes;
+    }
+    ngOnInit() {
+        const state = this.stateMachine.authState;
+        const { country_code } = getActorContext(state);
+        this.defaultCountryCode = country_code;
+        // TODO: consider better default handling mechanisms across frameworks
+        if (this.isTelInput()) {
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: 'country_code', value: country_code },
+            });
+        }
+    }
+    get attributeMap() {
+        return getAttributeMap();
+    }
+    get error() {
+        const formContext = getActorContext(this.stateMachine.authState);
+        const { validationError } = formContext;
+        return validationError[this.name];
+    }
+    isTelInput() {
+        return this.inferType() === 'tel';
+    }
+    inferLabel() {
+        var _a;
+        const label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
+        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';
+    }
+}
+AmplifyInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-input',
+                template: "<!-- Country code field -->\n<amplify-form-select\n  *ngIf=\"isTelInput()\"\n  name=\"country_code\"\n  label=\"Country Code\"\n  [id]=\"'country-code'\"\n  [items]=\"countryDialCodes\"\n  [initialValue]=\"defaultCountryCode\"\n></amplify-form-select>\n<!-- Textbox field -->\n<label>\n  <div data-amplify-label>{{ inferLabel() }}</div>\n  <input\n    data-amplify-form-input\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</label>\n"
+            },] }
+];
+AmplifyInputComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyInputComponent.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 AmplifyErrorComponent {
+}
+AmplifyErrorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-error',
+                template: "<span data-amplify-error>\n  <ng-content></ng-content>\n</span>\n"
+            },] }
+];
+
+class AmplifyConfirmSignUpComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Confirm Sign Up');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.signInText = translate('Sign in');
+        this.resendCodeText = translate('Resend Code');
+        this.lostCodeText = translate('Lost your code? ');
+        this.confirmText = translate('Confirm');
+    }
+    ngOnInit() {
+        // TODO: alias for subscribe
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+        this.setUsername();
+    }
+    setUsername() {
+        var _a;
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { user, authAttributes } = actorContext;
+        const username = (_a = user === null || user === void 0 ? void 0 : user.username) !== null && _a !== void 0 ? _a : authAttributes === null || authAttributes === void 0 ? void 0 : authAttributes.username;
+        if (username) {
+            this.username = username;
+            this.stateMachine.send({
+                type: 'CHANGE',
+                data: { name: 'username', value: this.username },
+            });
+        }
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmSignUp.edit');
+    }
+    get context() {
+        const { change, resend, signIn, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        const username = this.username;
+        return { change, remoteError, resend, signIn, submit, username };
+    }
+    toSignIn() {
+        this.stateMachine.send('SIGN_IN');
+    }
+    resend() {
+        this.stateMachine.send({
+            type: 'RESEND',
+            data: {
+                username: this.username,
+            },
+        });
+    }
+    onInput($event) {
+        $event.preventDefault();
+        const { name, value } = $event.target;
+        this.stateMachine.send({
+            type: 'CHANGE',
+            data: { name, value },
+        });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        const state = this.stateMachine.authState;
+        const actorContext = getActorContext(state);
+        const { formValues } = actorContext;
+        const { username, confirmation_code } = formValues;
+        this.stateMachine.send({
+            type: 'SUBMIT',
+            data: { username, confirmation_code },
+        });
+    }
+}
+AmplifyConfirmSignUpComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-confirm-sign-up',
+                template: "<!-- \n  Define default contents here\n-->\n<ng-template #confirmSignUpButton>\n  <button data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #confirmSignUpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        [initialValue]=\"username ? username : null\"\n        [disabled]=\"!!username\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        {{ lostCodeText }}\n        <a data-amplify-link (click)=\"resend()\">{{ resendCodeText }}</a>\n      </div>\n\n      <div data-amplify-footer>\n        <div>\n          Back to{{ ' ' }}\n          <a data-amplify-link (click)=\"toSignIn()\">{{ signInText }}</a>\n        </div>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignUpButton || confirmSignUpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm sign up component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.confirmSignUpForm || confirmSignUpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyConfirmSignUpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyConfirmSignUpComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignup',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifyUserNameAliasComponent {
+    constructor(stateMachine) {
+        this.stateMachine = stateMachine;
+        this.name = 'username';
+        this.disabled = false;
+        this.initialValue = '';
+        this.required = true;
+    }
+    ngOnInit() {
+        const context = this.stateMachine.context;
+        const { label, type } = getAliasInfoFromContext(context);
+        this.label = label;
+        this.type = type;
+        this.placeholder = label;
+    }
+}
+AmplifyUserNameAliasComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-user-name-alias',
+                template: "<amplify-form-input\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-input>\n"
+            },] }
+];
+AmplifyUserNameAliasComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyUserNameAliasComponent.propDecorators = {
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    required: [{ type: Input }]
+};
+
+const logger$2 = new Logger('ConfirmSignIn');
+class AmplifyConfirmSignInComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        this.confirmText = translate('Confirm');
+        this.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$2.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 data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #confirmSignInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button type=\"button\" (click)=\"toSignIn()\">\n          {{ backToSignInText }}\n        </button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.confirmSignInButton || confirmSignInButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || confirmSignInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyConfirmSignInComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyConfirmSignInComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmsignin',] }]
+};
+
+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 data-amplify-button type=\"submit\">{{ confirmText }}</button>\n</ng-template>\n\n<ng-template #setupTotpForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <p *ngIf=\"!qrCodeSource\">Loading...</p>\n      <img *ngIf=\"qrCodeSource\" [src]=\"qrCodeSource\" alt=\"qr code\" />\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.setupTotpButton || setupTotpButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.setupTotpForm || setupTotpForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifySetupTotpComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifySetupTotpComponent.propDecorators = {
+    customComponents: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-setup-totp',] }]
+};
+
+const logger = new Logger('ForceNewPassword');
+class AmplifyForceNewPasswordComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Reset your password');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.changePasswordText = translate('Change Password');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        logger.log('sign in destroyed, unsubscribing from state machine...');
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = actorState.matches({
+            signUp: {
+                submission: 'idle',
+            },
+        });
+    }
+    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 data-amplify-button type=\"submit\">{{ changePasswordText }}</button>\n</ng-template>\n\n<ng-template #signInForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <amplify-form-input\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <div data-amplify-footer>\n        <button type=\"button\" (click)=\"toSignIn()\">\n          {{ backToSignInText }}\n        </button>\n        <ng-container\n          [ngTemplateOutlet]=\"\n            customComponents.forceNewPasswordSubmitButton ||\n            forceNewPasswordSubmitButton\n          \"\n          [ngTemplateOutletContext]=\"context\"\n        >\n        </ng-container>\n      </div>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render sign in component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.signInForm || signInForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyForceNewPasswordComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyForceNewPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-forcenewpassword',] }],
+    headerText: [{ 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 data-amplify-federated>\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeFacebook\"\n    [text]=\"signInFacebookText\"\n    [provider]=\"FederatedProviders.Facebook\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeGoogle\"\n    [text]=\"signInGoogleText\"\n    [provider]=\"FederatedProviders.Google\"\n  ></amplify-federated-sign-in-button>\n\n  <amplify-federated-sign-in-button\n    *ngIf=\"includeAmazon\"\n    [text]=\"signInAmazonText\"\n    [provider]=\"FederatedProviders.Amazon\"\n  ></amplify-federated-sign-in-button>\n</div>\n"
+            },] }
+];
+AmplifyFederatedSignInComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+
+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 data-amplify-button (click)=\"onClick()\">{{ text }}</button>\n"
+            },] }
+];
+AmplifyFederatedSignInButtonComponent.ctorParameters = () => [
+    { type: StateMachineService }
+];
+AmplifyFederatedSignInButtonComponent.propDecorators = {
+    provider: [{ type: Input }],
+    text: [{ type: Input }]
+};
+
+class AmplifyResetPasswordComponent {
+    constructor(stateMachine, contextService) {
+        this.stateMachine = stateMachine;
+        this.contextService = contextService;
+        this.dataAttr = '';
+        this.headerText = translate('Reset your password');
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+        // translated texts
+        this.sendCodeText = translate('Send Code');
+        this.backToSignInText = translate('Back to Sign In');
+    }
+    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 data-amplify-button type=\"submit\">{{ sendCodeText }}</button>\n</ng-template>\n\n<ng-template #resetPasswordFooter>\n  <div data-amplify-footer>\n    <button type=\"button\" (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.resetPasswordSubmitButton || resetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #resetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"username\"\n        type=\"username\"\n        autocomplete=\"username\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.resetPasswordFooter || resetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render reset passsword component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.resetPasswordForm || resetPasswordForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+AmplifyResetPasswordComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+AmplifyResetPasswordComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-resetPassword',] }],
+    headerText: [{ type: Input }]
+};
+
+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;
+        // 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');
+    }
+    // enable translate to be used inside the template
+    translate(phrase) {
+        return translate(phrase);
+    }
+    onSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            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 #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">{{ skipText }}</button>\n    <button data-amplify-button type=\"submit\">{{ verifyText }}</button>\n  </div>\n</ng-template>\n\n<ng-template #verifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <ng-container\n        *ngFor=\"let unverifiedAttribute of unverifiedAttributes | keyvalue\"\n      >\n        <input\n          name=\"unverifiedAttr\"\n          type=\"radio\"\n          [value]=\"unverifiedAttribute.key\"\n        />\n        <span>{{ translate(unverifiedAttribute.key) }}</span>\n      </ng-container>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render verify user component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"customComponents.verifyUserForm || verifyUserForm\"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n",
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+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 data-amplify-button type=\"submit\">{{ sendCodeText }}</button>\n</ng-template>\n\n<ng-template #confirmResetPasswordFooter>\n  <div data-amplify-footer>\n    <div>\n      <button type=\"button\" (click)=\"toSignIn()\">{{ backToSignInText }}</button>\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        customComponents.confirmResetPasswordSubmitButton ||\n        confirmResetPasswordSubmitButton\n      \"\n      [ngTemplateOutletContext]=\"context\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #confirmResetPasswordForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n      <amplify-form-input\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-input>\n\n      <div data-amplify-resend>\n        {{ lostCodeText }}\n        <button type=\"button\" (click)=\"resend()\">{{ resendCodeText }}</button>\n      </div>\n\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.confirmResetPasswordFooter ||\n          confirmResetPasswordFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmResetPasswordForm || confirmResetPasswordForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+ConfirmResetPasswordComponent.ctorParameters = () => [
+    { 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 = 'Account recovery requires verified contact information';
+        this.customComponents = {};
+        this.remoteError = '';
+        this.isPending = false;
+    }
+    ngOnInit() {
+        this.authSubscription = this.stateMachine.authService.subscribe((state) => this.onStateUpdate(state));
+    }
+    ngAfterContentInit() {
+        this.customComponents = this.contextService.customComponents;
+    }
+    ngOnDestroy() {
+        this.authSubscription.unsubscribe();
+    }
+    onStateUpdate(state) {
+        const actorState = getActorState(state);
+        this.remoteError = actorState.context.remoteError;
+        this.isPending = !actorState.matches('confirmVerifyUser.edit');
+    }
+    get context() {
+        const { skip, submit } = this.stateMachine.services;
+        const remoteError = this.remoteError;
+        return { remoteError, skip, submit };
+    }
+    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 #verifyUserFooter>\n  <div data-amplify-footer>\n    <button data-amplify-button (click)=\"skipVerify()\">Skip</button>\n    <button data-amplify-button type=\"submit\">Submit</button>\n  </div>\n</ng-template>\n\n<ng-template #confirmVerifyUserForm>\n  <form data-amplify-form (submit)=\"onSubmit($event)\">\n    <fieldset data-amplify-fieldset [disabled]=\"isPending\">\n      <amplify-form-input\n        name=\"confirmation_code\"\n        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-input>\n      <ng-container\n        [ngTemplateOutlet]=\"\n          customComponents.verifyUserFooter || verifyUserFooter\n        \"\n        [ngTemplateOutletContext]=\"context\"\n      >\n      </ng-container>\n    </fieldset>\n\n    <amplify-error *ngIf=\"remoteError\">\n      {{ remoteError }}\n    </amplify-error>\n  </form>\n</ng-template>\n\n<!-- \n  Render confirm reset password component\n-->\n<div data-amplify-container>\n  <h2 data-amplify-header>{{ this.headerText }}</h2>\n  <ng-container\n    [ngTemplateOutlet]=\"\n      customComponents.confirmVerifyUserForm || confirmVerifyUserForm\n    \"\n    [ngTemplateOutletContext]=\"context\"\n  >\n  </ng-container>\n</div>\n"
+            },] }
+];
+ConfirmVerifyUserComponent.ctorParameters = () => [
+    { type: StateMachineService },
+    { type: AuthPropService }
+];
+ConfirmVerifyUserComponent.propDecorators = {
+    dataAttr: [{ type: HostBinding, args: ['attr.data-amplify-authenticator-confirmverifyuser',] }],
+    headerText: [{ type: Input }]
+};
+
+class AmplifySelectComponent {
+}
+AmplifySelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'amplify-form-select',
+                template: "<select [id]=\"id\" [name]=\"name\" [attr.aria-label]=\"label\">\n  <option\n    *ngFor=\"let item of items\"\n    [value]=\"item\"\n    [selected]=\"item === initialValue\"\n  >\n    {{ item }}\n  </option>\n</select>\n"
+            },] }
+];
+AmplifySelectComponent.propDecorators = {
+    items: [{ type: Input }],
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    id: [{ type: Input }],
+    initialValue: [{ type: Input }]
+};
+
+const proxyInputs = (Cmp, inputs) => {
+    const Prototype = Cmp.prototype;
+    inputs.forEach((item) => {
+        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);
+
+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,
+                    AmplifyInputComponent,
+                    AmplifyErrorComponent,
+                    AmplifyOverrideDirective,
+                    AmplifyConfirmSignUpComponent,
+                    AmplifyUserNameAliasComponent,
+                    AmplifyConfirmSignInComponent,
+                    AmplifySetupTotpComponent,
+                    AmplifyForceNewPasswordComponent,
+                    AmplifyFederatedSignInComponent,
+                    AmplifyFederatedSignInButtonComponent,
+                    AmplifyResetPasswordComponent,
+                    AmplifyVerifyUserComponent,
+                    ConfirmResetPasswordComponent,
+                    ConfirmVerifyUserComponent,
+                    AmplifySelectComponent,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    AmplifyChatbot,
+                    AmplifyToast,
+                    AmplifyInput,
+                    AmplifyButton,
+                    AmplifyS3Album,
+                    AmplifyS3ImagePicker,
+                    AmplifyS3Text,
+                    AmplifyS3TextPicker,
+                    AmplifyS3Image,
+                    AmplifyPicker,
+                    AmplifyPhotoPicker,
+                    AmplifyAuthenticatorComponent,
+                    AmplifySignInComponent,
+                    AmplifyInputComponent,
+                    AmplifyErrorComponent,
+                    AmplifyOverrideDirective,
+                ],
+                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, AmplifyInput, AmplifyInputComponent, AmplifyOverrideDirective, AmplifyPhotoPicker, AmplifyPicker, AmplifyResetPasswordComponent, AmplifyS3Album, AmplifyS3Image, AmplifyS3ImagePicker, AmplifyS3Text, AmplifyS3TextPicker, AmplifySetupTotpComponent, AmplifySignInComponent, AmplifySignUpComponent, AmplifyToast, AmplifyVerifyUserComponent, AuthPropService, ConfirmResetPasswordComponent, ConfirmVerifyUserComponent, StateMachineService, UiAngularModule, getAttributeMap, ProxyCmp as ɵa, AmplifyAuthenticatorComponent as ɵb, AmplifySignInComponent as ɵc, AmplifySignUpComponent as ɵd, AmplifyInputComponent as ɵe, AmplifyErrorComponent as ɵf, AmplifyConfirmSignUpComponent as ɵg, AmplifyUserNameAliasComponent as ɵh, AmplifyConfirmSignInComponent as ɵi, AmplifySetupTotpComponent as ɵj, AmplifyForceNewPasswordComponent as ɵk, AmplifyFederatedSignInComponent as ɵl, AmplifyFederatedSignInButtonComponent as ɵm, AmplifyResetPasswordComponent as ɵn, AmplifyVerifyUserComponent as ɵo, ConfirmResetPasswordComponent as ɵp, ConfirmVerifyUserComponent as ɵq, AmplifySelectComponent as ɵr };
+//# sourceMappingURL=aws-amplify-ui-angular.js.map