@carefirst/library 2.0.1 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/page/page.component.mjs +3 -3
- package/esm2022/lib/components/verification-code/verification-code.component.mjs +2 -2
- package/fesm2022/carefirst-library.mjs +4 -4
- package/fesm2022/carefirst-library.mjs.map +1 -1
- package/lib/components/page/page.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -16,11 +16,11 @@ export class PageComponent {
|
|
|
16
16
|
this.inputDark = checkTruthAttribute(changes, 'dark', this.inputDark);
|
|
17
17
|
}
|
|
18
18
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark" }, usesOnChanges: true, ngImport: i0, template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"page\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <ng-content></ng-content>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){
|
|
19
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark" }, usesOnChanges: true, ngImport: i0, template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"main-page\">\n <div class=\"spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){background-color:var(--cf-app-background-light)}ion-content.cf-page.bg-dark::part(scroll){background-color:var(--cf-app-background-dark)}ion-content.cf-page>.main-page{display:flex;flex-direction:column;width:100%;height:100%}ion-content.cf-page>.main-page>div{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page>.main-page>div{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page>.main-page>.spacing{height:fit-content;flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page>.main-page>#footer{background-color:var(--footer-bg-color, transparent)}ion-content.cf-page>.main-page .content{display:flex;flex-direction:column;margin-inline:auto;width:100%;max-width:var(--cf-page-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page>.main-page .content{max-width:var(--cf-page-max-width, 1296px)}}ion-content.cf-page>.main-page>.spacing.center-h,ion-content.cf-page>.main-page>.spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page>.main-page>.spacing.center-v,ion-content.cf-page>.main-page>.spacing.center-v>.content{justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
20
20
|
}
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'cf-page', template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"page\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <ng-content></ng-content>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){
|
|
23
|
+
args: [{ selector: 'cf-page', template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"main-page\">\n <div class=\"spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){background-color:var(--cf-app-background-light)}ion-content.cf-page.bg-dark::part(scroll){background-color:var(--cf-app-background-dark)}ion-content.cf-page>.main-page{display:flex;flex-direction:column;width:100%;height:100%}ion-content.cf-page>.main-page>div{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page>.main-page>div{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page>.main-page>.spacing{height:fit-content;flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page>.main-page>#footer{background-color:var(--footer-bg-color, transparent)}ion-content.cf-page>.main-page .content{display:flex;flex-direction:column;margin-inline:auto;width:100%;max-width:var(--cf-page-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page>.main-page .content{max-width:var(--cf-page-max-width, 1296px)}}ion-content.cf-page>.main-page>.spacing.center-h,ion-content.cf-page>.main-page>.spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page>.main-page>.spacing.center-v,ion-content.cf-page>.main-page>.spacing.center-v>.content{justify-content:center}\n"] }]
|
|
24
24
|
}], propDecorators: { centerH: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], centerV: [{
|
|
@@ -28,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
28
28
|
}], dark: [{
|
|
29
29
|
type: Input
|
|
30
30
|
}] } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jYXJlZmlyc3QvbGlicmFyeS9zcmMvbGliL2NvbXBvbmVudHMvcGFnZS9wYWdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhcmVmaXJzdC9saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9wYWdlL3BhZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXNDLE1BQU0sZUFBZSxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7O0FBT2pFLE1BQU0sT0FBTyxhQUFhO0lBQ2YsT0FBTyxDQUFnQztJQUN2QyxPQUFPLENBQWdDO0lBQ3ZDLElBQUksQ0FBZ0M7SUFHN0MsWUFBWSxHQUFHLEtBQUssQ0FBQztJQUNyQixZQUFZLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFPbEIsV0FBVyxDQUFDLE9BQXNCO1FBRWhDLElBQUksQ0FBQyxZQUFZLEdBQUcsbUJBQW1CLENBQUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFFL0UsSUFBSSxDQUFDLFlBQVksR0FBRyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUUvRSxJQUFJLENBQUMsU0FBUyxHQUFHLG1CQUFtQixDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7dUdBdEJVLGFBQWE7MkZBQWIsYUFBYSxzSUNsQjFCLGlkQWNBOzsyRkRJYSxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFNBQVM7OEJBS1YsT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENhcmVGaXJzdCBMaWJyYXJ5IC0gUGFnZVxuICpcbiAqIEBmaWxlICAgICAgICAgIHBhZ2UuY29tcG9uZW50XG4gKiBAZGVzY3JpcHRpb24gICBDb250YWlucyBhbGwgdGhlIGxvZ2ljIGZvciBnZW5lcmF0aW5nIGEgYmFzaWMgQ2FyZUZpcnN0IFBhZ2Ugc3RydWN0dXJlXG4gKiBAYXV0aG9yICAgICAgICBKYWNxdWVzIENvZXR6ZWVcbiAqIEBzaW5jZSAgICAgICAgIDIwMjMgLSAxMSAtIDA3XG4gKiBAdXNhZ2UgICAgICAgICA8Y2YtcGFnZSAlY2VudGVySCUgJWNlbnRlclYlICVkYXJrJSBzdHlsZT1cIi0tY2YtcGFnZS1pbmxpbmUtcGFkZGluZzogMTZweDsgLS1jZi1wYWdlLW1heC13aWR0aDogMTMwMHB4OyAtLWZvb3Rlci1iZy1jb2xvcjogdHJhbnNwYXJlbnRcIj5DT05URU5UPC9jZi1wYWdlPlxuICovXG5cbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIHR5cGUgT25DaGFuZ2VzLCB0eXBlIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNoZWNrVHJ1dGhBdHRyaWJ1dGUgfSBmcm9tICcuLi8uLi91dGlscy9hdHRyaWJ1dGUudXRpbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NmLXBhZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BhZ2UuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUGFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNlbnRlckg/OiBib29sZWFuIHwgc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBjZW50ZXJWPzogYm9vbGVhbiB8IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgZGFyaz86IGJvb2xlYW4gfCBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLy8tLS0gTG9jYWwgdmFyaWFibGVzXG4gIGlucHV0Q2VudGVySCA9IGZhbHNlO1xuICBpbnB1dENlbnRlclYgPSBmYWxzZTtcbiAgaW5wdXREYXJrID0gZmFsc2U7XG5cbiAgLyoqLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuICAgKiBAbmFtZSAgICAgICAgICBuZ09uQ2hhbmdlc1xuICAgKiBAZGVzY3JpcHRpb24gICBVcGRhdGUgdmFyaW91cyB2YWx1ZXMgb24gaW5wdXQgY2hhbmdlc1xuICAgKiBAcmV0dXJucyAgICAgICB7dm9pZH1cbiAgICovXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAvLy0tLSBDZW50ZXIgSFxuICAgIHRoaXMuaW5wdXRDZW50ZXJIID0gY2hlY2tUcnV0aEF0dHJpYnV0ZShjaGFuZ2VzLCAnY2VudGVySCcsIHRoaXMuaW5wdXRDZW50ZXJIKTtcbiAgICAvLy0tLSBDZW50ZXIgVlxuICAgIHRoaXMuaW5wdXRDZW50ZXJWID0gY2hlY2tUcnV0aEF0dHJpYnV0ZShjaGFuZ2VzLCAnY2VudGVyVicsIHRoaXMuaW5wdXRDZW50ZXJWKTtcbiAgICAvLy0tLSBEYXJrXG4gICAgdGhpcy5pbnB1dERhcmsgPSBjaGVja1RydXRoQXR0cmlidXRlKGNoYW5nZXMsICdkYXJrJywgdGhpcy5pbnB1dERhcmspO1xuICB9XG59XG4iLCI8aW9uLWNvbnRlbnQgY2xhc3M9XCJpb24tcGFnZSBjZi1wYWdlXCIgW25nQ2xhc3NdPVwieyAnYmctZGFyayc6IGlucHV0RGFyayB9XCI+XG4gIDxkaXYgY2xhc3M9XCJtYWluLXBhZ2VcIj5cbiAgICA8ZGl2IGNsYXNzPVwic3BhY2luZ1wiIFtuZ0NsYXNzXT1cInsgJ2NlbnRlci1oJzogaW5wdXRDZW50ZXJILCAnY2VudGVyLXYnOiBpbnB1dENlbnRlclYgfVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBpZD1cImZvb3RlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Zvb3Rlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2lvbi1jb250ZW50PlxuIl19
|
|
@@ -109,11 +109,11 @@ export class VerificationCodeComponent {
|
|
|
109
109
|
this.statusSub$?.unsubscribe();
|
|
110
110
|
}
|
|
111
111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: VerificationCodeComponent, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:
|
|
112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: VerificationCodeComponent, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:12px}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: i4.SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
113
113
|
}
|
|
114
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
|
-
args: [{ selector: 'cf-verification-code', template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:
|
|
116
|
+
args: [{ selector: 'cf-verification-code', template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:12px}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}\n"] }]
|
|
117
117
|
}], ctorParameters: () => [], propDecorators: { valueToVerify: [{
|
|
118
118
|
type: Input
|
|
119
119
|
}], status: [{
|
|
@@ -96,11 +96,11 @@ class PageComponent {
|
|
|
96
96
|
this.inputDark = checkTruthAttribute(changes, 'dark', this.inputDark);
|
|
97
97
|
}
|
|
98
98
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark" }, usesOnChanges: true, ngImport: i0, template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"page\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <ng-content></ng-content>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark" }, usesOnChanges: true, ngImport: i0, template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"main-page\">\n <div class=\"spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){background-color:var(--cf-app-background-light)}ion-content.cf-page.bg-dark::part(scroll){background-color:var(--cf-app-background-dark)}ion-content.cf-page>.main-page{display:flex;flex-direction:column;width:100%;height:100%}ion-content.cf-page>.main-page>div{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page>.main-page>div{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page>.main-page>.spacing{height:fit-content;flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page>.main-page>#footer{background-color:var(--footer-bg-color, transparent)}ion-content.cf-page>.main-page .content{display:flex;flex-direction:column;margin-inline:auto;width:100%;max-width:var(--cf-page-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page>.main-page .content{max-width:var(--cf-page-max-width, 1296px)}}ion-content.cf-page>.main-page>.spacing.center-h,ion-content.cf-page>.main-page>.spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page>.main-page>.spacing.center-v,ion-content.cf-page>.main-page>.spacing.center-v>.content{justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
100
100
|
}
|
|
101
101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
|
-
args: [{ selector: 'cf-page', template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"page\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <ng-content></ng-content>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){
|
|
103
|
+
args: [{ selector: 'cf-page', template: "<ion-content class=\"ion-page cf-page\" [ngClass]=\"{ 'bg-dark': inputDark }\">\n <div class=\"main-page\">\n <div class=\"spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page::part(scroll){background-color:var(--cf-app-background-light)}ion-content.cf-page.bg-dark::part(scroll){background-color:var(--cf-app-background-dark)}ion-content.cf-page>.main-page{display:flex;flex-direction:column;width:100%;height:100%}ion-content.cf-page>.main-page>div{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page>.main-page>div{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page>.main-page>.spacing{height:fit-content;flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page>.main-page>#footer{background-color:var(--footer-bg-color, transparent)}ion-content.cf-page>.main-page .content{display:flex;flex-direction:column;margin-inline:auto;width:100%;max-width:var(--cf-page-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page>.main-page .content{max-width:var(--cf-page-max-width, 1296px)}}ion-content.cf-page>.main-page>.spacing.center-h,ion-content.cf-page>.main-page>.spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page>.main-page>.spacing.center-v,ion-content.cf-page>.main-page>.spacing.center-v>.content{justify-content:center}\n"] }]
|
|
104
104
|
}], propDecorators: { centerH: [{
|
|
105
105
|
type: Input
|
|
106
106
|
}], centerV: [{
|
|
@@ -801,11 +801,11 @@ class VerificationCodeComponent {
|
|
|
801
801
|
this.statusSub$?.unsubscribe();
|
|
802
802
|
}
|
|
803
803
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
804
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: VerificationCodeComponent, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:
|
|
804
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: VerificationCodeComponent, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:12px}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
805
805
|
}
|
|
806
806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
807
807
|
type: Component,
|
|
808
|
-
args: [{ selector: 'cf-verification-code', template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:
|
|
808
|
+
args: [{ selector: 'cf-verification-code', template: "<ion-grid>\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ion-col *ngIf=\"validationCodeError\" size=\"auto\">\n <p class=\"body-small error\" *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\">{{ string }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n <ng-container *ngIf=\"!loading\">\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-start\" *ngFor=\"let string of userFeedbackMessages?.error?.resend || ['Resend Code']\">\n {{ string }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"!validationCodeError\">\n <p\n class=\"body-small ion-text-start\"\n *ngFor=\"let string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']\">\n {{ string }}\n </p>\n </ng-container>\n </button>\n <ng-container *ngIf=\"commsSentCount >= 3\">\n <p\n class=\"body-small\"\n *ngFor=\"let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spinner [size]=\"50\" [ngClass]=\"{ 'block-hidden': !loading }\"></cf-spinner>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: [".single-container{display:flex;gap:12px}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}\n"] }]
|
|
809
809
|
}], ctorParameters: () => [], propDecorators: { valueToVerify: [{
|
|
810
810
|
type: Input
|
|
811
811
|
}], status: [{
|