@aws-amplify/ui-angular 2.0.1 → 2.0.5

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 (30) hide show
  1. package/aws-amplify-ui-angular.metadata.json +1 -1
  2. package/bundles/aws-amplify-ui-angular.umd.js +64 -13
  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/authenticator.module.js +2 -3
  7. package/esm2015/lib/components/authenticator/components/authenticator/authenticator.component.js +6 -2
  8. package/esm2015/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.js +18 -2
  9. package/esm2015/lib/components/authenticator/components/form-field/form-field.component.js +7 -3
  10. package/esm2015/lib/primitives/password-field/password-field.component.js +6 -4
  11. package/esm2015/lib/primitives/tab-item/tab-item.component.js +5 -3
  12. package/esm2015/lib/services/authenticator.service.js +10 -2
  13. package/fesm2015/aws-amplify-ui-angular.js +44 -10
  14. package/fesm2015/aws-amplify-ui-angular.js.map +1 -1
  15. package/lib/components/authenticator/components/authenticator/authenticator.component.d.ts +6 -0
  16. package/lib/components/authenticator/components/confirm-reset-password/amplify-confirm-reset-password.component.d.ts +5 -0
  17. package/lib/components/authenticator/components/confirm-sign-in/confirm-sign-in.component.d.ts +5 -0
  18. package/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.d.ts +7 -0
  19. package/lib/components/authenticator/components/confirm-verify-user/amplify-confirm-verify-user.component.d.ts +5 -0
  20. package/lib/components/authenticator/components/force-new-password/force-new-password.component.d.ts +5 -0
  21. package/lib/components/authenticator/components/form-field/form-field.component.d.ts +1 -0
  22. package/lib/components/authenticator/components/reset-password/reset-password.component.d.ts +5 -0
  23. package/lib/components/authenticator/components/setup-totp/setup-totp.component.d.ts +5 -0
  24. package/lib/components/authenticator/components/sign-in/sign-in.component.d.ts +5 -0
  25. package/lib/components/authenticator/components/sign-up/sign-up.component.d.ts +5 -0
  26. package/lib/components/authenticator/components/verify-user/verify-user.component.d.ts +5 -0
  27. package/lib/primitives/password-field/password-field.component.d.ts +2 -0
  28. package/lib/primitives/tab-item/tab-item.component.d.ts +1 -0
  29. package/lib/services/authenticator.service.d.ts +7 -0
  30. package/package.json +2 -2
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('aws-amplify'), require('qrcode'), require('nanoid')) :
3
- typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@angular/platform-browser', '@aws-amplify/ui', '@aws-amplify/core', 'xstate', 'aws-amplify', 'qrcode', 'nanoid'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["aws-amplify"] = global["aws-amplify"] || {}, global["aws-amplify"]["ui-angular"] = {}), global.ng.core, global.ng.common, global.ng.platformBrowser, global.ui, global.core, global.xstate, global["aws-amplify"], global.QRCode, global.nanoid));
5
- })(this, (function (exports, i0, common, platformBrowser, ui, core, xstate, awsAmplify, QRCode, nanoid) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('aws-amplify'), require('qrcode'), require('nanoid')) :
3
+ typeof define === 'function' && define.amd ? define('@aws-amplify/ui-angular', ['exports', '@angular/core', '@angular/common', '@aws-amplify/ui', '@aws-amplify/core', 'xstate', 'aws-amplify', 'qrcode', 'nanoid'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["aws-amplify"] = global["aws-amplify"] || {}, global["aws-amplify"]["ui-angular"] = {}), global.ng.core, global.ng.common, global.ui, global.core, global.xstate, global["aws-amplify"], global.QRCode, global.nanoid));
5
+ })(this, (function (exports, i0, common, ui, core, xstate, awsAmplify, QRCode, nanoid) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -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
@@ -170,6 +178,13 @@
170
178
  enumerable: false,
171
179
  configurable: true
172
180
  });
