@carefirst/library 3.1.1 → 3.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/alert/alert.component.mjs +2 -2
- package/esm2022/lib/components/page/page.component.mjs +2 -2
- package/esm2022/lib/components/verification-code/verification-code.component.mjs +2 -2
- package/fesm2022/carefirst-library.mjs +6 -6
- package/fesm2022/carefirst-library.mjs.map +1 -1
- package/package.json +1 -1
- package/public/styles/app.scss +20 -0
|
@@ -43,11 +43,11 @@ export class AlertComponent {
|
|
|
43
43
|
alert.present();
|
|
44
44
|
}
|
|
45
45
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AlertComponent, deps: [{ token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AlertComponent, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] });
|
|
46
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AlertComponent, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{max-width:280px;padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper{max-width:420px}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0;min-height:24px}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] });
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
|
-
args: [{ selector: 'cf-alert', template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] }]
|
|
50
|
+
args: [{ selector: 'cf-alert', template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{max-width:280px;padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper{max-width:420px}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0;min-height:24px}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] }]
|
|
51
51
|
}], ctorParameters: () => [{ type: i1.AlertController }], propDecorators: { data: [{
|
|
52
52
|
type: Input
|
|
53
53
|
}], alertEvent: [{
|
|
@@ -32,11 +32,11 @@ export class PageComponent {
|
|
|
32
32
|
this.inputStickyButtonOn = checkTruthAttribute(changes, 'stickyButtonOn', this.inputStickyButtonOn);
|
|
33
33
|
}
|
|
34
34
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width,
|
|
35
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup .content>*{max-width:100%}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--page-background-color)}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{width:100%;max-width:var(--cf-page-mobile-max-width, 358px);padding-top:12px}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content.vertical-buttons{flex-direction:column;align-items:center}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
|
-
args: [{ selector: 'cf-page', template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width,
|
|
39
|
+
args: [{ selector: 'cf-page', template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup .content>*{max-width:100%}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--page-background-color)}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{width:100%;max-width:var(--cf-page-mobile-max-width, 358px);padding-top:12px}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content.vertical-buttons{flex-direction:column;align-items:center}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"] }]
|
|
40
40
|
}], propDecorators: { centerH: [{
|
|
41
41
|
type: Input
|
|
42
42
|
}], centerV: [{
|
|
@@ -116,11 +116,11 @@ export class VerificationCodeComponent {
|
|
|
116
116
|
this.statusSub$?.unsubscribe();
|
|
117
117
|
}
|
|
118
118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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)}.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-textarea,ion-searchbar" }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: i4.SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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-textarea,ion-searchbar" }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: i4.SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
120
120
|
}
|
|
121
121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
122
122
|
type: Component,
|
|
123
|
-
args: [{ selector: 'cf-verification-code', template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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)}.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"] }]
|
|
123
|
+
args: [{ selector: 'cf-verification-code', template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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"] }]
|
|
124
124
|
}], propDecorators: { valueToVerify: [{
|
|
125
125
|
type: Input
|
|
126
126
|
}], status: [{
|
|
@@ -112,11 +112,11 @@ class PageComponent {
|
|
|
112
112
|
this.inputStickyButtonOn = checkTruthAttribute(changes, 'stickyButtonOn', this.inputStickyButtonOn);
|
|
113
113
|
}
|
|
114
114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width,
|
|
115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PageComponent, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup .content>*{max-width:100%}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--page-background-color)}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{width:100%;max-width:var(--cf-page-mobile-max-width, 358px);padding-top:12px}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content.vertical-buttons{flex-direction:column;align-items:center}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
116
116
|
}
|
|
117
117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageComponent, decorators: [{
|
|
118
118
|
type: Component,
|
|
119
|
-
args: [{ selector: 'cf-page', template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width,
|
|
119
|
+
args: [{ selector: 'cf-page', template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div id=\"header\" class=\"ion-no-border\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n <div id=\"sticky-buttons\" *ngIf=\"inputStickyButtonOn\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media (min-width: 768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{display:flex;flex-direction:column;width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup .content>*{max-width:100%}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--page-background-color)}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 358px)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{width:100%;max-width:var(--cf-page-mobile-max-width, 358px);padding-top:12px}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content.vertical-buttons{flex-direction:column;align-items:center}}@media (min-width: 768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"] }]
|
|
120
120
|
}], propDecorators: { centerH: [{
|
|
121
121
|
type: Input
|
|
122
122
|
}], centerV: [{
|
|
@@ -425,11 +425,11 @@ class AlertComponent {
|
|
|
425
425
|
alert.present();
|
|
426
426
|
}
|
|
427
427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AlertComponent, deps: [{ token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AlertComponent, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] });
|
|
428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AlertComponent, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{max-width:280px;padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper{max-width:420px}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0;min-height:24px}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] });
|
|
429
429
|
}
|
|
430
430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
431
431
|
type: Component,
|
|
432
|
-
args: [{ selector: 'cf-alert', template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] }]
|
|
432
|
+
args: [{ selector: 'cf-alert', template: "", styles: ["::ng-deep .care-first-alert .alert-wrapper{max-width:280px;padding:1.6rem;border-radius:1.6rem;background-color:var(--cf-app-background-light)}::ng-deep .care-first-alert .alert-wrapper>*{text-align:center;padding:0}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-weight:900;font-size:1.8rem;color:var(--cf-app-text-color-default)}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.4rem;margin-top:1.2rem;color:var(--cf-app-text-color-default)}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper{max-width:420px}::ng-deep .care-first-alert .alert-wrapper .alert-title{font-size:2.8rem}::ng-deep .care-first-alert .alert-wrapper .alert-message{font-size:1.8rem}}::ng-deep .care-first-alert .alert-wrapper .alert-button-group{margin-top:1.6rem;display:flex;justify-content:center;gap:4rem}@media (min-width: 768px){::ng-deep .care-first-alert .alert-wrapper .alert-button-group{gap:2rem}}::ng-deep .care-first-alert .alert-wrapper button.alert-button{font-size:1.6rem;padding:.6rem 2rem;margin:0;min-height:24px}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-cancel{color:var(--cf-app-system-color-error)}::ng-deep .care-first-alert .alert-wrapper button.alert-button.alert-button-confirm{border-radius:.6rem;background-color:var(--cf-app-color-primary);color:var(--cf-app-text-color-light)}\n"] }]
|
|
433
433
|
}], ctorParameters: () => [{ type: i1.AlertController }], propDecorators: { data: [{
|
|
434
434
|
type: Input
|
|
435
435
|
}], alertEvent: [{
|
|
@@ -1029,11 +1029,11 @@ class VerificationCodeComponent {
|
|
|
1029
1029
|
this.statusSub$?.unsubscribe();
|
|
1030
1030
|
}
|
|
1031
1031
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1032
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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)}.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-textarea,ion-searchbar" }, { 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: "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"] }] });
|
|
1032
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", 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: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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-textarea,ion-searchbar" }, { 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: "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"] }] });
|
|
1033
1033
|
}
|
|
1034
1034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
1036
|
-
args: [{ selector: 'cf-verification-code', template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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)}.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"] }]
|
|
1036
|
+
args: [{ selector: 'cf-verification-code', template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"{ visibility: status.value === 'processing' ? 'hidden' : true }\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n <ng-container *ngIf=\"status.value !== 'disabled'\">\n <ion-col *ngIf=\"validationCodeError && !commsInputCountExceeded\" size=\"auto\">\n <p\n class=\"body-small error ion-text-center\"\n *ngFor=\"let string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']\"\n >{{ string }}</p\n >\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n <ion-col *ngIf=\"commsInputCountExceeded\" 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 <ion-col *ngIf=\"status.value === 'initial'\">\n <p *ngFor=\"let string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']\" class=\"body-small good ion-text-center\">{{\n string\n }}</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n </ng-container>\n <ion-col\n *ngIf=\"\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n \">\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\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 <ion-col size=\"auto\">\n <ng-container *ngIf=\"!loading && status.value !== 'disabled'\">\n <cf-spacer default=\"16\"></cf-spacer>\n <button *ngIf=\"commsSentCount < 3\" (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n <ng-container *ngIf=\"validationCodeError\">\n <p class=\"body-small ion-text-center\" *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-center\"\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 ion-text-center\"\n *ngFor=\"\n let string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance']\n \"\n >{{ string }}</p\n >\n </ng-container>\n </ng-container>\n <cf-spacer *ngIf=\"status.value === 'disabled'\" default=\"32\"></cf-spacer>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\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{min-height:124px;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"] }]
|
|
1037
1037
|
}], propDecorators: { valueToVerify: [{
|
|
1038
1038
|
type: Input
|
|
1039
1039
|
}], status: [{
|