@aws-amplify/ui-angular 2.0.3 → 2.0.4

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.
Files changed (26) hide show
  1. package/aws-amplify-ui-angular.metadata.json +1 -1
  2. package/bundles/aws-amplify-ui-angular.umd.js +43 -5
  3. package/bundles/aws-amplify-ui-angular.umd.js.map +1 -1
  4. package/bundles/aws-amplify-ui-angular.umd.min.js +1 -1
  5. package/bundles/aws-amplify-ui-angular.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/authenticator/components/authenticator/authenticator.component.js +6 -2
  7. package/esm2015/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.js +18 -2
  8. package/esm2015/lib/components/authenticator/components/form-field/form-field.component.js +2 -2
  9. package/esm2015/lib/primitives/tab-item/tab-item.component.js +5 -3
  10. package/esm2015/lib/services/authenticator.service.js +7 -2
  11. package/fesm2015/aws-amplify-ui-angular.js +31 -5
  12. package/fesm2015/aws-amplify-ui-angular.js.map +1 -1
  13. package/lib/components/authenticator/components/authenticator/authenticator.component.d.ts +4 -0
  14. package/lib/components/authenticator/components/confirm-reset-password/amplify-confirm-reset-password.component.d.ts +3 -0
  15. package/lib/components/authenticator/components/confirm-sign-in/confirm-sign-in.component.d.ts +3 -0
  16. package/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.d.ts +5 -0
  17. package/lib/components/authenticator/components/confirm-verify-user/amplify-confirm-verify-user.component.d.ts +3 -0
  18. package/lib/components/authenticator/components/force-new-password/force-new-password.component.d.ts +3 -0
  19. package/lib/components/authenticator/components/reset-password/reset-password.component.d.ts +3 -0
  20. package/lib/components/authenticator/components/setup-totp/setup-totp.component.d.ts +3 -0
  21. package/lib/components/authenticator/components/sign-in/sign-in.component.d.ts +3 -0
  22. package/lib/components/authenticator/components/sign-up/sign-up.component.d.ts +3 -0
  23. package/lib/components/authenticator/components/verify-user/verify-user.component.d.ts +3 -0
  24. package/lib/primitives/tab-item/tab-item.component.d.ts +1 -0
  25. package/lib/services/authenticator.service.d.ts +4 -0
  26. package/package.json +2 -2
@@ -115,7 +115,7 @@
115
115
  */
116
116
  get: function () {
117
117
  var _a;
118
- return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.error;
118
+ return ui.translate((_a = this._facade) === null || _a === void 0 ? void 0 : _a.error);
119
119
  },
120
120
  enumerable: false,
121
121
  configurable: true
@@ -160,6 +160,14 @@
160
160
  enumerable: false,
161
161
  configurable: true
162
162
  });
