@aws-amplify/ui-angular 5.0.40 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
54
54
  }]
55
55
  }] });
56
56
 
57
- const VERSION = '5.0.40';
57
+ const VERSION = '5.1.0';
58
58
 
59
59
  const logger$1 = new ConsoleLogger('state-machine');
60
60
  /**
@@ -555,10 +555,10 @@ class FormFieldComponent {
555
555
  }
556
556
  }
557
557
  FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormFieldComponent, deps: [{ token: AuthenticatorService }], target: i0.ɵɵFactoryTarget.Component });
558
- FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormFieldComponent, selector: "amplify-form-field", inputs: { name: "name", formField: "formField" }, ngImport: i0, template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [defaultCountryCode]=\"formField.dialCode\"\n [dialCodeList]=\"formField.dialCodeList\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n type=\"tel\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n (setBlur)=\"onBlur($event)\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [type]=\"formField.type\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n ></amplify-text-field>\n\n <div data-amplify-sign-up-errors *ngIf=\"hasError()\" [id]=\"errorId\">\n <div\n class=\"amplify-text amplify-text--error\"\n data-variation=\"error\"\n *ngFor=\"let error of errors\"\n >\n {{ translate(error) }}\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordFieldComponent, selector: "amplify-password-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "labelHidden", "hasError", "describedBy"], outputs: ["setBlur"] }, { kind: "component", type: PhoneNumberFieldComponent, selector: "amplify-phone-number-field", inputs: ["autocomplete", "disabled", "defaultCountryCode", "selectFieldId", "textFieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "dialCodeList", "hasError", "describedBy"] }, { kind: "component", type: TextFieldComponent, selector: "amplify-text-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "hasError", "describedBy"] }] });
558
+ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormFieldComponent, selector: "amplify-form-field", inputs: { name: "name", formField: "formField" }, ngImport: i0, template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [defaultCountryCode]=\"formField.dialCode\"\n [dialCodeList]=\"formField.dialCodeList\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n type=\"tel\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n (setBlur)=\"onBlur($event)\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [type]=\"formField.type\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n ></amplify-text-field>\n\n <div\n data-amplify-sign-up-errors\n *ngIf=\"hasError()\"\n [id]=\"errorId\"\n >\n <div\n class=\"amplify-text amplify-text--error\"\n data-variation=\"error\"\n *ngFor=\"let error of errors\"\n >\n {{ translate(error) }}\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordFieldComponent, selector: "amplify-password-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "labelHidden", "hasError", "describedBy"], outputs: ["setBlur"] }, { kind: "component", type: PhoneNumberFieldComponent, selector: "amplify-phone-number-field", inputs: ["autocomplete", "disabled", "defaultCountryCode", "selectFieldId", "textFieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "dialCodeList", "hasError", "describedBy"] }, { kind: "component", type: TextFieldComponent, selector: "amplify-text-field", inputs: ["autocomplete", "disabled", "fieldId", "initialValue", "label", "name", "placeholder", "required", "type", "labelHidden", "hasError", "describedBy"] }] });
559
559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormFieldComponent, decorators: [{
560
560
  type: Component,
561
- args: [{ selector: 'amplify-form-field', template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [defaultCountryCode]=\"formField.dialCode\"\n [dialCodeList]=\"formField.dialCodeList\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n type=\"tel\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n (setBlur)=\"onBlur($event)\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [type]=\"formField.type\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n ></amplify-text-field>\n\n <div data-amplify-sign-up-errors *ngIf=\"hasError()\" [id]=\"errorId\">\n <div\n class=\"amplify-text amplify-text--error\"\n data-variation=\"error\"\n *ngFor=\"let error of errors\"\n >\n {{ translate(error) }}\n </div>\n </div>\n</div>\n" }]
561
+ args: [{ selector: 'amplify-form-field', template: "<div class=\"amplify-flex amplify-field amplify-authenticator__column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [defaultCountryCode]=\"formField.dialCode\"\n [dialCodeList]=\"formField.dialCodeList\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n type=\"tel\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n (setBlur)=\"onBlur($event)\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [name]=\"name\"\n [label]=\"formField.label\"\n [placeholder]=\"formField.placeholder\"\n [required]=\"formField.isRequired\"\n [labelHidden]=\"formField.labelHidden\"\n [autocomplete]=\"formField.autocomplete\"\n [type]=\"formField.type\"\n [hasError]=\"hasError\"\n [describedBy]=\"ariaDescribedBy\"\n ></amplify-text-field>\n\n <div\n data-amplify-sign-up-errors\n *ngIf=\"hasError()\"\n [id]=\"errorId\"\n >\n <div\n class=\"amplify-text amplify-text--error\"\n data-variation=\"error\"\n *ngFor=\"let error of errors\"\n >\n {{ translate(error) }}\n </div>\n </div>\n</div>" }]
562
562
  }], ctorParameters: function () { return [{ type: AuthenticatorService }]; }, propDecorators: { name: [{
563
563
  type: Input
564
564
  }], formField: [{
@@ -607,14 +607,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
607
607
  args: [{ selector: 'amplify-error', template: "<div\n class=\"amplify-flex amplify-alert amplify-alert--error\"\n data-variation=\"error\"\n style=\"align-items: center; justify-content: space-between\"\n *ngIf=\"isVisible\"\n role=\"alert\"\n>\n <div class=\"amplify-flex\" style=\"align-items: center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"amplify-icon\"\n [attr.aria-hidden]=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n ></path>\n </svg>\n <div><ng-content></ng-content></div>\n </div>\n <button\n amplify-button\n [attr.aria-label]=\"dismissAriaLabel\"\n variation=\"link\"\n [fullWidth]=\"false\"\n (click)=\"close()\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"amplify-icon\"\n [attr.aria-hidden]=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n ></path>\n </svg>\n </button>\n</div>\n" }]
608
608
  }] });
609
609
 
610
- const { getBackToSignInText: getBackToSignInText$4, getResendCodeText: getResendCodeText$1, getSubmitText: getSubmitText$1, getResetYourPasswordText: getResetYourPasswordText$1, } = authenticatorTextUtil;
610
+ const { getBackToSignInText: getBackToSignInText$6, getResendCodeText: getResendCodeText$1, getSubmitText: getSubmitText$1, getResetYourPasswordText: getResetYourPasswordText$1, } = authenticatorTextUtil;
611
611
  class ConfirmResetPasswordComponent {
612
612
  constructor(authenticator) {
613
613
  this.authenticator = authenticator;
614
614
  this.dataAttr = '';
615
615
  this.headerText = getResetYourPasswordText$1();
616
616
  // translated strings
617
- this.backToSignInText = getBackToSignInText$4();
617
+ this.backToSignInText = getBackToSignInText$6();
618
618
  this.resendCodeText = getResendCodeText$1();
619
619
  this.submitText = getSubmitText$1();
620
620
  }
@@ -643,13 +643,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
643
643
  type: Input
644
644
  }] } });
645
645
 
646
- const { getConfirmText: getConfirmText$2, getBackToSignInText: getBackToSignInText$3, getChallengeText } = authenticatorTextUtil;
646
+ const { getConfirmText: getConfirmText$4, getBackToSignInText: getBackToSignInText$5, getChallengeText } = authenticatorTextUtil;
647
647
  class ConfirmSignInComponent {
648
648
  constructor(authenticator) {
649
649
  this.authenticator = authenticator;
650
650
  this.dataAttr = '';
651
- this.confirmText = getConfirmText$2();
652
- this.backToSignInText = getBackToSignInText$3();
651
+ this.confirmText = getConfirmText$4();
652
+ this.backToSignInText = getBackToSignInText$5();
653
653
  }
654
654
  get context() {
655
655
  return this.authenticator.slotContext;
@@ -683,14 +683,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
683
683
  args: ['attr.data-amplify-authenticator-confirmsignin']
684
684
  }] } });
685
685
 
686
- const { getResendCodeText, getConfirmText: getConfirmText$1, getDeliveryMethodText, getDeliveryMessageText, } = authenticatorTextUtil;
686
+ const { getResendCodeText, getConfirmText: getConfirmText$3, getDeliveryMethodText, getDeliveryMessageText, } = authenticatorTextUtil;
687
687
  class ConfirmSignUpComponent {
688
688
  constructor(authenticator) {
689
689
  this.authenticator = authenticator;
690
690
  this.dataAttr = '';
691
691
  // translated texts
692
692
  this.resendCodeText = getResendCodeText();
693
- this.confirmText = getConfirmText$1();
693
+ this.confirmText = getConfirmText$3();
694
694
  }
695
695
  get context() {
696
696
  return this.authenticator.slotContext;
@@ -767,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
767
767
  args: [{ selector: 'amplify-force-new-password-form-fields', template: "<div class=\"amplify-flex amplify-authenticator__column\" data-amplify-fieldset>\n <amplify-base-form-fields route=\"forceNewPassword\"></amplify-base-form-fields>\n</div>\n" }]
768
768
  }] });
769
769
 
770
- const { getChangePasswordText, getBackToSignInText: getBackToSignInText$2 } = authenticatorTextUtil;
770
+ const { getChangePasswordText, getBackToSignInText: getBackToSignInText$4 } = authenticatorTextUtil;
771
771
  class ForceNewPasswordComponent {
772
772
  constructor(authenticator) {
773
773
  this.authenticator = authenticator;
@@ -775,7 +775,7 @@ class ForceNewPasswordComponent {
775
775
  this.headerText = getChangePasswordText();
776
776
  // translated texts
777
777
  this.changePasswordText = getChangePasswordText();
778
- this.backToSignInText = getBackToSignInText$2();
778
+ this.backToSignInText = getBackToSignInText$4();
779
779
  }
780
780
  get context() {
781
781
  return this.authenticator.slotContext;
@@ -802,7 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
802
802
  type: Input
803
803
  }] } });
804
804
 
805
- const { getResetYourPasswordText, getSendCodeText, getBackToSignInText: getBackToSignInText$1 } = authenticatorTextUtil;
805
+ const { getResetYourPasswordText, getSendCodeText, getBackToSignInText: getBackToSignInText$3 } = authenticatorTextUtil;
806
806
  class ForgotPasswordComponent {
807
807
  constructor(authenticator) {
808
808
  this.authenticator = authenticator;
@@ -810,7 +810,7 @@ class ForgotPasswordComponent {
810
810
  this.headerText = getResetYourPasswordText();
811
811
  // translated texts
812
812
  this.sendCodeText = getSendCodeText();
813
- this.backToSignInText = getBackToSignInText$1();
813
+ this.backToSignInText = getBackToSignInText$3();
814
814
  }
815
815
  get context() {
816
816
  return this.authenticator.slotContext;
@@ -837,6 +837,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
837
837
  type: Input
838
838
  }] } });
839
839
 
840
+ const { getConfirmText: getConfirmText$2, getBackToSignInText: getBackToSignInText$2, getSelectMfaTypeText, getSelectMfaTypeByChallengeName, getMfaTypeLabelByValue, } = authenticatorTextUtil;
841
+ class SelectMfaTypeComponent {
842
+ constructor(authenticator) {
843
+ this.authenticator = authenticator;
844
+ this.confirmText = getConfirmText$2();
845
+ this.backToSignInText = getBackToSignInText$2();
846
+ this.selectMfaTypeText = getSelectMfaTypeText();
847
+ this.getMfaTypeLabelByValue = getMfaTypeLabelByValue;
848
+ this.allowedMfaTypes = [];
849
+ this.classNames = classNames;
850
+ this.ComponentClassName = ComponentClassName;
851
+ }
852
+ get context() {
853
+ return this.authenticator.slotContext;
854
+ }
855
+ ngOnInit() {
856
+ this.setHeaderText();
857
+ this.setAllowedMfaTypes();
858
+ }
859
+ setHeaderText() {
860
+ const actorContext = getActorContext(this.authenticator.authState);
861
+ this.headerText = getSelectMfaTypeByChallengeName(actorContext.challengeName);
862
+ }
863
+ setAllowedMfaTypes() {
864
+ const actorContext = getActorContext(this.authenticator.authState);
865
+ this.allowedMfaTypes = actorContext.allowedMfaTypes;
866
+ }
867
+ onInput(event) {
868
+ event.preventDefault();
869
+ const { name, value } = event.target;
870
+ this.authenticator.updateForm({ name, value });
871
+ }
872
+ onSubmit(event) {
873
+ event.preventDefault();
874
+ this.authenticator.submitForm(getFormDataFromEvent(event));
875
+ }
876
+ }
877
+ SelectMfaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectMfaTypeComponent, deps: [{ token: AuthenticatorService }], target: i0.ɵɵFactoryTarget.Component });
878
+ SelectMfaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectMfaTypeComponent, selector: "amplify-select-mfa-type", ngImport: i0, template: "<form\n data-amplify-form\n data-amplify-authenticator-select-mfa-type\n (submit)=\"onSubmit($event)\"\n (input)=\"onInput($event)\"\n>\n <fieldset\n [class]=\"classNames(ComponentClassName.Flex, 'amplify-authenticator__column')\"\n data-amplify-fieldset\n [disabled]=\"authenticator.isPending\"\n >\n <amplify-slot\n name=\"select-mfa-type-header\"\n [context]=\"context\"\n >\n <h3 [class]=\"classNames(ComponentClassName.Heading, 'amplify-heading--3')\">{{ headerText }}</h3>\n </amplify-slot>\n <div\n *ngFor=\"let mfaType of allowedMfaTypes; index as i\"\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.Field, ComponentClassName.RadioGroupField)\"\n role=\"radiogroup\"\n >\n <label\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.Radio)\"\n [attr.data-amplify-radio-control-label]\n >\n <span [class]=\"classNames(ComponentClassName.Text, ComponentClassName.RadioLabel)\">\n {{getMfaTypeLabelByValue(mfaType)}}\n </span>\n <input\n [class]=\"classNames(ComponentClassName.Input, ComponentClassName.FieldGroupControl, ComponentClassName.VisuallyHidden, ComponentClassName.RadioInput)\"\n [attr.data-amplify-radio-control-input]\n [value]=\"mfaType\"\n [checked]=\"i === 0\"\n name=\"mfa_type\"\n type=\"radio\"\n required\n />\n <span\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.RadioButton)\"\n [attr.aria-hidden]=\"true\"\n ></span>\n </label>\n </div>\n <button\n amplify-button\n variation=\"primary\"\n fullWidth=\"true\"\n type=\"submit\"\n [isDisabled]=\"authenticator.isPending\"\n >\n {{ confirmText }}\n </button>\n <button\n amplify-button\n size=\"small\"\n variation=\"link\"\n fontWeight=\"normal\"\n fullWidth=\"true\"\n (click)=\"authenticator.toSignIn()\"\n >\n {{ backToSignInText }}\n </button>\n <amplify-error *ngIf=\"authenticator.error\">\n {{ authenticator.error }}\n </amplify-error>\n </fieldset>\n <amplify-slot\n name=\"select-mfa-type-footer\"\n [context]=\"context\"\n ></amplify-slot>\n</form>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { kind: "component", type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { kind: "component", type: ErrorComponent, selector: "amplify-error" }] });
879
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectMfaTypeComponent, decorators: [{
880
+ type: Component,
881
+ args: [{ selector: 'amplify-select-mfa-type', template: "<form\n data-amplify-form\n data-amplify-authenticator-select-mfa-type\n (submit)=\"onSubmit($event)\"\n (input)=\"onInput($event)\"\n>\n <fieldset\n [class]=\"classNames(ComponentClassName.Flex, 'amplify-authenticator__column')\"\n data-amplify-fieldset\n [disabled]=\"authenticator.isPending\"\n >\n <amplify-slot\n name=\"select-mfa-type-header\"\n [context]=\"context\"\n >\n <h3 [class]=\"classNames(ComponentClassName.Heading, 'amplify-heading--3')\">{{ headerText }}</h3>\n </amplify-slot>\n <div\n *ngFor=\"let mfaType of allowedMfaTypes; index as i\"\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.Field, ComponentClassName.RadioGroupField)\"\n role=\"radiogroup\"\n >\n <label\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.Radio)\"\n [attr.data-amplify-radio-control-label]\n >\n <span [class]=\"classNames(ComponentClassName.Text, ComponentClassName.RadioLabel)\">\n {{getMfaTypeLabelByValue(mfaType)}}\n </span>\n <input\n [class]=\"classNames(ComponentClassName.Input, ComponentClassName.FieldGroupControl, ComponentClassName.VisuallyHidden, ComponentClassName.RadioInput)\"\n [attr.data-amplify-radio-control-input]\n [value]=\"mfaType\"\n [checked]=\"i === 0\"\n name=\"mfa_type\"\n type=\"radio\"\n required\n />\n <span\n [class]=\"classNames(ComponentClassName.Flex, ComponentClassName.RadioButton)\"\n [attr.aria-hidden]=\"true\"\n ></span>\n </label>\n </div>\n <button\n amplify-button\n variation=\"primary\"\n fullWidth=\"true\"\n type=\"submit\"\n [isDisabled]=\"authenticator.isPending\"\n >\n {{ confirmText }}\n </button>\n <button\n amplify-button\n size=\"small\"\n variation=\"link\"\n fontWeight=\"normal\"\n fullWidth=\"true\"\n (click)=\"authenticator.toSignIn()\"\n >\n {{ backToSignInText }}\n </button>\n <amplify-error *ngIf=\"authenticator.error\">\n {{ authenticator.error }}\n </amplify-error>\n </fieldset>\n <amplify-slot\n name=\"select-mfa-type-footer\"\n [context]=\"context\"\n ></amplify-slot>\n</form>" }]
882
+ }], ctorParameters: function () { return [{ type: AuthenticatorService }]; } });
883
+
884
+ const { getConfirmText: getConfirmText$1, getBackToSignInText: getBackToSignInText$1, getSetupEmailText } = authenticatorTextUtil;
885
+ class SetupEmailComponent {
886
+ constructor(authenticator) {
887
+ this.authenticator = authenticator;
888
+ this.headerText = getSetupEmailText();
889
+ this.confirmText = getConfirmText$1();
890
+ this.backToSignInText = getBackToSignInText$1();
891
+ this.classNames = classNames;
892
+ this.ComponentClassName = ComponentClassName;
893
+ }
894
+ get context() {
895
+ return this.authenticator.slotContext;
896
+ }
897
+ onInput(event) {
898
+ event.preventDefault();
899
+ const { name, value } = event.target;
900
+ this.authenticator.updateForm({ name, value });
901
+ }
902
+ onSubmit(event) {
903
+ event.preventDefault();
904
+ this.authenticator.submitForm(getFormDataFromEvent(event));
905
+ }
906
+ }
907
+ SetupEmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SetupEmailComponent, deps: [{ token: AuthenticatorService }], target: i0.ɵɵFactoryTarget.Component });
908
+ SetupEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SetupEmailComponent, selector: "amplify-setup-email", ngImport: i0, template: "<form\n data-amplify-form\n data-amplify-authenticator-setup-email\n (submit)=\"onSubmit($event)\"\n (input)=\"onInput($event)\"\n>\n <fieldset\n [class]=\"classNames(ComponentClassName.Flex, 'amplify-authenticator__column')\"\n data-amplify-fieldset\n [disabled]=\"authenticator.isPending\"\n >\n <amplify-slot\n name=\"setup-email-header\"\n [context]=\"context\"\n >\n <h3 [class]=\"classNames(ComponentClassName.Heading, 'amplify-heading--3')\">{{ headerText }}</h3>\n </amplify-slot>\n <amplify-base-form-fields route=\"setupEmail\"></amplify-base-form-fields>\n\n <button\n amplify-button\n variation=\"primary\"\n fullWidth=\"true\"\n type=\"submit\"\n [isDisabled]=\"authenticator.isPending\"\n >\n {{ confirmText }}\n </button>\n <button\n amplify-button\n size=\"small\"\n variation=\"link\"\n fontWeight=\"normal\"\n fullWidth=\"true\"\n (click)=\"authenticator.toSignIn()\"\n >\n {{ backToSignInText }}\n </button>\n <amplify-error *ngIf=\"authenticator.error\">\n {{ authenticator.error }}\n </amplify-error>\n </fieldset>\n <amplify-slot\n name=\"setup-email-footer\"\n [context]=\"context\"\n ></amplify-slot>\n</form>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { kind: "component", type: BaseFormFieldsComponent, selector: "amplify-base-form-fields", inputs: ["route"] }, { kind: "component", type: ButtonComponent, selector: "button[amplify-button]", inputs: ["type", "fullWidth", "isDisabled", "size", "variation", "fontWeight"] }, { kind: "component", type: ErrorComponent, selector: "amplify-error" }] });
909
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SetupEmailComponent, decorators: [{
910
+ type: Component,
911
+ args: [{ selector: 'amplify-setup-email', template: "<form\n data-amplify-form\n data-amplify-authenticator-setup-email\n (submit)=\"onSubmit($event)\"\n (input)=\"onInput($event)\"\n>\n <fieldset\n [class]=\"classNames(ComponentClassName.Flex, 'amplify-authenticator__column')\"\n data-amplify-fieldset\n [disabled]=\"authenticator.isPending\"\n >\n <amplify-slot\n name=\"setup-email-header\"\n [context]=\"context\"\n >\n <h3 [class]=\"classNames(ComponentClassName.Heading, 'amplify-heading--3')\">{{ headerText }}</h3>\n </amplify-slot>\n <amplify-base-form-fields route=\"setupEmail\"></amplify-base-form-fields>\n\n <button\n amplify-button\n variation=\"primary\"\n fullWidth=\"true\"\n type=\"submit\"\n [isDisabled]=\"authenticator.isPending\"\n >\n {{ confirmText }}\n </button>\n <button\n amplify-button\n size=\"small\"\n variation=\"link\"\n fontWeight=\"normal\"\n fullWidth=\"true\"\n (click)=\"authenticator.toSignIn()\"\n >\n {{ backToSignInText }}\n </button>\n <amplify-error *ngIf=\"authenticator.error\">\n {{ authenticator.error }}\n </amplify-error>\n </fieldset>\n <amplify-slot\n name=\"setup-email-footer\"\n [context]=\"context\"\n ></amplify-slot>\n</form>" }]
912
+ }], ctorParameters: function () { return [{ type: AuthenticatorService }]; } });
913
+
840
914
  const logger = new ConsoleLogger('SetupTotp');
841
915
  const { getSetupTotpText, getCopyText, getBackToSignInText, getConfirmText, getCopiedText, } = authenticatorTextUtil;
842
916
  class SetupTotpComponent {
@@ -1287,10 +1361,10 @@ class AuthenticatorComponent {
1287
1361
  }
1288
1362
  }
1289
1363
  AuthenticatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthenticatorComponent, deps: [{ token: AuthenticatorService }, { token: CustomComponentsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1290
- AuthenticatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AuthenticatorComponent, selector: "amplify-authenticator", inputs: { formFields: "formFields", initialState: "initialState", loginMechanisms: "loginMechanisms", services: "services", signUpAttributes: "signUpAttributes", socialProviders: "socialProviders", variation: "variation", hideSignUp: "hideSignUp" }, providers: [CustomComponentsService], queries: [{ propertyName: "customComponentQuery", predicate: AmplifySlotDirective }], ngImport: i0, template: "<div\n data-amplify-authenticator\n [attr.data-variation]=\"variation\"\n *ngIf=\"hasRouteComponent()\"\n>\n <div data-amplify-container>\n <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n <div\n data-amplify-router\n [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n >\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"route === 'signIn'\"\n data-amplify-router-content\n >\n <!-- signIn component -->\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn'\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"route === 'signUp'\"\n data-amplify-router-content\n >\n <!-- signUp component -->\n <amplify-slot\n name=\"sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'signUp'\"\n >\n <amplify-sign-up></amplify-sign-up>\n </amplify-slot>\n </amplify-tab-item>\n </amplify-tabs>\n\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn' && hideSignUp\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n\n <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTotp'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- forgotPassword content -->\n <amplify-slot\n name=\"forgot-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forgotPassword'\"\n >\n <amplify-forgot-password></amplify-forgot-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n </div>\n\n <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { kind: "component", type: ConfirmResetPasswordComponent, selector: "amplify-confirm-reset-password", inputs: ["headerText"] }, { kind: "component", type: ConfirmSignInComponent, selector: "amplify-confirm-sign-in" }, { kind: "component", type: ConfirmSignUpComponent, selector: "amplify-confirm-sign-up" }, { kind: "component", type: ConfirmVerifyUserComponent, selector: "amplify-confirm-verify-user", inputs: ["headerText"] }, { kind: "component", type: ForceNewPasswordComponent, selector: "amplify-force-new-password", inputs: ["headerText"] }, { kind: "component", type: ForgotPasswordComponent, selector: "amplify-forgot-password", inputs: ["headerText"] }, { kind: "component", type: SetupTotpComponent, selector: "amplify-setup-totp" }, { kind: "component", type: SignInComponent, selector: "amplify-sign-in" }, { kind: "component", type: SignUpComponent, selector: "amplify-sign-up" }, { kind: "component", type: TabItemComponent, selector: "amplify-tab-item", inputs: ["title", "active", "id", "labelledById", "tabIndex"] }, { kind: "component", type: TabsComponent, selector: "amplify-tabs", outputs: ["tabChange"] }, { kind: "component", type: VerifyUserComponent, selector: "amplify-verify-user", inputs: ["headerText"] }], encapsulation: i0.ViewEncapsulation.None });
1364
+ AuthenticatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AuthenticatorComponent, selector: "amplify-authenticator", inputs: { formFields: "formFields", initialState: "initialState", loginMechanisms: "loginMechanisms", services: "services", signUpAttributes: "signUpAttributes", socialProviders: "socialProviders", variation: "variation", hideSignUp: "hideSignUp" }, providers: [CustomComponentsService], queries: [{ propertyName: "customComponentQuery", predicate: AmplifySlotDirective }], ngImport: i0, template: "<div\n data-amplify-authenticator\n [attr.data-variation]=\"variation\"\n *ngIf=\"hasRouteComponent()\"\n>\n <div data-amplify-container>\n <amplify-slot\n name=\"header\"\n [context]=\"context\"\n ></amplify-slot>\n <div\n data-amplify-router\n [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n >\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"route === 'signIn'\"\n data-amplify-router-content\n >\n <!-- signIn component -->\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn'\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"route === 'signUp'\"\n data-amplify-router-content\n >\n <!-- signUp component -->\n <amplify-slot\n name=\"sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'signUp'\"\n >\n <amplify-sign-up></amplify-sign-up>\n </amplify-slot>\n </amplify-tab-item>\n </amplify-tabs>\n\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn' && hideSignUp\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n\n <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTotp'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- forgotPassword content -->\n <amplify-slot\n name=\"forgot-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forgotPassword'\"\n >\n <amplify-forgot-password></amplify-forgot-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n\n <!-- selectMfaType content -->\n <amplify-slot\n name=\"select-mfa-type\"\n [context]=\"context\"\n *ngIf=\"route === 'selectMfaType'\"\n >\n <amplify-select-mfa-type></amplify-select-mfa-type>\n </amplify-slot>\n\n <!-- setupEmail content -->\n <amplify-slot\n name=\"setup-email\"\n [context]=\"context\"\n *ngIf=\"route === 'setupEmail'\"\n >\n <amplify-setup-email></amplify-setup-email>\n </amplify-slot>\n </div>\n\n <amplify-slot\n name=\"footer\"\n [context]=\"context\"\n ></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AmplifySlotComponent, selector: "amplify-slot", inputs: ["name", "context"] }, { kind: "component", type: ConfirmResetPasswordComponent, selector: "amplify-confirm-reset-password", inputs: ["headerText"] }, { kind: "component", type: ConfirmSignInComponent, selector: "amplify-confirm-sign-in" }, { kind: "component", type: ConfirmSignUpComponent, selector: "amplify-confirm-sign-up" }, { kind: "component", type: ConfirmVerifyUserComponent, selector: "amplify-confirm-verify-user", inputs: ["headerText"] }, { kind: "component", type: ForceNewPasswordComponent, selector: "amplify-force-new-password", inputs: ["headerText"] }, { kind: "component", type: ForgotPasswordComponent, selector: "amplify-forgot-password", inputs: ["headerText"] }, { kind: "component", type: SelectMfaTypeComponent, selector: "amplify-select-mfa-type" }, { kind: "component", type: SetupEmailComponent, selector: "amplify-setup-email" }, { kind: "component", type: SetupTotpComponent, selector: "amplify-setup-totp" }, { kind: "component", type: SignInComponent, selector: "amplify-sign-in" }, { kind: "component", type: SignUpComponent, selector: "amplify-sign-up" }, { kind: "component", type: TabItemComponent, selector: "amplify-tab-item", inputs: ["title", "active", "id", "labelledById", "tabIndex"] }, { kind: "component", type: TabsComponent, selector: "amplify-tabs", outputs: ["tabChange"] }, { kind: "component", type: VerifyUserComponent, selector: "amplify-verify-user", inputs: ["headerText"] }], encapsulation: i0.ViewEncapsulation.None });
1291
1365
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthenticatorComponent, decorators: [{
1292
1366
  type: Component,
1293
- args: [{ selector: 'amplify-authenticator', providers: [CustomComponentsService], encapsulation: ViewEncapsulation.None, template: "<div\n data-amplify-authenticator\n [attr.data-variation]=\"variation\"\n *ngIf=\"hasRouteComponent()\"\n>\n <div data-amplify-container>\n <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n <div\n data-amplify-router\n [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n >\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"route === 'signIn'\"\n data-amplify-router-content\n >\n <!-- signIn component -->\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn'\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"route === 'signUp'\"\n data-amplify-router-content\n >\n <!-- signUp component -->\n <amplify-slot\n name=\"sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'signUp'\"\n >\n <amplify-sign-up></amplify-sign-up>\n </amplify-slot>\n </amplify-tab-item>\n </amplify-tabs>\n\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn' && hideSignUp\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n\n <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTotp'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- forgotPassword content -->\n <amplify-slot\n name=\"forgot-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forgotPassword'\"\n >\n <amplify-forgot-password></amplify-forgot-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n </div>\n\n <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>\n" }]
1367
+ args: [{ selector: 'amplify-authenticator', providers: [CustomComponentsService], encapsulation: ViewEncapsulation.None, template: "<div\n data-amplify-authenticator\n [attr.data-variation]=\"variation\"\n *ngIf=\"hasRouteComponent()\"\n>\n <div data-amplify-container>\n <amplify-slot\n name=\"header\"\n [context]=\"context\"\n ></amplify-slot>\n <div\n data-amplify-router\n [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n >\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"(route === 'signIn' || route === 'signUp') && !hideSignUp\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"route === 'signIn'\"\n data-amplify-router-content\n >\n <!-- signIn component -->\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn'\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"route === 'signUp'\"\n data-amplify-router-content\n >\n <!-- signUp component -->\n <amplify-slot\n name=\"sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'signUp'\"\n >\n <amplify-sign-up></amplify-sign-up>\n </amplify-slot>\n </amplify-tab-item>\n </amplify-tabs>\n\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn' && hideSignUp\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n\n <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTotp'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- forgotPassword content -->\n <amplify-slot\n name=\"forgot-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forgotPassword'\"\n >\n <amplify-forgot-password></amplify-forgot-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n\n <!-- selectMfaType content -->\n <amplify-slot\n name=\"select-mfa-type\"\n [context]=\"context\"\n *ngIf=\"route === 'selectMfaType'\"\n >\n <amplify-select-mfa-type></amplify-select-mfa-type>\n </amplify-slot>\n\n <!-- setupEmail content -->\n <amplify-slot\n name=\"setup-email\"\n [context]=\"context\"\n *ngIf=\"route === 'setupEmail'\"\n >\n <amplify-setup-email></amplify-setup-email>\n </amplify-slot>\n </div>\n\n <amplify-slot\n name=\"footer\"\n [context]=\"context\"\n ></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>" }]
1294
1368
  }], ctorParameters: function () { return [{ type: AuthenticatorService }, { type: CustomComponentsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFields: [{
1295
1369
  type: Input
1296
1370
  }], initialState: [{
@@ -1369,6 +1443,8 @@ AmplifyAuthenticatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
1369
1443
  PhoneNumberFieldComponent,
1370
1444
  ForgotPasswordComponent,
1371
1445
  SelectComponent,
1446
+ SelectMfaTypeComponent,
1447
+ SetupEmailComponent,
1372
1448
  SetupTotpComponent,
1373
1449
  SignInComponent,
1374
1450
  SignUpComponent,
@@ -1407,6 +1483,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
1407
1483
  PhoneNumberFieldComponent,
1408
1484
  ForgotPasswordComponent,
1409
1485
  SelectComponent,
1486
+ SelectMfaTypeComponent,
1487
+ SetupEmailComponent,
1410
1488
  SetupTotpComponent,
1411
1489
  SignInComponent,
1412
1490
  SignUpComponent,