@aws-amplify/ui-angular 2.0.1-next.5 → 2.0.1-next.6
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 +11 -14
- 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/amplify-authenticator/amplify-authenticator.component.js +4 -8
- package/esm2015/lib/primitives/phone-number-field/phone-number-field.component.js +2 -2
- package/esm2015/lib/primitives/tabs/tabs.component.js +3 -2
- package/esm2015/lib/services/state-machine.service.js +6 -7
- package/fesm2015/aws-amplify-ui-angular.js +11 -15
- package/fesm2015/aws-amplify-ui-angular.js.map +1 -1
- package/lib/components/amplify-authenticator/amplify-authenticator.component.d.ts +3 -4
- package/lib/services/state-machine.service.d.ts +2 -2
- package/package.json +2 -2
- package/styles/component.css +0 -5
|
@@ -94,12 +94,12 @@
|
|
|
94
94
|
var StateMachineService = /** @class */ (function () {
|
|
95
95
|
function StateMachineService() {
|
|
96
96
|
}
|
|
97
|
-
StateMachineService.prototype.startMachine = function (
|
|
97
|
+
StateMachineService.prototype.startMachine = function (_a) {
|
|
98
98
|
var _this = this;
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
var initialState = _a.initialState, loginMechanisms = _a.loginMechanisms;
|
|
100
|
+
var machine = ui.createAuthenticatorMachine({
|
|
101
|
+
initialState: initialState,
|
|
102
|
+
loginMechanisms: loginMechanisms,
|
|
103
103
|
});
|
|
104
104
|
var authService = xstate.interpret(machine, {
|
|
105
105
|
devTools: process.env.NODE_ENV === 'development',
|
|
@@ -163,11 +163,6 @@
|
|
|
163
163
|
function AmplifyAuthenticatorComponent(stateMachine, contextService) {
|
|
164
164
|
this.stateMachine = stateMachine;
|
|
165
165
|
this.contextService = contextService;
|
|
166
|
-
/**
|
|
167
|
-
* TODO: Add back custom events
|
|
168
|
-
*/
|
|
169
|
-
this.initialState = 'signIn';
|
|
170
|
-
this.loginMechanisms = ['username'];
|
|
171
166
|
this.customComponentQuery = null;
|
|
172
167
|
this.customComponents = {};
|
|
173
168
|
// translated texts
|
|
@@ -176,7 +171,8 @@
|
|
|
176
171
|
}
|
|
177
172
|
AmplifyAuthenticatorComponent.prototype.ngOnInit = function () {
|
|
178
173
|
awsAmplify.I18n.putVocabularies(ui.translations);
|
|
179
|
-
this.
|
|
174
|
+
var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms;
|
|
175
|
+
this.stateMachine.startMachine({ initialState: initialState, loginMechanisms: loginMechanisms });
|
|
180
176
|
/**
|
|
181
177
|
* handling translations after content init, because authenticator and its
|
|
182
178
|
* translations might be initialized before the main app's `ngOnInit` is run.
|
|
@@ -240,7 +236,7 @@
|
|
|
240
236
|
AmplifyAuthenticatorComponent.decorators = [
|
|
241
237
|
{ type: i0.Component, args: [{
|
|
242
238
|
selector: 'amplify-authenticator',
|
|
243
|
-
template: "<!-- \n Define default contents here.\n-->\n<ng-template #signIn>\n <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <ng-content></ng-content> </ng-template>\n<ng-template #setupTOTP>\n <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n Next, we render respective auth subcomponent respective to the current authState.\n If customer is overriding that component, we render customer's template instead.\n-->\n\n<div data-amplify-
|
|
239
|
+
template: "<!-- \n Define default contents here.\n-->\n<ng-template #signIn>\n <amplify-sign-in></amplify-sign-in>\n</ng-template>\n<ng-template #signUp>\n <amplify-sign-up></amplify-sign-up>\n</ng-template>\n<ng-template #confirmSignUp>\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n</ng-template>\n<ng-template #confirmSignIn>\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n</ng-template>\n<ng-template #authenticated> <ng-content></ng-content> </ng-template>\n<ng-template #setupTOTP>\n <amplify-setup-totp></amplify-setup-totp>\n</ng-template>\n<ng-template #forceNewPassword>\n <amplify-force-new-password></amplify-force-new-password>\n</ng-template>\n<ng-template #resetPassword>\n <amplify-reset-password></amplify-reset-password>\n</ng-template>\n<ng-template #confirmResetPassword>\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n</ng-template>\n<ng-template #verifyUser>\n <amplify-verify-user></amplify-verify-user>\n</ng-template>\n<ng-template #confirmVerifyUser>\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n</ng-template>\n\n<!-- \n Next, we render respective auth subcomponent respective to the current authState.\n If customer is overriding that component, we render customer's template instead.\n-->\n\n<div data-amplify-authenticator>\n <div data-amplify-modal></div>\n\n <div data-amplify-container>\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"actorState?.matches('signIn') || actorState?.matches('signUp')\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"actorState?.matches('signIn')\"\n >\n <!-- signIn component -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.signIn || signIn\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('signIn')\"\n ></ng-container>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"actorState?.matches('signUp')\"\n >\n <!-- signUp component -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.signUp || signUp\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('signUp')\"\n ></ng-container>\n </amplify-tab-item>\n </amplify-tabs>\n\n <!-- confirmSignUp content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.confirmSignUp || confirmSignUp\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('confirmSignUp')\"\n >\n </ng-container>\n\n <!-- confirmSignIn content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.confirmSignIn || confirmSignIn\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('confirmSignIn')\"\n >\n </ng-container>\n\n <!-- setupTotp content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.setupTOTP || setupTOTP\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('setupTOTP')\"\n >\n </ng-container>\n\n <!-- forceNewPassword content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.forceNewPassword || forceNewPassword\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('forceNewPassword')\"\n >\n </ng-container>\n\n <!-- resetPassword content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.resetPassword || resetPassword\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('resetPassword')\"\n >\n </ng-container>\n\n <!-- confirmResetPassword content -->\n <ng-container\n [ngTemplateOutlet]=\"\n customComponents.confirmResetPassword || confirmResetPassword\n \"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('confirmResetPassword')\"\n >\n </ng-container>\n\n <!-- verifyUser content -->\n <ng-container\n [ngTemplateOutlet]=\"customComponents.verifyUser || verifyUser\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('verifyUser')\"\n >\n </ng-container>\n\n <!-- confirmVerifyUser content -->\n <ng-container\n [ngTemplateOutlet]=\"\n customComponents.confirmVerifyUser || confirmVerifyUser\n \"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"actorState?.matches('confirmVerifyUser')\"\n >\n </ng-container>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<ng-container\n [ngTemplateOutlet]=\"customComponents.authenticated || authenticated\"\n [ngTemplateOutletContext]=\"context\"\n *ngIf=\"authenticatorState.matches('authenticated')\"\n>\n</ng-container>\n",
|
|
244
240
|
providers: [AuthPropService],
|
|
245
241
|
encapsulation: i0.ViewEncapsulation.None
|
|
246
242
|
},] }
|
|
@@ -1717,6 +1713,7 @@
|
|
|
1717
1713
|
tab.labelledById = "radix-id-" + nanoid.nanoid(12) + "-1-trigger-" + index;
|
|
1718
1714
|
});
|
|
1719
1715
|
// find active tab
|
|
1716
|
+
// TODO(enhancement): more declarative way for choosing the initial tab to render
|
|
1720
1717
|
var activeTabs = this.tabs.filter(function (tab) { return tab.active; });
|
|
1721
1718
|
// set active tab
|
|
1722
1719
|
if (activeTabs.length !== 1) {
|
|
@@ -1740,7 +1737,7 @@
|
|
|
1740
1737
|
TabsComponent.decorators = [
|
|
1741
1738
|
{ type: i0.Component, args: [{
|
|
1742
1739
|
selector: 'amplify-tabs',
|
|
1743
|
-
template: "<div\n tabindex=\"0\"\n aria-orientation=\"horizontal\"\n data-orientation=\"horizontal\"\n role=\"tablist\"\n style=\"outline: none\"\n>\n <div\n class=\"amplify-flex amplify-tabs\"\n style=\"gap: 0px; justify-content: center\"\n >\n <div\n *ngFor=\"let tab of tabs\"\n class=\"amplify-tabs-item\"\n data-grow=\"equal\"\n data-orientation=\"horizontal\"\n role=\"tab\"\n [id]=\"tab.labelledById\"\n [tabindex]=\"tab.active ? '0' : '1'\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-controls]=\"tab.id\"\n [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n (click)=\"handleTabClick(tab)\"\n >\n {{ tab.title }}\n </div>\n </div>\n</div>\n\n<ng-content></ng-content>\n"
|
|
1740
|
+
template: "<div\n tabindex=\"0\"\n aria-orientation=\"horizontal\"\n data-orientation=\"horizontal\"\n role=\"tablist\"\n style=\"outline: none\"\n>\n <div\n class=\"amplify-flex amplify-tabs\"\n data-indicator-position=\"top\"\n style=\"gap: 0px; justify-content: center\"\n >\n <div\n *ngFor=\"let tab of tabs\"\n class=\"amplify-tabs-item\"\n data-grow=\"equal\"\n data-orientation=\"horizontal\"\n role=\"tab\"\n [id]=\"tab.labelledById\"\n [tabindex]=\"tab.active ? '0' : '1'\"\n [attr.aria-selected]=\"tab.active\"\n [attr.aria-controls]=\"tab.id\"\n [attr.data-state]=\"tab.active ? 'active' : 'inactive'\"\n (click)=\"handleTabClick(tab)\"\n >\n {{ tab.title }}\n </div>\n </div>\n</div>\n\n<ng-content></ng-content>\n"
|
|
1744
1741
|
},] }
|
|
1745
1742
|
];
|
|
1746
1743
|
TabsComponent.propDecorators = {
|
|
@@ -3667,7 +3664,7 @@
|
|
|
3667
3664
|
PhoneNumberFieldComponent.decorators = [
|
|
3668
3665
|
{ type: i0.Component, args: [{
|
|
3669
3666
|
selector: 'amplify-phone-number-field',
|
|
3670
|
-
template: "<div
|
|
3667
|
+
template: "<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=\" amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\"\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 <label class=\"sr-only amplify-label\" [for]=\"textFieldId\">\n {{ label }}\n </label>\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"
|
|
3671
3668
|
},] }
|
|
3672
3669
|
];
|
|
3673
3670
|
PhoneNumberFieldComponent.propDecorators = {
|