@carefirst/library 7.1.1 → 7.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, Directive, Component, EventEmitter, Output, ViewChild, model, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
4
|
+
import { Input, Directive, Component, EventEmitter, Output, ViewChild, input, model, output, inject, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
5
5
|
import * as i1 from '@ionic/angular';
|
|
6
|
-
import { IonicModule } from '@ionic/angular';
|
|
6
|
+
import { Platform, IonicModule } from '@ionic/angular';
|
|
7
7
|
import * as i3 from '@angular/forms';
|
|
8
8
|
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
9
9
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
@@ -71,11 +71,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
71
71
|
* ===== */
|
|
72
72
|
let SpinnerComponent$1 = class SpinnerComponent {
|
|
73
73
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: SpinnerComponent, isStandalone: false, selector: "button-loader-directive", ngImport: i0, template: '<div class="loading-spinner"></div>', isInline: true, styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-grey-outline);border-top-color:var(--cf-app-color-
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: SpinnerComponent, isStandalone: false, selector: "button-loader-directive", ngImport: i0, template: '<div class="loading-spinner"></div>', isInline: true, styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-grey-outline);border-top-color:var(--cf-app-color-primary);animation:spinner 1s linear infinite}\n"] });
|
|
75
75
|
};
|
|
76
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SpinnerComponent$1, decorators: [{
|
|
77
77
|
type: Component,
|
|
78
|
-
args: [{ selector: 'button-loader-directive', standalone: false, template: '<div class="loading-spinner"></div>', styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-grey-outline);border-top-color:var(--cf-app-color-
|
|
78
|
+
args: [{ selector: 'button-loader-directive', standalone: false, template: '<div class="loading-spinner"></div>', styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-grey-outline);border-top-color:var(--cf-app-color-primary);animation:spinner 1s linear infinite}\n"] }]
|
|
79
79
|
}] });
|
|
80
80
|
|
|
81
81
|
/**
|
|
@@ -428,10 +428,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
428
428
|
* type="'primary' | 'secondary' | 'tertiary'"
|
|
429
429
|
* fontSize="'small' | 'large'"
|
|
430
430
|
* %customColor="var() | hex"%
|
|
431
|
+
* %iconStart=''%
|
|
432
|
+
* %iconEnd=''%
|
|
433
|
+
* %emojiStart=''%
|
|
434
|
+
* %emojiEnd=''%
|
|
431
435
|
* %disabled%
|
|
432
436
|
* %alert%
|
|
433
437
|
* %action%
|
|
434
438
|
* %snug%
|
|
439
|
+
* %accent%
|
|
440
|
+
* %white%
|
|
441
|
+
* %loading%
|
|
442
|
+
* %loadingText='TEXT'%
|
|
435
443
|
* >TEXT</cf-btn>
|
|
436
444
|
*/
|
|
437
445
|
class ButtonComponent {
|
|
@@ -524,13 +532,13 @@ class ButtonComponent {
|
|
|
524
532
|
return '';
|
|
525
533
|
}
|
|
526
534
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ButtonComponent, isStandalone: false, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", white: "white", snug: "snug", accent: "accent", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", emojiStart: "emojiStart", emojiEnd: "emojiEnd", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: EmojiComponent, selector: "cf-emoji", inputs: ["emoji", "height", "heightMobile", "heightDesktop"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
535
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ButtonComponent, isStandalone: false, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", white: "white", snug: "snug", accent: "accent", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", emojiStart: "emojiStart", emojiEnd: "emojiEnd", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" primaryColor [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: EmojiComponent, selector: "cf-emoji", inputs: ["emoji", "height", "heightMobile", "heightDesktop"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
528
536
|
}
|
|
529
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
530
538
|
type: Component,
|
|
531
539
|
args: [{ selector: 'cf-btn', standalone: false, host: {
|
|
532
540
|
'[style.pointer-events]': 'parentEvents',
|
|
533
|
-
}, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
|
|
541
|
+
}, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" primaryColor [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
|
|
534
542
|
}], propDecorators: { type: [{
|
|
535
543
|
type: Input
|
|
536
544
|
}], disabled: [{
|
|
@@ -1010,11 +1018,11 @@ class FormInputComponent {
|
|
|
1010
1018
|
this.inputType = this.inputType === 'password' ? 'text' : 'password';
|
|
1011
1019
|
}
|
|
1012
1020
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputComponent, isStandalone: false, selector: "cf-form-input", inputs: { label: "label", min: "min", max: "max", labelPlacement: "labelPlacement", placeholder: "placeholder", inputmode: "inputmode", autoCapitalize: "autoCapitalize", type: "type", noClearButton: "noClearButton", control: "control", textCenter: "textCenter", maxLength: "maxLength", greyBackground: "greyBackground", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @if (normalInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [formControl]=\"control\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @if (formControlInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1021
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputComponent, isStandalone: false, selector: "cf-form-input", inputs: { label: "label", min: "min", max: "max", labelPlacement: "labelPlacement", placeholder: "placeholder", inputmode: "inputmode", autoCapitalize: "autoCapitalize", type: "type", noClearButton: "noClearButton", control: "control", textCenter: "textCenter", maxLength: "maxLength", greyBackground: "greyBackground", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @if (normalInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [formControl]=\"control\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @if (formControlInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-input.text-center{text-align:center}ion-input.grey-background{--background: var(--cf-app-system-color-grey-outline)}\n"], dependencies: [{ 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: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1014
1022
|
}
|
|
1015
1023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1016
1024
|
type: Component,
|
|
1017
|
-
args: [{ selector: 'cf-form-input', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @if (normalInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [formControl]=\"control\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @if (formControlInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1025
|
+
args: [{ selector: 'cf-form-input', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @if (normalInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"type === 'password' ? false : !inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [inputmode]=\"localInputMode\"\n [formControl]=\"control\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxLength || null\"\n [type]=\"inputType\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @if (formControlInput.value && type === 'password') {\n <cf-icon\n slot=\"end\"\n style=\"cursor: pointer\"\n [icon]=\"showPassword ? 'hide-password' : 'show-password'\"\n [height]=\"24\"\n (click)=\"togglePasswordShow()\"></cf-icon>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-input.text-center{text-align:center}ion-input.grey-background{--background: var(--cf-app-system-color-grey-outline)}\n"] }]
|
|
1018
1026
|
}], propDecorators: { label: [{
|
|
1019
1027
|
type: Input
|
|
1020
1028
|
}], min: [{
|
|
@@ -1417,11 +1425,11 @@ class FormInputCurrencyComponent {
|
|
|
1417
1425
|
}
|
|
1418
1426
|
}
|
|
1419
1427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputCurrencyComponent, isStandalone: false, selector: "cf-form-input-currency", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", noClearButton: "noClearButton", control: "control", customErrorMessage: "customErrorMessage", currency: "currency", showCurrency: "showCurrency", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "currencyTextInput", first: true, predicate: ["currencyTextInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n (ionInput)=\"checkValue($event)\"\n [value]=\"value\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"checkValue($event)\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputCurrencyComponent, isStandalone: false, selector: "cf-form-input-currency", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", noClearButton: "noClearButton", control: "control", customErrorMessage: "customErrorMessage", currency: "currency", showCurrency: "showCurrency", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "currencyTextInput", first: true, predicate: ["currencyTextInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n (ionInput)=\"checkValue($event)\"\n [value]=\"value\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"checkValue($event)\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: [""], dependencies: [{ 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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1421
1429
|
}
|
|
1422
1430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputCurrencyComponent, decorators: [{
|
|
1423
1431
|
type: Component,
|
|
1424
|
-
args: [{ selector: 'cf-form-input-currency', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n (ionInput)=\"checkValue($event)\"\n [value]=\"value\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"checkValue($event)\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n"
|
|
1432
|
+
args: [{ selector: 'cf-form-input-currency', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n (ionInput)=\"checkValue($event)\"\n [value]=\"value\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #currencyTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"checkValue($event)\">\n @if (showCurrency) {\n <ion-label slot=\"start\">{{ currency }}</ion-label>\n }\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n" }]
|
|
1425
1433
|
}], propDecorators: { currencyTextInput: [{
|
|
1426
1434
|
type: ViewChild,
|
|
1427
1435
|
args: ['currencyTextInput']
|
|
@@ -1485,11 +1493,11 @@ class FormInputSearchComponent {
|
|
|
1485
1493
|
validateStringValue(changes, 'autoCapitalize', inputsC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1486
1494
|
}
|
|
1487
1495
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1488
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputSearchComponent, isStandalone: false, selector: "cf-form-input-search", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", autoCapitalize: "autoCapitalize", clearButton: "clearButton", control: "control", textCenter: "textCenter", customErrorMessage: "customErrorMessage", debounce: "debounce", value: "value" }, outputs: { searchButtonTrigger: "searchButtonTrigger", valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputSearchComponent, isStandalone: false, selector: "cf-form-input-search", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", autoCapitalize: "autoCapitalize", clearButton: "clearButton", control: "control", textCenter: "textCenter", customErrorMessage: "customErrorMessage", debounce: "debounce", value: "value" }, outputs: { searchButtonTrigger: "searchButtonTrigger", valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-input.text-center{text-align:center}\n"], dependencies: [{ 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: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1489
1497
|
}
|
|
1490
1498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSearchComponent, decorators: [{
|
|
1491
1499
|
type: Component,
|
|
1492
|
-
args: [{ selector: 'cf-form-input-search', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1500
|
+
args: [{ selector: 'cf-form-input-search', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #normalInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #formControlInput\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"inputClear\"\n [autocapitalize]=\"autoCapitalize\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [debounce]=\"debounce\">\n <cf-icon slot=\"end\" style=\"cursor: pointer\" icon=\"search\" [height]=\"24\" (click)=\"searchButtonTrigger.emit()\"></cf-icon>\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-input.text-center{text-align:center}\n"] }]
|
|
1493
1501
|
}], propDecorators: { label: [{
|
|
1494
1502
|
type: Input
|
|
1495
1503
|
}], labelPlacement: [{
|
|
@@ -1564,11 +1572,11 @@ class FormInputSelectComponent {
|
|
|
1564
1572
|
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) ?? 'floating';
|
|
1565
1573
|
}
|
|
1566
1574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1567
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputSelectComponent, isStandalone: false, selector: "cf-form-input-select", inputs: { label: "label", options: "options", labelPlacement: "labelPlacement", placeholder: "placeholder", control: "control", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputSelectComponent, isStandalone: false, selector: "cf-form-input-select", inputs: { label: "label", options: "options", labelPlacement: "labelPlacement", placeholder: "placeholder", control: "control", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-color-white)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1568
1576
|
}
|
|
1569
1577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSelectComponent, decorators: [{
|
|
1570
1578
|
type: Component,
|
|
1571
|
-
args: [{ selector: 'cf-form-input-select', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1579
|
+
args: [{ selector: 'cf-form-input-select', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-color-white)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}\n"] }]
|
|
1572
1580
|
}], propDecorators: { label: [{
|
|
1573
1581
|
type: Input
|
|
1574
1582
|
}], options: [{
|
|
@@ -1671,11 +1679,11 @@ class FormInputStringDateComponent {
|
|
|
1671
1679
|
}
|
|
1672
1680
|
}
|
|
1673
1681
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputStringDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputStringDateComponent, isStandalone: false, selector: "cf-form-input-string-date", inputs: { label: "label", minDate: "minDate", maxDate: "maxDate", labelPlacement: "labelPlacement", placeholder: "placeholder", noClearButton: "noClearButton", control: "control", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dateTextInput", first: true, predicate: ["dateTextInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\"\n [value]=\"value\"></ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\">\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1682
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputStringDateComponent, isStandalone: false, selector: "cf-form-input-string-date", inputs: { label: "label", minDate: "minDate", maxDate: "maxDate", labelPlacement: "labelPlacement", placeholder: "placeholder", noClearButton: "noClearButton", control: "control", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dateTextInput", first: true, predicate: ["dateTextInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\"\n [value]=\"value\"></ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\">\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: [""], dependencies: [{ 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: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1675
1683
|
}
|
|
1676
1684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputStringDateComponent, decorators: [{
|
|
1677
1685
|
type: Component,
|
|
1678
|
-
args: [{ selector: 'cf-form-input-string-date', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\"\n [value]=\"value\"></ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\">\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n"
|
|
1686
|
+
args: [{ selector: 'cf-form-input-string-date', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\"\n [value]=\"value\"></ion-input>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-input\n #dateTextInput\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n [clearInput]=\"!inputClear\"\n mode=\"md\"\n [formControl]=\"control\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n (ionInput)=\"formatDate($event)\">\n </ion-input>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n" }]
|
|
1679
1687
|
}], propDecorators: { dateTextInput: [{
|
|
1680
1688
|
type: ViewChild,
|
|
1681
1689
|
args: ['dateTextInput']
|
|
@@ -1743,11 +1751,11 @@ class FormInputTextAreaComponent {
|
|
|
1743
1751
|
validateStringValue(changes, 'autoCapitalize', inputTextAreaC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1744
1752
|
}
|
|
1745
1753
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1746
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputTextAreaComponent, isStandalone: false, selector: "cf-form-input-text-area", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", autoCapitalize: "autoCapitalize", control: "control", textCenter: "textCenter", minHeight: "minHeight", maxHeight: "maxHeight", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"></ion-textarea>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormInputTextAreaComponent, isStandalone: false, selector: "cf-form-input-text-area", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", autoCapitalize: "autoCapitalize", control: "control", textCenter: "textCenter", minHeight: "minHeight", maxHeight: "maxHeight", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"></ion-textarea>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-textarea.text-center{text-align:center}\n"], dependencies: [{ kind: "component", type: i1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1747
1755
|
}
|
|
1748
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputTextAreaComponent, decorators: [{
|
|
1749
1757
|
type: Component,
|
|
1750
|
-
args: [{ selector: 'cf-form-input-text-area', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"></ion-textarea>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["
|
|
1758
|
+
args: [{ selector: 'cf-form-input-text-area', standalone: false, template: "<!-- ngModel -->\n@if (!control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\"></ion-textarea>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter, error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-textarea.text-center{text-align:center}\n"] }]
|
|
1751
1759
|
}], propDecorators: { label: [{
|
|
1752
1760
|
type: Input
|
|
1753
1761
|
}], labelPlacement: [{
|
|
@@ -2075,13 +2083,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
2075
2083
|
}] } });
|
|
2076
2084
|
|
|
2077
2085
|
class VerificationCodeComponent {
|
|
2078
|
-
valueToVerify;
|
|
2079
|
-
status;
|
|
2080
|
-
|
|
2081
|
-
removeResendText = false;
|
|
2086
|
+
valueToVerify = input.required(...(ngDevMode ? [{ debugName: "valueToVerify" }] : []));
|
|
2087
|
+
status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
2088
|
+
supportContact = input.required(...(ngDevMode ? [{ debugName: "supportContact" }] : []));
|
|
2082
2089
|
commsSentCount = model(0, ...(ngDevMode ? [{ debugName: "commsSentCount" }] : []));
|
|
2083
|
-
outcome =
|
|
2084
|
-
resendClickEvent =
|
|
2090
|
+
outcome = output();
|
|
2091
|
+
resendClickEvent = output();
|
|
2085
2092
|
myInput1;
|
|
2086
2093
|
myInput2;
|
|
2087
2094
|
myInput3;
|
|
@@ -2090,13 +2097,17 @@ class VerificationCodeComponent {
|
|
|
2090
2097
|
//--- HTML variables
|
|
2091
2098
|
validationCodeError = false;
|
|
2092
2099
|
verificationCodeInputArr = [null, null, null, null, null];
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
commsInputCountExceeded = false;
|
|
2100
|
+
codeInputCount = 0;
|
|
2101
|
+
codeInputCountExceeded = false;
|
|
2096
2102
|
validationCode;
|
|
2103
|
+
platform = 'mobile';
|
|
2097
2104
|
statusSub$;
|
|
2105
|
+
get codeInputDisabled() {
|
|
2106
|
+
return this.codeInputCountExceeded || this.status().value === 'resend' || this.status().value === 'disabled';
|
|
2107
|
+
}
|
|
2108
|
+
devicePlatformService = inject(Platform);
|
|
2098
2109
|
/**----------------------------------------------------------------
|
|
2099
|
-
* @name
|
|
2110
|
+
* @name ionViewDidEnter
|
|
2100
2111
|
* @description Update various values on component initialization
|
|
2101
2112
|
* @returns {void}
|
|
2102
2113
|
*/
|
|
@@ -2125,17 +2136,25 @@ class VerificationCodeComponent {
|
|
|
2125
2136
|
});
|
|
2126
2137
|
}
|
|
2127
2138
|
}
|
|
2139
|
+
/**----------------------------------------------------------------
|
|
2140
|
+
* @name ngOnInit
|
|
2141
|
+
* @description Initialize the component
|
|
2142
|
+
* @returns {void}
|
|
2143
|
+
*/
|
|
2144
|
+
ngOnInit() {
|
|
2145
|
+
this.platform = this.devicePlatformService.is('desktop') ? 'desktop' : 'mobile';
|
|
2146
|
+
}
|
|
2128
2147
|
/**----------------------------------------------------------------
|
|
2129
2148
|
* @name resendVerificationCode
|
|
2130
2149
|
* @description Resend a verification code
|
|
2131
2150
|
* @returns {void}
|
|
2132
2151
|
*/
|
|
2133
2152
|
resendVerificationCode() {
|
|
2134
|
-
this.
|
|
2135
|
-
this.
|
|
2153
|
+
this.codeInputCount = 0;
|
|
2154
|
+
this.codeInputCountExceeded = false;
|
|
2136
2155
|
this.validationCodeError = false;
|
|
2137
2156
|
this.commsSentCount.update((curr) => ++curr);
|
|
2138
|
-
this.status.next('initial');
|
|
2157
|
+
this.status().next('initial');
|
|
2139
2158
|
this.resendClickEvent.emit(true);
|
|
2140
2159
|
}
|
|
2141
2160
|
/**----------------------------------------------------------------
|
|
@@ -2158,8 +2177,8 @@ class VerificationCodeComponent {
|
|
|
2158
2177
|
if (this.verificationCodeInputArr.every((val) => val !== null)) {
|
|
2159
2178
|
this.validationCode = this.verificationCodeInputArr.join('');
|
|
2160
2179
|
this.outcome.emit(this.validationCode);
|
|
2161
|
-
this.
|
|
2162
|
-
this.
|
|
2180
|
+
this.codeInputCount++;
|
|
2181
|
+
this.codeInputCountExceeded = this.codeInputCount >= 3;
|
|
2163
2182
|
}
|
|
2164
2183
|
}
|
|
2165
2184
|
/**----------------------------------------------------------------
|
|
@@ -2234,26 +2253,14 @@ class VerificationCodeComponent {
|
|
|
2234
2253
|
this.statusSub$?.unsubscribe();
|
|
2235
2254
|
}
|
|
2236
2255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: { classPropertyName: "valueToVerify", publicName: "valueToVerify", isSignal:
|
|
2256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: { classPropertyName: "valueToVerify", publicName: "valueToVerify", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, supportContact: { classPropertyName: "supportContact", publicName: "supportContact", isSignal: true, isRequired: true, transformFunction: null }, commsSentCount: { classPropertyName: "commsSentCount", publicName: "commsSentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commsSentCount: "commsSentCountChange", outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (status().value === 'processing') {\n <cf-spinner [size]=\"40\"></cf-spinner>\n} @else {\n @if (codeInputCountExceeded) {\n <p class=\"cf-form-text-small red ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else if (validationCodeError) {\n <p class=\"cf-form-text-small red ion-text-center\">Invalid Code - Please Retry</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else if (status().value === 'initial') {\n <p class=\"cf-form-text-small green ion-text-center\">Code sent, Please check your inbox</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else {\n <cf-spacer default=\"32\"></cf-spacer>\n }\n\n <!-- Input boxes for verification code 5 numeric digits -->\n <div id=\"single-container\" [class.error]=\"validationCodeError && !codeInputCountExceeded\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n class=\"single-digit-input ion-text-center\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n class=\"single-digit-input ion-text-center\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n\n @if (status().value !== 'disabled' && commsSentCount() >= 3 && status().value !== 'resend') {\n <cf-spacer default=\"16\"></cf-spacer>\n <p class=\"cf-form-text-small ion-text-center\" style=\"text-wrap: balance\"\n >Still struggling with your code? Please contact support at <span style=\"white-space: nowrap\">{{ supportContact() }}</span> for assistance</p\n >\n }\n}\n\n@if (commsSentCount() < 3 || status().value === 'resend') {\n <cf-spacer default=\"24\"></cf-spacer>\n <cf-btn\n type=\"secondary\"\n fontSize=\"large\"\n [loading]=\"status().value === 'resend'\"\n [loadingText]=\"'Sending verification Code'\"\n [disabled]=\"status().value === 'processing' || status().value === 'disabled'\"\n (click)=\"resendVerificationCode()\"\n >Resend verification Code</cf-btn\n >\n}\n", styles: [":host{display:block;width:100%;max-width:420px;margin:auto}cf-spinner{display:flex;justify-content:center;align-items:center;height:92px}#single-container{display:flex;width:100%;justify-content:space-between}#single-container .single-digit-input{--verification-code-font-weight: 900;font-weight:var(--verification-code-font-weight)!important;height:60px;width:60px;--border-color: transparent;--border-radius: 12px;--background: var(--cf-app-system-color-grey-background);--color: var(--cf-app-text-color-default);--highlight-color-focused: var(--cf-app-color-accent);--placeholder-opacity: 1;--placeholder-font-weight: var(--verification-code-font-weight);--placeholder-color: var(--cf-app-text-color-default)}#single-container.error .single-digit-input{--border-color: var(--cf-app-text-color-dark-red)}\n"], dependencies: [{ 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: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "cf-btn", inputs: ["type", "disabled", "alert", "action", "white", "snug", "accent", "fontSize", "iconStart", "iconEnd", "emojiStart", "emojiEnd", "loading", "loadingText", "customColor"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
2238
2257
|
}
|
|
2239
2258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
2240
2259
|
type: Component,
|
|
2241
|
-
args: [{ selector: 'cf-verification-code', standalone: false, template: "
|
|
2242
|
-
}], propDecorators: { valueToVerify: [{
|
|
2243
|
-
type: Input
|
|
2244
|
-
}], status: [{
|
|
2245
|
-
type: Input
|
|
2246
|
-
}], userFeedbackMessages: [{
|
|
2247
|
-
type: Input
|
|
2248
|
-
}], removeResendText: [{
|
|
2249
|
-
type: Input
|
|
2250
|
-
}], commsSentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commsSentCount", required: false }] }, { type: i0.Output, args: ["commsSentCountChange"] }], outcome: [{
|
|
2251
|
-
type: Output
|
|
2252
|
-
}], resendClickEvent: [{
|
|
2253
|
-
type: Output
|
|
2254
|
-
}], myInput1: [{
|
|
2260
|
+
args: [{ selector: 'cf-verification-code', standalone: false, template: "@if (status().value === 'processing') {\n <cf-spinner [size]=\"40\"></cf-spinner>\n} @else {\n @if (codeInputCountExceeded) {\n <p class=\"cf-form-text-small red ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else if (validationCodeError) {\n <p class=\"cf-form-text-small red ion-text-center\">Invalid Code - Please Retry</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else if (status().value === 'initial') {\n <p class=\"cf-form-text-small green ion-text-center\">Code sent, Please check your inbox</p>\n <cf-spacer default=\"16\"></cf-spacer>\n } @else {\n <cf-spacer default=\"32\"></cf-spacer>\n }\n\n <!-- Input boxes for verification code 5 numeric digits -->\n <div id=\"single-container\" [class.error]=\"validationCodeError && !codeInputCountExceeded\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n class=\"single-digit-input ion-text-center\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n [ngClass]=\"platform === 'mobile' ? ['text-header-3'] : ['text-header-4']\"\n class=\"single-digit-input ion-text-center\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n placeholder=\"_\"\n [disabled]=\"codeInputDisabled\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n\n @if (status().value !== 'disabled' && commsSentCount() >= 3 && status().value !== 'resend') {\n <cf-spacer default=\"16\"></cf-spacer>\n <p class=\"cf-form-text-small ion-text-center\" style=\"text-wrap: balance\"\n >Still struggling with your code? Please contact support at <span style=\"white-space: nowrap\">{{ supportContact() }}</span> for assistance</p\n >\n }\n}\n\n@if (commsSentCount() < 3 || status().value === 'resend') {\n <cf-spacer default=\"24\"></cf-spacer>\n <cf-btn\n type=\"secondary\"\n fontSize=\"large\"\n [loading]=\"status().value === 'resend'\"\n [loadingText]=\"'Sending verification Code'\"\n [disabled]=\"status().value === 'processing' || status().value === 'disabled'\"\n (click)=\"resendVerificationCode()\"\n >Resend verification Code</cf-btn\n >\n}\n", styles: [":host{display:block;width:100%;max-width:420px;margin:auto}cf-spinner{display:flex;justify-content:center;align-items:center;height:92px}#single-container{display:flex;width:100%;justify-content:space-between}#single-container .single-digit-input{--verification-code-font-weight: 900;font-weight:var(--verification-code-font-weight)!important;height:60px;width:60px;--border-color: transparent;--border-radius: 12px;--background: var(--cf-app-system-color-grey-background);--color: var(--cf-app-text-color-default);--highlight-color-focused: var(--cf-app-color-accent);--placeholder-opacity: 1;--placeholder-font-weight: var(--verification-code-font-weight);--placeholder-color: var(--cf-app-text-color-default)}#single-container.error .single-digit-input{--border-color: var(--cf-app-text-color-dark-red)}\n"] }]
|
|
2261
|
+
}], propDecorators: { valueToVerify: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueToVerify", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], supportContact: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportContact", required: true }] }], commsSentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commsSentCount", required: false }] }, { type: i0.Output, args: ["commsSentCountChange"] }], outcome: [{ type: i0.Output, args: ["outcome"] }], resendClickEvent: [{ type: i0.Output, args: ["resendClickEvent"] }], myInput1: [{
|
|
2255
2262
|
type: ViewChild,
|
|
2256
|
-
args: [
|
|
2263
|
+
args: ['input1']
|
|
2257
2264
|
}], myInput2: [{
|
|
2258
2265
|
type: ViewChild,
|
|
2259
2266
|
args: ['input2']
|
|
@@ -2398,7 +2405,7 @@ var input_interface = /*#__PURE__*/Object.freeze({
|
|
|
2398
2405
|
* @description All available statuses for the verification code component
|
|
2399
2406
|
*/
|
|
2400
2407
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2401
|
-
const cfCodeInputVerificationStatusesC = ['initial', 'invalid', '
|
|
2408
|
+
const cfCodeInputVerificationStatusesC = ['initial', 'invalid', 'resend', 'processing', 'disabled'];
|
|
2402
2409
|
|
|
2403
2410
|
var verificationCode_interface = /*#__PURE__*/Object.freeze({
|
|
2404
2411
|
__proto__: null
|