@carefirst/library 5.3.0 → 5.3.2
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';
|
|
@@ -9,6 +9,7 @@ import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
|
9
9
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
10
10
|
import dayjs from 'dayjs';
|
|
11
11
|
import passwordValidator from 'password-validator';
|
|
12
|
+
import '@ionic/core';
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* Button Loader Directive
|
|
@@ -1958,6 +1959,7 @@ class VerificationCodeComponent {
|
|
|
1958
1959
|
status;
|
|
1959
1960
|
userFeedbackMessages;
|
|
1960
1961
|
removeResendText = false;
|
|
1962
|
+
commsSentCount = model(0, ...(ngDevMode ? [{ debugName: "commsSentCount" }] : []));
|
|
1961
1963
|
outcome = new EventEmitter();
|
|
1962
1964
|
resendClickEvent = new EventEmitter();
|
|
1963
1965
|
myInput1;
|
|
@@ -1969,7 +1971,6 @@ class VerificationCodeComponent {
|
|
|
1969
1971
|
validationCodeError = false;
|
|
1970
1972
|
verificationCodeInputArr = [null, null, null, null, null];
|
|
1971
1973
|
loading = false;
|
|
1972
|
-
commsSentCount = 0;
|
|
1973
1974
|
commsInputCount = 0;
|
|
1974
1975
|
commsInputCountExceeded = false;
|
|
1975
1976
|
validationCode;
|
|
@@ -1980,7 +1981,7 @@ class VerificationCodeComponent {
|
|
|
1980
1981
|
* @returns {void}
|
|
1981
1982
|
*/
|
|
1982
1983
|
ionViewDidEnter() {
|
|
1983
|
-
this.commsSentCount
|
|
1984
|
+
this.commsSentCount.update(() => 0);
|
|
1984
1985
|
}
|
|
1985
1986
|
/**----------------------------------------------------------------
|
|
1986
1987
|
* @name ngOnChanges
|
|
@@ -1991,7 +1992,7 @@ class VerificationCodeComponent {
|
|
|
1991
1992
|
//--- Value to verify
|
|
1992
1993
|
if (changes['valueToVerify']?.currentValue !== changes['valueToVerify']?.previousValue ||
|
|
1993
1994
|
changes['code']?.currentValue !== changes['code']?.previousValue) {
|
|
1994
|
-
this.commsSentCount
|
|
1995
|
+
this.commsSentCount.update(() => 0);
|
|
1995
1996
|
this.validationCodeError = false;
|
|
1996
1997
|
this.resetAllInputFields();
|
|
1997
1998
|
}
|
|
@@ -2013,7 +2014,7 @@ class VerificationCodeComponent {
|
|
|
2013
2014
|
this.commsInputCount = 0;
|
|
2014
2015
|
this.commsInputCountExceeded = false;
|
|
2015
2016
|
this.validationCodeError = false;
|
|
2016
|
-
this.commsSentCount
|
|
2017
|
+
this.commsSentCount.update((curr) => ++curr);
|
|
2017
2018
|
this.status.next('initial');
|
|
2018
2019
|
this.resendClickEvent.emit(true);
|
|
2019
2020
|
}
|
|
@@ -2113,11 +2114,11 @@ class VerificationCodeComponent {
|
|
|
2113
2114
|
this.statusSub$?.unsubscribe();
|
|
2114
2115
|
}
|
|
2115
2116
|
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
|
|
2117
|
+
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
2118
|
}
|
|
2118
2119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
2119
2120
|
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
|
|
2121
|
+
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
2122
|
}], propDecorators: { valueToVerify: [{
|
|
2122
2123
|
type: Input
|
|
2123
2124
|
}], status: [{
|