@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.
@@ -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, 1296px)}}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, 1296px)}}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, 1296px)}}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"] }] });
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, 1296px)}}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, 1296px)}}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, 1296px)}}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"] }]
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, 1296px)}}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, 1296px)}}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, 1296px)}}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"] }] });
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, 1296px)}}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, 1296px)}}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, 1296px)}}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"] }]
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: [{