@aws-amplify/ui-angular 2.1.0 → 2.1.3

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

@@ -427,7 +427,7 @@
         };
         ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmResetPasswordComponent;
     }());
@@ -485,7 +485,7 @@
         };
         ConfirmSignInComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmSignInComponent;
     }());
@@ -510,6 +510,10 @@
             // translated texts
             this.resendCodeText = ui.translate('Resend Code');
             this.confirmText = ui.translate('Confirm');
+            this.emailMessage = ui.translate('Your code is on the way. To log in, enter the code we emailed to');
+            this.textedMessage = ui.translate('Your code is on the way. To log in, enter the code we texted to');
+            this.defaultMessage = ui.translate('Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.');
+            this.minutesMessage = ui.translate('It may take a minute to arrive.');
         }
         Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
             get: function () {
@@ -534,10 +538,10 @@
             get: function () {
                 var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
                 return DeliveryMedium === 'EMAIL'
-                    ? "Your code is on the way. To log in, enter the code we emailed to " + Destination + ". It may take a minute to arrive."
+                    ? this.emailMessage + " " + Destination + ". " + this.minutesMessage
                     : DeliveryMedium === 'SMS'
-                        ? "Your code is on the way. To log in, enter the code we texted to " + Destination + ". It may take a minute to arrive."
-                        : ui.translate("Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.");
+                        ? this.textedMessage + " " + Destination + ". " + this.minutesMessage
+                        : ui.translate("" + this.defaultMessage);
             },
             enumerable: false,
             configurable: true
@@ -549,7 +553,7 @@
         };
         ConfirmSignUpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmSignUpComponent;
     }());
@@ -590,7 +594,7 @@
         };
         ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ConfirmVerifyUserComponent;
     }());
@@ -702,7 +706,7 @@
         };
         ForceNewPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ForceNewPasswordComponent;
     }());
@@ -876,7 +880,7 @@
         };
         ResetPasswordComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return ResetPasswordComponent;
     }());
@@ -1275,7 +1279,7 @@
         };
         SetupTotpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         SetupTotpComponent.prototype.copyText = function () {
             navigator.clipboard.writeText(this.secretKey);
@@ -1321,7 +1325,7 @@
         };
         SignInComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return SignInComponent;
     }());
@@ -1361,7 +1365,7 @@
         };
         SignUpComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return SignUpComponent;
     }());
@@ -1478,7 +1482,7 @@
         };
         VerifyUserComponent.prototype.onSubmit = function (event) {
             event.preventDefault();
-            this.authenticator.submitForm();
+            this.authenticator.submitForm(ui.getFormDataFromEvent(event));
         };
         return VerifyUserComponent;
     }());
@@ -1609,7 +1613,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    (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"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\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 = {
@@ -1644,7 +1648,7 @@
     PhoneNumberFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-phone-number-field',
-                    template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"textFieldId\">\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\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>\n"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\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>\n"
                 },] }
     ];
     PhoneNumberFieldComponent.propDecorators = {
@@ -1671,7 +1675,7 @@
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-select',
-                    template: "<label class=\"amplify-label sr-only\" [for]=\"id\">{{ label }}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
+                    template: "<label class=\"amplify-label amplify-visually-hidden\" [for]=\"id\">{{\n  label\n}}</label>\n<div class=\"amplify-select__wrapper\">\n  <select\n    class=\"amplify-select amplify-field-group__control\"\n    autocomplete=\"tel-country-code\"\n    [id]=\"id\"\n    [name]=\"name\"\n  >\n    <option\n      *ngFor=\"let item of items\"\n      [value]=\"item\"\n      [selected]=\"item === defaultValue\"\n    >\n      {{ item }}\n    </option>\n  </select>\n  <div\n    class=\"amplify-flex amplify-select__icon-wrapper\"\n    style=\"align-items: center; justify-content: center\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      data-size=\"large\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path>\n    </svg>\n  </div>\n</div>\n"
                 },] }
     ];
     SelectComponent.propDecorators = {
@@ -1764,7 +1768,7 @@
     TextFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-text-field',
-                    template: "<label class=\"amplify-label\" [class.sr-only]=\"labelHidden\" [for]=\"fieldId\">\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\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"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"fieldId\"\n>\n  {{ label }}\n</label>\n<input\n  class=\"amplify-input\"\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"
                 },] }
     ];
     TextFieldComponent.propDecorators = {
@@ -1869,6 +1873,10 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'translations', {
+        enumerable: true,
+        get: function () { return ui.translations; }
+    });
     exports.AmplifyAuthenticatorModule = AmplifyAuthenticatorModule;
     exports.AmplifySlotDirective = AmplifySlotDirective;
     exports.AuthenticatorComponent = AuthenticatorComponent;