@carefirst/library 5.2.3 → 5.2.4
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.
|
@@ -595,7 +595,7 @@ class CFPFormValidators {
|
|
|
595
595
|
static asEmail(canBeEmpty) {
|
|
596
596
|
return (control) => {
|
|
597
597
|
let setErrors = null;
|
|
598
|
-
const emailRegEx = new RegExp('^[\\w-.]+@[\\w-]
|
|
598
|
+
const emailRegEx = new RegExp('^[\\w-.]+@[\\w-]+(\\.[\\w]{2,})+$');
|
|
599
599
|
//--- Check if email can be empty
|
|
600
600
|
if (canBeEmpty && (control.value === null || control.value === '')) {
|
|
601
601
|
return null;
|
|
@@ -916,7 +916,7 @@ class FormInputComponent {
|
|
|
916
916
|
this.inputType = this.inputType === 'password' ? 'text' : 'password';
|
|
917
917
|
}
|
|
918
918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.text-center{text-align:center}ion-input.grey-background{--background: var(--cf-app-system-color-outline)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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-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"] }] });
|
|
919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.text-center{text-align:center}ion-input.grey-background{--background: var(--cf-app-system-color-outline)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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"] }] });
|
|
920
920
|
}
|
|
921
921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
922
922
|
type: Component,
|
|
@@ -1154,7 +1154,7 @@ class CalendarComponent {
|
|
|
1154
1154
|
this.value.emit(dayjs(value).format('YYYY-MM-DD' + (this.inputTime ? ' HH:mm' : '')));
|
|
1155
1155
|
}
|
|
1156
1156
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: CalendarComponent, isStandalone: false, selector: "cf-calendar", inputs: { displayTime: "displayTime", color: "color", min: "min", max: "max" }, outputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-text-color-default)}ion-datetime::part(calendar-day){font-size:1.6rem}ion-datetime::part(month-year-button){font-size:1.8rem;font-weight:900;color:var(--cf-app-text-color-default)}ion-datetime.accent::part(today){border:1px solid var(--cf-app-color-accent);color:var(--cf-app-color-accent)}ion-datetime.accent::part(active){background-color:var(--cf-app-color-accent);color:var(--cf-app-text-color-light)}ion-datetime.success::part(today){border:1px solid var(--cf-app-system-color-success);color:var(--cf-app-text-color-default)}ion-datetime.success::part(active){background-color:var(--cf-app-system-color-success);color:var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }] });
|
|
1157
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: CalendarComponent, isStandalone: false, selector: "cf-calendar", inputs: { displayTime: "displayTime", color: "color", min: "min", max: "max" }, outputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-text-color-default)}ion-datetime::part(calendar-day){font-size:1.6rem}ion-datetime::part(month-year-button){font-size:1.8rem;font-weight:900;color:var(--cf-app-text-color-default)}ion-datetime.accent::part(today){border:1px solid var(--cf-app-color-accent);color:var(--cf-app-color-accent)}ion-datetime.accent::part(active){background-color:var(--cf-app-color-accent);color:var(--cf-app-text-color-light)}ion-datetime.success::part(today){border:1px solid var(--cf-app-system-color-success);color:var(--cf-app-text-color-default)}ion-datetime.success::part(active){background-color:var(--cf-app-system-color-success);color:var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }] });
|
|
1158
1158
|
}
|
|
1159
1159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1160
1160
|
type: Component,
|
|
@@ -1306,7 +1306,7 @@ class FormInputCurrencyComponent {
|
|
|
1306
1306
|
}
|
|
1307
1307
|
}
|
|
1308
1308
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: 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"] }] });
|
|
1309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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: "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"] }] });
|
|
1310
1310
|
}
|
|
1311
1311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputCurrencyComponent, decorators: [{
|
|
1312
1312
|
type: Component,
|
|
@@ -1374,7 +1374,7 @@ class FormInputSearchComponent {
|
|
|
1374
1374
|
validateStringValue(changes, 'autoCapitalize', inputsC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1375
1375
|
}
|
|
1376
1376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.text-center{text-align:center}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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-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"] }] });
|
|
1377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.text-center{text-align:center}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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"] }] });
|
|
1378
1378
|
}
|
|
1379
1379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputSearchComponent, decorators: [{
|
|
1380
1380
|
type: Component,
|
|
@@ -1453,7 +1453,7 @@ class FormInputSelectComponent {
|
|
|
1453
1453
|
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) ?? 'floating';
|
|
1454
1454
|
}
|
|
1455
1455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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) {\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) {\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: ["ion-select{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::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}::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}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "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"] }] });
|
|
1456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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) {\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) {\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: ["ion-select{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::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}::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}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\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"] }] });
|
|
1457
1457
|
}
|
|
1458
1458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputSelectComponent, decorators: [{
|
|
1459
1459
|
type: Component,
|
|
@@ -1560,7 +1560,7 @@ class FormInputStringDateComponent {
|
|
|
1560
1560
|
}
|
|
1561
1561
|
}
|
|
1562
1562
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputStringDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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-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"] }] });
|
|
1563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-input.error .label-text{color:var(--cf-app-system-color-error)}ion-input{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-input.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1564
1564
|
}
|
|
1565
1565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputStringDateComponent, decorators: [{
|
|
1566
1566
|
type: Component,
|
|
@@ -1632,7 +1632,7 @@ class FormInputTextAreaComponent {
|
|
|
1632
1632
|
validateStringValue(changes, 'autoCapitalize', inputTextAreaC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1633
1633
|
}
|
|
1634
1634
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1635
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-textarea.error .label-text{color:var(--cf-app-system-color-error)}ion-textarea{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-textarea.text-center{text-align:center}ion-textarea.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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-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"] }] });
|
|
1635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: ["::ng-deep ion-textarea.error .label-text{color:var(--cf-app-system-color-error)}ion-textarea{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;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}ion-textarea.text-center{text-align:center}ion-textarea.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}\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"] }] });
|
|
1636
1636
|
}
|
|
1637
1637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormInputTextAreaComponent, decorators: [{
|
|
1638
1638
|
type: Component,
|
|
@@ -2115,7 +2115,7 @@ class VerificationCodeComponent {
|
|
|
2115
2115
|
this.statusSub$?.unsubscribe();
|
|
2116
2116
|
}
|
|
2117
2117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages", removeResendText: "removeResendText" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n @if (!loading && status.value !== 'disabled') {\n <cf-spacer default=\"16\"></cf-spacer>\n @if (commsSentCount < 3) {\n @if (!removeResendText) {\n <button (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n @if (validationCodeError) {\n @for (string of userFeedbackMessages?.error?.resend || ['Resend Code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n @if (!validationCodeError) {\n @for (string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n </button>\n }\n }\n @if (commsSentCount >= 3) {\n @for (\n string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance'];\n track string\n ) {\n <p class=\"body-small ion-text-center\">{{ string }}</p>\n }\n }\n }\n @if (status.value === 'disabled') {\n <cf-spacer default=\"32\"></cf-spacer>\n }\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spinner style=\"position: absolute\" [size]=\"40\" [ngClass]=\"{ 'block-hidden': status.value !== 'processing' }\"></cf-spinner>\n</div>\n", styles: ["#verification-container{min-height:124px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}#verification-grid{width:100%;display:flex;flex-direction:column}.single-container{display:flex;justify-content:space-between}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent);color:var(--cf-app-text-color-default)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}p.good{color:var(--cf-app-system-color-success)}\n"], dependencies: [{ kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
2118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: VerificationCodeComponent, isStandalone: false, selector: "cf-verification-code", inputs: { valueToVerify: "valueToVerify", status: "status", userFeedbackMessages: "userFeedbackMessages", removeResendText: "removeResendText" }, outputs: { outcome: "outcome", resendClickEvent: "resendClickEvent" }, viewQueries: [{ propertyName: "myInput1", first: true, predicate: ["input1"], descendants: true }, { propertyName: "myInput2", first: true, predicate: ["input2"], descendants: true }, { propertyName: "myInput3", first: true, predicate: ["input3"], descendants: true }, { propertyName: "myInput4", first: true, predicate: ["input4"], descendants: true }, { propertyName: "myInput5", first: true, predicate: ["input5"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- ---<> rethink if statement logic -->\n<div id=\"verification-container\">\n <ion-grid id=\"verification-grid\" [ngStyle]=\"status.value === 'processing' ? { visibility: 'hidden' } : {}\">\n <!-- Input boxes for verification code 5 numeric digits -->\n <ion-row class=\"ion-justify-content-center\">\n @if (status.value !== 'disabled') {\n @if (validationCodeError && !commsInputCountExceeded) {\n <ion-col size=\"auto\">\n @for (string of userFeedbackMessages?.error?.errorMessage || ['Invalid Code - Please Retry']; track string) {\n <p class=\"body-small error ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (commsInputCountExceeded) {\n <ion-col size=\"auto\">\n <p class=\"body-small error ion-text-center\">Invalid Code - Max attempts exceeded</p>\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n @if (status.value === 'initial') {\n <ion-col>\n @for (string of userFeedbackMessages?.initial || ['Code sent, Please check your inbox']; track string) {\n <p class=\"body-small good ion-text-center\">{{ string }}</p>\n }\n <cf-spacer default=\"16\"></cf-spacer>\n </ion-col>\n }\n }\n @if (\n (!validationCodeError && status.value === 'disabled') || status.value === 'disabled' || (status.value === 'invalid' && !validationCodeError)\n ) {\n <ion-col>\n <cf-spacer default=\"32\"></cf-spacer>\n </ion-col>\n }\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col>\n <div class=\"single-container\" [ngClass]=\"{ error: validationCodeError }\">\n <ion-input\n #input1\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 1)\"></ion-input>\n <ion-input\n #input2\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 2)\"></ion-input>\n <ion-input\n #input3\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 3)\"></ion-input>\n <ion-input\n #input4\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 4)\"></ion-input>\n <ion-input\n #input5\n class=\"single-digit-input ion-text-center\"\n [disabled]=\"loading || commsInputCountExceeded || status.value === 'disabled'\"\n fill=\"outline\"\n maxlength=\"1\"\n clearOnEdit=\"true\"\n inputmode=\"numeric\"\n mode=\"md\"\n (ionInput)=\"formulateAndCheckVerificationCode($event, 5)\"></ion-input>\n </div>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\">\n @if (!loading && status.value !== 'disabled') {\n <cf-spacer default=\"16\"></cf-spacer>\n @if (commsSentCount < 3) {\n @if (!removeResendText) {\n <button (click)=\"resendVerificationCode()\" style=\"background-color: transparent\">\n @if (validationCodeError) {\n @for (string of userFeedbackMessages?.error?.resend || ['Resend Code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n @if (!validationCodeError) {\n @for (string of userFeedbackMessages?.standardResend || ['Didn`t get a code? Please resend the code']; track string) {\n <p class=\"body-small ion-text-center\">\n {{ string }}\n </p>\n }\n }\n </button>\n }\n }\n @if (commsSentCount >= 3) {\n @for (\n string of userFeedbackMessages?.limitReached || ['Still struggling with your code?', 'Please contact support for assistance'];\n track string\n ) {\n <p class=\"body-small ion-text-center\">{{ string }}</p>\n }\n }\n }\n @if (status.value === 'disabled') {\n <cf-spacer default=\"32\"></cf-spacer>\n }\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"auto\"> </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spinner style=\"position: absolute\" [size]=\"40\" [ngClass]=\"{ 'block-hidden': status.value !== 'processing' }\"></cf-spinner>\n</div>\n", styles: ["#verification-container{min-height:124px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}#verification-grid{width:100%;display:flex;flex-direction:column}.single-container{display:flex;justify-content:space-between}.single-container .single-digit-input{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;height:60px;width:60px;--border-radius: 12px;--background: var(--cf-app-system-color-outline);--highlight-color-focused: var(--cf-app-color-accent);color:var(--cf-app-text-color-default)}.single-container.error .single-digit-input{--border-color: var(--cf-app-system-color-error)}.block-hidden{display:none}p.error{color:var(--cf-app-system-color-error)}p.good{color:var(--cf-app-system-color-success)}\n"], dependencies: [{ kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
2119
2119
|
}
|
|
2120
2120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
2121
2121
|
type: Component,
|