@aws-amplify/ui-angular 2.4.9 → 2.4.10
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.
- package/aws-amplify-ui-angular.metadata.json +1 -1
- package/bundles/aws-amplify-ui-angular.umd.js +26 -8
- package/bundles/aws-amplify-ui-angular.umd.js.map +1 -1
- package/bundles/aws-amplify-ui-angular.umd.min.js +1 -1
- package/bundles/aws-amplify-ui-angular.umd.min.js.map +1 -1
- package/esm2015/lib/components/authenticator/components/form-field/form-field.component.js +11 -2
- package/esm2015/lib/primitives/password-field/password-field.component.js +4 -2
- package/esm2015/lib/primitives/phone-number-field/phone-number-field.component.js +4 -2
- package/esm2015/lib/primitives/text-field/text-field.component.js +4 -2
- package/fesm2015/aws-amplify-ui-angular.js +19 -5
- package/fesm2015/aws-amplify-ui-angular.js.map +1 -1
- package/lib/components/authenticator/components/form-field/form-field.component.d.ts +3 -0
- package/lib/primitives/password-field/password-field.component.d.ts +2 -0
- package/lib/primitives/phone-number-field/phone-number-field.component.d.ts +2 -0
- package/lib/primitives/text-field/text-field.component.d.ts +2 -0
- 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('@aws-amplify/ui'), require('@aws-amplify/core'), require('xstate'), require('aws-amplify'), require('
|
|
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', '
|
|
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.
|
|
5
|
-
})(this, (function (exports, i0, common, ui, core, xstate, awsAmplify,
|
|
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('nanoid'), require('qrcode')) :
|
|
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', 'nanoid', 'qrcode'], 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.nanoid, global.QRCode));
|
|
5
|
+
})(this, (function (exports, i0, common, ui, core, xstate, awsAmplify, nanoid, QRCode) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -808,6 +808,7 @@
|
|
|
808
808
|
function FormFieldComponent(authenticator) {
|
|
809
809
|
this.authenticator = authenticator;
|
|
810
810
|
this.countryDialCodesValue = ui.countryDialCodes;
|
|
811
|
+
this.errorId = nanoid.nanoid(12);
|
|
811
812
|
}
|
|
812
813
|
Object.defineProperty(FormFieldComponent.prototype, "errors", {
|
|
813
814
|
get: function () {
|
|
@@ -827,6 +828,17 @@
|
|
|
827
828
|
FormFieldComponent.prototype.isPhoneField = function () {
|
|
828
829
|
return this.formField.type === 'tel';
|
|
829
830
|
};
|
|
831
|
+
FormFieldComponent.prototype.hasError = function () {
|
|
832
|
+
var _a;
|
|
833
|
+
return ((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
834
|
+
};
|
|
835
|
+
Object.defineProperty(FormFieldComponent.prototype, "ariaDescribedBy", {
|
|
836
|
+
get: function () {
|
|
837
|
+
return this.hasError() ? this.errorId : undefined;
|
|
838
|
+
},
|
|
839
|
+
enumerable: false,
|
|
840
|
+
configurable: true
|
|
841
|
+
});
|
|
830
842
|
FormFieldComponent.prototype.translate = function (phrase) {
|
|
831
843
|
return ui.translate(phrase);
|
|
832
844
|
};
|
|
@@ -835,7 +847,7 @@
|
|
|
835
847
|
FormFieldComponent.decorators = [
|
|
836
848
|
{ type: i0.Component, args: [{
|
|
837
849
|
selector: 'amplify-form-field',
|
|
838
|
-
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 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 (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 ></amplify-text-field>\n <div data-amplify-sign-up-errors *ngIf=\"
|
|
850
|
+
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"
|
|
839
851
|
},] }
|
|
840
852
|
];
|
|
841
853
|
FormFieldComponent.ctorParameters = function () { return [
|
|
@@ -1630,7 +1642,7 @@
|
|
|
1630
1642
|
PasswordFieldComponent.decorators = [
|
|
1631
1643
|
{ type: i0.Component, args: [{
|
|
1632
1644
|
selector: 'amplify-password-field',
|
|
1633
|
-
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 [
|
|
1645
|
+
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 [autocomplete]=\"autocomplete\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedBy\"\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"
|
|
1634
1646
|
},] }
|
|
1635
1647
|
];
|
|
1636
1648
|
PasswordFieldComponent.propDecorators = {
|
|
@@ -1643,6 +1655,8 @@
|
|
|
1643
1655
|
placeholder: [{ type: i0.Input }],
|
|
1644
1656
|
required: [{ type: i0.Input }],
|
|
1645
1657
|
labelHidden: [{ type: i0.Input }],
|
|
1658
|
+
hasError: [{ type: i0.Input }],
|
|
1659
|
+
describedBy: [{ type: i0.Input }],
|
|
1646
1660
|
setBlur: [{ type: i0.Output }]
|
|
1647
1661
|
};
|
|
1648
1662
|
|
|
@@ -1668,7 +1682,7 @@
|
|
|
1668
1682
|
PhoneNumberFieldComponent.decorators = [
|
|
1669
1683
|
{ type: i0.Component, args: [{
|
|
1670
1684
|
selector: 'amplify-phone-number-field',
|
|
1671
|
-
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]=\"countryDialCodesValues\"\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 [
|
|
1685
|
+
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]=\"countryDialCodesValues\"\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 [autocomplete]=\"autocomplete\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedBy\"\n />\n</div>\n"
|
|
1672
1686
|
},] }
|
|
1673
1687
|
];
|
|
1674
1688
|
PhoneNumberFieldComponent.propDecorators = {
|
|
@@ -1685,6 +1699,8 @@
|
|
|
1685
1699
|
type: [{ type: i0.Input }],
|
|
1686
1700
|
labelHidden: [{ type: i0.Input }],
|
|
1687
1701
|
dialCodeList: [{ type: i0.Input }],
|
|
1702
|
+
hasError: [{ type: i0.Input }],
|
|
1703
|
+
describedBy: [{ type: i0.Input }],
|
|
1688
1704
|
display: [{ type: i0.HostBinding, args: ['style.display',] }]
|
|
1689
1705
|
};
|
|
1690
1706
|
|
|
@@ -1789,7 +1805,7 @@
|
|
|
1789
1805
|
TextFieldComponent.decorators = [
|
|
1790
1806
|
{ type: i0.Component, args: [{
|
|
1791
1807
|
selector: 'amplify-text-field',
|
|
1792
|
-
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 [
|
|
1808
|
+
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 [autocomplete]=\"autocomplete\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedBy\"\n/>\n"
|
|
1793
1809
|
},] }
|
|
1794
1810
|
];
|
|
1795
1811
|
TextFieldComponent.propDecorators = {
|
|
@@ -1803,6 +1819,8 @@
|
|
|
1803
1819
|
required: [{ type: i0.Input }],
|
|
1804
1820
|
type: [{ type: i0.Input }],
|
|
1805
1821
|
labelHidden: [{ type: i0.Input }],
|
|
1822
|
+
hasError: [{ type: i0.Input }],
|
|
1823
|
+
describedBy: [{ type: i0.Input }],
|
|
1806
1824
|
display: [{ type: i0.HostBinding, args: ['style.display',] }]
|
|
1807
1825
|
};
|
|
1808
1826
|
|