@aws-amplify/ui-angular 2.0.2 → 2.0.3

package/bundles/aws-amplify-ui-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    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')) :
-    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) :
-    (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));
-})(this, (function (exports, i0, common, platformBrowser, ui, core, xstate, awsAmplify, QRCode, nanoid) { 'use strict';
+    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')) :
+    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) :
+    (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));
+})(this, (function (exports, i0, common, ui, core, xstate, awsAmplify, QRCode, nanoid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -170,6 +170,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(AuthenticatorService.prototype, "updateBlur", {
+            get: function () {
+                return this._sendEventAliases.updateBlur;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(AuthenticatorService.prototype, "resendCode", {
             get: function () {
                 return this._sendEventAliases.resendCode;
@@ -721,6 +728,10 @@
             enumerable: false,
             configurable: true
         });
+        FormFieldComponent.prototype.onBlur = function ($event) {
+            var name = $event.target.name;
+            this.authenticator.updateBlur({ name: name });
+        };
         FormFieldComponent.prototype.inferLabel = function () {
             var _a;
             var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
@@ -753,7 +764,7 @@
     FormFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-field',
-                    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"
+                    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"
                 },] }
     ];
     FormFieldComponent.ctorParameters = function () { return [
@@ -1506,6 +1517,7 @@
             this.placeholder = '';
             this.required = true;
             this.labelHidden = false;
+            this.setBlur = new i0.EventEmitter();
             this.type = 'password';
             this.showPassword = false;
             this.showPasswordButtonlabel = ui.translate('Show password');
@@ -1522,7 +1534,7 @@
     PasswordFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-password-field',
-                    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"
+                    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"
                 },] }
     ];
     PasswordFieldComponent.propDecorators = {
@@ -1534,7 +1546,8 @@
         name: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }]
+        labelHidden: [{ type: i0.Input }],
+        setBlur: [{ type: i0.Output }]
     };
 
     var PhoneNumberFieldComponent = /** @class */ (function () {
@@ -1758,7 +1771,7 @@
                         UserNameAliasComponent,
                         VerifyUserComponent,
                     ],
-                    imports: [common.CommonModule, platformBrowser.BrowserModule],
+                    imports: [common.CommonModule],
                     exports: [
                         AmplifySlotDirective,
                         AuthenticatorComponent,