181
+ Object.defineProperty(AuthenticatorService.prototype, "updateBlur", {
182
+ get: function () {
183
+ return this._sendEventAliases.updateBlur;
184
+ },
185
+ enumerable: false,
186
+ configurable: true
187
+ });
173
188
  Object.defineProperty(AuthenticatorService.prototype, "resendCode", {
174
189
  get: function () {
175
190
  return this._sendEventAliases.resendCode;
@@ -345,6 +360,10 @@
345
360
  this.authenticator.toSignIn();
346
361
  }
347
362
  };
363
+ AuthenticatorComponent.prototype.hasTabs = function () {
364
+ var route = this.authenticator.route;
365
+ return route === 'signIn' || route === 'signUp';
366
+ };
348
367
  AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
349
368
  if (!componentQuery)
350
369
  return {};
@@ -359,7 +378,7 @@
359
378
  AuthenticatorComponent.decorators = [
360
379
  { type: i0.Component, args: [{
361
380
  selector: 'amplify-authenticator',
362
- 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",
363
382
  providers: [CustomComponentsService],
364
383
  encapsulation: i0.ViewEncapsulation.None
365
384
  },] }
@@ -493,6 +512,30 @@
493
512
  enumerable: false,
494
513
  configurable: true
495
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
+ });
496
539
  ConfirmSignUpComponent.prototype.onInput = function (event) {
497
540
  event.preventDefault();
498
541
  var _a = event.target, name = _a.name, value = _a.value;
@@ -507,7 +550,7 @@
507
550
  ConfirmSignUpComponent.decorators = [
508
551
  { type: i0.Component, args: [{
509
552
  selector: 'amplify-confirm-sign-up',
510
- 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"
511
554
  },] }
512
555
  ];
513
556
  ConfirmSignUpComponent.ctorParameters = function () { return [
@@ -716,11 +759,15 @@
716
759
  get: function () {
717
760
  var formContext = ui.getActorContext(this.authenticator.authState);
718
761
  var validationError = formContext.validationError;
719
- return validationError[this.name];
762
+ return ui.translate(validationError[this.name]);
720
763
  },
721
764
  enumerable: false,
722
765
  configurable: true
723
766
  });
767
+ FormFieldComponent.prototype.onBlur = function ($event) {
768
+ var name = $event.target.name;
769
+ this.authenticator.updateBlur({ name: name });
770
+ };
724
771
  FormFieldComponent.prototype.inferLabel = function () {
725
772
  var _a;
726
773
  var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
@@ -753,7 +800,7 @@
753
800
  FormFieldComponent.decorators = [
754
801
  { type: i0.Component, args: [{
755
802
  selector: 'amplify-form-field',
756
- template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [defaultCountryCode]=\"defaultCountryCode\"\n [type]=\"inferType()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [type]=\"inferType()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n ></amplify-text-field>\n\n <amplify-error *ngIf=\"error\">\n {{ error }}\n </amplify-error>\n</div>\n"
803
+ template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n <!-- Country code field -->\n <amplify-phone-number-field\n *ngIf=\"isPhoneField()\"\n [defaultCountryCode]=\"defaultCountryCode\"\n [type]=\"inferType()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n ></amplify-phone-number-field>\n\n <amplify-password-field\n *ngIf=\"isPasswordField()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n (setBlur)=\"onBlur($event)\"\n ></amplify-password-field>\n\n <amplify-text-field\n *ngIf=\"!isPasswordField() && !isPhoneField()\"\n [type]=\"inferType()\"\n [name]=\"name\"\n [label]=\"inferLabel()\"\n [placeholder]=\"inferPlaceholder()\"\n [required]=\"required\"\n [initialValue]=\"initialValue\"\n [disabled]=\"disabled\"\n [labelHidden]=\"labelHidden\"\n [autocomplete]=\"inferAutocomplete()\"\n ></amplify-text-field>\n\n <amplify-error *ngIf=\"error\">\n {{ error }}\n </amplify-error>\n</div>\n"
757
804
  },] }
758
805
  ];
759
806
  FormFieldComponent.ctorParameters = function () { return [
@@ -1506,6 +1553,7 @@
1506
1553
  this.placeholder = '';
1507
1554
  this.required = true;
1508
1555
  this.labelHidden = false;
1556
+ this.setBlur = new i0.EventEmitter();
1509
1557
  this.type = 'password';
1510
1558
  this.showPassword = false;
1511
1559
  this.showPasswordButtonlabel = ui.translate('Show password');
@@ -1522,7 +1570,7 @@
1522
1570
  PasswordFieldComponent.decorators = [
1523
1571
  { type: i0.Component, args: [{
1524
1572
  selector: 'amplify-password-field',
1525
- template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n <input\n class=\"amplify-input amplify-field-group__control\"\n [id]=\"fieldId\"\n [type]=\"type\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [value]=\"initialValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [autocomplete]=\"autocomplete\"\n />\n <div class=\"amplify-field-group__outer-end\">\n <button\n amplify-button\n [attr.aria-label]=\"showPasswordButtonlabel\"\n class=\"amplify-field-group__control amplify-field__show-password\"\n (click)=\"togglePasswordText()\"\n >\n <svg\n *ngIf=\"!showPassword\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n class=\"amplify-icon\"\n >\n <path\n d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n ></path>\n </svg>\n <svg\n *ngIf=\"showPassword\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n class=\"amplify-icon\"\n >\n <path\n d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n fill=\"none\"\n ></path>\n <path\n d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n ></path>\n </svg>\n </button>\n </div>\n</div>\n"
1573
+ template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n {{ label }}\n</label>\n<div class=\"amplify-flex amplify-field-group\">\n <input\n class=\"amplify-input amplify-field-group__control\"\n [id]=\"fieldId\"\n [type]=\"type\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [value]=\"initialValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [autocomplete]=\"autocomplete\"\n (blur)=\"setBlur.emit($event)\"\n />\n <div class=\"amplify-field-group__outer-end\">\n <button\n amplify-button\n [attr.aria-label]=\"showPasswordButtonlabel\"\n class=\"amplify-field-group__control amplify-field__show-password\"\n (click)=\"togglePasswordText()\"\n >\n <svg\n *ngIf=\"!showPassword\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n class=\"amplify-icon\"\n >\n <path\n d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\n ></path>\n </svg>\n <svg\n *ngIf=\"showPassword\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n class=\"amplify-icon\"\n >\n <path\n d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\"\n fill=\"none\"\n ></path>\n <path\n d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\n ></path>\n </svg>\n </button>\n </div>\n</div>\n"
1526
1574
  },] }
1527
1575
  ];
1528
1576
  PasswordFieldComponent.propDecorators = {
@@ -1534,7 +1582,8 @@
1534
1582
  name: [{ type: i0.Input }],
1535
1583
  placeholder: [{ type: i0.Input }],
1536
1584
  required: [{ type: i0.Input }],
1537
- labelHidden: [{ type: i0.Input }]
1585
+ labelHidden: [{ type: i0.Input }],
1586
+ setBlur: [{ type: i0.Output }]
1538
1587
  };
1539
1588
 
1540
1589
  var PhoneNumberFieldComponent = /** @class */ (function () {
@@ -1597,6 +1646,7 @@
1597
1646
  var TabItemComponent = /** @class */ (function () {
1598
1647
  function TabItemComponent() {
1599
1648
  this.active = false;
1649
+ this.display = 'block'; // emulate div behavior
1600
1650
  }
1601
1651
  return TabItemComponent;
1602
1652
  }());
@@ -1611,7 +1661,8 @@
1611
1661
  active: [{ type: i0.Input }],
1612
1662
  id: [{ type: i0.Input }],
1613
1663
  labelledById: [{ type: i0.Input }],
1614
- tabIndex: [{ type: i0.Input }]
1664
+ tabIndex: [{ type: i0.Input }],
1665
+ display: [{ type: i0.HostBinding, args: ['style.display',] }]
1615
1666
  };
1616
1667
 
1617
1668
  var TabsComponent = /** @class */ (function () {
@@ -1758,7 +1809,7 @@
1758
1809
  UserNameAliasComponent,
1759
1810
  VerifyUserComponent,
1760
1811
  ],
1761
- imports: [common.CommonModule, platformBrowser.BrowserModule],
1812
+ imports: [common.CommonModule],
1762
1813
  exports: [
1763
1814
  AmplifySlotDirective,
1764
1815
  AuthenticatorComponent,