@carefirst/library 2.0.1 → 2.0.3
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/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: [{
|