163
+ Object.defineProperty(AuthenticatorService.prototype, "codeDeliveryDetails", {
164
+ get: function () {
165
+ var _a;
166
+ return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.codeDeliveryDetails;
167
+ },
168
+ enumerable: false,
169
+ configurable: true
170
+ });
163
171
  Object.defineProperty(AuthenticatorService.prototype, "updateForm", {
164
172
  /**
165
173
  * Service facades
@@ -352,6 +360,10 @@
352
360
  this.authenticator.toSignIn();
353
361
  }
354
362
  };
363
+ AuthenticatorComponent.prototype.hasTabs = function () {
364
+ var route = this.authenticator.route;
365
+ return route === 'signIn' || route === 'signUp';
366
+ };
355
367
  AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
356
368
  if (!componentQuery)
357
369
  return {};
@@ -366,7 +378,7 @@
366
378
  AuthenticatorComponent.decorators = [
367
379
  { type: i0.Component, args: [{
368
380
  selector: 'amplify-authenticator',
369
- template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\n <div data-amplify-container>\n <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n <div data-amplify-router>\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"route === 'signIn' || route === 'signUp'\"\n >\n <amplify-tab-item [title]=\"signInTitle\" [active]=\"route === 'signIn'\">\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 [title]=\"signUpTitle\" [active]=\"route === 'signUp'\">\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 <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTOTP'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- resetPassword content -->\n <amplify-slot\n name=\"reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'resetPassword'\"\n >\n <amplify-reset-password></amplify-reset-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n </div>\n\n <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>\n",
381
+ template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\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'\"\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 <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTOTP'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- resetPassword content -->\n <amplify-slot\n name=\"reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'resetPassword'\"\n >\n <amplify-reset-password></amplify-reset-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n </div>\n\n <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>\n",
370
382
  providers: [CustomComponentsService],
371
383
  encapsulation: i0.ViewEncapsulation.None
372
384
  },] }
@@ -500,6 +512,30 @@
500
512
  enumerable: false,
501
513
  configurable: true
502
514
  });
515
+ Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
516
+ get: function () {
517
+ var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
518
+ return DeliveryMedium === 'EMAIL'
519
+ ? ui.translate('We Emailed You')
520
+ : DeliveryMedium === 'SMS'
521
+ ? ui.translate('We Texted You')
522
+ : ui.translate('We Sent A Code');
523
+ },
524
+ enumerable: false,
525
+ configurable: true
526
+ });
527
+ Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
528
+ get: function () {
529
+ var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
530
+ return DeliveryMedium === 'EMAIL'
531
+ ? "Your code is on the way. To log in, enter the code we emailed to " + Destination + ". It may take a minute to arrive."
532
+ : DeliveryMedium === 'SMS'
533
+ ? "Your code is on the way. To log in, enter the code we texted to " + Destination + ". It may take a minute to arrive."
534
+ : ui.translate("Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.");
535
+ },
536
+ enumerable: false,
537
+ configurable: true
538
+ });
503
539
  ConfirmSignUpComponent.prototype.onInput = function (event) {
504
540
  event.preventDefault();
505
541
  var _a = event.target, name = _a.name, value = _a.value;
@@ -514,7 +550,7 @@
514
550
  ConfirmSignUpComponent.decorators = [
515
551
  { type: i0.Component, args: [{
516
552
  selector: 'amplify-confirm-sign-up',
517
- template: "<div data-amplify-container>\n <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n <fieldset\n class=\"amplify-flex\"\n style=\"flex-direction: column\"\n data-amplify-fieldset\n [disabled]=\"context.isPending\"\n >\n <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n </amplify-slot>\n <amplify-form-field\n name=\"confirmation_code\"\n autocomplete=\"one-time-code\"\n ></amplify-form-field>\n\n <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n {{ confirmText }}\n </button>\n <button\n amplify-button\n fontWeight=\"normal\"\n (click)=\"authenticator.resendCode()\"\n >\n {{ resendCodeText }}\n </button>\n </fieldset>\n\n <amplify-error *ngIf=\"context.error\">\n {{ authenticator.error }}\n </amplify-error>\n <amplify-slot\n name=\"confirm-sign-up-footer\"\n [context]=\"context\"\n ></amplify-slot>\n </form>\n</div>\n"
553
+ template: "<div data-amplify-container>\n <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n <fieldset\n class=\"amplify-flex\"\n style=\"flex-direction: column\"\n data-amplify-fieldset\n [disabled]=\"context.isPending\"\n >\n <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n {{ confirmSignUpHeading }}\n </h3>\n </amplify-slot>\n <span style=\"margin-bottom: 1rem\">\n {{ subtitleText }}\n </span>\n <amplify-form-field\n name=\"confirmation_code\"\n autocomplete=\"one-time-code\"\n ></amplify-form-field>\n\n <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n {{ confirmText }}\n </button>\n <button\n amplify-button\n fontWeight=\"normal\"\n (click)=\"authenticator.resendCode()\"\n >\n {{ resendCodeText }}\n </button>\n </fieldset>\n\n <amplify-error *ngIf=\"context.error\">\n {{ authenticator.error }}\n </amplify-error>\n <amplify-slot\n name=\"confirm-sign-up-footer\"\n [context]=\"context\"\n ></amplify-slot>\n </form>\n</div>\n"
518
554
  },] }
519
555
  ];
520
556
  ConfirmSignUpComponent.ctorParameters = function () { return [
@@ -723,7 +759,7 @@
723
759
  get: function () {
724
760
  var formContext = ui.getActorContext(this.authenticator.authState);
725
761
  var validationError = formContext.validationError;
726
- return validationError[this.name];
762
+ return ui.translate(validationError[this.name]);
727
763
  },
728
764
  enumerable: false,
729
765
  configurable: true
@@ -1610,6 +1646,7 @@
1610
1646
  var TabItemComponent = /** @class */ (function () {
1611
1647
  function TabItemComponent() {
1612
1648
  this.active = false;
1649
+ this.display = 'block'; // emulate div behavior
1613
1650
  }
1614
1651
  return TabItemComponent;
1615
1652
  }());
@@ -1624,7 +1661,8 @@
1624
1661
  active: [{ type: i0.Input }],
1625
1662
  id: [{ type: i0.Input }],
1626
1663
  labelledById: [{ type: i0.Input }],
1627
- tabIndex: [{ type: i0.Input }]
1664
+ tabIndex: [{ type: i0.Input }],
1665
+ display: [{ type: i0.HostBinding, args: ['style.display',] }]
1628
1666
  };
1629
1667
 
1630
1668
  var TabsComponent = /** @class */ (function () {