@aws-amplify/ui-angular 2.4.7 → 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-legacy.umd.js +11 -2
- package/bundles/aws-amplify-ui-angular-legacy.umd.js.map +1 -1
- package/bundles/aws-amplify-ui-angular-legacy.umd.min.js +1 -15
- package/bundles/aws-amplify-ui-angular-legacy.umd.min.js.map +1 -1
- package/bundles/aws-amplify-ui-angular.umd.js +37 -10
- 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
|
@@ -22,7 +22,7 @@ export class PhoneNumberFieldComponent {
|
|
|
22
22
|
PhoneNumberFieldComponent.decorators = [
|
|
23
23
|
{ type: Component, args: [{
|
|
24
24
|
selector: 'amplify-phone-number-field',
|
|
25
|
-
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 [
|
|
25
|
+
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"
|
|
26
26
|
},] }
|
|
27
27
|
];
|
|
28
28
|
PhoneNumberFieldComponent.propDecorators = {
|
|
@@ -39,6 +39,8 @@ PhoneNumberFieldComponent.propDecorators = {
|
|
|
39
39
|
type: [{ type: Input }],
|
|
40
40
|
labelHidden: [{ type: Input }],
|
|
41
41
|
dialCodeList: [{ type: Input }],
|
|
42
|
+
hasError: [{ type: Input }],
|
|
43
|
+
describedBy: [{ type: Input }],
|
|
42
44
|
display: [{ type: HostBinding, args: ['style.display',] }]
|
|
43
45
|
};
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtbnVtYmVyLWZpZWxkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWFuZ3VsYXIvc3JjL2xpYi9wcmltaXRpdmVzL3Bob25lLW51bWJlci1maWVsZC9waG9uZS1udW1iZXItZmllbGQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sUUFBUSxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBTW5ELE1BQU0sT0FBTyx5QkFBeUI7SUFKdEM7UUFLVyxpQkFBWSxHQUFHLGNBQWMsQ0FBQztRQUM5QixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLGtCQUFhLEdBQVcsaUJBQWlCLE1BQU0sQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDO1FBQ3RELGdCQUFXLEdBQVcsaUJBQWlCLE1BQU0sQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDO1FBQ3BELGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFWCxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUNqQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRWhCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBS0MsWUFBTyxHQUFHLFVBQVUsQ0FBQztJQU9yRCxDQUFDO0lBSEMsUUFBUTs7UUFDTixJQUFJLENBQUMsc0JBQXNCLFNBQUcsSUFBSSxDQUFDLFlBQVksbUNBQUksZ0JBQWdCLENBQUM7SUFDdEUsQ0FBQzs7O1lBM0JGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsNEJBQTRCO2dCQUN0QyxzbkNBQWtEO2FBQ25EOzs7MkJBRUUsS0FBSzt1QkFDTCxLQUFLO2lDQUNMLEtBQUs7NEJBQ0wsS0FBSzswQkFDTCxLQUFLOzJCQUNMLEtBQUs7b0JBQ0wsS0FBSzttQkFDTCxLQUFLOzBCQUNMLEtBQUs7dUJBQ0wsS0FBSzttQkFDTCxLQUFLOzBCQUNMLEtBQUs7MkJBQ0wsS0FBSzt1QkFDTCxLQUFLOzBCQUNMLEtBQUs7c0JBRUwsV0FBVyxTQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBuYW5vaWQgfSBmcm9tICduYW5vaWQnO1xuaW1wb3J0IHsgY291bnRyeURpYWxDb2RlcyB9IGZyb20gJ0Bhd3MtYW1wbGlmeS91aSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FtcGxpZnktcGhvbmUtbnVtYmVyLWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Bob25lLW51bWJlci1maWVsZC5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIFBob25lTnVtYmVyRmllbGRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBhdXRvY29tcGxldGUgPSAnbmV3LXBhc3N3b3JkJztcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgZGVmYXVsdENvdW50cnlDb2RlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNlbGVjdEZpZWxkSWQ6IHN0cmluZyA9IGBhbXBsaWZ5LWZpZWxkLSR7bmFub2lkKDEyKX1gO1xuICBASW5wdXQoKSB0ZXh0RmllbGRJZDogc3RyaW5nID0gYGFtcGxpZnktZmllbGQtJHtuYW5vaWQoMTIpfWA7XG4gIEBJbnB1dCgpIGluaXRpYWxWYWx1ZSA9ICcnO1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gdHJ1ZTtcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nO1xuICBASW5wdXQoKSBsYWJlbEhpZGRlbiA9IGZhbHNlO1xuICBASW5wdXQoKSBkaWFsQ29kZUxpc3Q6IEFycmF5PHN0cmluZz47XG4gIEBJbnB1dCgpIGhhc0Vycm9yOiBib29sZWFuO1xuICBASW5wdXQoKSBkZXNjcmliZWRCeTogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygnc3R5bGUuZGlzcGxheScpIGRpc3BsYXkgPSAnY29udGVudHMnO1xuXG4gIHB1YmxpYyBjb3VudHJ5RGlhbENvZGVzVmFsdWVzOiBBcnJheTxzdHJpbmc+O1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY291bnRyeURpYWxDb2Rlc1ZhbHVlcyA9IHRoaXMuZGlhbENvZGVMaXN0ID8/IGNvdW50cnlEaWFsQ29kZXM7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -16,7 +16,7 @@ export class TextFieldComponent {
|
|
|
16
16
|
TextFieldComponent.decorators = [
|
|
17
17
|
{ type: Component, args: [{
|
|
18
18
|
selector: 'amplify-text-field',
|
|
19
|
-
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 [
|
|
19
|
+
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"
|
|
20
20
|
},] }
|
|
21
21
|
];
|
|
22
22
|
TextFieldComponent.propDecorators = {
|
|
@@ -30,6 +30,8 @@ TextFieldComponent.propDecorators = {
|
|
|
30
30
|
required: [{ type: Input }],
|
|
31
31
|
type: [{ type: Input }],
|
|
32
32
|
labelHidden: [{ type: Input }],
|
|
33
|
+
hasError: [{ type: Input }],
|
|
34
|
+
describedBy: [{ type: Input }],
|
|
33
35
|
display: [{ type: HostBinding, args: ['style.display',] }]
|
|
34
36
|
};
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1hbmd1bGFyL3NyYy9saWIvcHJpbWl0aXZlcy90ZXh0LWZpZWxkL3RleHQtZmllbGQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sUUFBUSxDQUFDO0FBTWhDLE1BQU0sT0FBTyxrQkFBa0I7SUFKL0I7UUFLVyxpQkFBWSxHQUFHLGNBQWMsQ0FBQztRQUM5QixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFlBQU8sR0FBVyxpQkFBaUIsTUFBTSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDaEQsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFDbEIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUVYLGdCQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFFaEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFJQyxZQUFPLEdBQUcsVUFBVSxDQUFDO0lBQ3JELENBQUM7OztZQW5CQSxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsNmZBQTBDO2FBQzNDOzs7MkJBRUUsS0FBSzt1QkFDTCxLQUFLO3NCQUNMLEtBQUs7MkJBQ0wsS0FBSztvQkFDTCxLQUFLO21CQUNMLEtBQUs7MEJBQ0wsS0FBSzt1QkFDTCxLQUFLO21CQUNMLEtBQUs7MEJBQ0wsS0FBSzt1QkFDTCxLQUFLOzBCQUNMLEtBQUs7c0JBRUwsV0FBVyxTQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgbmFub2lkIH0gZnJvbSAnbmFub2lkJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYW1wbGlmeS10ZXh0LWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtZmllbGQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0RmllbGRDb21wb25lbnQge1xuICBASW5wdXQoKSBhdXRvY29tcGxldGUgPSAnbmV3LXBhc3N3b3JkJztcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgZmllbGRJZDogc3RyaW5nID0gYGFtcGxpZnktZmllbGQtJHtuYW5vaWQoMTIpfWA7XG4gIEBJbnB1dCgpIGluaXRpYWxWYWx1ZSA9ICcnO1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gdHJ1ZTtcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nO1xuICBASW5wdXQoKSBsYWJlbEhpZGRlbiA9IGZhbHNlO1xuICBASW5wdXQoKSBoYXNFcnJvcjogYm9vbGVhbjtcbiAgQElucHV0KCkgZGVzY3JpYmVkQnk6IHN0cmluZztcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmRpc3BsYXknKSBkaXNwbGF5ID0gJ2NvbnRlbnRzJztcbn1cbiJdfQ==
|
|
@@ -6,9 +6,9 @@ export { translations } from '@aws-amplify/ui';
|
|
|
6
6
|
import { Logger } from '@aws-amplify/core';
|
|
7
7
|
import { interpret } from 'xstate';
|
|
8
8
|
import { Logger as Logger$1, Auth } from 'aws-amplify';
|
|
9
|
+
import { nanoid } from 'nanoid';
|
|
9
10
|
import { __awaiter } from 'tslib';
|
|
10
11
|
import QRCode from 'qrcode';
|
|
11
|
-
import { nanoid } from 'nanoid';
|
|
12
12
|
|
|
13
13
|
class AmplifySlotDirective {
|
|
14
14
|
constructor(template) {
|
|
@@ -642,6 +642,7 @@ class FormFieldComponent {
|
|
|
642
642
|
constructor(authenticator) {
|
|
643
643
|
this.authenticator = authenticator;
|
|
644
644
|
this.countryDialCodesValue = countryDialCodes;
|
|
645
|
+
this.errorId = nanoid(12);
|
|
645
646
|
}
|
|
646
647
|
get errors() {
|
|
647
648
|
const { validationErrors } = this.authenticator;
|
|
@@ -657,6 +658,13 @@ class FormFieldComponent {
|
|
|
657
658
|
isPhoneField() {
|
|
658
659
|
return this.formField.type === 'tel';
|
|
659
660
|
}
|
|
661
|
+
hasError() {
|
|
662
|
+
var _a;
|
|
663
|
+
return ((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
664
|
+
}
|
|
665
|
+
get ariaDescribedBy() {
|
|
666
|
+
return this.hasError() ? this.errorId : undefined;
|
|
667
|
+
}
|
|
660
668
|
translate(phrase) {
|
|
661
669
|
return translate(phrase);
|
|
662
670
|
}
|
|
@@ -664,7 +672,7 @@ class FormFieldComponent {
|
|
|
664
672
|
FormFieldComponent.decorators = [
|
|
665
673
|
{ type: Component, args: [{
|
|
666
674
|
selector: 'amplify-form-field',
|
|
667
|
-
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=\"
|
|
675
|
+
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"
|
|
668
676
|
},] }
|
|
669
677
|
];
|
|
670
678
|
FormFieldComponent.ctorParameters = () => [
|
|
@@ -1080,7 +1088,7 @@ class PasswordFieldComponent {
|
|
|
1080
1088
|
PasswordFieldComponent.decorators = [
|
|
1081
1089
|
{ type: Component, args: [{
|
|
1082
1090
|
selector: 'amplify-password-field',
|
|
1083
|
-
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 [
|
|
1091
|
+
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"
|
|
1084
1092
|
},] }
|
|
1085
1093
|
];
|
|
1086
1094
|
PasswordFieldComponent.propDecorators = {
|
|
@@ -1093,6 +1101,8 @@ PasswordFieldComponent.propDecorators = {
|
|
|
1093
1101
|
placeholder: [{ type: Input }],
|
|
1094
1102
|
required: [{ type: Input }],
|
|
1095
1103
|
labelHidden: [{ type: Input }],
|
|
1104
|
+
hasError: [{ type: Input }],
|
|
1105
|
+
describedBy: [{ type: Input }],
|
|
1096
1106
|
setBlur: [{ type: Output }]
|
|
1097
1107
|
};
|
|
1098
1108
|
|
|
@@ -1117,7 +1127,7 @@ class PhoneNumberFieldComponent {
|
|
|
1117
1127
|
PhoneNumberFieldComponent.decorators = [
|
|
1118
1128
|
{ type: Component, args: [{
|
|
1119
1129
|
selector: 'amplify-phone-number-field',
|
|
1120
|
-
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 [
|
|
1130
|
+
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"
|
|
1121
1131
|
},] }
|
|
1122
1132
|
];
|
|
1123
1133
|
PhoneNumberFieldComponent.propDecorators = {
|
|
@@ -1134,6 +1144,8 @@ PhoneNumberFieldComponent.propDecorators = {
|
|
|
1134
1144
|
type: [{ type: Input }],
|
|
1135
1145
|
labelHidden: [{ type: Input }],
|
|
1136
1146
|
dialCodeList: [{ type: Input }],
|
|
1147
|
+
hasError: [{ type: Input }],
|
|
1148
|
+
describedBy: [{ type: Input }],
|
|
1137
1149
|
display: [{ type: HostBinding, args: ['style.display',] }]
|
|
1138
1150
|
};
|
|
1139
1151
|
|
|
@@ -1232,7 +1244,7 @@ class TextFieldComponent {
|
|
|
1232
1244
|
TextFieldComponent.decorators = [
|
|
1233
1245
|
{ type: Component, args: [{
|
|
1234
1246
|
selector: 'amplify-text-field',
|
|
1235
|
-
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 [
|
|
1247
|
+
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"
|
|
1236
1248
|
},] }
|
|
1237
1249
|
];
|
|
1238
1250
|
TextFieldComponent.propDecorators = {
|
|
@@ -1246,6 +1258,8 @@ TextFieldComponent.propDecorators = {
|
|
|
1246
1258
|
required: [{ type: Input }],
|
|
1247
1259
|
type: [{ type: Input }],
|
|
1248
1260
|
labelHidden: [{ type: Input }],
|
|
1261
|
+
hasError: [{ type: Input }],
|
|
1262
|
+
describedBy: [{ type: Input }],
|
|
1249
1263
|
display: [{ type: HostBinding, args: ['style.display',] }]
|
|
1250
1264
|
};
|
|
1251
1265
|
|