@carefirst/library 5.3.0 → 5.3.1
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, Directive, Component, HostBinding, EventEmitter, Output, ViewChild, HostListener, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
4
|
+
import { Input, Directive, Component, HostBinding, EventEmitter, Output, ViewChild, HostListener, model, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
5
5
|
import * as i1 from '@ionic/angular';
|
|
6
6
|
import { IonicModule } from '@ionic/angular';
|
|
7
7
|
import * as i3 from '@angular/forms';
|
|
@@ -1958,6 +1958,7 @@ class VerificationCodeComponent {
|
|
|
1958
1958
|
status;
|
|
1959
1959
|
userFeedbackMessages;
|
|
1960
1960
|
removeResendText = false;
|
|
1961
|
+
commsSentCount = model(0, ...(ngDevMode ? [{ debugName: "commsSentCount" }] : []));
|
|
1961
1962
|
outcome = new EventEmitter();
|
|
1962
1963
|
resendClickEvent = new EventEmitter();
|
|
1963
1964
|
myInput1;
|
|
@@ -1969,7 +1970,6 @@ class VerificationCodeComponent {
|
|
|
1969
1970
|
validationCodeError = false;
|
|
1970
1971
|
verificationCodeInputArr = [null, null, null, null, null];
|
|
1971
1972
|
loading = false;
|
|
1972
|
-
commsSentCount = 0;
|
|
1973
1973
|
commsInputCount = 0;
|
|
1974
1974
|
commsInputCountExceeded = false;
|
|
1975
1975
|
validationCode;
|
|
@@ -1980,7 +1980,7 @@ class VerificationCodeComponent {
|
|
|
1980
1980
|
* @returns {void}
|
|
1981
1981
|
*/
|
|
1982
1982
|
ionViewDidEnter() {
|
|
1983
|
-
this.commsSentCount
|
|
1983
|
+
this.commsSentCount.update(() => 0);
|
|
1984
1984
|
}
|
|
1985
1985
|
/**----------------------------------------------------------------
|
|
1986
1986
|
* @name ngOnChanges
|
|
@@ -1991,7 +1991,7 @@ class VerificationCodeComponent {
|
|
|
1991
1991
|
//--- Value to verify
|
|
1992
1992
|
if (changes['valueToVerify']?.currentValue !== changes['valueToVerify']?.previousValue ||
|
|
1993
1993
|
changes['code']?.currentValue !== changes['code']?.previousValue) {
|
|
1994
|
-
this.commsSentCount
|
|
1994
|
+
this.commsSentCount.update(() => 0);
|
|
1995
1995
|
this.validationCodeError = false;
|
|
1996
1996
|
this.resetAllInputFields();
|
|
1997
1997
|
}
|
|
@@ -2013,7 +2013,7 @@ class VerificationCodeComponent {
|
|
|
2013
2013
|
this.commsInputCount = 0;
|
|
2014
2014
|
this.commsInputCountExceeded = false;
|
|
2015
2015
|
this.validationCodeError = false;
|
|
2016
|
-
this.commsSentCount
|
|
2016
|
+
this.commsSentCount.update((curr) => ++curr);
|
|
2017
2017
|
this.status.next('initial');
|
|
2018
2018
|
this.resendClickEvent.emit(true);
|
|
2019
2019
|
}
|
|
@@ -2113,11 +2113,11 @@ class VerificationCodeComponent {
|
|
|
2113
2113
|
this.statusSub$?.unsubscribe();
|
|
2114
2114
|
}
|
|
2115
2115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages", removeResendText: "removeResendText" }, 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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
|
|
2116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: { classPropertyName: "valueToVerify", publicName: "valueToVerify", isSignal: false, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: false, isRequired: false, transformFunction: null }, userFeedbackMessages: { classPropertyName: "userFeedbackMessages", publicName: "userFeedbackMessages", isSignal: false, isRequired: false, transformFunction: null }, removeResendText: { classPropertyName: "removeResendText", publicName: "removeResendText", isSignal: false, isRequired: false, transformFunction: null }, commsSentCount: { classPropertyName: "commsSentCount", publicName: "commsSentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commsSentCount: "commsSentCountChange", 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\" [ngStyle]=\"{ 'min-height': !removeResendText ? '124px' : '92px' }\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 @if (!loading && status.value !== 'disabled' && ((!removeResendText && commsSentCount() < 3) || commsSentCount() >= 3)) {\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n @if (!removeResendText && commsSentCount() < 3) {\n <button (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n @if (validationCodeError) {\n @for (string of userFeedbackMessages?.error?.resend || ['Resend Code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n } @else {\n @for (string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n </button>\n } @else if (commsSentCount() >= 3) {\n @for (\n string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance'];\n track string\n ) {\n <p class=\"body-small ion-text-center\">{{ string }}</p>\n }\n }\n </ion-col>\n </ion-row>\n }\n </ion-grid>\n <cf-spinner style=\"position: absolute\" [size]=\"40\" [ngClass]=\"{ 'block-hidden': status.value !== 'processing' }\"></cf-spinner>\n</div>\n", styles: ["#verification-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}#verification-grid{width:100%;display:flex;flex-direction:column}.single-container{display:flex;justify-content:space-between}.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);color:var(--cf-app-text-color-default)}.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)}p.good{color:var(--cf-app-system-color-success)}\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: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
2117
2117
|
}
|
|
2118
2118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
2119
2119
|
type: Component,
|
|
2120
|
-
args: [{ selector: 'cf-verification-code', standalone: false, template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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
|
|
2120
|
+
args: [{ selector: 'cf-verification-code', standalone: false, template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\" [ngStyle]=\"{ 'min-height': !removeResendText ? '124px' : '92px' }\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 || commsInputCountExceeded || status.value === 'disabled'\"\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 @if (!loading && status.value !== 'disabled' && ((!removeResendText && commsSentCount() < 3) || commsSentCount() >= 3)) {\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n <cf-spacer default=\"16\"></cf-spacer>\n @if (!removeResendText && commsSentCount() < 3) {\n <button (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n @if (validationCodeError) {\n @for (string of userFeedbackMessages?.error?.resend || ['Resend Code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n } @else {\n @for (string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n </button>\n } @else if (commsSentCount() >= 3) {\n @for (\n string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance'];\n track string\n ) {\n <p class=\"body-small ion-text-center\">{{ string }}</p>\n }\n }\n </ion-col>\n </ion-row>\n }\n </ion-grid>\n <cf-spinner style=\"position: absolute\" [size]=\"40\" [ngClass]=\"{ 'block-hidden': status.value !== 'processing' }\"></cf-spinner>\n</div>\n", styles: ["#verification-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}#verification-grid{width:100%;display:flex;flex-direction:column}.single-container{display:flex;justify-content:space-between}.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);color:var(--cf-app-text-color-default)}.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)}p.good{color:var(--cf-app-system-color-success)}\n"] }]
|
|
2121
2121
|
}], propDecorators: { valueToVerify: [{
|
|
2122
2122
|
type: Input
|
|
2123
2123
|
}], status: [{
|